Tutorial 5: An Introduction To Color Theory

Introduction

Welcome back to the fifth (and final) day of your UI design short course! The course may be coming to an end, but remember—this is only the beginning of your journey towards a career in UI design. Today, we’ll be using color and imagery to bring our app screens to life. We’ll get to know the basics of color theory, and learn how to work with colors and imagery in Adobe XD. We’ll also learn how to export and save your work to pass onto web developers and other key stakeholders. 

By the end of this tutorial, you’ll not only have a polished app screen to show off to friends and family—you’ll also have a solid foundation in UI design knowledge to serve as a jumping-off point for your journey towards becoming a fully-fledged UI designer!

Here’s what we’ll be learning today: 

1. Introduction to color theory 
2. Color systems 
3. Choosing colors for your app 
4. Choosing imagery for your app
5. Applying color and imagery in Adobe XD
6. Exporting and saving your work  

Let’s finish off strong! 

1. Introduction to color theory 

Color theory is the framework surrounding the use of color in art and design. Recognize the color wheel that pops up on most basic color tools? That’s a modern version of Isaac Newton’s color wheel, which he created back in 1666, and forms the basis of color theory. 

The basic color wheel displays three categories of color: 

• Primary colors: Red, blue, and yellow. 
• Secondary colors: Orange, purple, and green
• Tertiary colors: Magenta, vermillion, violet, teal, amber, and chartreuse. 

If you remember learning about these colors in your school’s art class, you’ve already grasped the fundamentals of color theory!

The color wheel charts these colors and their respective hues, tints, tones, and shades. By being able to visualize how each color relates to the color next to it on the color wheel, designers can create bespoke color palettes that give the interface a balanced and harmonized aesthetic.

Let’s look more closely at these color variants: 

• Hue refers to the pure pigment of a color, without tint or shade. Any of the six primary and secondary colors is a hue.
• Shade refers to how much black is added into the hue. As such, shade darkens a color.
• The opposite of shade, tint refers to how much white is added to a color. As such, tint lightens a color.
• Tone is the result of a color that has had both white and black added to it.
• Color temperature refers to the warmth or coolness of a color depending on what colors have been added to it. Warm colors contain shades of yellow and red; cool colors have a blue, green, or purple tint; and neutral colors include brown, gray, black, and white.

2. Color systems 

Color has two different natures: the tangible colors that can be seen on the surface of objects, and the colors produced by light. These two types of color are known as the additive and subtractive color systems. The third color system, called the HEX system, is concerned with digital colors. 

Let’s take a closer look at what they mean.

The additive color system (RGB)

RGB stands for red, green, and blue, and is based on the additive color model of light waves that dictates that the more color you add, the closer the color gets to white. RGB is primarily used on digital screens.

The subtractive color system (CMYK)

CMYK stands for cyan, magenta, yellow, and black, and it is commonly used in physical printing. CMYK obtains colors by the subtraction of light. 

The HEX color system

The HEX color system is based on a 16-digit system that goes from zero to nine, followed by the letters a to f, where 0 is the lowest possible value and f the highest. These digits are used to produce a “HEX triplet” or six-digit combination of numbers and letters that represent a color called “HEX codes.” Each pair of numbers in a HEX code represents the red, green, and blue components of each color. In web design, every digital color has a HEX code. You can see the HEX code of a selected color in the image below. 

3. Choosing colors for your app

There’s so much more to choosing colors for your app than simply picking your favorite colors. Before you dive into applying colors to your app screens, let’s look at some key considerations to bear in mind: 

Color psychology

To get you up to speed, let’s take a look at some of the most common color associations below:

• Orange is energetic and warm. 
• Red is associated with energy, war, passion, desire, and love. 
• Yellow evokes positivity, youth, joy, playfulness, sunshine, and warmth. 
• Pink evokes feelings of innocence and delicateness, gratitude, romance, softness, and appreciation.
• Blue is perceived as authoritative, dependable, and trustworthy. 
• Green symbolizes growth, freshness, serenity, money, health, and healing. 
• Black represents power, elegance, and authority. 

Depending on which climate change app you’re designing, these color associations are useful for deciding what you want your users to feel. For example, if you’re designing the Ethical Eater app, green, yellow, or orange might elicit emotions that are synonymous with ethical eating, vegetables, and veganism. For the Activist App, blue, green, or black might fit well with the themes of activism and sharing ideas. 

Contrast 

User interfaces containing only shades from the same color family are unlikely to draw users’ attention—and, moreover, run the risk of being a complete headache to navigate. Aim for a mild level of contrast and apply high contrasting colors only for elements that are supposed to stand out, such as call-to-action buttons. 

Stick to UI conventions 

When working with colors, it’s easy to get carried away with aesthetics over practicality. Of course, it’s great to be experimental—but challenging design conventions with edgy or trendy designs can end up giving your users a headache.

Some common UI design color conventions include:

• Using a dark color for text to ensure legibility
• Keeping light colors for backgrounds 
• Using contrasting colors for accents (as mentioned above) 
• Sticking to classic call-to-action colors—such as red for a warning sign

Sticking to these conventions will reduce the cognitive load for your users and allow them to navigate the interface intuitively.

Use the 60-30-10 rule

This popular interior design trick is a great way to keep your interface balanced. This formula dictates that 60% of your website should be made up of your dominant hue, 30% should be your secondary color, and the remaining 10% should be your accent color. Sticking to this formula will allow the eye to move comfortably from one focal point to the next. 

4. Choosing imagery for your app 

Putting imagery into your app screen isn’t a requirement, but it’s a great way to communicate your brand message. As with color, though, using images in your UI designs comes with a lot of consideration about your audience and what you want them to feel. Keeping images neutral, relatable, and diverse is a great way to increase engagement with your digital product. Websites like Unsplash and Pixabay are useful resources when looking for free images for your UI design projects. 

5. Working with colors and imagery in Adobe XD

Now for the practical part! Let’s start with colors. On your artboard, select the shape you want to fill color in. Say, you’ll color your “Login” button with green. Go to your property inspector and click the “Fill” button. A small panel will pop up. Can you see a large colorful section? Well, that’s the Color Picker. Clicking on any part of the Color Picker will change the color of a shape to whatever color is under your cursor when you click. You can also check the hex code for your selected color under the Color Picker.

For some of your shapes, you’ll only need to color the border. For example, look at the “Sign Up” button in the image above. It’s not filled with color and only has a green border. To create a colored border, select the shape and click “Border.” Then follow the same procedure as you did for coloring the “Log In” button. Want to increase the border width? Use the “Size” option just below “Border.”

Next up is imagery. Adding an image to your artboard is very straightforward; you can simply drag the image from your saved files or downloads. However, this may cause problems, as the image you’ve dragged and dropped could end up anywhere on the artboard.

To mitigate this problem, you can first draw a rectangle on your artboard. Think of it as a placeholder for your image. Adjust its height and width, remove the borders and give a light feel so that you know where this rectangle is. Keeping this rectangle selected, drag your image into it. You’ll see that the image is inside the placeholder i.e., the rectangle. Easy peasy!

Now, let’s apply a colored mask overlay on an image. We’ll take the background image of our Activist App as an example.

To apply a colored mask overlay on an image, simply add a rectangle on the top of the image. Make sure the rectangle is exactly above the image, and has no border. 

Now, from the appearance section of the Property Inspector, reduce the opacity to 50% and then click on “Fill” and choose your desired color. For our Activist App, we opted for a blue overlay. 

6. Saving and exporting your work

Once your app screen is looking pretty and polished, and your layers are correctly labeled and formatted, it’s time to save and export your work! 

To export your artboard(s), select File→Export→All Artboards (Mac) or click the Hamburger menu, and Export→All Artboards (Windows). You’ll find something like this:

You have four options for the format of your exported artboards: PNG, SVG, PDF, and JPG. You can also choose which device you are exporting your arboards for. 

For now, export your designs as PNGs and get ready to share your work!

Summary 

Congratulations, you’ve officially completed our UI design short course and designed your very first app screen! Over the last five days, you’ve successfully created a user interface, following each step in the UI design process—from wireframes all the way through to polished product. You also learned the fundamental principles of UI design, including color theory, typography, and hierarchy. You can now share your app screens with friends and family—or with us on Instagram, tagging us @career_foundry!

To put your newfound knowledge to the test, why not follow this tutorial up with our UI design short course quiz? It will only take five minutes, and if you get 75% of the answers right, you’ll get 5% off our full UI Design Program! The quiz will hit your inbox tomorrow, so stay tuned.

We hope you found this short course useful, and that you’re happy with your app screen. To learn more about the full UI Design Program—and a career in UI design—don’t hesitate to get in touch with a program advisor. They’ll talk you through your previous experience and provide you with personalized advice on your next steps. 

See you soon!