Posted withrepost • How to Design Typography System for UI Design?
Understand Typography is really important for your design, If you wanna create good design, you must have to focus on typography too. ⠀
1️⃣ Understand typography core system
2️⃣ Choose limited fonts
3️⃣ Pick font have at-least 4 weight
4️⃣ Define styles hierarchy (don't create random text style like h1, h2, h3)
5️⃣ Scale typeface & Line height with modular scale
6️⃣ Set character limit
7️⃣ Experiment on font combination if you are using two fonts, for example, pick heavy contrast font for the heading and font body text pick font who has at-least 3 font weight (Light, Regular, Medium)
8️⃣ Work on Letter Spacing
If you are confused about how to use the right font size?
It easy, before choosing the font size, you should explore other websites like Apple, Airbnb, Google Material design, to understand visually when you will look websites, you will understand if you keep bigger or smaller font how it is gonna look in real! or maybe you can type few words on google 'Airbnb typography' click images and you can see many references!
If you wanna learn Design I give design coaching! Drop a message fazurrehman
Let me know if you found useful tips in comment below and Don't forget to tag with your friends!
Want to learn more about UI/UX? Visit ui_gradient & don't forget to follow fazurrehman for more amazing content like this one!
#webdesign #ui #ux #appdesign #userinterface #userexperience #uiux #uidesign #uxdesign #dailyui #ui_gradient #designtools #uxinspiration
🔥Tools and resources for designing and building design system. Part -2 | by: realvjy
Over the past year, I’ve been heavily involved in creating style guides and UIKits for various companies. But, Never attempted to create a design system. Now, I am happy to announce successful completion of zomato’s new design system - Sushi.
I’m sharing tools and resources that helps to design build and manage design system.
Since there are so many choices out there, it is difficult and time consuming to debate on it. I found Figma best suited for designing, documenting and managing design system.
Figma, Sketch, Adobe XD, Invision Studio and more
2. Add on:
Here are the list of plugin and add on - for fast execution and maintaining our design library and components,
Abstract, Zeplin, Rename It, Invision DSM, Symbol Organiser, BodyMovin
Design system is not just a library of design components. All components must be coded for all the platforms. Following are some of the technologies widely used to build design system -
4. Open Source DLS
If you are looking for inspiration and don’t know where to start designing/building your DLS you can use these open source design systems:
Apple Human Interface Guideline, Google Material Design, Microsoft Fluent, Ant Design System, IBM Carbon
5. Public DLS
Where open source dis helps you to just start working on your project like plug and play. There are many public DLS out there you can check these to understand how they build their product.
Atlassian, Shopify Polaris, Github Primer, Mozilla Protocol, Saleforce Lightning , Gojek Asphalt, Uber base web
Zomato Sushi 🍣 and more
6. Web resources link —
Part -3 : Design system : Atomic Design
For color uihues
#inspiration #ui #ux #uxdesign #webdesign #web #flatui #films #invision #aftereffects #interface #inspiration #ios #dribbble #behance #icon #uidesignpatterns #uixpose #creativroom #blog #uihues #designselection #simplycoolinterfaces #uicollections #illustration #realvjy #uischool #dls #designsystem #sushi