As designers, we should aim to create beautiful and consistent interfaces.
Not sure how to achieve that?
Create a style guide for mobile use.
Here are a few tips on what to include in your next style guide (thread)👇
Not sure how to achieve that?
Create a style guide for mobile use.
Here are a few tips on what to include in your next style guide (thread)👇
1️⃣ Typography
To create a clean-looking design, you’ll need good typography. I tend to use fonts from a site called Fontshare .com.
All their fonts are free for personal and commercial use and they are amazing!
To create a clean-looking design, you’ll need good typography. I tend to use fonts from a site called Fontshare .com.
All their fonts are free for personal and commercial use and they are amazing!
2️⃣ Type scale
Having a solid type scale is one of the most important elements to help you establish your content hierarchy.
As usual, I reference Human Interface Guidelines for iOS, Material Design type system for Android, and Tailwind CSS for website designs.
Having a solid type scale is one of the most important elements to help you establish your content hierarchy.
As usual, I reference Human Interface Guidelines for iOS, Material Design type system for Android, and Tailwind CSS for website designs.
3️⃣ Main color palette
To create your main color palette you’ll need at least one primary color, system colors, grays, and two shades, black and white.
To create your tints and shades for the primary colors try a Color Designer plugin (it's based on Tailwind CSS).
To create your main color palette you’ll need at least one primary color, system colors, grays, and two shades, black and white.
To create your tints and shades for the primary colors try a Color Designer plugin (it's based on Tailwind CSS).
4️⃣ System colors
Your system colors will mainly be influenced by the system you’re designing for, or the library you’re using to define your colors.
I tend to reference colors from HIG/MD for iOS and Android respectively.
Your system colors will mainly be influenced by the system you’re designing for, or the library you’re using to define your colors.
I tend to reference colors from HIG/MD for iOS and Android respectively.
5️⃣ Shadows & Blurs
With these, you have a bit more freedom as they are not clearly defined. I tend to choose at least 4 different shadow and blur values.
My Figma settings: Layer blur values start around 14, and opacity is 90-94%.
Layer blend mode is set to: Soft Light.
With these, you have a bit more freedom as they are not clearly defined. I tend to choose at least 4 different shadow and blur values.
My Figma settings: Layer blur values start around 14, and opacity is 90-94%.
Layer blend mode is set to: Soft Light.
6️⃣ Layout grid
I use a standard 4-column 4-point grid, with 16px+ side margins, and 8px gutters, designing on a 375x812 frame when designing for iOS.
For mobile websites, I usually leave between 16-20px margins.
I use a standard 4-column 4-point grid, with 16px+ side margins, and 8px gutters, designing on a 375x812 frame when designing for iOS.
For mobile websites, I usually leave between 16-20px margins.
7️⃣ Icons & other assets
If you’re using an icon set, an illustration set, or a very specific style of imagery I'd also include it in the style guide. It’s especially important to know what not to use to help your brand remain consistent and have a clear visual language.
If you’re using an icon set, an illustration set, or a very specific style of imagery I'd also include it in the style guide. It’s especially important to know what not to use to help your brand remain consistent and have a clear visual language.
This is it from me, guys! 🙌
If you've enjoyed this little thread - let me know if you'd like to see part 2!
Follow @uiuxadrian for practical design tips, guides, resources, and design freebies. Thanks for reading 🙏🏼
If you've enjoyed this little thread - let me know if you'd like to see part 2!
Follow @uiuxadrian for practical design tips, guides, resources, and design freebies. Thanks for reading 🙏🏼
If you want to learn how to design an iOS app step-by-step, I cover everything you need to know about mobile design in my 620+ page-long ebook.
It's currently on a 50% off Birthday Sale.
Check out the free sample below! 👇
uiadrian.gumroad.com
It's currently on a 50% off Birthday Sale.
Check out the free sample below! 👇
uiadrian.gumroad.com
Loading suggestions...