Become an affiliate and earn up to 35%
You can participate in Setproduct partnership program and earn up to 35% from every sale you made. We provide promo materials and detailed instructions how to boost the conversion
We used to reply ASAP
Hire Setproduct professionals for your project
We'll take any of our Figma design systems, adjust with your brand guidelines, create all the additional custom templates, and code a web application based on React, Angular, Vue or etc.
How to reach you out?
Type of job
Select design system
Whats your approximate budget?
URL (optional)
We used to reply ASAP
Looking for a custom design based on our Figma templates? We are ready to customize any of our UI kit personally for you and create custom design based on your brief, wireframes, outdated UI or online call. Please, fill the form below or drop us a line at hello@setproduct.com
Your e-mail
Pick a design system for your project
Pick a project size
Describe in a few words (optional)
For browser-based applications
For iOS & Android mobile apps
Whats your budget, USD
Please, provide the approximate number. The total price depends on the amount of templates in your order
1000
10000

App Bar UI design tips

The exploration for Application Bar component: Anatomy, Themes, Styling, Use cases, Templates and Inspiration.

September 2021 · 9 mins to read

by Roman Kamushken

Heya! Roman's here.

I am a UI designer, writer, and seller. It's been already 3+ years passed since I founded Setproduct.com to supply designers, developers, and organizations with a wide range of ready-made Figma templates.

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 write in public ✊ and this is the 3rd chapter (1st was for Avatars, 2nd for Accordions) dedicated to Application Bars UI design.

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

Let's get it started!
DESIGNING COMPONENTS
App Bar UI design exploration. Anatomy, styling, use cases, ideas

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

Anatomy
  • Left controls
  • Center section
  • Right control
Styles & Themes
  • Flat
  • Raised
  • Shaded
  • Inverted
  • Transparent
UX & Usability
  • Selected state
  • Bottom positioning
  • Shadow on scroll
  • Blurred background
  • Hide items on resize

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 emphasize 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
Want to have our next post delivered to you?
Setproduct newsletter with updates, ideas, inspiration and special offers — once per month

UX & Usability

Let's review some kinds of behavior 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!

Have I missed something? Please, drop me a line at kamushken@gmail.com

Related links

More to ☕ read

Show more