Let’s practice what you’ve learnt today within the context of a very basic brief. Imagine you have been contacted by a local bakery called Crust & Crumb that opened in your neighborhood. They would like you to help them with their website design. Your task is to create a low-fidelity prototype to show them how the header and menu could look and work.
Part 1
Design a logo for the brand to use on the website header.
Part 2
Consider which type of menu you might need for the bakery and create this in your choice of prototyping software (i.e., think about the website scope and information architecture as well as which content is most important).
Part 3
Add the links, at least one type of menu and other necessary interactive elements to your header wireframe.
Part 4
Make the required elements interactive using component states.
Part 1
The name of the bakery sounds fun and playful to me so I designed a simple logo using the "Nove" font and a pretzel illustration to replace the "&" in the name making the logo more unique and playful.
Part 2
Using AdobeXD I decided to make a hamburger menu on the right corner of the header. The menu itself appears on the right side of the site. I made a fun animated effect for the it to appear to match the brand.
The order of the menu is from most important to least: "Menu", "About Us", "Our Stores" and "Contact Us".
Part 3
I added the links to the other pages. Each page has a different background image and title to make them easy to differentiate. The logo on the header leads to the home page as usual.
Part 4
I added different colors for "Hover" and "Toggle" to the menu elements and the icon.
Link to prototype:
Pictures:
Default state
With the menu open
Other pages
Comments