The ULTIMATE GUIDE to TYPOGRAPHY in UI Design!
ฝัง
- เผยแพร่เมื่อ 30 ก.ค. 2024
- 🚀 Get 2 free months of Skillshare Premium & watch my design course for free: skl.sh/2TVhf8z
In this video, I dive into Uber's typography, providing a detailed analysis of how they organize it. I explain the four categories of text styles and discuss the importance of font size and weight in different contexts. I also explore the use of headings, labels, and paragraphs, and how they are assigned different font sizes. By the end, I propose a simplified approach to organizing text styles and offer insights on creating a consistent hierarchy.
🚀 The Ultimate Guide to Become a Product Designer: learnproduct.design
🚀 Create an account on Mobbin for free:
mobbin.com/?via=chethan
🔶 Chapters
00:00 Introduction
00:27 Understanding Uber's Guidelines
06:13 Understanding HIG
07:27 Cleaning Inconsistencies and Creating the Text Styles
42:36 Documenting the Text Styles
-----------------------------------------
Mega Product Design Course for Beginners:
• 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: designpilot21@gmail.com
Behance: behance.net/chethankvs
Dribbble: dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :) - ภาพยนตร์และแอนิเมชัน
i must say this method to organize your typography by grouping into display, heading, label, paragraph is the best I have found till date. Everything makes so much sense after learning about tokens.
Chethan!! you have no idea. but you're changing lives by providing this high quality in-depth content. You deserve way more appreciation than you're getting right now
🔥🔥🔥🔥
People: who the hell would upload 45 min tutorial for typography?
Me: My man Chetan probably 😎😎
Helped me clear my typography doubts in Design Systems.... Thanks!!
Thank you chethan bhai 🙏🏼
Your teaching skills are amazing! ✨💯
Thank you, It helped me a lot, Finally I understand how it is work.
Wow Awesome Brother. Thank you for this video.
Thank You so much Chethan you really are amazing like thank you so much
Can you please upload another video in the design system series?
Let me think about it
Majority of my screen would be in between ((12 to 24px) rarest of rare that 10px)
Because consistency in decrement of 4px is justifiable.
If header is 16px i would use para as 12.
Correct me if m wrong(appreciate your feedback🙏🙏)
16 and 12 is not a good combination imo
@@DesignPilot then? Helpful for me if you recommend any size combination. (Max to min in order)
@praveenkulkarni1278 If you’re making list items. 16px title and 14px subtext is good. Or 14 bold and 14 regular is also fine.
@@DesignPilot Worked just fine😍❤
Thank you "Pilot"✌
Hi chethan. Need a clarification. This is an existing app we can easily define the font size. When (before designing any screens) designing a new app how to choose all the font sizes perfectly.
The needs are the exact same for every app. If you’re too confused, just copy one of the design systems and see if it works. If not, make the necessary changes
@@DesignPilot Thank you 🙏♥️
can you do a video on whats expected from New UX designer in first job, whats are top 10 tasks given
This is a conversation you need to have with you boss or manager or design lead
i mean to ask .. what are mains tasks given to new ux designer in general@@DesignPilot
@smilli6415 That’s a vague question my friend
If we have tab items for food menu categories , what would be the semantic naming for the tab bar items? label? , and also where the button fits into those categories?
Names are not defined based on which component they will be used in
@@DesignPilot yeah i meant to say can label used for tabs? Or headings?
@cherry-lp8yq Keep things simple by ensuring that display and headings are only for headings and not other elements. If you think these tabs have the same hierarchy as a screen or a section headings, then use headings. Or else use label
Hi, I have confusion regarding how to make typography (and other elements such as spacing) react to various screen sizes and how to include them in design system?
Are you talking about breakpoints? Because within a breakpoint, it’s not possible to change values
@@DesignPilot No , I want to know how to scale text for different screen sizes(Web, Tab and Mobile) and include those in design systems
@atirekverma808 Just pick the font sizes for the other breakpoints and have a separate section where you document them for web, mobile and tablet.
@@DesignPilot oh , ok thanks. Is there any usually followed guideline ?
@atirekverma808 not really
Sir what if we have same font size with different font weights
Like
In paragraph
Font size same 14px
Font weight , medium and bold
And what is the naming in text style
I think I’ve covered this in the video. Refer to the the HIG and MD.
Hi, can we use leading trim setting for fonts in design system?
Yes
What's the screenshot tool that you are using at @41:12?
Native MacBook feature
Bro how do i do this:
I want to change the typography of the material design community file so that not only I get the text styles with my preferred typeface and font-weight but it also automatically changes texts in the material design components.
Just change the font in the main text style in the right side panel
@@DesignPilot but i would have to do that one by one, no?
@kriswayne7938 Yes
@kriswayne7938 Or use some plugin
@@DesignPilotthanks.
Btw is it okay to have 2 or 4 px right padding instead of 16px in the top app bar considering the target area of icon buttons as per Material guidelines should be 48 × 48px?
Coz if i add 16px padding the icons just come too close to the title
When are the next videos coming? 🤔
Deleted my comment
Lol i didn't see that they have not made a separate component of instances. Its just a frame and not a component set.
My bad 😅
rich content