7 Tips to Simplify and Improve your UI Design

Emma Baumgartel
Jul 10, 2020 · 6 min read

The Importance of Good UI

The average adult spends between 3 to 4 hours on their phones daily. Even though they might not have any knowledge of how to build apps or websites, they can very well distinguish a good app vs a bad one. This is clearly reflected in the time they spend using it. A lot of it boils down to intuitive user experience and unobtrusive user interface. Today, User Interface Design is an integral part of building user trust in your website or app. Good UI design, with clear, familiar icons, consistent color palette, copy, and sizing allows the user to quickly and easily navigate through your product. It may be overwhelming to revamp an existing site or app but there are small things you can do to take your UI Design to the next level. There is always something to improve upon in your UI design, whether that be in your graphics, color palette, site navigation tools, icons, fonts sizes, and spacing.

If you are unfamiliar with basic UI design elements, please view this incredible UI glossary put together by Career Foundry.

In this article, we will give you 7 simple ways you can transform your UI Design elements and make your apps and websites more visually appealing and comprehensible for the end-user.

Fonts: One is perfect, two is fine

Limit and restrict yourself to one font. We recommend using a sans-serif typeface such as Helvetica. It’s easy to read and renders well on small and large screens. There are usually different weights that you can experiment with. For example, a Heading (H1) can be bold or have a stronger font-weight than regular text (p) which can be regular or even light. You can also experiment with colors to distinguish and establish hierarchy. If absolutely necessary, you can upgrade to two fonts for your designs (set one for headings and one for other text, such as paragraph, captions, etc.) Setting these ahead of time will prohibit information analysis paralysis. Very rarely do we see more than two fonts being used in designs and when that happens, it’s always with intent.

Photo depicting how many fonts result in poor UI design
Photo depicting how many fonts result in poor UI design
Too many fonts make a layout look amateur

Always maintain Readability

If your text and background image are similar enough in color, your text is unable to stand out. This makes it harder to read and ultimately forces the user to either skim past or simply bounce off your site. This can be easily fixed. One, you can add an overlay on your image to slightly darken or lighten your background image depending, on your font color. You can also achieve a similar effect by reducing the opacity or the image. Another way of achieving this is by adding a shadow around your text. Although this may be a quick fix, it works really well on certain backgrounds.

Two images comparing readability of text depending on the background image
Two images comparing readability of text depending on the background image
Adding an overlay makes your text readable

Check Alignment of your content

Alignment plays a crucial role when deciding how you want your content to be read. You will rarely see long-form text aligned centered or to the right. This is especially true for blog posts and other large blocks of text, it’s always a good idea to align your text to the left or justify rather than aligning it to the center. Please note that there are still certain scenarios where the centered text is appropriate. Some examples of this include small titles or passages, quotes, social proof, etc.

Showcasing left alignment is better than right alignment
Showcasing left alignment is better than right alignment
Long-form text looks better when aligned left

Color: use it wisely

Though color can be extremely powerful to relay a message, use it sparingly, and only when you’re trying to communicate the most important parts of your content. For example, for a blog post, you wouldn’t have all your text a bright green — save that for the section titles, image captions, and other areas that break up your text. Colors are also extremely important to define design hierarchy. You can desaturate less important text to control where you want eyeballs to go. Finally, we recommend you to keep colors consistent and define a palette before working on your designs. There are millions of combinations for colors and you can spend hours figuring out what grey looks good or which shade of purple fits your use case. Avoid these dilemmas — they’re a time drain. Set a palette, stick to it. Iterate over time, if necessary.

Two version of the same UI design; one has its color placed correctly while the other does not.
Two version of the same UI design; one has its color placed correctly while the other does not.
Using color in the right places to present information in the best way

Whitespace is just as important as your content

Whitespace is extremely important for your content’s readability. Clustered text and pictures are overwhelming and confusing to the user. However, there is a balance — too much whitespace leads to too much scrolling and frustration from the reader when they cannot scan quickly. Give your content enough space to breathe. Before releasing, make sure to test your whitespace on different devices to ensure readability. A line-height of 1.5 to 1.625 is a safe bet for most fonts.

Comparison of presenting text without white space on the left and with white space on the right
Comparison of presenting text without white space on the left and with white space on the right
White space makes all the difference in the presentation of your text

Design patterns complement your brand identity

Creating a completely new click or scroll pattern for your interface is unnecessary and usually isn’t impressive to the user. Use patterns that the user is already familiar with, such as including a navigation bar at the top of your site (seen on most websites) rather than having your website’s features in a list on the bottom that your user will have to scroll through to find.

Design patterns your users would be comfortable with.

Design Consistency: Make the user remember you.

Keep your designs similar across all your avenues — web, app, mobile, social. Users like to see familiarity when they return to your site or come back to your social media profiles. Try to keep the colors and fonts consistent as much as you can. This will reinforce viewers to associate better between you, your products, and your brand. This also ensures that your user doesn’t get confused or lost when clicking through your site.

Airbnb design philosophy and consistency
Airbnb design philosophy and consistency
Airbnb follows the same design pattern across its app, website, emails, and even in offline goodies.

To sum up, always ask yourself these questions:

  1. How many fonts have I used?
  2. (If more than one font) Can I simplify my website or will it be easier on the eyes to limit my fonts on that page?
  3. Can I easily read text on top of images? Can it be read on various devices? If not, add an overlay on the image.
  4. What parts of my site are centered? Does it look better shifted to the left? Pro-tip: Define alignment based on devices. It may be good to center on small phones but left-aligned on larger displays.
  5. How many colors am I using? Try experimenting with more or less color, and try limiting the use of colored text.
  6. Do my paragraphs and pictures have enough room to breathe? Try increasing or decreasing the amount of whitespace to improve your design.
  7. Do all of my pages or posts have the same navigation? Try to keep the scroll and click patterns the same across the board.
  8. Do all of my pages have the same general design? If not, try keeping the colors and layout the same on all your pages.

Did you find this useful? Find the best design courses at www.quze.co. We also have a free upcoming design webinar. Sign up here to get notified!

Sources:

https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html

https://uxdesign.cc/9-simple-tips-to-improve-your-ui-designs-fast-377c5113ac82

https://www.getcloudapp.com/blog/ui-design

https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/color/

https://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html

https://uxmovement.com/content/why-you-should-never-center-align-paragraph-text/

Quze | Never Stop Learning

Collective thoughts about skills, future of education, and project-based learning.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store