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 flaticon.com
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
