MarketMe is a website that provides services for business owners and brands to increase their exposure online and increase the number of sales and clients for their business.
This website can be accessed by this link
Here is a link to preview the website on all screens Responsive Preview
-
As a first time visitor, I want to easily see the purpose of the website, so I can know if the agency offers what I need.
-
As a first time visitor, I want to clearly understand the services provided by the website, so I can know if it suits my demands.
-
As a first time visitor, I want to see the pricing plans offered by the website, so I can see if it is within my budget.
-
As a first time visiot, I want to see that previous customers used the services, so I can see that the agency is trustworthy.
-
As a returning visitor, I want to book a demo call easily, So i can understand the service i picked meet my requirements
-
As a returning Visitor, I want to find a way to get in contact with the agency, so that I can ask additional questions and personalise a plan that best suits me.
-
As a returning visitor, I want to see testimonials and experience of other clients who used the services, so that i can see that the agency is reliable and delivers results
-
-
Positioned at the top of the page.
-
Contains logo of the company on the left side. (MarketMe)
-
Contains navigation links on the right side:
- What we do - This link redirects the user to our services section of MarketMe.
- Testimonials - This link redirects the user to our testimonials section of MartketMe
- Pricing - This link redirects the user to our pricings section of MartketMe
- Book a call - This button redirects you to Call to action section of MarketMe
-
The links have animated hover effect where the colour changes to a pink.
-
The Book a call button link changes to a darker shade of pink when you hover over it.
-
The navigation is clear and easy to understand for the user.
-
Responsiveness:
-
On tablets: All elements are centered and is split into two colums, the MarketMe on top and the navigation links right under it.
-
On small devices/mobile devices:
- navigation bar filled with the logo in the center nav links in a column.
- navigation bar filled with the logo in the center nav links in a column.
-
-
-
-
Seperated into two column sections using grid. One column is the textarea with the heading and paragraph and a call to action button. The other is the image area.
- Goal of Section
- Shows the user main purpose of the website.
- Explains the service the website offers
- Invites and Redirects user to call to action section of the website to fill out a form.
- Goal of Section
-
Responsiveness:
- On mobiles & small tablets: All elements are centered and aligned in one column. Heading and paragraph, Call to action button and image area last.
- On mobiles & small tablets: All elements are centered and aligned in one column. Heading and paragraph, Call to action button and image area last.
-
-
-
Flex-box is used for the services
-
Seperated into 3 rows, each row with 2 divs (image and service provided)
-
Flex reverse row is used for the second service to add a beautiful mirror design to the website.
- Goal of Section
- Shows the user the service provided by the website.
- Explains the service the website offers
- Goal of Section
-
Responsiveness:
- On mobile & small tablets: All elements are centered and aligned in one column.
- On mobile & small tablets: All elements are centered and aligned in one column.
-
-
-
Flex-box is used for the testimonials
-
3 testimonial boxes in one row
-
Each with an image of the client, clients experince with MartketMe, and name and title of client.
- Goal of Section
- Shows the user client testimonials to make the website more trustworthy.
- Gives marketMe credibility.
- Goal of Section
-
Responsiveness:
- On mobile & tablets: All elements are centered and aligned in one column.
- On mobile & tablets: All elements are centered and aligned in one column.
-
-
-
Flex-box is used for the Pricing cards
-
3 pricing cards in this section
-
Each with a header, price and currency, list of features that come with the different plans, and call to action button.
- Goal of Section
- Give the user a variety of prices to choose from that are reasonable to market demand.
- Give user options so user is comfortable picking what suits the budget.
- Redirects user to book a call with MarketMe.
- Goal of Section
-
Responsiveness:
- On mobile & tablets: All elements are centered and aligned in one column.
- On mobile & tablets: All elements are centered and aligned in one column.
-
-
-
Form with inputs and call to action button
-
All inputs fields are customised
-
All inputs are set so it is required to fill them
-
Book a call button changes coour layout on hover
-
It has a select dropdown menu for user to select from the pricing plans options
- Goal of Section
- Allows user to fill a form and book a call.
- Allows user to fill a form and book a call.
- Goal of Section
-
Responsiveness:
- Responsive in all screens.
-
-
-
Sticky footer as seen in all sections. Has a fixed position
-
Includes social platforms for MarketMe
-
Includes copyrights
- Goal of Section
- Redirects users to social media links for MarketMe.
- Redirects users to social media links for MarketMe.
- Goal of Section
-
Responsiveness:
- Responsive in all screens but changes style for mobile.
- Responsive in all screens but changes style for mobile.
-
- Fix position and sticky
- Floating at the bottom right of the page
- Goal is to redirect user back to the top of the page from any section.
-
-
After user fills form and presses button they are redirected to this page.
- Goal of Section
- Submit the form and thank the user for booking.
- Submit the form and thank the user for booking.
- Goal of Section
-
Responsiveness:
- Responsive in all screens.
-
- HTML was used as the foundation of the site.
- CSS - was used to add the styles and layout of the site.
- CSS Flexbox - was used to arrange items on the pages.
- CSS Grid - was used to make the hero section responsive.
- CSS Grid-Template-columns - was used in hero section.
- CSS roots was used to declaring global CSS variables and apply them throughout the project.
- Balsamiq was used to make wireframes for the website.
- VSCode was used as the main tool to write and edit code.
- Git was used for the version control of the website.
- GitHub was used to host the website.
- remove background was used to remove backgrounds from images.
- FontAwesome used for icons in the pricing cards.
- UI Amiresponsive Preview responsiveness of website.
-
The colour pink has many psychological effects on the human brain. It is associated with love and kindess and optimism. It was used throughout the project with 3 different shades mostly light. This was implemented to give the user a sense of comfort and trust, it is also very readible and easy on the eye which will keep the user comfortable scrolling through the website.
-
The colour brown is associated with calmness and comfort. This contrast with the pink will keep the user happy and calm.
-
As the goal of the website to sell a service, trust is needed and simplicity for a clear mind for the user. The psychological affects of these two colours combines will make the user feel at home and optimistic that MarketMe will deliver the results and can be trusted.
- Rubik Google Font was used as font through the whole website as it is very readable and very aesthetic. Only the weight of the font was changed througout the website from 400,500,600 and 700
- Wireframe. Desktop Screen
- Wireframe. Tablet Screen
- Wireframe. Mobile Screen
- This design is changed as it wasn't being as responsive. Nav section only is changed into columns for the nav links
No wireframes for response page. As the original idea did not need this page, however later on realised a response page would be useful for call to action section to do something.
In order to confirm the correct functionality, responsiveness, and appearance:
-
The website was tested on the following browsers: Chrome, Firefox, Safari.
- Chrome:
- FireFox:
- Safari:
-
The website was checked by devtools implemented in Firefox and Chrome browsers.
-
Everything is working accordingly in all browsers
- Tested by other users as well by friends and family.
Manual testing was performed on the following devices:
- Laptop:
- Macbook pro
- Mobile Devices:
- iPhone 13 pro.
Tthe following browsers were used to test:
- Google Chrome
- Safari
- Firefox
| Feature | Expected Outcome | Testing Performed | Result | Pass/Fail |
|---|---|---|---|---|
| The Sites title | Link directs the user back to the home page | Clicked title | Home page reloads | Pass |
| Nav links - hover effect | All nav links should change from brown colour to pink when hovered | Hover over each nav link | Each nav link displayed the correct colour when hovered over | Pass |
| All pink buttons - hover effect | Button should change to a darker shade of pink when hovered over | Hover over all pink buttons | Changes to darker shade of pink when hovered over | Pass |
| All pink buttons | Directs the user to the Book a call form section | Clicked on all pink buttons | Scrolls to the bottom of the page to the Book a call form | Pass |
| Form button - hover efffect | Brown button with white text and When hovered should change to white button and brown text | Hover over button | Changes to white button and brown text when hovered | Pass |
| Full name Input | Full name entered, if not error "Please fill in" should appear | Click button without entering full name | Error asking the user to fill in the full name input appears | Pass |
| Select a plan Dropdown | Options to show up when dropwdown button clicked | Click on dropdown | All options show up and user must select one | Pass |
| Form button - after filling form | Redirect user to the respone.html page | Click on button after filling form correctly | User is redirected to response.html page | Pass |
-
- Because i cloned repo in home directory, my terminal was not allowing me to do anything because of untracked files.
Solution: bug By moving the untracked file to gitignore, I solved this bug.
-
- No errors or warnings were found when passing through the official W3C validator.
-
No errors or warnings were found when passing through the official W3C validator.
-
No errors or warnings were found when passing through the official W3C (Jigsaw) validator:
-
- Using lighthouse in devtools I confirmed that the website is performing well, accessible and colors and fonts chosen are readable.
- The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- From the source section drop-down menu, select the Main Branch, then click "Save".
- The page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found here
In order to make a local copy of this project, you can clone it. In your IDE Terminal, type the following command to clone my repository:
-
git clone https://github.com/Omar-Alme/marketing-agency
-
- Blockquote helped me solve one of my html warnings after validation test.
- Figure
- Dribble inspiration Inspired some of the website design ideas
- ReadMe guide Cheatsheet for ReadMe
- Scroll Up Page Button This video helped inspire to implement the scroll up button feature on MarketMe website.
- Awesome README This was used to understand how to write a better ReadMe file and for layout ideas.
- How to write a Good readme This was used to understand how to write a better ReadMe file and for layout ideas.
- CodingHeroes resources Coding heroes includes a bunch of other external resources for web developers that can be helpful for them.
- Colour psychology Gave an insight on the psychology of colours in web development. -Linking html to a section in another html page helped redirect me to desired section in index.html from response.html.
For the illustrations UnDraw was used through out the website.
For the testimonials section Random user generator was used to get the 3 photos.
The images for the websites don't have specific URL's to them, they were saved from the websites above.
-
Hero image:
-
Services Section:
-
Services Section:
-
Juliaa Konovalova was my mentor throughout the project, inspired some of the technologies and ideas for this project.