cft

Starting Your Design Without the Use of Colors

By asking the right questions, you can focus your stakeholders on what's important. UX.


user

Nick Groeneveld

3 years ago | 3 min read

Collaborating with clients or stakeholders can be difficult. Especially since there’s a notion out there amongst more than a few people that design is something subjective. You either like it or you don’t.

We as designers know this is not the case, of course. Good design is based on theory, (UX) research, and the use of design principles and guidelines. Yet, more often than I would care I’m having discussions about the colors I use, the fonts I picked, or if I could just add that one extra header over there.

Here’s how you can avoid these kinds of discussions with your stakeholders and focus on what’s important to you — your design and how it will solve your users’ problem.

Design without color first

I much rather have discussions about the ‘bigger picture’ of my design. In other words, how does it fulfill the users’ needs, how does it solve a problem, and how can we improve what we already did? Those are the questions where we can provide added value as designers.

We focus too much on how our design looks visually at an early stage. Because of this, the big picture gets lost when we talk about our design. By providing a mockup or prototype right away, you skip the opportunity for feedback and iteration for the first steps of your design process.

Instead of creating a beautiful mockup or prototype of your design at the first try, start your design work in black and white.

Even better still, use a pen and paper if you have the time, instead of using your laptop for design right away. There’s a big advantage to designing in black and white in comparison to using color from the get-go.

Why designing without color at first will help you

Just think about it like this. When you show your design in full color to someone, that person might ask why you designed certain elements to be purple, for example.

When you design in black and white at first, that same person might ask what color would fit the before-mentioned elements best. “What color could we use here?” is a far more constructive question than “why did we pick this color?”.

Black and white v. full color. Credits to the author.
Black and white v. full color. Credits to the author.

It helps you focus on what’s important. Especially at this point in your design process where the basics have to be determined.

The basics, like hierarchy, flow, and navigation, are something you have to get down first. It is important to get buy-in from your stakeholders on these topics rather than the ‘fireworks’ of your (UI) design.

Spend more time working on usability, interaction, and user experience. That means no shadows or gradients just yet. The good looking prototypes, animations, and mockups worthy of becoming trending shots on Dribbble come in later. That includes the use of color.

“What color could we use here?” is a far more constructive question than “why did we pick this color?”

The first version of your design should only feature different shades of black and white to show the hierarchy and visual weight between elements.

For example, if your black and white design features a primary action button you can make the button solid black. This creates a contrast between the button and the rest of your UI, showing the primary position of the button within the screen’s hierarchy. This works for other elements, like text, as well.

Examples of creating hierarchy in black and white designs. Credits to the author.
Examples of creating hierarchy in black and white designs. Credits to the author.

When you agree on the fundamental basics of your design direction you can focus on the visual part of your design. Since the hierarchy of the elements on-screen, the flow, and navigation has been determined, adding color should be an easy task.

Coloring within the lines

Imagine your design as a coloring book. The lines in the coloring book show you how and where you should color. However, for you to be able to pick the right colors, you first have to design the lines, the elements, and how they interact. This will help you add color to your design in a way that truly helps your users out. It can be hard. I know that. But trust me, it will benefit your design greatly in the end.

So! The next time you open Sketch or Illustrator, leave your color schemes and gradients for a moment and focus on the basics first. It will be as easy as coloring your favorite coloring book later on.

Upvote


user
Created by

Nick Groeneveld

Designer & consultant. Working on providing designers the tools they need. Join the Designer’s Toolbox at https://bit.ly/jointhedesignerstoolbox


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles