Visual design ≠ UI design. Where UI design tends to focus on usability, task time, and reducing cognitive load, visual design is about emotion and brand identity.
What you’ll learn
- Visual design
- Brand identity
- Meaning and emotion
- Color and typography
- Photography and imagery
Visual Design vs. UI Design
Visual design and UI design are quite often mistaken for meaning the same thing, however, the truth isn’t as black and white as we might think (pun not intended 😅).
Visual design is about appealing to the user emotionally, however, UI design focuses on usability and accessibility. Where visual design is about form, UI design is about how the form aids the function, although, since users do enjoy things that are visually appealing, we can conclude that visual design nonetheless adds to the user experience.
In this article we’ll take a look at how.
Let’s start with color 🎨.
Bandit Wines (below).
Colors are tricky business. Colors have meaning, but these meanings aren’t universal. For example, red can mean danger and error in the Western world, but wealth and prosperity in the Eastern world. White can mean death, purity, and cleanliness, so when using color, we have to think about what the user will associate them with.
Here’s a fantastic article by Canva that talks about the different meanings of color around the world. With these color meanings in mind, always consider the target audience (tracking analytics). When in doubt, consider using neutral colors or delivering a targeted experience (for instance, a different website for Asian markets).
Also, we should bear in mind that a surprising amount of users are blind/colorblind. For more information on that, you might enjoy our article on accessibility standards 💯.
Color Scheme Generators
Our #1 recommendation for choosing colors is the Coolors app, which helps with color inspiration and exploration, color tweaks, testing alternative shades, simulating color blindness, color scheme generation from an uploaded image, and allows for clipboard copying of colors in a variety of digital color formats (HEX, RGB, RGBA, HSB, CMYK).
Gradients (i.e. a color transition of at least two colors) are low-resource way of implementing visuals beyond static colors. Gradients can be very calming, and/or add an element of depth that makes layouts feel much less flat/more dynamic. Not only that, but they can also influence the order in which we look at elements on the screen.
Check out UIGradients 👌.
Gradients, colors, etc…how do these affect our brand identity? What else can affect our brand identity? Before we answer that, let’s clarify what we mean by “brand”.
A brand is the overall, aggregated perception of a company (or person) by those who’ve formed an opinion of said company, regardless of whether or not they’ve ever even engaged with them in a meaningful way. For example, scandalous stories (true or false) can hurt brands significantly, causing both current and future customers to turn towards a rival competitor instead. Just like how scandals can hurt a brand, giving the wrong impression through visual design can have hugely negative effects as well.
For example, if we need to come across as laid-back, sociable, and friendly (like Facebook), but we choose red as our primary brand color, users could easily mistake our brand for being too intense (since red can mean fire, heat, blood, energy, and so on). It would be confusing for users, since that’s not who we are, and it wouldn’t make business sense since users aren’t looking for social network with an intense vibe.
While branding strategy isn’t just about visual design (credible endorsement from authority figures, tone-of-voice, UX, and overall customer satisfaction also factor into the equation), color, typography, photography, illustration style, and overall visual aesthetic can affect the way that we think about a company (even subconsciously).
Let’s take a deeper look at some of the contributing factors of brand identity design.
Much like colors, typefaces affect the way that we feel about a brand as well.
Just like how mid-blues are known to be rather friendly colors, and darker blues somewhat elegant and serious, sans-serif and serif fonts respectively can have the same effect. By choosing our fonts wisely, and thinking about how we’d use them in conjunction with UX copy, color, photography, and so on, we can form not only a visual aesthetic, but a brand design that users will remember in a very positive way.
Photography and Imagery
Photography and imagery tends to hit users more emotionally, especially when the subject contains living things (and even more so when the subject includes humans, animals, faces, visible signs of emotion, and expressive concepts). People can relate to imagery more than they can abstract formations such as typography and color (illustration can have the same effect, but this depends on the subject and fidelity).
Photography usage should consider:
- Emotional design (making users feel a certain way)
- Meaningful design (making users care about something)
- Persuasive design (making users take action as a result of caring)
If we consider the user intent, we can take advantage of the user’s emotions. For instance, for a user that cares about animals, visiting an animal charity website, emotional photography can be the persuasive nudge that they need to donate.
Positive reinforcement across all customer interactions (for example: website, app, social media, advertising, customer service) is what makes a brand identity memorable, and this includes experiences that happen offline, before conversion, and after conversion too. Creating meaningful experiences time and time again builds trust, shows reliability, and communicates to the user our brand identity isn’t a faux show.
In terms of visual design, this means creating (or implementing, if one already exists) a strong, unified visual aesthetic that brands will remember and instantly recognize.
Style, or “Design Trends”
Design trends—we really shouldn’t care about these. Design should compliment a desire or need of the user, not a designer’s adoration of a certain visual aesthetic. On top of that, design trends change so quickly it becomes impractical to implement them, and our long-term brand identity is far more important than any short-term fad. But that being said, some visual styles are timeless and offer a decent base to work with.
Skeuomorphism vs. Flat Design
Skeuomorphism is an outdated design trend (or is it?) meaning to design UI elements like real world objects (i.e. textures, shadows, the whole shebang). Think: Apple’s wooden bookshelf visual aesthetic used for iBooks (way back when). Apple hammered the final nail in the coffin for skeuomorphism with iOS7’s fresh “flat design” look, apparently confirming the ideology that minimalist visuals were the future of design.
Personally, we miss the bookshelf—it was fun, and instantly recognizable! 😅
While skeuomorphism can work really well when executed correctly (the same with minimal/flat design, we’re not advocating one or the other), flat design caught on because (in theory) it made user interfaces look simpler, and therefore easier to use.
But flat design lacked depth and clarity. It was harder to see which elements were clickable, it was boring, and it was often used thoughtlessly. And then Flat 2.0 come about, which was not as flat, but still somewhat abstract. The benefits still include a cleaner design and reduced cognitive load, as with all minimalist designs, but it has an element of depth so that the usability and accessibility of the UI isn’t compromised.
Minimalism has an abundance of advantages. Minimalist layouts are clean, they load faster, they’re easier to implement and maintain, and the visual hierarchy is often better. But like with all design trends, implementing minimalism for the sake of it (rather than thinking about how it aids usability and visual design) is a recipe for disaster, and this is how “flat design” came be known as the ugly duckling of minimalism (well…eventually).
Francois Risoud (below, using minimalism where minimalism makes sense).
So whether we take a skeuomorphic approach, a minimalist approach, something in-between, or something entirely different, it really depends on the target audience, the nature of the application, and our brand identity (and not what’s currently in fashion).
Popular Visual Design Trends
We’re neither recommending, nor not-recommending these.
Consider them inspiration!
- Hero header
- Geometric shapes
- Big type, other typography trends
- Google “design trends” (the list is endless)
Designing a visual aesthetic is a mixture of art and science, and somewhat comes down to instinct. Instinct is a human feeling, so when designing for emotion, emotion itself (specifically, empathy for how others are feeling) can be a valuable asset. We can then validate our visual design ideas and brand identity with a brand perception test.
Learn more in our ebook, A Beginner’s Guide to Designing UX 💪.
Daniel Schwarz is a UX/UI designer, web developer, and maker by background, but a writer, editor, 5x author, and teacher at heart. Currently a design blog editor at SitePoint (ex Toptal), writer at .net Magazine and Web Designer Magazine, but occasionally a collaborator with top design companies such as Adobe and InVision.