The personal disquiet of

Mark Boulton

October 19th, 2006

Five Simple Steps to designing with colour

{title}It’s been ages since I’ve had a stab at a Simple Steps series. So far we’ve had Bet­ter Typo­graphy, Design­ing Grid Systems and Type­set­ting. This one has been kick­ing around for a while so I thought I’d just pub­lish the first couple and see where we go from there (of course there will be five, I just haven’t writ­ten the last couple yet).

Design­ing with col­our is per­haps the ele­ment of graphic design which is the most dif­fi­cult to get right. Why? Well, because it is the most sub­ject­ive. For some, a palette of dark grey with splashes of bright pink will be just great; to oth­ers it would just be all wrong. Too many design­ers, whether schooled in colour-theory or not, end up mak­ing sub­ject­ive decisions about col­our and then when it comes to explain­ing those decisions to a cli­ent, things begin to unravel. 

This first post in the series will be deal­ing with look­ing at tone and the value of lim­it­ing your palette. 

Lower­ing the tone

Years ago now (ooo, about fif­teen or so), I was in my first year on a Found­a­tion Art and Design course here in Stock­port in the UK. I wanted to be a painter (well, an illus­trator to be pre­cise). 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 out­side and find some nice twigs and get some black ink from some­where. I was not chuffed. How was an artist meant to cre­ate with these prim­it­ive tools? 

The lec­tur­ers had us paint­ing with twigs, our feet, blind­folded; the works. At the time I hated it; couldn’t see the point. Now, I look back and really see the value of this hor­rific couple of weeks. They were teach­ing us how to look and pro­duce marks which weren’t dic­tated to by our tools. In other words, because we had col­our­ful paints and lovely sable brushes, the tempta­tion is to use them. Without the brushes, and the col­our­ful paint, we were forced into try­ing to com­mu­nic­ate col­our with tone alone.

This is what I’d like to focus on to begin with. 

Remov­ing colour

One of the things I like about edit­or­ial design, spe­cific­ally typo­graphic design, is how there is an emphasis on black and white. True, col­our is a very import­ant part of any typo­graphic exer­cise, but primar­ily I begin by look­ing at tone and form. I think there’s a lot of value in remov­ing col­our from the equa­tion entirely and focus­ing on the tonal aspects of a design before apply­ing the colour. 

There are a few not­able examples of how design­ing with just black make for a unique and attract­ive design: 

Of course, no dis­cus­sion about design­ing with black and white on the web would be com­plete without men­tion­ing Khoi Vinh’s site, Subtraction.com. Khoi works with black and orange to har­mon­ise with the Swiss under­tones of the design.

Khoi Vinh's Subtraction.com

Khoi Vinh’s Subtraction.com

Form, a Ger­man design magazine, uses black and white typo­graphy (and a strong grid), to con­vey it’s brand to the users of the site. The effect of hav­ing a site like this in black and white, is the work that is show­cased here, being in full col­our, really stands out against the black and white framework. 

German design magazine, Form

Ger­man design magazine, Form

Begin with Grey

Next time you start a design, try this. As simple as the head­ing says, start your design in grey and tones thereof. Don’t intro­duce any col­our until the design is work­ing in black and white. Chances are, your decisions on palette and col­our will be made a lot easier because the design, or ele­ments of the design, aren’t rely­ing on col­our for their func­tion. This of course is very use­ful for design­ing with access­ib­il­ity in mind. I’m not address­ing any access­ib­il­ity issues within these art­icles, as I’d like to focus on the graphic design, but it’s an import­ant con­sid­er­a­tion that shouldn’t be over­looked. Design­ing with black and white first will ensure that the solu­tion doesn’t rely on col­our to work.

I often use col­our to high­light spe­cific ele­ments of the design, but gen­er­ally those ele­ments have a func­tion within the design solu­tion, such as the hori­zontal lines on this site. Another example might be high­light­ing a search but­ton, or ele­ments of a nav­ig­a­tion bar. Using col­our to pick out key func­tional ele­ments in the interface. 

{title}

Solv­ing tonal prob­lems before apply­ing any colour

The bene­fit of work­ing this way, like other tools at the dis­posal of design­ers such as grid sys­tems, is that it solves a cer­tain amount of prob­lems for the designer. I find it focuses my atten­tion to tone and com­pos­i­tion without wor­ry­ing if this col­our matches that. Focus on the com­pos­i­tion tone, once that’s sor­ted, move on to the colour. 

Mov­ing onto mono and duo tonal palettes 

In the next post, I’m going to focus on tak­ing the grey a step further. 

You know, us web design­ers have it quite lucky. We can use any col­our we like (within reason). Print design­ers have had to deal with col­our lim­it­a­tions since the press was built. This has made print design­ers very sens­it­ive to design­ing with col­our. There’s noth­ing quite like design­ing a one or two col­our job, but over a wide range of mater­ial, to really get you think­ing about how col­our is used. I’d like to bring some of that kind of think­ing (and restraint) to the next post.

This entry was posted on Thursday, October 19th, 2006 at 4:03 pm and is filed under Design, Simple Steps.

You can follow any responses to this entry through the RSS 2.0 feed.

Responses are currently closed, but you can trackback from your own site.

53 Responses to “Five Simple Steps to designing with colour”

  1. Tor L?vskogen Bollingmo said on: October 19th, 2006 at 6:02 pm

    Great! Can’t wait untill the next installment :)

  2. Dan Mall said on: October 19th, 2006 at 6:34 pm

    All right, another series! Finally! 

    Great start, Mark. I’m look­ing for­ward to the next installments! 

    Form, a Ger­man design magazine, uses black and white typo­graphy (and a strong grid), to con­vey its brand to the users of the site.

    A small ques­tion: how exactly does the black and white con­vey the brand? Could you elab­or­ate on that a bit?

  3. Joshua Brewer said on: October 19th, 2006 at 6:39 pm

    Great series to add to an already great col­lec­tion. The tim­ing couldn’t be bet­ter, as I am start­ing a com­plete over­haul of my per­sonal site. 

    Look­ing for­ward to the next installment.

  4. Katie said on: October 19th, 2006 at 6:57 pm

    Thank you for the article!

  5. Mark Boulton said on: October 19th, 2006 at 8:21 pm

    Dan: Well, I’ve only got a couple of issues of Form, but they’re both very, erm, Ger­manic in their design. I think this is what the brand for Form is all about (although I may be wrong). Form is about Ger­man graphic design, and com­mu­nic­at­ing that design cul­ture through not only through the edit­or­ial, but the present­a­tion of it also.

    In other words; it’s clean, func­tional and reeks of qual­ity graphic design.

  6. Nate K said on: October 19th, 2006 at 8:22 pm

    Excel­lent art­icle. Im look­ing for­ward to read pre­vi­ous and upcom­ing art­icles as well. As someone who is try­ing to build on my design know­ledge, this has been a great learn­ing experience.

  7. Dan Mall said on: October 19th, 2006 at 8:24 pm

    Ah, now I under­stand. Thanks for clear­ing that up!

  8. John Peele said on: October 19th, 2006 at 10:13 pm

    1. Gather all of your Five Simple Steps series

    2. Writea book

    3. Make a nice chunk of change

    Some other com­pany did this same thing.  They took all of their man­tras for web devel­op­ment and released a PDF ebook.  Now if I could just remem­ber their name.… ;) 

    These are so well writ­ten and such good know­ledge for any designer to have in their arsenal. 

    Thanks Mark!

  9. Sherwin Techico said on: October 19th, 2006 at 11:40 pm

    Great start.

    I second what John said above as long as you give us (who com­men­ted) free/discounted cop­ies =p

  10. Mark Otto said on: October 20th, 2006 at 2:16 am

    I just star­ted design­ing in gray tones. It occurred to me just a few days ago when I had no idea what I should be try­ing to do with col­ors in a design. 

    So I just star­ted with blacks and chan­ging opa­cit­ies where con­trast was necessary. 

    Turns out it’s a great way to get a design done and leave room for more inter­pret­at­ive things down the line.

  11. Shawn said on: October 20th, 2006 at 3:14 am

    Great job with this—simple applic­a­tion of shades of gray help plant the found­a­tion of col­ors later on.  Its amaz­ing how easy it is to design up-front with col­ors and never get it quite right.

    Thanks.

  12. Joey said on: October 20th, 2006 at 4:07 am

    This is a great piece. I am going to fol­low your advice, par­tic­u­larly the one about design­ing in grey and adding the color later.

  13. James S. said on: October 20th, 2006 at 4:12 am

    man, really well done, good start. please do con­tinue the series–there’s a real need for this, now more than ever on the Web.

  14. AlfredN said on: October 20th, 2006 at 6:07 am

    Really learned a lot from this art­icle. Actu­ally its one of the first art­icles on color relat­ing to web­sites that I liked. Great Job.

  15. David Laakso said on: October 20th, 2006 at 6:15 am

    Bril­liant.

  16. Andrew Stewart said on: October 20th, 2006 at 7:00 am

    As a fan a ger­man design I’m suprised I haven’t seen a copy of Form yet. Where did you get your hands on that?

  17. Oliver Charles said on: October 20th, 2006 at 7:53 am

    Very nice, and eagerly awat­ing the next install­ment of this series.  Any idea of what art­icles we can await in the future?

  18. tom said on: October 20th, 2006 at 9:18 am

    Hi! Been a lurker here for a while, I’ll post more when I actu­ally have my port­fo­lio up. I think all your art­icles are very insight­ful, and I like your design. The main reason I’m post­ing though is because I was born in Stock­port, and now live in Wilmslow. It’s nice to see someone sim­ilar to me who is from the same area! Keep up the good work. I’ll be back!

  19. Ivan said on: October 20th, 2006 at 10:00 am

    I really like the way you made those col­ors soft, it is so pleasent for view­ers eyes ;)

  20. Simon Duckworth said on: October 20th, 2006 at 10:33 am

    Great tip about design­ing purely with ton­al­ity in mind and break­ing down the work pro­cess before intro­duct­ing col­ours. It’s one of those meth­ods I thought ‘that’s so obvi­ous — why haven’t I been doing that?’ I always design logo­types in mono­chrome first so why not apply the same logic to my online work? 

    Great stuff. 

    BTW, I’m actu­ally col­our blind (Red/Green) and this pro­cess will help me a great deal. Once the ton­al­ity is nailed, bal­an­cing the col­ours up becomes less dif­fi­cult because it gives you a tonal range to work from — without which things can eas­ily become con­fus­ing if you can’t *see* some­thing that’s not prop­erly working.

  21. Ryan said on: October 20th, 2006 at 5:30 pm

    This is great! Thank you. 

    Your Simple Step series are the best…

  22. Sam Wilson said on: October 20th, 2006 at 7:21 pm

    I enjoyed your per­sonal account of draw­ing with twigs and the bene­fit of tak­ing a dif­fer­ent approach. I am really going to enjoy this series!

  23. Reuben Whitehouse said on: October 20th, 2006 at 7:24 pm

    Cool stuff Mark.  I recently star­ted design­ing page lay­outs in Black and White — this was for a couple of redesigns I was doing where my main aim was to improve the usab­il­ity of the site.  I found that by just using black and white first, I was able to focus on organ­ising the con­tent appro­pri­ately rather than just redec­or­at­ing the thing.

  24. reese said on: October 20th, 2006 at 7:32 pm

    I think a lot of people for­get (or haven’t learned much) about tonal contrast. 

    I know that until I learned how import­ant it is, a lot of my work either looked too “flat” or far too excit­able. Now I’m work­ing on becom­ing more select­ive and inten­tional about where I put con­trast instead of just input­ting con­trast for the sake of contrast. 

    You helped reveal how tones can really determ­ine the hier­archy and flow of a site. I’ve long admired your site for its judi­cious and restrained use of color. 

    With big­ger cli­ents that get mul­tiple lay­out options, I do wire­frames first in black and white so that they can eas­ily determ­ine what lay­out works bet­ter for them without the ‘dis­trac­tion’ that color and styl­ing often provides. 

    When I switch over to color after determ­in­ing tonal dif­fer­ences, I some­times do a image>mode>greyscale in Pho­toshop to double check that I’ve main­tained strong con­trasts where I intend. It’s a great way for begin­ners, espe­cially, to do a quick con­trast check. 

    Look­ing for­ward to your next post…:)

  25. Xilon said on: October 21st, 2006 at 9:38 am

    Awe­some! And just in time too, I’m cur­rently start­ing to design a web­site for an Intro­duc­tion to Mul­ti­me­dia and the Inter­net and I’m start­ing off without using col­ours, just tones… hope it comes out better :)

  26. Priscilla said on: October 21st, 2006 at 10:36 am

    Use­ful tips! Thanks for sharing.

  27. Chris said on: October 21st, 2006 at 1:14 pm

    yugop, and espe­cially the ori­ginal site, is a great example of mono­tone design.

  28. figgy said on: October 21st, 2006 at 3:32 pm

    Thanks for the art­icle and food for thought.  I’m look­ing for­ward to the next.

    (by the way, I’m Ger­man in ori­gin.  Does that make me poten­tially a bet­ter designer? LOL!)

    Regards,

    figgy

  29. Rogier said on: October 21st, 2006 at 4:50 pm

    Great art­icle. I sub­scribed to your RSS feed to keep noticed about your fur­ther posts.

  30. Shani elharrar said on: October 21st, 2006 at 6:07 pm

    Great! im gonna print all of that series :)

  31. Cliff Spence said on: October 21st, 2006 at 9:12 pm

    Excel­lent write-up, thanks for tak­ing the time to put this together. 

    This is, iron­ic­ally, exactly what I’ve been doing with a new pro­ject called King Of The List.  Instead of using the beta tag or focus­ing on color, I’m focus­ing on lay­out and functionality.

    Def­in­itely look­ing for­ward to the rest of this series. :)

  32. Justin said on: October 21st, 2006 at 11:11 pm

    Thank you for shar­ing. I’m work­ing my way through web design and I love read­ing about dif­fer­ent approaches to build­ing pages. 

    I usu­ally take a min­im­al­istic approach to my designs and my per­sonal site is pretty much gray­scale, and always has been. Some of the other site designs I have done have color intro­duced, but usu­ally only a single color for accenta­tion as you stated. I find this to have very pleas­ing res­ults, and it’s refresh­ing to see that other people feel the same way! 

    I’m look­ing for­ward to read­ing the next art­icle in your series!

  33. m3nt0r said on: October 22nd, 2006 at 3:16 am

    Very nice read. I appre­ci­ate. Look­ing for­ward to part 2.

  34. Neel Shankar said on: October 22nd, 2006 at 9:01 am

    Look­ing for­ward to your next install­ment in the series. 

    In the past, when I used to design UIs, I had always used a black/white/grey scheme for the ini­tial rounds of pro­to­types as it helped both the designer and the reviewer to focus on the core design object­ively without get­ting bogged down by sub­ject­ive opin­ions on col­ours. Once the frame­work is fixed, adding col­ours gradually(only where abso­lutely neces­sary) helps the decision pro­cess immensely.

  35. WD Milner said on: October 22nd, 2006 at 5:36 pm

    Wll­done! I look for­ward to the next installment!

  36. drukwek said on: October 23rd, 2006 at 9:04 am

    Never thought about this solu­tion. Untill now I’ve always delivered a full design. But just start­ing in gray tones sounds like a great idea

  37. Erika said on: October 23rd, 2006 at 9:59 am

    Usu­ally, when I design I always start decid­ing which col­ors to use. Now I’m con­vinced that it’s not a very effect­ive approach. Thanks for the tip! Hope the next steps arrive soon.

  38. Mark Ford said on: October 23rd, 2006 at 1:47 pm

    It’s funny, I decided to start the design for my latest cli­ent using grey; it worked out really well. 

    the only reason I did it this time is the cli­ent has yet to pass any brand­ing guidelines to me, but it’s a tech­nique I’ll def­in­itely use again.

  39. Jeff said on: October 23rd, 2006 at 6:38 pm

    This tech­nique is a very good one. It reminds me of how a painter might under­paint or block out fields of color or mass prior to the com­pos­tion, or how an archi­tect does a mass­ing study of a design first.

  40. Bjarni Wark said on: October 23rd, 2006 at 11:43 pm

    Thank you for shar­ing you approach to col­our and design. I like your obser­va­tion of the dic­ta­tion of our tools and how to chal­lenge the pro­cess of that mark making.

  41. Thomas Bukowski said on: October 24th, 2006 at 7:15 am

    With respect to design­ing first in grey tones; a par­al­lel to this is the sketch­ing of the ini­tial design ‘idea’ — out on paper with pen­cil. I tend to shade things in dif­fer­ent shades, and if one steps back to look it really is simply a non-digital ver­sion of what you’ve men­tioned above. Rather useful. 

    Can’t wait for the next entry in the series!

  42. Aadi said on: October 25th, 2006 at 5:07 am

    Great idea!! Wait­ing for the next post..

  43. Jamie Knight said on: October 25th, 2006 at 6:32 pm

    Thanks for this art­icle, this and the grid design art­icle have helped me improve my design skills lots! 

    Thanks 

    ^licks^ 

    jam­mie & lion

  44. jennifer said on: October 25th, 2006 at 7:26 pm

    thanks you so much for the excel­lent blog — in gen­eral, this post and the series on grids. i’m just learn­ing design, web design etc…(from a back­ground in set design and years of admin work) i need so much help and your posts are fab­ulous! thank you!

  45. Richard said on: October 26th, 2006 at 6:35 am

    Mark,

    You’re well on the way to mak­ing me bet­ter 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

  46. dobata said on: October 27th, 2006 at 5:10 pm

    great topic, it’s always a prob­lem when you start from scratch.Looking for­ward to the next chapter

  47. Moreno Franco said on: October 30th, 2006 at 8:25 am

    Nice Stuff Mark

    About design­ers color sub­jectiv­ity: You did not men­tion — design­ing for the tar­get market. 

    Your first para­graph does not cover the fact that suc­cess­ful design­ers, design for the end user. Be assured that what the con­sumer may be attrac­ted to is not nec­cessar­ily what the designer or advert­iser may per­son­ally like. 

    I have designed much suc­cess­ful pack­aging and pro­mo­tional mater­ial that I per­son­ally did not like — but appealed to the tar­get mar­ket. Hence their success. 

    It may be help­ful if you were to include some­thing about: “Con­sid­er­ing Your Audi­ence When Using Color and Typography”. 

    You do a good service. 

    Moreno Franco

  48. Flat said on: October 30th, 2006 at 11:45 am

    The way in grey!  Then turn to colour .. 

    yep.. Have to tone is so so important!

  49. Leezig said on: November 1st, 2006 at 12:20 am

    Love the stripped back approach — I’ll stick to a gray­scale pro­to­type for my next site before I make any col­our decisions. When’s the mon and duo palettes post due?

  50. Joerg Petermann said on: November 1st, 2006 at 10:51 am

    Thanks for pub­lish­ing the idea. I’m wait­ing for the next steps… :))

  51. Jeff said on: November 1st, 2006 at 8:11 pm

    I enjoyed the sim­pli­city of this art­icle and the approach to design.

  52. Keith Cash said on: November 1st, 2006 at 11:16 pm

    Very good I will read the follow-up.

  53. online casino game http said on: October 9th, 2009 at 9:01 pm

    online casino no deposit…

    free no deposit online casino bonus. casino s online. free casino online. online casino black­jack. casino cpay­scom online. online casino roller. casino enter­tain­ment online. online casino gambling. …

  • Me

    Hello. My name is Mark Boulton. I’m a designer, an author, a speaker and I run a small design agency where we work with lovely cli­ents and pub­lish books as we go. This is my blog.

  • More of me

  • Publications

    Design­ing for the Web
    Start­ing from £19 + VAT for a PDF Down­load. £29 for a full col­our paperback.

  • Where I work

    Mark Boulton Design
    A small design stu­dio doing good things for nice clients.
    Five Simple Steps
    Pub­lish­ing easy to read design books.

  • See me speak

    Access­ib­il­ity 2.0
    Septem­ber 22nd, London.
    Drupal­con, Paris
    Septem­ber 1st — 5th, Paris.
    Web Dir­ec­tions South
    Octo­ber 6th, Sydney
    Build Con­fer­ence
    Novem­ber 5th, Belfast.
    Cam­bridge Geek Day
    Novem­ber 21st, Cambridge.
    Design­ing for the Web work­shops: Lon­don, Manchester & Glasgow
    Novem­ber & Decem­ber 2009

    • Copyright © 1999–2009 Mark Boulton. Made with an Apple Mac in Wales. Powered by WordPress and hosted by Media Temple.