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.
Each preview shows how a tip is applied to the UI element.
Adjust letter-spacing for headlines
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.
Tailwind CSS provides the tracking-* classes to set the letter-spacing. The default options are tracking-tighter, tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-widest. But Tailwind of course allows for arbitrary values as well: tracking-[0.05em].
Use colored shadows
When you have an element with a shadow (text- or box-shadow) against an element with a background color, other than gray, it can help to use a colored shadow too. It will make the shadow look less muddy and stand out more. You can use Tailwind CSS’ Box Shadow Color utilities for this.
Keep colors consistent
One of the things I like most about Tailwind CSS is its extensive color palette. Specifically the grays. Just make sure to stick to the preferred hue (eg. slate, zinc, etc.) and don’t mix them to avoid a muddy look.
Tailwind CSS gives you plenty of shades of gray to choose from. I like to set my preferred gray hue (eg. slate) in the Tailwind config, so I can just use bg-gray-* which is more natural to me than bg-slate-*.
// tailwind.config.js
module.exports = {
// …
theme: {
extend: {
colors: {
gray: colors.slate
}
}
}
// …
}
Opacity for colored elements on gray backgrounds
When you use elements/components with a colored background, like badges or notification dots, against a gray background that changes on hover (eg. from white to gray or from gray-50 to gray-100), it is a good idea to make the colored background of the badge 50% opaque.
This technique allows for some of the gray to peek through, making the element more eligible and less muddy. An example probably works best.
Use more white-space
One of the first rules I learned about (UI) design is: white-space is also a design element.
Most developers have the habit of cramping elements too close to each-other. They like information-dense screens. On the other most designers like to add more white-space. How to find the right balance?
It’s tricky as it’s depends case-by-case. But something to keep in mind is the balance between the horizontal and vertical space. A rule-of-thumb is that the horizontal (x) space should be more than the vertical (y) space. Check out the following example:
(Also check out Rails Designer’s ButtonComponent for inspiration)
Use subtle gradients for visual interest
Using subtle gradients in a background can help improve the visual interest of the element. The trick is to use slightly different shades of color. This is easy with the extensive color palette provided by Tailwind CSS. Something like from-indigo-900 to-indigo-800.
When setting the direction keep nature’s colors in mind. What I mean by that is for light-themed elements go from light to dark and for dark-themed element go from dark to light. This mimics, respectively, sunrise and sunset.
Need some inspiration? Check out these beautiful, hand-crafted gradients built with Tailwind CSS!
Enhance readability with proper line-height
Setting the line-height is one of those typography tricks that are tricky. Too much it looks off, too little and it looks off too.
A too narrow line-height is often the result of wanting to show too much information on one screen, but the result is it makes it harder to read.
Tailwind CSS provides both relative and fixed line-height with the leading-* class. Relative line-height is based on its current font-size. While a fixed line-height, sets it irrespective of the current font-size.
Limit text paragraphs width
When you have longer paragraphs of texts, it is important to keep the width contained. A good rule-of-thumb—one that I learned early on—is to limit it to 2.5 times of the full alphabet at its font size.
You can archive this by either increasing the font size or decreasing the container’s width. This depends on the overall UI of the screen.
Typically decreasing the width of the text’s container is the more wanted solution. CSS provides a unit called ch. It is based on the width of the 0 (zero) character in the font. So taking the above rule-of-thumb in mind, you can use max-width and use 2.5 × 26 = 65, resulting in: max-width: 65ch
Tailwind CSS comes with a utility class for this out-of-the-box: max-w-prose.
Balance the line-height for headings
Another typograhpy tip! After all, great typograhpy can make or break a UI. When dealing with larger headings, it’s important to keep the line-height in check. If not, the text might look like separate elements, making it harder to read.
Tailwind CSS has already nicely balanced line-height’s for their font-* utility classes.
Keep current stacking context
Keeping z-indexes in check often was an annoying exercise. From keeping a “z-index map” to actions of defeat and applying a 99999 value.
But any z-index issue can be fixed with isolation: isolate;, added via Tailwind CSS as isolate that creates a new stacking context to the element it is added to.
Note: I’ve extracted this tip into its own article.
Implement smooth transitions for interactive elements
Adding subtle transitions to your focus and hover states can enhance the user experience by creating a natural flow, guiding user attention and maintaining visual continuity.
With just one CSS-class (transition), this can be archived with Tailwind CSS, but I almost default to the following classes transition ease-in-out duration-200. It gives this quite elegant transition. Check out this article about a quicker way if you use this set of classes all the time.
If you apply such a hover-state to big elements, make sure to add a delay-* class. This is to make sure your users don’t accidentally trigger the hover-states when scrolling through your screen.
Got other tips to share with developers? Let me know about them.
Add even more joy with small transitions
Go beyond the smooth transtions for the hover state and add fun transitions to other elements. Including the active state. They don’t have a direct UX purpose, but—when done right—will put a smile on your user’s face! Be sure to keep it subtle and not overdo it.