tutorials

App Bar UI design tutorial

The exploration for Nav Bar component: Anatomy, Themes, Styling, Use cases, Templates and Inspiration.
September 2021 · 4 mins read

by Roman Kamushken

Userpic

Heya! Roman's here.

I am a UI designer, maker, and seller. It's been already 3+ years passed since I started to make templates for Figma and founded Setproduct to help startups and individuals save on design and release their apps faster.
Working for 20+ years in graphic design, last years I've been browsing many apps, screens, and layouts each day to collect all the frequent components and compound them into a handy ebook.

«Designing Components» will be available somewhere in 2022. A book to introduce the world of tiny UI details of each world's component ever existed: states, styles, behavior, and UX. Good for designers' inspiration. Great for coders to dive into a component's usability.

I estimate ~40 components in total, so it's 37 chapters to get done.

What is App Bar?

Application Bar (also known as Navigation Bar) — displays prior in-app controls related to the current app section.

Generally, App Bar snapped to the top of the screen, providing an accessible way to reach the most used actions.
Application Bar UI design tutorial

Table of contents

App Bar Anatomy
  • Left controls
  • Center section
  • Right controls
Styles & Themes
  • Flat
  • Raised
  • Shaded
  • Inverted
  • Transparent
UX & Usability
  • Selected state
  • Bottom positioning
  • Shadow on scroll
  • Blurred background
  • Hide items on resize
SetGPT is a free chat gpt clone aimed for UI, UX and product designers, writers and solopreneurs

Research, copy and ideate with SetGPT!

We've launched the alternative ChatGPT clone dedicated to UI designers, UX researchers, writers and indiehackers.

Powered by the latest OpenAI gtp-3.5-turbo model, this free chatbot is the perfect tool for those in need of intelligent and innovative insights, wrapped with a slick UI and sophisticated user experience.
SetGPT is a free service; however, authentication is required

SetGPT is a free chat gpt clone aimed for UI, UX and product designers, writers and solopreneurs

Research, copy and ideate with SetGPT!

We've launched the alternative ChatGPT clone dedicated to UI designers, UX researchers, writers and indiehackers.

Powered by the latest OpenAI gtp-3.5-turbo model, this free chatbot is the perfect tool for those in need of intelligent and innovative insights, wrapped with a slick UI and sophisticated user experience.
SetGPT is a free service; however, authentication is required

Anatomy

Let's review separately the left, center, and right elements of App Bar. You may hide unused sections, and implement partial App Bars, for example without a title, or no right controls at all.
Application Bar UI design anatomy

Left controls

Sustain any kind of actions at the App Bar's left side you want to focus the user's attention on by keeping them in sight.

System navigation controls are a common choice for most cases and the users are familiar with this pattern.

They may lead to:
  • Back
  • Menu
  • Close
  • Custom (e.g. settings, profile, etc)
Application Bar UI design anatomy
Either, you may use other types of controls, you want to emphasise as attainable on a particular screen.
Application Bar UI design anatomy
On the desktop screen you are allowed to compound combinations of elements in order to use more App Bar's space functionally.

Combine logo, search inputs, dropdowns, icons (as buttons) and so on.
Application Bar UI design desktop

Center section

App Bar's middle space is committed to title an application screen mostly. If necessary, you can replace it with additional controls specific to the current app section.

Center may contain:

  • Title (with possible subtitle)
  • Userpic (with possible name)
  • Logo
  • Segmented controls
  • Search input
  • Navigation items (Tabs, Button Group, Breadcrumbs, etc)
Title
You may use a single title for the app section naming or extend to more informational purposes by enabling a sub-title.
Application Bar UI design anatomy
Adding a Chevron/Caret item is clearly distinguish there is something to reveal after a title was tapped.
Application Bar UI design menu
Userpic
May be used for providing particular user details especially when interacting with Profiles, Messengers, Social apps.
Application Bar UI design avatar
Logo
Put a logo into a central part of App Bar to prioritize the brand identity. Fits especially for Home/Start screens where a user's journey usually begins.
Application Bar UI design logo
Segmented control
On mobiles place a Segmented Control into App Bar to toggle screen states or content properties within just a single action.
Application Bar UI design tabs
Search input
Generally used for desktop App Bars, center-based input may be utilized in order to have a search on hand.

On mobiles it usually migrates as the App Bar's second level when resized.
Application Bar UI design search
Navigation items
Tabs, Buttons Group, Breadcrumbs are common navigation components to locate at the App Bar's center.

Either as for the previous case, they migrate on a second level when shrunk to the mobile viewport.
Application Bar UI design navigation

Right controls

Maintain any kind of components on the App Bar's right side. Place a single control or a combination of frequently used,

which may be:

  • Avatar
  • Icons (as Buttons)
  • Buttons (Call to action)
  • Search Input (mostly desktop)
  • Dropdown (e.g. for an account swap, language)
Avatar
To call out a function related to user properties, place an tappable Avatar at the top right area of App Bar.

A tap may lead to profile settings or reveal popover menu.
Application Bar UI design anatomy
Icons
Using icons as Buttons aimed to represent popular in-app actions ergonomically.
Place here the most used controls you want to have permanently on a users' sight.
Application Bar UI design icons
You may hide behind a popping menu all the items used less often. Especially fits for apps with 5 or more independent sections.

Works well when you want your user to have 5+ in-app links on hand.
Application Bar UI design menu
Buttons
Place Buttons into the right-sided region to call to action. Use styles and color wisely when having several buttons to distinguish primary and secondary actions associated with the business logic of the app.

You may have a variety of shapes: Square, Circle, Pill buttons. And a variety of styles: Filled, Raised, Outlined (Ghost), Flat and so on depending on a necessity to grab user's attention.
Application Bar UI design buttons
Search input
Have a quickly accessible search input by placing it at the right as a single component, or among other controls. Mostly fits desktop cases.
Application Bar UI design input
Dropdowns
To toggle users, accounts, languages, etc. use Dropdown nested into App Bar's right section. Applied often for tablet/desktop resolutions.
Application Bar UI design dropdown

Styles & Themes

You can themify App Bars within a variety of styling methods. To match the exterior of your overall in-app UI, you may use the following themes:

  • Flat
  • Raised
  • Shaded
  • Inverted
  • Transparent
Application Bar UI design CSS styles
Flat
App Bar's flat theme proposes a minimalistic approach with no separation, where the header and background compounding a visually holistic surface.
Application Bar UI design flat
Raised
Elevated style proposes to implement a smooth shadow to easily distinguish App Bar hovering over a background.
Application Bar UI design raised
Shaded
App Bar filled with solid color with opacity decreased to 8–12%. Thus you may suit an app with the smooth palette of your brand colors.
Application Bar UI design shaded
Inverted
Dark version of App Bar you may use to distinguish the header by highlighting with color contrast. It's inverted as it's colored opposite to the overall application theme.
Application Bar UI design inverted
Transparent
Mostly used for mobile App Bars, this style reveals more space for full-size images in some specific sections (e.g. item details, profiles, deals).
Application Bar UI design template

UX & Usability

Let's review some kinds of behaviour extra special for App Bars. There are some cases when the app header can have:

  • Selected state
  • Bottom positioning
  • Shadow on scroll
  • Blurred background
  • Hide items on resize
Selected state
App Bar can dynamically swap themes to provide instant user feedback, e.g. when selecting items, events happening, warning states, etc.
Application Bar UI design usability
Bottom positioning
On mobile viewports, you may attach App Bar to the bottom. Thus all the primary actions become available within fewer fingers stretching.
Application Bar UI design bottom
Conceptually, you may implement the same positioning either for desktop web apps. For example, there is a successfully utilized bottom bar on macOS and Windows and this pattern is familiar to users.
Application Bar UI design desktop
Shadow on scroll
App Bar gets elevated when the screen is scrolled. Mostly fits for flat headers.

Emerged shadow emulates the hovering effect which makes it seem in-app environment more natural and logical.
Application Bar UI design shadow
Blurred background
This tiny visual effect also makes the overall user experience slicker.

Use a CSS property backdrop-filter: blur(16px); to achieve App Bar's surface transparently blurred.
Application Bar UI design blur
Hide items on resize
App Bar's navigation items are sometimes required to collapse and cover behind "More" action (dots), especially when resized from desktop to mobile.
Application Bar UI design viewports
This is all you need to know to design better App Bars.

If you looking for those Application Bar cards - Duplicate for Figma

Hope this exploration will help you to improve your in-app UX. The next chapter is for Badges, probably. Stay tuned!

Related links

More useful tutorials
Avatar UI design exploration — The states of userpic component
Avatar (aka Userpic) — is a component used to represent a user's profile picture. The default content for Avatar is empty state, initials or user's picture.
Accordion UI design exploration — Styles, states, usage, templates
Accordion (aka Expansion panel) — is a vertically stacked list of options that can expand/collapse to reveal or hide more associated content.
App Bar UI design exploration — Anatomy, specs, states, templates
Application Bar (aka Navigation Bar) — displays prior in-app controls related to the current app section.
Badge UI design exploration — Tips & tricks, usability, and use cases review
Badge (aka Tag) — small overlapped UI item which indicates a status, notification, or event that appears in relativity with the underlying object.
Breadcrumbs UI design exploration — Anatomy, UX tips, use cases overview
Breadcrumbs — is a composition of navigational links to reveal the current position in case of multi-level nested structure for a website, dashboard or application.
Buttons UI design – Comprehensive tutorial on UX, styles and usability
Designing buttons that work well requires taking into consideration the style, feedback, and accessibility. The design goal should be to make the them as intuitive as possible so the user can interact with Buttons seamlessly.
Subscribe to Setproduct
Once per week we send a newsletter with new releases, freebies and blog publications

More to ☕ read

Show more ⬇︎