Thread by @vponamariov

Want to make your UI flawless?

Here are some ideas for you 👇

Consistency

🔸Make a color palette in advance, or use a ready one

🔸Ideally, make a UI kit of every element you need

🔸Make sure your icons have the same styling

🔸Don't use too many layouts

🔸Make sure UI elements behave the same way across your app

Typography

🔸The text should have good contrast (AA+ WCAG)

🔸Don't use more than 2 fonts

🔸Provide text hierarchy (headings/sub-heading/paragraphs)

🔸Use proper line-height

🔸font-size should be at least 16px

🔸Do not justify text

Redundancy

🔸Remove excessive borders/frames

🔸Rephrase wordy sentences (Enter YOUR email and YOUR password)

🔸Do not add useless hints. Because they are useless

🔸Do not add useless notifications ("You've successfully logged in!" Oh really?)

Element states

Make sure your elements have all the necessary states.

🔸Default
🔸Hover
🔸Focus
🔸Active
🔸Disabled
🔸Loading/Processing
🔸Any other

Responsiveness

🔸Check that your UI looks good on different devices.

🔸Scale your typography on different screen sizes.

🔸Ensure that elements have a large clickable area

🔸Provide suitable images for the mobile version

UX Principles

🔸Have a proper navigation

🔸Provide current status of the system

🔸Don't break user habits

🔸Follow general conventions

🔸Conform single responsibility principle - don't make many primary elements on the same page/block