Daily Design Learning: Designing the bottom tab navbar

Day third, we have completed chart and KYC design and now we will create a bottom tab navbar

shrey vijayvargiya
Bootcamp

--

Logo of our new website

We have launched our basic version of our website and it consists of the initial set of sample designs.

Do check our website — iHateReading

Here is an introduction to me.

I am shrey, A Software developer by profession, Designer by passion(love designing interfaces, illustrations etc), A journalist by blood & Chatty in nature.

DAY Third!!!

Today’s Learning — Bottom Tab Navbar
POA(Plan Of Action) —
1. Again, get some inspiration from dribble or pinterest.
2. Today we will use web gradients or image pallet plugin
3. Select the bottom tab navigation icons like Home, History
4. Choose colour patterns or combinations
5. Lastly, according to your gut adjust the effect, colours and icons

Step One !!

Create an iPhone frame and add some border with the bottom tab followed by adding some effect and strokes.

Bottom tab navbar inIphone Mockup

We use rectangle object with some border radius and background color and icons i have used were selected from font awesome plugin.

Some more INSPIRATIONS!!!

Sample Two — Bottom Tabs with second panel as active tab
Bottom tabs for desktops

Follow/Contact me here.

Email: shreyvijayvargiya26@gmail.com
Discord: shreyvijayvargiya#6842
Dribbble: https://dribbble.com/witness_trey
Github: https://github.com/shreyvijayvargiya

References

  1. Deep Dive in Figma Blog
  2. Dribbble for inspiration
  3. Behance for some more inspiration
  4. Color Palletes Plugin

--

--