Practice English Speaking&Listening with: How to make Sidebar - 2

Difficulty: 0

Hello, my name is Nicholas, and this is Steelmonk Design

We continued work on UI Components

Our next guest is Sidebar UI Component

Left Sidebar Navigation

The important thing is, we will make just component

And when we will make more than 15+ components after we will make full UI design

I recorded this video second time cause first time something wrong when I was recorded

This is Second try :)

Lets make an Artboard

Width - 360 Height - 1080

Let's make Grid 2 columns

Look how I do Component grid

And make the same thing

This is our main Container for UI

We have 2 colors

If you like these colors you can use these color codes

First, the thing is, we must to do Component Header (Logo & Burger menu)

After we need icons. You can find icons on

All icons must be from one Family Set, One Style

Non Active icons must be Opacity - 60%, Active must be 100%

All icons must be the same size

Now I will show you how to set icon guidelines right

You must always work with icons like this

We must make Shape 18x18 or 20x20

We must put icon into this shape

And fix sizes

This is important, just look closely

After we must to make little padding for the icon, and we do shape little bigger

After, Shape opacity 0, Fill color off

And last thing is we must to Group Shape & Icon and set Mark For Export

We must do this for all icons if we want to make Right Icon System

Now we are ready for menu titles

Text opacity must be same as Icon 60%

Top of Navigation we must make Search

Search box heigh 60px

Shape Border Radius 12

All border-radius must be the same size

We need Search icon too

Now we need nav-Hover

Hover Height 60

Color Blue

This will be an active page hover

Text padding must be 20

Margin from search must be 30

And now we need My Profile component

Let's do avatar 64x64

Avatar Margin Bottom 30

We need a name for example

After we need the small button to go to our main profile page

Let's make small button, 24x24

Use Arrow icon

To make it all center use an Alignment tool

And now we need the avatar image

That's it, our sidebar is ready )))

Now let's make Closed Version of navigation

Width 120

Remove nav titles

We must make grid margins 30 left and right

We need just 1 column, look how I make

Remove logo, and use the just search icon

Remove Navigation

Let's make everything center

That's it, we've done beautiful sidebar UI

If you like this tutorial, Please Like this video, subscribe to us, and turn on the notification Ring. Thanks for watching

See you soon

The Description of How to make Sidebar - 2