LT 7.1 Designing interactive headers and menus

Let’s practise 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 neighbourhood. 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

This is the logo I made for the bakery, very simple and modern.

Part 2, 3 and 4

I decided to go for a classic menu with all links visible, since the website only require a few sites. The links changes color to brown when hovered over. The search bar is only visible with an icon, and opens up ready to type when pressed.

This is how the website looks without hovering.

The links changes colors when hovered.

The search bar pops up.

Reklame