MOBILE APPLICATON INTERFACE DESIGN

Tab Bar menu design

In this learning content, we will make Tab Bar design for menu design to be used in mobile applications.

Tabbar menu is prepared on a Row element consisting of four columns with icon buttons that direct users to the relevant screens, added on a Footer element. Let's move on to the design process of this Tab Bar menu for the mobile application.

In this learning content, we will make Tab Bar design for menu design to be used in mobile applications.

First, let's start by examining the Tab Bar menu. 

Tabbar menu is prepared on a Row element consisting of four columns with icon buttons that direct users to the relevant screens, added on a Footer element. Let's move on to the design process of this Tab Bar menu for the mobile application.

To start with, we will create an application with mobile compatibility in mind. We will design the tab bar menu on the “Homepage” screen, which will be the main screen of the application and which we will discuss in detail later.

  1. After creating a new mobile app, open the screen named Homepage. 
  2. Drag and drop a Footer element on the screen.
  3. Add a Row element inside the Footer element and convert it into a four-column structure.
  4. Drag and drop an icon into the first column.
  5. Select the icon and change the color of the icon.
  6. Select the column and perform alignment operations.
  7. Then drag and drop an icon to the other columns.
  8. Make icon selections for the icons in each column and align them in their respective columns.

Our Tab Bar Menu is ready. Now we can use this menu on other screens we need by copying and pasting it.

In this learning content, we will make Tab Bar design for menu design to be used in mobile applications.

Tabbar menu is prepared on a Row element consisting of four columns with icon buttons that direct users to the relevant screens, added on a Footer element. Let's move on to the design process of this Tab Bar menu for the mobile application.

In this learning content, we will make Tab Bar design for menu design to be used in mobile applications.

First, let's start by examining the Tab Bar menu. 

Tabbar menu is prepared on a Row element consisting of four columns with icon buttons that direct users to the relevant screens, added on a Footer element. Let's move on to the design process of this Tab Bar menu for the mobile application.

To start with, we will create an application with mobile compatibility in mind. We will design the tab bar menu on the “Homepage” screen, which will be the main screen of the application and which we will discuss in detail later.

  1. After creating a new mobile app, open the screen named Homepage. 
  2. Drag and drop a Footer element on the screen.
  3. Add a Row element inside the Footer element and convert it into a four-column structure.
  4. Drag and drop an icon into the first column.
  5. Select the icon and change the color of the icon.
  6. Select the column and perform alignment operations.
  7. Then drag and drop an icon to the other columns.
  8. Make icon selections for the icons in each column and align them in their respective columns.

Our Tab Bar Menu is ready. Now we can use this menu on other screens we need by copying and pasting it.

Files

Auxiliary resources

Glossary