Key Takeaways for Designing Colour

During designing my personal website, it came the moment when I needed to apply colour to my grayscale wireframes. I soon realised that colour is a detailed issue. The challenge of picking the right colours and adjusting them until they converge into a harmonious palette was probably the part which earned the most iteration and refinement during the design process. In this post I want to share what I learned along the way.

Defining a colour scheme that meet the goals set

To be able to come up with a colour scheme that conveys actual meaning, you first need to be aware of what you want to achieve with your design. In commercial projects, colours are usually pre-defined by the company’s brand language. But in my case, I had to define my personal brand first. This involved answering three questions, which I like to call the 3 Ps:

Purpose: What is my website for?
People: Who is my target audience?
Perception: What do I want my target audience to think of me?

These questions of course don’t only define how colours should look like, but they lay the foundation for any design decision, from information architecture to copy to imagery.

I defined the goals of my website early on to not design in a dark room. These are my goals in a nutshell (you’ll find more background in my website case study):

Purpose: Present myself as a designer to help me land design jobs.
People: Recruiters, employers, hiring managers.
Perception: I am a professional UX designer with heart, personality and a unique style.

Based on these goals, my colour scheme needed to reflect the right balance between serious information (profession) on the one hand, and personal expression (heart, personality, style) on the other hand.
Here’s how I approached the challenge.

Creating a harmonious colour palette

I started by gaining some inspiration on COLOURLovers, a platform for user-generated colour palettes providing the related RGB and HEX codes.
Then I created my own colour palette in Spectrum, a tool which makes it easy to pick and adjust shades and to get a feeling which colours work well with each other.

spectrum
Spectrum for Mac

Free Tools

Whereas Spectrum is not free, there are other helpful web tools and colour libraries that doesn’t cost a cent.

Coolors
Coolors generates a new palette every time you press the space bar. If you feel uncomfortable with choosing colour or need a quick way to create a palette, you can pick one of their predefined colour schemes and adjust them directly in the tool.

coolors-rose
Colour palette generated by Coolors.

Flat UI Colors
Flat UI colors presents you with predefined colours suitable for vibrant colour schemes for flat apps and sites. It doesn't provide the option to create different shades though.
If you're looking for multiple shades which derive from one primary colour, the colour palette chapter of Google’s Material Design is your address.

Refining colours directly on the interface

After creating a rough colour palette, I tested my colours “in the wild” by transferring them to the grayscale layout in Sketch. Some adaption and alteration of the colours was necessary as some colours didn’t look as good on the actual interface as they did in Spectrum. For instance, some colours appeared too bright and loud for the serious information in my CV.

colour-cv-in-sketch
After transferring the hex codes from Spectrum to Sketch, I adjusted colours based on their look and feel on the actual interface.

Documenting hex codes and eliminating inconsistencies

Writing all the colour codes down in a specs document allowed me to detect shades which looked similar, but were actually defined by two different hex codes. Settling on one of each nuances made the colour scheme consistent while using as few colours as possible. These consistency efforts together with a documentation of when which colour is used turned out to be a huge help when it came to implementing the design into code and sharing specs with the developer.

colour-scheme-trello
A colour scheme doc doesn’t need to be complicated, but easy to access. In my case, a Trello card was the right medium.

Details make the difference

It took me several iterations to come up with a consistent colour scheme. This job isn’t done by just picking the right colours. Instead, colours need subtle adjustment to fit into the overall colour palette and ultimately please the user’s eye, while still meeting accessibility guidelines like contrast.

Some of you may say that applying colours is a skill that depends on the designer’s taste. I believe that “taste” develops through experience, practice, and frequent exposure. By teaching your own eyes about the subtle differences that divide the aesthetic from the non-aesthetic, you become able to apply these rules to your own work.

4 Practices for teaching yourself UI aesthetics

Compare good and bad sites

Some sites look great from the very first moment and others do not. There are reasons why we find some designs more appealing than others. Comparing both good and bad examples allowed me to identify design elements which are worth to pay attention to.

A great destination for browsing and comparing multiple designs is dribbble. Designers on dribbble mostly have a strong visual design focus and are experts in creating detailed illustrations and screens.

dribbble
dribbble

Browse many good examples

Research showed that repetitively seeing good examples make people detect patterns they often can’t explain, but which are stored in their brains and unconsciously influence their work. The same can happen with bad examples, so I made sure that I learned from the good ones.

I made it a habit to save websites I find beautiful in a Trello board and go back to them from time to time. It’s also interesting to see how designs have improved over time and how aesthetics and zeitgeist have changed.

Deeply explore great designs


What let some designs stand out of the crowd? I took some time to deeply zoom into the sites I found appealing and saved in my Trello board. This practice helped me discover small details like shades, shadows and gradients which aren’t visible from a normal view but have finally a visible impact.

stripe-subtle-shadow
Having a closer look at design elements allows me to spot subtle details like these button shadows on Stripe’s website.

Talk to experienced designers


Showing work to experienced designers can be a shortcut that saves time used for own exploration. Based on their years of experience, they can make newbies aware of small changes with immense effects and show them simple tricks that move designs from good to great.

So what details exactly did I find? Here are some rules I identified which can be considered true for any project.

3 Truths about colour

Less is more


It’s a standard, and it’s true. I thought I could just ignore this simple rule by using all the colours I like, but I ended up with a design which didn’t look really like a website and distracted from the content. 
So in my first redesign I focused on black and white as basic colours and blue as the highlight colour. Don’t forget that only a few colours can have a lot of different shades.

blogpost-colours_compressed
The blog post design on the right uses much less colour than the initial design on the left.

Grey ≠ Grey


I already knew that diminishing black to a dark grey when placing text on a white surface can have a positive impact on the aesthetic of a design. By reducing the contrast between text and background, we make words better readable and let the design appear more natural and balanced to our eyes. 
But if we have a background which is not #FFF, using grey as a lighter form of pure black will not have the same effect. Instead we need to adjust the hue in the direction of the prevailing background colour. Let’s say the background colour is light blue, than the text should be a dark grey consisting blue pigments.
It’s the same with shadows: They are rarely black, but need to be a modification of the colour they are placed on. Turning up the shadow’s transparency might be the simplest approach here.

grey-unequal-grey_compressed
While the left-hand design uses grey as an modification of pure black, the design on the right takes up the dominant blue colour

Gradient for Glow

Multi-colour gradients celebrated a comeback recently and are now complementing flat design. While multi-colour gradients are easy to spot due to their use of vibrant colours, single-colour gradients are harder to notice, or even invisible at first glance, but they give a design an elegant and polished look.
Using subtle alteration of nuances and appropriate placing of lighter and darker areas, gradients make flat shapes better merged with the content they hold.

gradient-for-glow_compressed
The radial gradient on the right gave the flat dark grey shape on the left more depth and dynamics

Conclusion

I still find colour the most challenging component to design because of its global appearance and emotional effect on the product.

The best advice I can give is to not let colours too early into your concepts and wireframes. If the colour scheme or brand language is not defined yet, adding colour to your designs will require close attention to detail and time for experimentation and iteration. You don’t want to get stuck in these details when you’re still figuring out the information hierarchy. Colour should complement and support the content provided, not vice versa.

evening-sky-3_small
The real world around you is a great resource to explore colour palettes.

In the meantime, study the colour concepts of the real world around you, whether it’s interfaces, art, photography or earth’s beautiful nature. (Qolor is an inexpensive app that grabs colours from your environment using your phone’s camera.)
And when the time has come, you will have a better idea of which hues work well together.