Little UI details

I'm gonna show you little UI details that can really improve your user experience by providing a nice interface. This tips are not mine, they're from @steveschoger on Twitter. All credits to him!

1. Color icons slightly lighter than labels

If you have icons next to labels, you can color them slightly lighter than the text that goes with them. This will make the most important info (the label) pop out.

  • Home
  • Hotels
  • Flights
  • Relax

2. Add a subtle shadow to white text on bright background.

If you need to use a bright background color, and white text on it, you can put the text a nice subtle shadow to make it more readable.

Orders

$128,421.01

Total revenue

4181 sales

3. Make your gradients vibrant by changing the hue instead of the lightness.

When you use a gradient, in a button for example, be sure to change the hue to give the button a more "vivid" look.

4. Shift buttons 1/2px up/down for a nice hover effect.

In addition to this effect, you can increase the size of the shadow to give the effect of "lifting up".

5. Give your box shadow a slight vertical offset.

This will give cards, boxes, or any other graphical element a more natural look than when no using any offset.

$128,421.01

Total revenue

4181 sales

$1,009.84

Yesterday

36 sales

$108.22

In the last hour

3 sales

6. Align text properly to make your content more scannable.

If your text is aligned properly (e.g. on the same line as the icons, or images), your text will be eaiser to read for the user.

Databases

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam deserunt ex ea debitis natus assumenda repellat, culpa veniam, pariatur.

Configuration

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam deserunt ex ea debitis natus assumenda repellat, culpa veniam, pariatur, alias dolore illo amet.

Proxies

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam deserunt ex ea debitis natus assumenda repellat, culpa veniam, pariatur, alias dolore illo amet.

Security

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam deserunt ex ea debitis natus assumenda.

7. Grey color always look off on colored background.

Either saturate your text with the same hue as the background, or use rgba with a lowered opacity to make the color of the text combine better with the background.

Discover more

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit molestiae nihil iusto mollitia amet provident, expedita dolorum facilis porro! Hic laboriosam.

8. Use an icon instead of the standard bullet in unordered lists.

Using icons such as arrows or checkmarks will give more life to otherwise boring unordered lists.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam ad, excepturi quia molestias quisquam sit unde omnis a voluptate blanditiis accusantium! Voluptas itaque laborum, accusamus dicta nobis harum. Earum, a?

  • Lorem ipsum dolor
  • Consectetur adipisicing
  • Dicta nobis harum
  • Voluptas itaque laborum
  • Accusamus dicta
  • Excepturi quia molestias

9. Use a hint of color at the top of your hero.

This can bring liveliness to your design, complementing the accent color of your website.

  • Home
  • Tour
  • Pricing

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi ipsa.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto suscipit officia maiores.

Sign Up Now

for a 30 day trial

10. Add a gradient border to modals or panels.

Similar to the last tip, this will also work great in modals or panels. You can even use a two color gradient to make it look even better.

11. Use contrast between two adjacent boxes instead of a line.

Using two slightly contrasted colors instead of using a line will be more pleasing to the eye and look more clean.

12. Use color and weight to create typographic hierarchy.

Not only using weight is enough, when you use color you have a well defined hierarchy between the title and the descrpition.

1

Lorem ipsum dolor.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique quos, veniam, accusamus quo error fuga perspiciatis.

2

Lorem ipsum dolor.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique quos, veniam, accusamus quo error fuga perspiciatis.

3

Lorem ipsum dolor.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Similique quos, veniam, accusamus quo error fuga perspiciatis.

13. When in doubt, 16px font size with 1.5 line height looks nice for body text.

Also, you can use a dark shade of gray instead of black to ease the look for the user (instead of using high contrast black and white).

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque distinctio itaque quas necessitatibus excepturi ut corporis inventore fugiat amet, exercitationem accusantium repellendus, ex incidunt quia mollitia eligendi doloribus! Sit, voluptatibus.

14. Increase your letter spacing in all-caps text.

This will give the text some space to breath and will make it easier to read for the user.

Lorem ipsum dolor sit amet.

Increase your exposure.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum expedita rem qui, ullam voluptatibus aut quas, quo explicabo esse quidem voluptas similique, eius velit maxime. Ipsam ab aliquam distinctio rerum!

15. Use keylines to group similar content together.

This will make the content appear connected, and it will be easier for the user to understand it.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat minus dignissimos magnam natus ratione.

Sign up for our newsletter

16. Create a great hero banner with blend-mode: multiply

Using blend-mode with a desaturated photo and a background color gives a nice contrast to your hero banner with white text.

  • Work
  • Services
  • Team
  • Contact

Your ideas are bigger than you think

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste debitis labore aspernatur ullam rerum, architecto hic quasi.

Learn more See the work

17. Overlap elements to create depth.

This will also encourage users to scroll and reveal the rest of the content.

Coming Soon

Next Big Thing

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime in recusandae corrupti molestiae ab nulla perspiciatis iusto. Atque vitae.

Lorem ipsum dolor, sit amet consectetur. Desereunt earum dolores error iusto velit possimus natus.

Are you ready for the Next Big Thing?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint cupiditate impedit accusamus beatae neque maxime in molestiae a ratione sed provident doloribus suscipit, saepe modi consequatur cumque et quas autem.

18. Don't use bold color for negative action if it's not the main action.

This may confuse the users, instead use a subtle gray or light color.

19. Create hierarchy for your buttons.

Your primary action button should stand out more than secondary/danger buttons.

20. However, use red if you are confirming a high severity action.

If you don't use a color like red for confirming a high severity action user may think there's no danger in it.

Are you sure you want to delete?

21. Make the border of buttons lighter than the text.

This will make them stand out.

21. And finally, avoid using borders, instead use background colors.

Too many borders can make a piece of UI look cluttered. This may be distracting the user from the main goal.