Tips for Good UI Design

Avatar of Neil Gebhard Neil Gebhard
/

Good UI design allows you to create a user interface that is both functional and beautiful. Well-designed websites are easier to use and a pleasure to interact with. It removes obstacles and barriers to the core features of your product. Here are some small tips I've picked up along the way that are timeless and widely applicable.

Inline links in a paragraph may need help distinguishing themselves as interactive.

However, if you have a list of items that are links, it is often understood by users that they are clickable.

In the following picture, you can see a list of items that have links which are blue. Indicating that the items are links with color is redundant and overbearing.

šŸ‘Ž List of blue links

You can see in the following picture that emphasizing with bold text is a much more effective way of getting the point across that they are links. An additional hover effect with an underline is a nice touch as well.

šŸ‘ List of black links

Use line-height to help the reader find the next line of text more easily.

When text is small, you may struggle finding the next line as you're reading through a paragraph. You may even find yourself reading the same line twice or skipping a line. Increasing line-height for small text solves this problem.

šŸ‘Ž Paragraph with small line-height

šŸ‘ Paragraph with large line-height

Large text, such as a heading, do not have this problem. Smaller line-heights are recommended in this case.

šŸ‘Ž Header with large line-height

šŸ‘ Header with small line-height

Keep paragraphs of text between 45-75 characters per line.

It turns out that having text ordered in this fashion makes for an optimal reading experience. Your eyes are able to absorb lines of text with more facility. Tracking text from line to line becomes a breeze.

šŸ‘Ž Paragraph with many characters

šŸ‘ Paragraph with optimal characters

Keep visual hierarchy in mind

Use font size, font weight, color, and spacing to draw attention to the more important aspects of your UI.

Conversely, de-emphasizing by using a lighter text color is prudent. De-emphasizing by using a smaller font size is not advised because it sacrifices readability.

šŸ‘Ž UI Component without visual hierarchy

šŸ‘ UI Component with visual hierarchy

With these simple tips, you can level up the UI components of your web application. Here, we used different styling properties to improve their visual aesthetic and make them more pleasurable to experience. Now your next challenge is to figure out how to apply them in your own projects.