medium bookmark / Raindrop.io |
Every web developer inevitably runs into situations where they need to make visual design decisions, whether they like it or not.
Maybe the company you work for doesn’t have a full-time designer and you need to implement the UI for a new feature on your own. Or maybe you’re hacking on a side-project and you want it to look better than yet-another-Bootstrap-site.
It’s easy to throw your hands up and say, “I’ll never be able to make this look good, I’m not an artist!” but it turns out there are a ton of tricks you can use to level up your work that don’t require a background in graphic design.
Here are seven simple ideas you can use to improve your designs today.
A common mistake when styling UI text is relying too much on font size to control your hierarchy.
“Is this text important? Let’s make it bigger.”
“Is this text secondary? Let’s make it smaller.”
Instead of leaving all of the heavy lifting to font size alone, try using color or font weight to do the same job.
“Is this text important? Let’s make it bolder.”
“Is this text secondary? Let’s use a lighter color.”
Try and stick to two or three colors:
Similarly, two font weights is usually enough for UI work:
Stay away from font weights under 400 for UI work; they can work for large headings but are too hard to read at smaller sizes. If you’re considering using a lighter weight to de-emphasize some text, use a lighter color or smaller font size instead.
Making text a lighter grey is a great way to de-emphasize it on white backgrounds, but it doesn’t look so great on colored backgrounds.
That’s because the effect we’re actually seeing with grey on white is reduced contrast.
Making the text closer to the background color is what actually helps create hierarchy, not making it light grey.
There are two ways you can reduce contrast when working with colorful backgrounds:
Use white text and lower the opacity. This lets the background color bleed through a bit, de-emphasizing the text in a way that doesn’t clash with the background.
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 washed out.
Choose a color that’s the same hue as the background, adjusting saturation and lightness until it looks right to you.
Instead of using large blur and spread values to make box shadows more noticeable, add a vertical offset.
It looks a lot more natural because it simulates a light source shining down from above like we’re used to seeing in the real world.
This applies to inset shadows like you might use on wells or form inputs too:
If you’re interested in learning more about shadow design, the Material Design Guidelines are a fantastic primer.
When you need to create separation between two elements, try to resist immediately reaching for a border.
While borders are a great way to distinguish two elements from one another, they aren’t the only way, and using too many of them can make your design feel busy and cluttered.
The next time you find yourself reaching for a border, try one of these ideas instead:
Box shadows do a great job of outlining an element like a border would, but can be more subtle and accomplish the same goal without being as distracting.
Giving adjacent elements slightly different background colors is usually all you need to create distinction between them. If you’re already using different background colors in addition to a border, try removing the border; you might not need it.
What better way to create separation between elements than to simply increase the separation? Spacing things further apart is a great way to create distinction between groups of elements without introducing any new UI at all.
If you’re designing something that could use some large icons (like maybe the “features” section of a landing page), you might instinctively grab a free icon set like Font Awesome or Zondicons and bump up the size until they fit your needs.
They’re vector images after all, so the quality isn’t going to suffer if you increase the size right?
While it’s true that vector images won’t degrade in quality when you increase their size, icons that were drawn at 16–24px are never going to look very professional when you blow them up to 3x or 4x their intended size. They lack detail, and always feel disproportionately “chunky”.
If small icons are all you’ve got, try enclosing them inside another shape and giving the shape a background color:
If you’re not a graphic designer, how do you add that dash of visual flair to your UI that other designs get from beautiful photography or colorful illustrations?
Well one simple trick that can make a big difference is to add colorful accent borders to parts of your interface that would otherwise feel a bit bland.
For example, along the side of an alert message:
…or to highlight active navigation items:
…or even across the top of your entire layout:
It doesn’t take any graphic design talent to add a colored rectangle to your UI, and it can go a long way towards making your site feel more “designed.”
Have a hard time picking colors? Try choosing from a constrained palette like Dribbble’s color search to avoid feeling overwhelmed by the endless possibilities of a traditional color picker.
When there are multiple actions a user can take on a page, it’s easy to fall into the trap of designing those actions based purely on semantics.
Frameworks like Bootstrap sort of encourage this by giving you a menu of semantic styles to choose from whenever you’re adding a new button:
“Is this a positive action? Make the button green.”
“Does this delete data? Make the button red.”
Semantics are an important part of button design, but there’s a more important dimension that’s commonly forgotten: hierarchy.
Every action on a page sits somewhere in a pyramid of importance. Most pages only have one true primary action, a couple of less important secondary actions, and a few seldom used tertiary actions.
When designing these actions, it’s important to communicate their place in the hierarchy.
“What about destructive actions, shouldn’t they always be red?”
Not necessarily! If the destructive action isn’t the primary action on the page, it might be better to give it a secondary or tertiary button treatment.
Save the big, red, and bold styling for when that negative action actually is the primary action in the interface, like in a confirmation dialog:
If you enjoyed this post, be sure to visit RefactoringUI.com and subscribe to get notified when we publish something new.
AI-driven updates, curated by humans and hand-edited for the Prototypr community
