
Member-only story
Design Guide: Top App Bar
Best Practices of Designing a Top Navigation Bar for Mobile
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).