Journal
Five Simple Steps to designing with colour
- Posted on: October 19, 2006
- In: Design, Simple Steps
- Comments closed
It’s been ages since I’ve had a stab at a Simple Steps series. So far we’ve had Better Typography, Designing Grid Systems and Typesetting. This one has been kicking around for a while so I thought I’d just publish the first couple and see where we go from there (of course there will be five, I just haven’t written the last couple yet).
Designing with colour is perhaps the element of graphic design which is the most difficult to get right. Why? Well, because it is the most subjective. For some, a palette of dark grey with splashes of bright pink will be just great; to others it would just be all wrong. Too many designers, whether schooled in colour-theory or not, end up making subjective decisions about colour and then when it comes to explaining those decisions to a client, things begin to unravel.
This first post in the series will be dealing with looking at tone and the value of limiting your palette.
Lowering the tone
Years ago now (ooo, about fifteen or so), I was in my first year on a Foundation Art and Design course here in Stockport in the UK. I wanted to be a painter (well, an illustrator to be precise). In the first week of this course we were all told to get rid of our nice new paint-brushes we’d bought for the course. We were told to leave all our new kit at home and to go outside and find some nice twigs and get some black ink from somewhere. I was not chuffed. How was an artist meant to create with these primitive tools?
The lecturers had us painting with twigs, our feet, blindfolded; the works. At the time I hated it; couldn’t see the point. Now, I look back and really see the value of this horrific couple of weeks. They were teaching us how to look and produce marks which weren’t dictated to by our tools. In other words, because we had colourful paints and lovely sable brushes, the temptation is to use them. Without the brushes, and the colourful paint, we were forced into trying to communicate colour with tone alone.
This is what I’d like to focus on to begin with.
Removing colour
One of the things I like about editorial design, specifically typographic design, is how there is an emphasis on black and white. True, colour is a very important part of any typographic exercise, but primarily I begin by looking at tone and form. I think there’s a lot of value in removing colour from the equation entirely and focusing on the tonal aspects of a design before applying the colour.
There are a few notable examples of how designing with just black make for a unique and attractive design:
Of course, no discussion about designing with black and white on the web would be complete without mentioning Khoi Vinh’s site, Subtraction.com. Khoi works with black and orange to harmonise with the Swiss undertones of the design.
Khoi Vinh’s Subtraction.com
Form, a German design magazine, uses black and white typography (and a strong grid), to convey it’s brand to the users of the site. The effect of having a site like this in black and white, is the work that is showcased here, being in full colour, really stands out against the black and white framework.
German design magazine, Form
Begin with Grey
Next time you start a design, try this. As simple as the heading says, start your design in grey and tones thereof. Don’t introduce any colour until the design is working in black and white. Chances are, your decisions on palette and colour will be made a lot easier because the design, or elements of the design, aren’t relying on colour for their function. This of course is very useful for designing with accessibility in mind. I’m not addressing any accessibility issues within these articles, as I’d like to focus on the graphic design, but it’s an important consideration that shouldn’t be overlooked. Designing with black and white first will ensure that the solution doesn’t rely on colour to work.
I often use colour to highlight specific elements of the design, but generally those elements have a function within the design solution, such as the horizontal lines on this site. Another example might be highlighting a search button, or elements of a navigation bar. Using colour to pick out key functional elements in the interface.
Solving tonal problems before applying any colour
The benefit of working this way, like other tools at the disposal of designers such as grid systems, is that it solves a certain amount of problems for the designer. I find it focuses my attention to tone and composition without worrying if this colour matches that. Focus on the composition tone, once that’s sorted, move on to the colour.
Moving onto mono and duo tonal palettes
In the next post, I’m going to focus on taking the grey a step further.
You know, us web designers have it quite lucky. We can use any colour we like (within reason). Print designers have had to deal with colour limitations since the press was built. This has made print designers very sensitive to designing with colour. There’s nothing quite like designing a one or two colour job, but over a wide range of material, to really get you thinking about how colour is used. I’d like to bring some of that kind of thinking (and restraint) to the next post.
Most recent entries
- Designing for the Web: Paperback available 14th April
- Drupal7UX: we need you NOW!
- The Personal Cost of Designing on Spec
- Audience Matrix: Our thoughts on the Drupal 7 audience
- Drupal 7 Redesign
- Designing for the Web: Available to buy and download now
- Managing expectations
- Dipping a toe in the book production process
- Designing and building an eBook delivery system
- Why Self Publish?
Categories
Search
Journal feeds
Books
Stuff I like
Powered by Expression Engine
I'm a graphic designer from near Cardiff in the UK. I've been a designer for over ten years now and primarily work on the web. I'm still partial to a bit of print every now and then though. I used to work for Agency.com in London as an Art Director before working as a Senior Designer for the BBC in sunny Cardiff. This was all before I took leave of my senses and formed my own design consultancy, Mark Boulton Design Ltd.
I've got a thing about grids and typography and occasionally ramble on about them to anyone who will listen.
Mark Boulton Design
If you're after simple, clean and effective web design; let me know.
Comments
Great! Can’t wait untill the next installment :)
Tor L?vskogen Bollingmo
Thu 19th Oct 2006
at 5:02 pm
All right, another series! Finally!
Great start, Mark. I’m looking forward to the next installments!
A small question: how exactly does the black and white convey the brand? Could you elaborate on that a bit?
Dan Mall
Thu 19th Oct 2006
at 5:34 pm
Great series to add to an already great collection. The timing couldn’t be better, as I am starting a complete overhaul of my personal site.
Looking forward to the next installment.
Joshua Brewer
Thu 19th Oct 2006
at 5:39 pm
Thank you for the article!
Katie
Thu 19th Oct 2006
at 5:57 pm
Dan: Well, I’ve only got a couple of issues of Form, but they’re both very, erm, Germanic in their design. I think this is what the brand for Form is all about (although I may be wrong). Form is about German graphic design, and communicating that design culture through not only through the editorial, but the presentation of it also.
In other words; it’s clean, functional and reeks of quality graphic design.
Mark Boulton
Thu 19th Oct 2006
at 7:21 pm
Excellent article. Im looking forward to read previous and upcoming articles as well. As someone who is trying to build on my design knowledge, this has been a great learning experience.
Nate K
Thu 19th Oct 2006
at 7:22 pm
Ah, now I understand. Thanks for clearing that up!
Dan Mall
Thu 19th Oct 2006
at 7:24 pm
1. Gather all of your Five Simple Steps series
2. Writea book
3. Make a nice chunk of change
Some other company did this same thing. They took all of their mantras for web development and released a PDF ebook. Now if I could just remember their name.... ;)
These are so well written and such good knowledge for any designer to have in their arsenal.
Thanks Mark!
John Peele
Thu 19th Oct 2006
at 9:13 pm
Great start.
I second what John said above as long as you give us (who commented) free/discounted copies =p
Sherwin Techico
Thu 19th Oct 2006
at 10:40 pm
I just started designing in gray tones. It occurred to me just a few days ago when I had no idea what I should be trying to do with colors in a design.
So I just started with blacks and changing opacities where contrast was necessary.
Turns out it’s a great way to get a design done and leave room for more interpretative things down the line.
Mark Otto
Fri 20th Oct 2006
at 1:16 am
Great job with this—simple application of shades of gray help plant the foundation of colors later on. Its amazing how easy it is to design up-front with colors and never get it quite right.
Thanks.
Shawn
Fri 20th Oct 2006
at 2:14 am
This is a great piece. I am going to follow your advice, particularly the one about designing in grey and adding the color later.
Joey
Fri 20th Oct 2006
at 3:07 am
man, really well done, good start. please do continue the series--there’s a real need for this, now more than ever on the Web.
James S.
Fri 20th Oct 2006
at 3:12 am
Really learned a lot from this article. Actually its one of the first articles on color relating to websites that I liked. Great Job.
AlfredN
Fri 20th Oct 2006
at 5:07 am
Brilliant.
David Laakso
Fri 20th Oct 2006
at 5:15 am
As a fan a german design I’m suprised I haven’t seen a copy of Form yet. Where did you get your hands on that?
Andrew Stewart
Fri 20th Oct 2006
at 6:00 am
Very nice, and eagerly awating the next installment of this series. Any idea of what articles we can await in the future?
Oliver Charles
Fri 20th Oct 2006
at 6:53 am
Hi! Been a lurker here for a while, I’ll post more when I actually have my portfolio up. I think all your articles are very insightful, and I like your design. The main reason I’m posting though is because I was born in Stockport, and now live in Wilmslow. It’s nice to see someone similar to me who is from the same area! Keep up the good work. I’ll be back!
tom
Fri 20th Oct 2006
at 8:18 am
I really like the way you made those colors soft, it is so pleasent for viewers eyes ;)
Ivan
Fri 20th Oct 2006
at 9:00 am
Great tip about designing purely with tonality in mind and breaking down the work process before introducting colours. It’s one of those methods I thought ‘that’s so obvious - why haven’t I been doing that?’ I always design logotypes in monochrome first so why not apply the same logic to my online work?
Great stuff.
BTW, I’m actually colour blind (Red/Green) and this process will help me a great deal. Once the tonality is nailed, balancing the colours up becomes less difficult because it gives you a tonal range to work from - without which things can easily become confusing if you can’t *see* something that’s not properly working.
Simon Duckworth
Fri 20th Oct 2006
at 9:33 am
This is great! Thank you.
Your Simple Step series are the best…
Ryan
Fri 20th Oct 2006
at 4:30 pm
I enjoyed your personal account of drawing with twigs and the benefit of taking a different approach. I am really going to enjoy this series!
Sam Wilson
Fri 20th Oct 2006
at 6:21 pm
Cool stuff Mark. I recently started designing page layouts in Black and White - this was for a couple of redesigns I was doing where my main aim was to improve the usability of the site. I found that by just using black and white first, I was able to focus on organising the content appropriately rather than just redecorating the thing.
Reuben Whitehouse
Fri 20th Oct 2006
at 6:24 pm
I think a lot of people forget (or haven’t learned much) about tonal contrast.
I know that until I learned how important it is, a lot of my work either looked too “flat” or far too excitable. Now I’m working on becoming more selective and intentional about where I put contrast instead of just inputting contrast for the sake of contrast.
You helped reveal how tones can really determine the hierarchy and flow of a site. I’ve long admired your site for its judicious and restrained use of color.
With bigger clients that get multiple layout options, I do wireframes first in black and white so that they can easily determine what layout works better for them without the ‘distraction’ that color and styling often provides.
When I switch over to color after determining tonal differences, I sometimes do a image>mode>greyscale in Photoshop to double check that I’ve maintained strong contrasts where I intend. It’s a great way for beginners, especially, to do a quick contrast check.
Looking forward to your next post...:)
reese
Fri 20th Oct 2006
at 6:32 pm
Awesome! And just in time too, I’m currently starting to design a website for an Introduction to Multimedia and the Internet and I’m starting off without using colours, just tones… hope it comes out better :)
Xilon
Sat 21st Oct 2006
at 8:38 am
Useful tips! Thanks for sharing.
Priscilla
Sat 21st Oct 2006
at 9:36 am
yugop, and especially the original site, is a great example of monotone design.
Chris
Sat 21st Oct 2006
at 12:14 pm
Thanks for the article and food for thought. I’m looking forward to the next.
(by the way, I’m German in origin. Does that make me potentially a better designer? LOL!)
Regards,
figgy
figgy
Sat 21st Oct 2006
at 2:32 pm
Great article. I subscribed to your RSS feed to keep noticed about your further posts.
Rogier
Sat 21st Oct 2006
at 3:50 pm
Great! im gonna print all of that series :)
Shani elharrar
Sat 21st Oct 2006
at 5:07 pm
Excellent write-up, thanks for taking the time to put this together.
This is, ironically, exactly what I’ve been doing with a new project called King Of The List. Instead of using the beta tag or focusing on color, I’m focusing on layout and functionality.
Definitely looking forward to the rest of this series. :)
Cliff Spence
Sat 21st Oct 2006
at 8:12 pm
Thank you for sharing. I’m working my way through web design and I love reading about different approaches to building pages.
I usually take a minimalistic approach to my designs and my personal site is pretty much grayscale, and always has been. Some of the other site designs I have done have color introduced, but usually only a single color for accentation as you stated. I find this to have very pleasing results, and it’s refreshing to see that other people feel the same way!
I’m looking forward to reading the next article in your series!
Justin
Sat 21st Oct 2006
at 10:11 pm
Very nice read. I appreciate. Looking forward to part 2.
m3nt0r
Sun 22nd Oct 2006
at 2:16 am
Looking forward to your next installment in the series.
In the past, when I used to design UIs, I had always used a black/white/grey scheme for the initial rounds of prototypes as it helped both the designer and the reviewer to focus on the core design objectively without getting bogged down by subjective opinions on colours. Once the framework is fixed, adding colours gradually(only where absolutely necessary) helps the decision process immensely.
Neel Shankar
Sun 22nd Oct 2006
at 8:01 am
Wlldone! I look forward to the next installment!
WD Milner
Sun 22nd Oct 2006
at 4:36 pm
Never thought about this solution. Untill now I’ve always delivered a full design. But just starting in gray tones sounds like a great idea
drukwek
Mon 23rd Oct 2006
at 8:04 am
Usually, when I design I always start deciding which colors to use. Now I’m convinced that it’s not a very effective approach. Thanks for the tip! Hope the next steps arrive soon.
Erika
Mon 23rd Oct 2006
at 8:59 am
It’s funny, I decided to start the design for my latest client using grey; it worked out really well.
the only reason I did it this time is the client has yet to pass any branding guidelines to me, but it’s a technique I’ll definitely use again.
Mark Ford
Mon 23rd Oct 2006
at 12:47 pm
This technique is a very good one. It reminds me of how a painter might underpaint or block out fields of color or mass prior to the compostion, or how an architect does a massing study of a design first.
Jeff
Mon 23rd Oct 2006
at 5:38 pm
Thank you for sharing you approach to colour and design. I like your observation of the dictation of our tools and how to challenge the process of that mark making.
Bjarni Wark
Mon 23rd Oct 2006
at 10:43 pm
With respect to designing first in grey tones; a parallel to this is the sketching of the initial design ‘idea’ - out on paper with pencil. I tend to shade things in different shades, and if one steps back to look it really is simply a non-digital version of what you’ve mentioned above. Rather useful.
Can’t wait for the next entry in the series!
Thomas Bukowski
Tue 24th Oct 2006
at 6:15 am
Great idea!! Waiting for the next post..
Aadi
Wed 25th Oct 2006
at 4:07 am
Thanks for this article, this and the grid design article have helped me improve my design skills lots!
Thanks
^licks^
jammie & lion
Jamie Knight
Wed 25th Oct 2006
at 5:32 pm
thanks you so much for the excellent blog - in general, this post and the series on grids. i’m just learning design, web design etc...(from a background in set design and years of admin work) i need so much help and your posts are fabulous! thank you!
jennifer
Wed 25th Oct 2006
at 6:26 pm
Mark,
You’re well on the way to making me better at what I want to do when I finally get out of college!
Thanks so much for the effort you’ve put into these series. Your blog is a God-send.
Richard
Richard
Thu 26th Oct 2006
at 5:35 am
great topic, it’s always a problem when you start from scratch.Looking forward to the next chapter
dobata
Fri 27th Oct 2006
at 4:10 pm
Nice Stuff Mark
About designers color subjectivity: You did not mention - designing for the target market.
Your first paragraph does not cover the fact that successful designers, design for the end user. Be assured that what the consumer may be attracted to is not neccessarily what the designer or advertiser may personally like.
I have designed much successful packaging and promotional material that I personally did not like - but appealed to the target market. Hence their success.
It may be helpful if you were to include something about: “Considering Your Audience When Using Color and Typography”.
You do a good service.
Moreno Franco
Moreno Franco
Mon 30th Oct 2006
at 7:25 am
The way in grey! Then turn to colour ..
yep.. Have to tone is so so important!
Flat
Mon 30th Oct 2006
at 10:45 am
Love the stripped back approach - I’ll stick to a grayscale prototype for my next site before I make any colour decisions. When’s the mon and duo palettes post due?
Leezig
Tue 31st Oct 2006
at 11:20 pm
Thanks for publishing the idea. I’m waiting for the next steps… :))
Joerg Petermann
Wed 1st Nov 2006
at 9:51 am
I enjoyed the simplicity of this article and the approach to design.
Jeff
Wed 1st Nov 2006
at 7:11 pm
Very good I will read the follow-up.
Keith Cash
Wed 1st Nov 2006
at 10:16 pm