7 Practical UI Design Tips Improve your designs with tactics, not talent.
Every web developer inevitably encounters a situation where you need to make a visual design decision, maybe the company you work for doesn’t have a full-time designer, and you need to implement a UI for a new feature yourself. Or maybe you’re working on a side project and want it to look better than “another Bootstrap site”.
It’s easy to raise your hands and say:
“I can never make this look good, I’m not an artist!”
But as it turns out, there are plenty of tricks you can use to improve your work that doesn’t require prior graphic design experience.
Here are seven simple ideas you can use to improve your designs.
1. Use color and weight to create hierarchy, not font size
A common mistake made when styling UI text is relying too heavily on font size to control hierarchy.
“Is this text important? Make it bigger.”
“This text is secondary? Make it smaller.”
Instead of leaving all the heavy lifting on the font size, try using color or weight to achieve the same effect.
“Is this text important? Make it bold.”
“This text is secondary? Make it thin.”
Try and stick to two or three colors:
- Dark colors for the main content (but not black, e.g. the title of an article);
- Minor content grayed out (such as the date the article was published);
- Light grey for secondary content (probably a copyright notice in the footer).
Similarly, two font weights are usually sufficient for UI work:
- normal weight for most text (400 or 500 depending on the font);
- A thicker font (600 or 700) is used for the text you want to emphasize.
UI designs stay away from fonts with a font-weight of 400 or less, they can be used for large headings, but are not easy to read at smaller font sizes. If you’re considering using a lighter weight to lighten some text, use lighter colors or smaller fonts instead.
2. Don’t use gray text on colored backgrounds
Making the text light gray is a great way to fade it on a white background, but it doesn’t look great on a colored background. This is because the effect of what we’re actually seeing as white gray is a reduction in contrast, and bringing the text closer to the background color actually helps create hierarchy, rather than making it light gray.
There are two ways to reduce contrast when dealing with colored backgrounds:
(1) Reduce the opacity of white text
Using white text and lowering the opacity allows the background color to bleed through a little bit, softening the text in a way that doesn’t conflict with the background.
(2) Choose a color based on the background-color
This works better than reducing the opacity when your background is an image or pattern, or when reducing the opacity makes the text feel too dull or uncomfortable.
Choose the same color as the background hue and adjust the saturation and brightness until it looks right.
3. Offset shadow
Instead of using large blur and spread values to make the box-shadow more visible, add a vertical offset. It looks more natural because it simulates a light source shining down from above like we’ve seen before in the real world.
This works for form input boxes:
If you’re interested in learning more about shadow design, Google’s “Material Design Guide” is a great guide to getting started.
4. Minimize the use of borders
While borders are a great way to differentiate two elements when you need to create a separation between them, they are not the only way, and using too many of them can make your design crowded and cluttered.
The next time you find yourself at the border, try one of these ideas:
(1) Use box shadows
Box shadows do an excellent job of drawing elements like borders, but can be more subtle and accomplish the same goal without being distracting.
(2) Use two different background colors
It is often possible to distinguish between adjacent elements by simply having their background color slightly different. If you already use a different background color on the border, try removing the border, you probably don’t need it.
(3) Add extra spacing
What better way to create separation between elements than to increase separation?
Dividing things further apart is a great way to create distinctions between groups of elements without introducing any new UI.
5. Do not over-enlarge the icon
If you’re designing something that might use some large icons (eg: maybe a “features” section on a landing page), you might instinctively take a free icon set like Font Awesome or Conditions, and resize until they are met your needs.
