colour scheme design

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

Transcript

1. colour scheme design
2. where to start…?
4. When do you have a blank canvas?
5. Consider the given. • existing colours • cultural context • conventions work with your client.
6. 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.
7. show & tell :) • experiment / test / preview • get feedback / iterate / finalise • get sign-off -> begin work on design. work with your client.
8. 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
9. 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
11. slate Blue #6A839A deep Rosé #B791BA
13. Designing the colour scheme.
14. Tools & tribulations. • ever expanding online tool sets • colour by numbers? • don’t lose your focus!
17. ~DIY~
18. 3 METHODS for colour scheme design 1. brand based 2. rooted in content 3. looking sideways
19. METHOD 1 brand based
20. } focus on brand colour/s slate Blue #6A839A deep Rosé #B791BA
22. slate Blue #6A839A deep Rosé #B791BA
24. slate Blue #6A839A deep Rosé #B791BA
26. METHOD 2 rooted in content
28. Nothing like a nice cuppa!
33. Home Tea Selection Tea Selection Come & Visit Contact
35. METHOD 3 looking sideways
39. HOME TEA SELECTION COME & VISIT CONTACT Tea Selection
40. 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
41. 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)
42. CASE STUDY existing site
43. CASE STUDY colour scheme design - looking sideways :)
44. 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
45. colour use for site contextual highlight } }
46. 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
47. 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
48. CASE STUDY colour use for site contextual highlight
49. CASE STUDY colour use for site contextual highlight
50. colour use for site contextual highlight
51. CASE STUDY colour use for site contextual highlight
52. CASE STUDY colour use for site contextual highlight
53. Effective Colour Design… 1. promotes the brand. 2. increases usability & accessibility. 3. enhances user experience. 4. results in happy users & clients :)
54. 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 prisca@eyedea.eu eyedea.eu @prisca_eyedea