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.
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.
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.
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.
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.
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 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.
To sum up, always ask yourself these questions:
- How many fonts have I used?
- (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?
- Can I easily read text on top of images? Can it be read on various devices? If not, add an overlay on the image.
- 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.
- How many colors am I using? Try experimenting with more or less color, and try limiting the use of colored text.
- Do my paragraphs and pictures have enough room to breathe? Try increasing or decreasing the amount of whitespace to improve your design.
- Do all of my pages or posts have the same navigation? Try to keep the scroll and click patterns the same across the board.
- Do all of my pages have the same general design? If not, try keeping the colors and layout the same on all your pages.