Upgrade to Pro — share decks privately, control downloads, hide ads and more …

colour scheme design

colour scheme design

3 methods for colour scheme design,
and a case study for good measure :)

Prisca Schmarsow

March 12, 2015
Tweet

More Decks by Prisca Schmarsow

Other Decks in Education

Transcript

  1. Plan for effect. • what is the primary purpose of

    the site? • who is the site for? • what atmosphere / mood will be most effective? work with your client.
  2. show & tell :) • experiment / test / preview

    • get feedback / iterate / finalise • get sign-off -> begin work on design. work with your client.
  3. use for all copy Oxygen Mono Oxygen SIL Open Font

    License (OFL) google.com/fonts/specimen/Oxygen Oxygen Light Oxygen Regular Oxygen Bold TYPEFACES COLOURS used only for logo license availble for download & embed: visuals for main menu buttons MUTED TEAL accent colour FADED PURPLE reference colour RUST RED action colour NATURAL subtle border colour SLATE content colour STONE window colour use for borders, hover / rollover colour, backgrounds, highlights use at different opacities for border colour use for main copy use for page background user for meta data such as date, name, quoted sources use for links and all calls to action #517877 #8485A2 #C66630 #CBCDB7 #666661 #F9F9F9 2015 use for all copy Oxygen Mono Oxygen SIL Open Font License (OFL) google.com/fonts/specimen/Oxygen Oxygen Light Oxygen Regular Oxygen Bold TYPEFACES COLOURS used only for logo license availble for download & embed: visuals for main menu buttons MUTED TEAL accent colour FADED PURPLE reference colour RUST RED action colour NATURAL subtle border colour SLATE content colour STONE window colour use for borders, hover / rollover colour, backgrounds, highlights use at different opacities for border colour use for main copy use for page background user for meta data such as date, name, quoted sources use for links and all calls to action #517877 #8485A2 #C66630 #CBCDB7 #666661 #F9F9F9 example of style guide for seeingdata.org
  4. Let’s assume the following: • your new client is a

    small new business, 
 in need of a brand new website • branding is ready and in use • your job is the design of the site
  5. Tools & tribulations. • ever expanding online tool sets •

    colour by numbers? • don’t lose your focus!
  6. 3 METHODS for colour scheme design 1. brand based 2.

    rooted in content 3. looking sideways
  7. CASE STUDY 1. fairly new brewery, moving to new premises:

    historic, listed building 2. redesign of site to promote new venue, brewery and additional services
 (tourist centre, brewery, restaurant) 3. design to show respect to history of building + promote micro brewery
  8. CASE STUDY BRAND • based on logo, including type •

    pump clips show collage of typefaces • black on white, with black frame
 (actual clips in pub vary ~ made from wood or metal with different designs - work created by local sculptor)
  9. CASE STUDY colour: context & application } } brewery /

    restaurant / event venue history / the building / about / tourism } } THE DANCING MAN HOME OUR FOOD lunch menu dinner menu drinks & desserts VISITS & TOURS OUR BEER photos ABOUT US contact us THE WOOL HOUSE photos history DMB team our philosophy our beer our brewery EVENTS & BOOKING event calendar Book now! the dancing man tour information our partners
  10. CASE STUDY colour use for site contextual highlight brewery /

    restaurant / event venue • relaxed mood / dusk • created by warm browns with deep red • enhance the ‘night out’ feeling • white highlight elements planned for events to hint at celebrations ATMOSPHERE We CAN organise a p✱✱✱ up in a brewery! • light / elegant / formal • created by off-white with antique blue • professional presentation of facts and info • neutral colour scheme fitting historic info as well as more formal connections (tourism) ATMOSPHERE formerly known as THE WOOL HOUSE history / the building / about / tourism
  11. CASE STUDY colour use for site contextual highlight • based

    on hops / malt • brewery-related imagery • black & white (only) VISUALS • traditional ornaments • based on leaves, swirls and calligraphic lines • black & white + antique blue VISUALS BUILT 1338 2011
  12. Effective Colour Design… 1. promotes the brand. 2. increases usability

    & accessibility. 3. enhances user experience. 4. results in happy users & clients :)
  13. image credits: • photos of tea pots: Ruby Lane -

    Christian Thirion - Bellux - FORLIFE • photos of tea cups via freepngimages - wikimedia - pics & photos - xdesktopwallpapers - the guardian site references • Adobe Color CC, Adobe • COLORAOTATE, Idea • style guide sample: seeingdata.org • CASE STUDY: dancingmanbrewery.co.uk Prisca Schmarsow [email protected] eyedea.eu @prisca_eyedea