Member-only story

Design Guide: Top App Bar

Best Practices of Designing a Top Navigation Bar for Mobile

Published in
4 min readApr 12, 2020

As per Material Design, top app bars “display information and actions relating to the current screen”. With these components usually on every page of an app, it is paramount they are designed effectively 💪.

TLDR

You can choose to just trust me on this and duplicate my file on Figma (referenced in the diagram below):

Or…you can read the WHY in the next section 💪

Explanation

1. Let the bar breathe

The top bar contains a lot of important info and will be a mainstay throughout the user’s experience. Cluttering this area can make the whole app feel overwhelming. Therefore, give it a suitable height so that things do not look squished. In my example, the bar is 70px (the ubiquitous phone details area is 14px, so the amount of room we can play with is really 56px).

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Published in Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us https://bit.ly/apply-prototypr

Written by Alex Zlatkus

Design Systems @ Carrot Fertility 🥕

Responses (1)

In your example, the cards are higher (z) than the top app bar. Do they go under it if you scroll?

--