Principles of VISUAL HIERARCHY: Redesigning a UI in Figma!

🚀 Get 2 free months of Skillshare Premium & watch my design course for free: skl.sh/2TVhf8z
In this tutorial, I will be doing a simple redesign of a particular screen to explain how to use the core fundamentals of Visual Hierarchy and Information Architecture when redesigning an interface.
🌟 Enjoying my content? Here is your chance to support the channel:
/ @designpilot
💠 The Mega Product Design Course for Beginners:
• The Mega Product Desig...
🔸 Chapters
00:00 Introduction
01:51 Understanding the User Goals
03:58 Setting up a Basic Typescale
08:36 3 Ways of Creating Visual Hierarchy
21:47 How to Set up a Spacing Scale
24:20 Continuing the Redesign
--------------------------------------­---
UI/UX Design Tutorials:
• The Mega Product Desig...
Webflow Course for Beginners:
• Webflow Course for Beg...
Photoshop Tutorials:
• Photoshop CC Tutorials
Illustrator Tutorials:
• Illustrator CC Tutorials
After Effects Tutorials:
• After Effects CC Tutor...
UI Design Tutorials:
• UI Animation/Interacti...
Design Resources, Tools and Softwares:
• Design Resources, Tool...
Adobe XD CC Tutorials:
• Adobe XD CC Tutorials
eSports Design Tutorials:
• eSports Design Tutorials
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: chethankvs.design
Twitter: / kvschethan
Instagram: / design_pilot
Mail: [e-mail]
Behance: behance.net/chethankvs
Dribbble: dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#uiuxdesign #productdesign #designprinciples

[@Artsybitsystuff]

Rewatched this video after a year while completing your design course and again got to learn new things. Grateful for your content ✨

[@nisheethranjan1188]

Best line from the tutorial "How far can you go until it looks bad"💯

[@divyanshpandey9140]

This is amazing!
Seeing a design in real apps feels so good but what happens behind the scenes is constantly making adjustments with hit and trail methods. Very good video.

[@romanmir8443]

Finally, a worthy content to watch for a long time I was waiting for this.

[@praveenpsg77]

This guy gives free of what famous youtuber charge lot of bucks. He is underrated gem

[@pawanbisht8154]

This is dope..Looking for more content like this

[@TechnoPel]

YESSSSS. the wait is over🔥🔥🔥

[@jeffloucks4071]

Great Stuff!!

[@explore1310]

Such an amazing content 👍

[@uixsohel]

I think the checkmark should be on the top of "$$$", checkmark taking my eyes and make me read restaurant name but as a user I want to see the billed amount. As you mentioned earlier in the video.

[@gibsonolugbue1169]

Nice video again!

[@edafioghorprinceoghenmairo7706]

Wow... I love this

[@abhishekdangi5297]

this is so great can u make more of visual Hierarchy

[@DesignPilot]

Sure. What exactly do you want to learn?

[@prathamdubey2363]

Hey, would it be possible if you also provide us with the figma files?

[@playpiano2264]

Fantactic Content! Chetan bro can you make a video on dashboard designs. Since it is difficult to make one from scratch

[@DesignPilot]

Sure. I’ve got a series on that

[@rakshitjv1627]

I would have center aligned the green tickmark icon as it represents the payment status. So, center aligning it makes it applicable to the whole page. Let me know of your thoughts

[@DesignPilot]

Should be okay

[@soumyadeepgoswami4730]

boss is back ...

[@saketjoshidesign]

Great video man. Thank you for such quality information✨.Can you please share you Discord as you mentioned at the end

[@DesignPilot]

You can ignore the discord thing. It doesn’t exist anumore

[@saketjoshidesign]

@@DesignPilot okay

[@juanbayani]

Galing mo mag design

[@DesignPilot]

Salamat

[@biglillthings]

How should one choose a base fontsize? And on what element-such as the body or title-should it be based?

[@DesignPilot]

The base font size is usually 16px. It is usually a title. But could be a body as well. Sometimes both body and title are 16px. Sometimes body is 14px and title is 16px.

[@biglillthings]

@@DesignPilot Thanks!

[@akshayjoshi3750]

Just like we use inspect element to find font size, font weight, colors, spacing etc. for websites what is the solution for mobile apps?

[@DesignPilot]

There is no solution. You have to try to take a screenshot, get the right font and try to trace the screenshot

[@pallaviaepur5843]

How do you copy paste from screenshots

[@DesignPilot]

What do you mean?

[@abdullahiafolabi6905]

I think he's referring on how to use the Slice tool.

[@15791sandeep]

Which Colors are good for text if the background is white ?

[@DesignPilot]

Any Color.

[@SAMSAM-jk9og]

Hello sir, thank you for sharing this fantastic video.
Can I know what program you used to record this video sir, thank you

[@DesignPilot]

Loom

[@belabako8045]

0.16 us dollars for a meal... wish I lived there

[@Programming-es5tp]

people earn less here

[@Programming-es5tp]

it is 25-35$