Learn How to Design Tab Bars
I suck at designing Tab bars, so let’s learn together.
I started out by designing using dribbble conceptual designing and to be honest, I learned a lot but one of the worst things is I skipped the Basics of designing.
I create a tab bar without even following the material or iOS Guidelines. But not only this, I draw screens without any fixed size but draw on random rectangles without a status bar and navigation bar.
But then I started learning the basics and It was just eye-opening.
All the sizes and dimensions of various elements are defined very perfectly in the Material guidelines.
I want you to check it out once you read this article till the end because there will be much more knowledge in the coming article.
What is Tab Bar?
Tab Bar (iOS) vs Bottom Nav Bar(Android)
Tab Bar name is very popular in iOS development and design & in android, it is popularly known as Bottom Navigation Bar or Nav Bar.
Tab Bar vs Rail navigation
The Tab bar for the phone is at the bottom of the screen near to user’s thumb for better reach and usability but on big screen devices like tablets and desktops, the Tab bar becomes Navigation Rail, which provides the same functionality with more items or tabs to select.
Anatomy of Tab Bar
The anatomy of the Tab bar is simple but you need to understand it to learn some about tab bars, so the anatomy of tab bar consists of:
- Active Icon: This is the icon that is currently selected to show where the user is and where the user can go or switch to.
- Active Label: just like the active icon, the active label shows the current tab.
- Inactive Icon: Tabs that are not selected have Inactive icons.
- Inactive Label: Inactive labels are visible as well as dull to show inactive.
- Container: The element which contains all the tabs.
Size of Tab Bar
Android Tab Bar preferred size is 58px when the device is portrait as well as landscape, for better usability. as well as the elements should have an equal distance in them so that the user can tap easily with the thumb.
iOS use the point system, on the portrait screen the Tab Bar should be 49pt, and in landscape, it should be 32pt according to the guidelines by apple.
Note: Different companies use different Tab Bar heights depending upon their app data and functionality, all of these guidelines and sizes I have discussed above are not fixed but they are there to provide you the base point of where you should start for better usability.
Types of Tab Bar
There are various types of Tab bars in app design, two of the most popular types are Static tab Bars and Dynamic/Responsive Tab Bars.
The static bar is attached to the bottom of the screen and never moves from its place when we switch between tabs and scroll through the content. but the dynamic/responsive bar hides as well as moves when you jump between screens and scroll through content.
Both of them have their own use, the amazon app, and Airbnb uses the static bar but Pinterest looms a responsive bar. The bar that is responsive provides more content when the user scrolls through content.
Always test this kind of thing before launching it for all users.
Inspiration for Tab Bars
For Tab bar design for apps, I basically take inspiration from 2 websites.
- Mobbin.com (previously mobbin. design): It is a great website for getting real app inspiration, all of them are successful apps and built by great designers from around the world so their design must be great not in terms of trends but in terms of usability.
- Dribbble: Mostly I use real-world design, but if I have to think outside the box then I go to dribbble and start looking for recent and popular designs to take some inspiration about tab bars.
If you have any website that is best for tab bar inspiration comment down below. It is so much helpful for all of my readers and designers.
Best Figma UI Kits for Tab Bars
1. Ultimate Bottom Navigation bar Component by Adi Chakravarty
2. Navigation bar by Alireza Rahmani and Ehsan Ezzati
Learn More about Tab Bars
Read the below article and sites for getting to know more about tab bars.