The difference between an okay UI-design and a good great UI-design lies often in almost hidden details. Small tweaks that most may not recognize cons

UI Design Tips Using Tailwind CSS for Developers

submited by

Style Pass

2024-07-04 11:00:04

The difference between an okay UI-design and a good great UI-design lies often in almost hidden details. Small tweaks that most may not recognize consciously, but once removed they are obvious.

This articles shows various little UI tweaks like these that can be applied immediately in your (Rails) app’s UI. It’s based on my 25+ years of UI/design experience. While it uses Tailwind CSS’ classes (it’s what Rails Designer’s customers use), the same tips can be used with vanilla CSS.

Kerning refers to the adjustment of the space between characters in a text to achieve a visually pleasing result. It can be changed using the letter-spacing property. Typically professionally-designed typefaces have specific settings based on weight, style and certain character pairs (eg. WA). Free typefaces (from Google Fonts) typically don’t have these, resulting in awkward and even poor-looking typography!

Headlines often look immediately better using tighter kerning. It improves the visual harmony and legibility of the visual element.