Influencing Product UX With Colors, Imagery, Typography

It’s said that a picture is worth a thousand words.

When speaking from a product design and branding perspective, the “picture” in question comprises images, colors and fonts. Brands can convey a lot to users using these elements. Users, in turn, can feel and interpret a lot from these three elements.

Let’s break that down — starting with color. 

Adding a Little Color to Your UI

As a product manager who’s been schooled by the many product designers I’ve worked with, I have come to understand that color is both an art and a science.

So while red is often associated with danger, such as the “please fill required fields” error messages it’s also a color associated with passion and appetite.

Let’s take a look at a few examples.

Photo Credit: Craftsy



You can see how the online education platform Craftsy — aimed at those who are passionate about their craft and those who are curious to learn a new craft — uses red as one of its key colors. But it’s not used to alarm us and gives us a feeling of warmth, especially when combined with the orange colors. It brings to mind autumn and spending time indoors perfecting one’s craft.

Home shopping service  QVC relies on its audience having a strong appetite and passion for shopping. Here also, we see red (in varying shades) used prominently. But red is also used in a different way to alert users — in this case, when a deal is about to expire. The color is calls attention to the countdown.

But what about other colors? What do they convey? Let’s take a look at the color green.

As you’ve probably guessed, green is associated with money and financial wealth. It’s no surprise that the money management software, Mint, uses it as part of their product identity.

Photo Credit: Mint

Although green is often linked with money, there are brands in the financial industry that choose to go with other colors. That’s the case with Dough, an investing platform which uses orange as its main color.

Photo Credit: Dough

At first glance, it may seem like just an attempt at being different. But upon closer inspection, we see that Dough is not just about investing money — it’s about making investing and trading less intimidating for the regular person. Orange is a color associated with confidence and autonomy and as such, it’s a perfect choice for this product

If you want to learn more about the visual nuances of UI design, check out the free e-book Web UI Design for the Human Eye.

Building Emotional Connection With Images

Images remain a classic and incredibly powerful means of communicating and and making memorable first impression. And given that it takes users just a few seconds to evaluate a new site or app, images become even more critical for connecting with users and converting them into dedicated users.

Photo Credit: Kabbage

Business loan provider, Kabbage, uses  relatable imagery on its homepage. With warm smiles, heads slightly tilted, and relaxed postures, the two individuals featured on the homepage provide a welcoming vibe for the brand. Something that the small, local businesses that are the brands target will appreciate.

Photo Credit: Bevel



For the luxury shaving system Bevel, the homepage gets straight to the point by featuring an image of all the products that are part of its shaving kit. This brand targets men that not only want a luxurious look and feel, but something a little vintage as well. All of that is immediately conveyed via the homepage picture, which showcases the brand’s products while strategically highlighting the sleek design of its razor. Of course, the razor is the centerpiece, since its design is paramount to the shaving experience.

Grab design ebooks created by best designers

All for free

Download Download Download DownloadDo you want to know more about UI Design?

Download 'Color Theory in Web UI Design' FOR FREE!

Download e-book for freeClose
Use Typography to Build Character

When it comes to fonts, there are many subtleties that you can get into. What’s important for product managers to know is that typefaces can trigger certain emotions in people. Much like how colors and images change our perceptions.

Take JetSmarter for instance. The site’s goal is to make private air travel as “ubiquitous as a commercial flight.”

Photo Credit: JetSmarter

Given this objective, the font used has to feel accessible and inviting. But since we are talking about private travel, which financially is not within the average person’s reach, the font choice also has to have an element of luxury and exclusivity. This is exactly what we see when we look at the website that uses serif fonts – generally viewed as classic and formal. 

Contrast this with the jewelry brand Chloe + Isabel. The brand targets the “modern woman” and combines elements of social retail and eCommerce. The goal is to give young women opportunities to experience entrepreneurship and creativity. It’s no surprise that the logo uses a decorative, sans-serif (often considered as more informal) font. The rest of the site uses a combination of serif and sans-serif fonts, with the informal sans-serif used for top level information (such as main headings) and the more demure serif, used for second tier information.

Photo Credit: Chloe + Isabel

Unlike JetSmarter, which favors serif fonts 100% of the time, Chloe and Isabel opts to mix serif and sans serif, most likely in effort to convey its youthful spirit along with the discipline required for entrepreneurship.

How Does the Product Strategy Fit Into All This?

The items discussed in this section are far from being an exact science. Each designer will play with them in various ways. However, what will help make the designer’s play more fruitful is having as much insight as possible into the target user. Basic information such as the following is critical for designers:

Who is the end user?
What problems are they facing?
What are the brand values and what type of emotions does the brand and its products wish to evoke?

The first two questions are part of the product manager’s domain and strongly influence design and branding decisions. Therefore, it’s important that product managers understand how images, colors and typography shape user experience. This understanding will allow product managers to collect and provide user data that will be most relevant for product designers.

Feature image credit: The Next Web

The post Influencing Product UX With Colors, Imagery, Typography appeared first on Studio by UXPin.