Jay Taylor's notes

back to listing index

7 Practical Tips for Cheating at Design – Refactoring UI – Medium

[web search]
Original source (medium.com)
Tags: design medium.com
Clipped on: 2018-02-21

Image (Asset 1/34) alt=

Similarly, two font weights is usually enough for UI work:

  • A normal font weight (400 or 500 depending on the font) for most text
  • A heavier font weight (600 or 700) for text you want to emphasize
Image (Asset 2/34) alt=

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.


...

2. Don’t use grey text on colored backgrounds

Image (Asset 3/34) alt=

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.

Image (Asset 4/34) alt=

There are two ways you can reduce contrast when working with colorful backgrounds:

1. Reduce the opacity of white text

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.

Image (Asset 5/34) alt=

2. Hand-pick a color that’s 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 washed out.

Image (Asset 6/34) alt=

Choose a color that’s the same hue as the background, adjusting saturation and lightness until it looks right to you.


...

3. Offset your shadows

Image (Asset 7/34) alt=

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:

Image (Asset 8/34) alt=

If you’re interested in learning more about shadow design, the Material Design Guidelines are a fantastic primer.


...

4. Use fewer borders

Image (Asset 9/34) alt=

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:

1. Use a box shadow

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.

Image (Asset 10/34) alt=

2. Use two different background colors

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.

Image (Asset 11/34) alt=

3. Add extra spacing

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.

Image (Asset 12/34) alt=

...

5. Don’t blow up icons that are meant to be small

Image (Asset 13/34) alt=

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”.

Image (Asset 14/34) alt=

If small icons are all you’ve got, try enclosing them inside another shape and giving the shape a background color:

Image (Asset 15/34) alt=

This lets you keep the actual icon closer to its intended size, while still filling the larger space.

If you have the budget, you could also use a premium icon set designed to be used at larger sizes, like Heroicons or Iconic.


...

6. Use accent borders to add color to a bland design

Image (Asset 16/34) alt=

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:

Image (Asset 17/34) alt=

…or to highlight active navigation items:

Image (Asset 18/34) alt=

…or even across the top of your entire layout:

Image (Asset 19/34) alt=

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.


...

7. Not every button needs a background color

Image (Asset 20/34) alt=

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:

Image (Asset 21/34) alt=

“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.

  • Primary actions should be obvious. Solid, high contrast background colors work great here.
  • Secondary actions should be clear but not prominent. Outline styles or lower contrast background colors are great options.
  • Tertiary actions should be discoverable but unobtrusive. Styling these actions like links is usually the best approach.
Image (Asset 22/34) alt=

“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.

Image (Asset 23/34) alt=

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:

Image (Asset 24/34) alt=

...

If you enjoyed this post, be sure to visit RefactoringUI.com and subscribe to get notified when we publish something new.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.

  • Image (Asset 25/34) alt=