Designer and engineer. Still a pretty big fan of Kanye West. http://juweek.xyz

May 19, 2017

Why Young Designers Suck: Color

How not to suck at color

I’m a self-taught digital designer living in Brooklyn, NY and, frankly, I’m not all that. Each article, I’ll take a look into my workflow and really dissect what differentiates it from that of better, more experienced designers.

This week, I’m talking about color.

A bit about color

It’s hard to be any sort of visual creative without being aware of the impact color can have on a product. Picking the perfect palette can be the difference between designing a banking app that makes you nervous about sending money to friends and one that soothes such anxieties.

That being said, the way colors currently are integrated in my workflow isn’t perfect. The biggest criticism I would give myself — and other young designers — is designing for accessibility. Often times, we get limited to choosing a palette that looks good and accompanies the brand’s image well, then move on to the next step without thinking of all the edge cases. In user interface design specifically, colors derive meaning more from contrast with other elements on the screen than from objective associations. Making sure that these associations are perceivable by everyone who uses your product is imperative for a design to be successful.

Here are a few ways we can do this.

1. Design for color blindness (lots of contrast)

In the sphere of design, accessibility is mostly defined as the ability of the product to reach as many people as possible. Undoubtedly, accessibility is something that must be baked into good design, and if it’s not there, then the design simply isn’t very good.

About 4% of the population have low vision, whereas 0.6% are blind. 7 to 12% of men have some form of color-vision deficiency (color blindness), and less than 1% of women do. Source.

Wanna hear something even worse? The baby boomers are getting old. By 2030, one in five US residents will be 65 or older. Outside of color blindness, nearsighted users — something very common in older people — often struggle to read text with low contrast unless they move the screen close to their face.

I know what you’re thinking: aren’t a lot of those blind old people the same assholes who weren’t proactive enough in the saving of our planet’s environment? Don’t a lot of them have bigoted views about sexual preference and gender identity? (🐸 ☕)

Even if that may be true, they still use our products and we have an obligation to make sure our designs are as usable to them as our younger, more liberal users.

Now, there are a few differences we can make in our decision making process to help make our designs more accessible. Firstly, avoiding using non-contrasting colors when displaying text on a background is a must. While you can’t guarantee that everyone will be able to see your app the way you intend, if you’re using contrasting colors, you’ll at least be giving people an app they can use. Likewise, using high contrast colors will make text easier to read for everyone — even if they don’t have a vision problem.

Adhering to standards is always important. Your, mine, and every other designer’s goal should be to make sure that all visual designs meet the minimum color-contrast ratio for normal and large text on a background, as described in the Web Content Accessibility Guidelines. Smart people have figured out the minimum the amount of contrast a palette needs in order to be usable, so we should probably listen to their suggestions.

Stark is a pretty dope color-blindness simulator plugin for Sketch that allows you to check your designs against 8 different types of color blindness. In addition, it also allows you to run a pair of colors against WCAG 2.0 standards and make sure they are in accordance.

It’s not that hard to make our visual designs more accessible. We just have to give a shit.

We tech people are some of the most privileged on Earth; we have outrageously high salaries, amazing opportunities to travel around the world for work and conferences, and often times we get to play with the latest tech out there. Of course we go through our pains and gripes like the rest of the world, but overall we are far removed from the middle class and kind of live in a bubble.

Juweek the UI Designer in Manhattan probably has the iPhone 7 Plus to test his designs on and get the best clarity of his elements. But Joe the Plumber in Indiana? He has an HTC smart phone with a cracked screen and a low screen resolution.

I often find myself guilty of simply taking a look at a design in Sketch and on my phone under very fixed scenarios (indoors, well-lit, low stress, high phone battery life, etc) and assume that this is the state all users are in when experiencing a product. But that’s not the case. What about if I were to look at the application in direct sunlight? Would I still be able to make out the different calls to action on the screen? The difference between one icon and another?

How about when the user does not have the ability to think clearly when using your product; do the colors give enough guidance to accomplish basic tasks at first sight? If I’m in an emergency, is the workflow simple enough for me to get to the desired state as quickly as possible?

The color palette of a digital experience should support easy and intuitive navigation and make the most functional elements of the layout stand out effectively. Again, contrast plays a big role here.

Hell, even squinting your eyes is better than nothing. It lets you get a glimpse of what a new user would see in the first few seconds of the experience and checks if everything vital is easily and quickly observed.

These things can make a crucial effect on usability as what looks stylish, attractive, and clear on a high-resolution professional monitor could transform into a dirty stain on the small low-res screen. In every project, designers should take their time on checking their solutions on different devices and in various resolutions. Let’s not be the assholes who only design for each other.

Being accessible is a requirement for a design to be great. Thinking of edge cases and doing the due diligence for our users is something that is a part of our job description, and thinking more robustly about color allows us to really dig down deep into our reasoning for our choices. All in all, these tips give us the opportunity to include more people into our successful experience pool. And that should always be a goal.

Remember, it’s not a bad thing to suck at design. Everybody sucks at first. The important thing is to keep trying to get better. It’s only a bad thing if you don’t do anything about it.