colour scheme design - Speaker Deck

Slide 1

Slide 1 text

colour scheme design

Slide 2

Slide 2 text

where to start…?

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

When do you have a blank canvas?

Slide 5

Slide 5 text

Consider the given. • existing colours • cultural context • conventions work with your client.

Slide 6

Slide 6 text

Plan for eﬀect. • what is the primary purpose of the site? • who is the site for? • what atmosphere / mood will be most effective? work with your client.

Slide 7

Slide 7 text

show & tell :) • experiment / test / preview • get feedback / iterate / finalise • get sign-off -> begin work on design. work with your client.

Slide 8

Slide 8 text

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 diﬀerent 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 diﬀerent 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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

slate Blue #6A839A deep Rosé #B791BA

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Designing the colour scheme.

Slide 14

Slide 14 text

Tools & tribulations. • ever expanding online tool sets • colour by numbers? • don’t lose your focus!

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

~DIY~

Slide 18

Slide 18 text

3 METHODS for colour scheme design 1. brand based 2. rooted in content 3. looking sideways

Slide 19

Slide 19 text

METHOD 1 brand based

Slide 20

Slide 20 text

} focus on brand colour/s slate Blue #6A839A deep Rosé #B791BA

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

slate Blue #6A839A deep Rosé #B791BA

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

slate Blue #6A839A deep Rosé #B791BA

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

METHOD 2 rooted in content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Nothing like a nice cuppa!

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Home Tea Selection Tea Selection Come & Visit Contact

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

METHOD 3 looking sideways

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

HOME TEA SELECTION COME & VISIT CONTACT Tea Selection

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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)

Slide 42

Slide 42 text

CASE STUDY existing site

Slide 43

Slide 43 text

CASE STUDY colour scheme design - looking sideways :)

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

colour use for site contextual highlight } }

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

CASE STUDY colour use for site contextual highlight

Slide 49

Slide 49 text

CASE STUDY colour use for site contextual highlight

Slide 50

Slide 50 text

colour use for site contextual highlight

Slide 51

Slide 51 text

CASE STUDY colour use for site contextual highlight

Slide 52

Slide 52 text

CASE STUDY colour use for site contextual highlight

Slide 53

Slide 53 text

Eﬀective Colour Design… 1. promotes the brand. 2. increases usability & accessibility. 3. enhances user experience. 4. results in happy users & clients :)

Slide 54

Slide 54 text

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