Product Design

A Beginner's Guide to Great Visual Design

WillowTree default article featured image

Recently, a friend of mine asked if I would take a look at an app he was developing. He didn’t have much design knowledge and needed advice on how to make the app better, and how he could create the best user experience possible. After talking with him more and taking a closer look at his app, I helped him make some basic design changes that will go a long way towards ensuring a positive user experience. Helping my friend made me think about others who might be struggling with app design, from developers and new designers to clients trying to learn how to communicate more effectively about design.

In today’s post, I’ll go over some basic tenets that make up the foundation of good design, drawing examples from my experience as a mobile UX Designer here at WillowTree. These principles should help you create the best user experience possible in your app, but they’re also applicable in many other areas of design as well.

Hierarchy in Design One of the main principles of design is hierarchy. When people look at their screens, a well-planned hierarchy is what helps them quickly scan through content and find what they’re looking for. The best designers use hierarchies to lead users’ eyes to the most important items on a screen. There are a number of ways to create great visual hierarchies, and today we’ll explore three of the most important ones:

  1. Spacing
  2. Color
  3. Size

1. Spacing In the design world, spacing around objects is typically referred to as white space. Not enough white space around objects can create a cluttered look, taking away from the readability and usability of your app. Conversely, too much space isn’t a good thing either. It can cause objects to seem too disconnected from one another when they might need to be grouped closer together. A good rule of thumb is to make sure any text or icons are 30px or 48dp (for iOS and Android apps respectively) from other objects or the side of the screen. Having the right amount of spacing around your objects looks great, and also helps to bring clarity and order to your design.

spacing-good-bad

** 2. Color ** Color has a huge impact on how a user feels when looking at an app. It’s important to cultivate a thorough understanding of color as a designer, and to learn what different colors signify. For example red is a very high-visibility color that’s frequently associated with danger. For this reason, it’s often reserved for error states or to quickly direct a user’s attention to important messages, and not as a main color in an apps (at least in most cases).

In your app, it’s good to start out using only one or two main colors throughout, and to reserve an additional accent color for actionable items. You’ll also want to make sure your main colors and your accent color work well together and don’t compete for attention.
color-good-bad

** 3. Size ** Size is another simple way to help a user understand what’s important, and where they should direct their focus in an app. For the most part, the bigger the element is, the more attention it will draw from the user. All of the elements need to work together to create a strong visual hierarchy.

One easy way to create a good hierarchy is to follow the guidelines provided by Apple and Google. Both highlight the default text sizes for various elements, such as the difference between a header, subheader, or body text. They also do a good job of defining icon sizes that work well with their defined text sizes.

Not only does your app need a good visual hierarchy, but the touch target size needs to be kept in mind as well. For iOS apps and Android apps, the minimum touch target sizes are 44px and 48dp, respectively. This is critical to ensure that users can easily and reliably tap actionable items with their finger. Anything smaller than that will cause people to struggle while interacting with your app, creating a poor user experience. This doesn’t mean that your icons or buttons need to be that big visually, it just means that when it comes to development, the area around the element should be at least that size.
size-good-bad

** Just the Basics** Of course, I’ve only gone over a few basics in this blog post, but if you’ve read this far you at least have a solid start on the road to improving your design skills. Remember, Apple and Google both do an excellent job of laying out guidelines to follow when designing apps for their respective platforms. By following the three principles above and the guidelines provided, you will be well on your way to creating better designs and better experiences for your users!