Learn Sketch, build a clickable prototype, and test it on your mobile

Menu bars

Apps and websites typically have some element of persistent navigation, that is, a menu set of options that is always available.

This is good practice because it means the user is never lost. No matter where they are in the app, they know how to access the main areas of the app.

Menu bars can differ between iPhone and Android and often appear as a 'burger' menu or as a bottom navigation always at the bottom of the screen.

BabySittr Menu Bar

Let's look at the menu bar for BabySittr:

As you can see, there are three options:

1. Search (find an available sitter)

2. Bookings (show me any existing bookings)

3. Settings (e.g. change address, credit card details, notifications etc.)

The currently selected item must be clearly discernible. Here, 'Bookings' shows in an Orange color to indicate it is selected. If 'Search' were selected, we would show it in the orange color.

Constructing a menu bar is not complex. We just need to:

1. Decide the options that will be shown.

2. Find 3 icons that will be understood instantly to represent these options.

3. Put the text underneath (optional).

4. Space and align the 3 icon/text groups.

Before we run through these steps, let's first examine how we source and use icons.

Using Icons

Icons are images that instantly represent a meaning to users. When we see a cog icon, we immediately know that this is the area of an app or website where we can change our settings.

You can find many great icon resources on the Internet. Sites such as iconfinder.com offer tens of thousands of icons - many of them for free!

Iconsets

When you are sourcing icons, you don't typically do so individually, as the icons probably won't look very nice together. What is best is to find an icon set that you like. An icon set could be anywhere from several to a few hundred icons, all created in a similar style.

The icon set I use for the  BabySittr prototype is here. If you want to double check the permissions, they follow the WTFPL license! 

I browsed this icon set to find three icons that look like 'search', 'booking' (a calendar icon), and 'settings' and also downloaded them in SVG format.

Individual icons I used

Download the 3 icons you will need for the Menu Bar right now. I'll put the other icons I use in the prototype at the end of the lesson in the Additional Resources section.

• Search 

• Bookings 

• Settings 

You should download these icons in SVG format and then

• Insert them into Sketch (or copy and paste them in). 

• Resize them to be 22 pixels wide and 22 pixels high. 

• Change the color of each icon to be 9B9B9B (hex).

• Align them horizontally and then make sure they are equally spaced horizontally.

• Place the text underneath, e.g., place the text "Search" underneath the Search icon.

Then, we want to create a version where the selected version is Booking icons (i.e. icon and text have orange color to indicate currently selected).

We also want to create a version where the currently selected option is 'Search':

And voilà! We have created our menu bar for the BabySittr app.

Grouping the Menu Bar

I will share with you how I would group these layers to be easy to work with:

Inside each option is the icon and the text:

All icons for the BabySittr Prototype

You can click on these links now and download them (in SVG format) to your desktop to speed you up later!

3 icons for the Menu Bar:

• Search 

• Bookings 

• Settings 

3 icons for Sitter:

• Geo

• Following

• Dollar 

1 icon for Pending (clock):

• Clock

1 icon for Confirmed (Tick):

• Tick 

Additional Resources

The Sketch file for this lesson