Use accent borders to add color to a bland design - Deepstash

Use accent borders to add color to a bland design

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?

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.

14 STASHED

MORE IDEAS FROM THEARTICLE

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. 

15 STASHED

Use color and weight to create hierarchy instead of size

A common mistake when styling UI text is relying too much on font size to control your hierarchy.

Try and stick to two or three colors: 

  • A dark color for primary content
  • A grey for secondary content
  • A lighter grey for ancillary content

16 STASHED

3 LIKES

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

14 STASHED

When you need to create separation between two elements, try to resist immediately reaching for a border. 

14 STASHED

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.

14 STASHED

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.

14 STASHED

1 LIKE

Deepstash helps you become inspired, wiser and productive, through bite-sized ideas from the best articles, books and videos out there.

GET THE APP:

RELATED IDEAS

Start with habits you can't say no to

Start extremely simple and work your way up. There's always room to increase the difficulty later.

If you want to build an exercise habit commit to 1 minute per day instead of an hour per day. If you want to build a writing habit start with 3 sentences per day instead of an entire page.

368 STASHED

Mastery Also Involves Boredom

Mastery does not happen by chance. If you want to fulfil your potential, you must practice consistently at a specific skill over a long time. But the top performers in any craft also figure out a way to fall in love with boredom or monotony that comes from putting in the hours and doing the work.

Whenever people share the stories of successful people, they often omit how top performers fall in love with boredom while trying to build a habit of what they should do.

350 STASHED

19 LIKES

Manage your expectations

We all need uninterrupted work time every day, regardless of our role. Unbroken work makes us more motivated and focused. Yet uninterrupted calendar blocks are hard to design into a schedule.

We can't productively attend to meeting-heavy days while also spending hours on uninterrupted work time. We need to manage our expectations about what we can accomplish.

121 STASHED

13 LIKES