grid exercise 1 - victoria torfvictoriatorf.com/media_design/documents/dbose_2page.pdf · with its...

13
Grid Exercise 1: Bose_2page.indd 1 2011/04/18 10:06 AM

Upload: others

Post on 23-Aug-2020

5 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Grid Exercise 1 - Victoria Torfvictoriatorf.com/media_design/documents/DBose_2page.pdf · With its aggressive, stimulating and sexy nature, assertive attention and provok- ing action,

Grid Exercise 1:

Bose_2page.indd 1 2011/04/18 10:06 AM

Page 2: Grid Exercise 1 - Victoria Torfvictoriatorf.com/media_design/documents/DBose_2page.pdf · With its aggressive, stimulating and sexy nature, assertive attention and provok- ing action,

Grid Exercise 2:

Bose_2page.indd 2 2011/04/18 10:06 AM

Page 3: Grid Exercise 1 - Victoria Torfvictoriatorf.com/media_design/documents/DBose_2page.pdf · With its aggressive, stimulating and sexy nature, assertive attention and provok- ing action,

Bose_2page.indd 3 2011/04/18 10:06 AM

Page 4: Grid Exercise 1 - Victoria Torfvictoriatorf.com/media_design/documents/DBose_2page.pdf · With its aggressive, stimulating and sexy nature, assertive attention and provok- ing action,

Bose_2page.indd 4 2011/04/18 10:07 AM

Page 5: Grid Exercise 1 - Victoria Torfvictoriatorf.com/media_design/documents/DBose_2page.pdf · With its aggressive, stimulating and sexy nature, assertive attention and provok- ing action,

Bose_2page.indd 5 2011/04/18 10:07 AM

Page 6: Grid Exercise 1 - Victoria Torfvictoriatorf.com/media_design/documents/DBose_2page.pdf · With its aggressive, stimulating and sexy nature, assertive attention and provok- ing action,

Bose_2page.indd 6 2011/04/18 10:07 AM

Page 7: Grid Exercise 1 - Victoria Torfvictoriatorf.com/media_design/documents/DBose_2page.pdf · With its aggressive, stimulating and sexy nature, assertive attention and provok- ing action,

Bose_2page.indd 7 2011/04/18 10:07 AM

Page 8: Grid Exercise 1 - Victoria Torfvictoriatorf.com/media_design/documents/DBose_2page.pdf · With its aggressive, stimulating and sexy nature, assertive attention and provok- ing action,

Bose_2page.indd 8 2011/04/18 10:07 AM

Page 9: Grid Exercise 1 - Victoria Torfvictoriatorf.com/media_design/documents/DBose_2page.pdf · With its aggressive, stimulating and sexy nature, assertive attention and provok- ing action,

Bose_2page.indd 9 2011/04/18 10:07 AM

Page 10: Grid Exercise 1 - Victoria Torfvictoriatorf.com/media_design/documents/DBose_2page.pdf · With its aggressive, stimulating and sexy nature, assertive attention and provok- ing action,

Bose_2page.indd 10 2011/04/18 10:07 AM

Page 11: Grid Exercise 1 - Victoria Torfvictoriatorf.com/media_design/documents/DBose_2page.pdf · With its aggressive, stimulating and sexy nature, assertive attention and provok- ing action,

Bose_2page.indd 11 2011/04/18 10:07 AM

Page 12: Grid Exercise 1 - Victoria Torfvictoriatorf.com/media_design/documents/DBose_2page.pdf · With its aggressive, stimulating and sexy nature, assertive attention and provok- ing action,

Debrief for 2 page layout: For this two page design layout I spent most of my time trying to figure out what document I was going to use and what style it would be. Originally I was going for a childlike short story. After many sketch-es I realized it was not the look I wanted to execute and if I wanted to incorporate my out style of designing I wouldn’t be able to do it. I then looked into articles about design principles. I decided on a rather popular one even though I was skeptical do to it’s length be-ing too much to fit on 2 pages. I started with designing how I wanted to title to look and went from there. I wanted to go for a simple, sheik, contemporary look. I wanted to use more white space around the layout but there was too much text. I also wanted to make the pages square but the text length also prevented me from doing so. I was skeptical about not being able to do much with the design with so much text but I’m happy with the results. I think the title area on the top of the first page balances out well with the design at the bottom of the second page. The entire thing was executed in indesign, which is not something I’m used to doing. I originally made the title in illustrator being that I’m more comfortable with it but I realized I could execute it in indesign with the rest of the document. Going through and justifying the text was extremely time consuming but I really like the way that justified text looks.

Bose_2page.indd 12 2011/04/18 10:07 AM

Page 13: Grid Exercise 1 - Victoria Torfvictoriatorf.com/media_design/documents/DBose_2page.pdf · With its aggressive, stimulating and sexy nature, assertive attention and provok- ing action,

DO

TAKE   TIME   TO   LEARN   ABOUT  THE   COLOUR   WHEEL.  All   colours   are   made   up   of   three  PRIMARIES:  red,  blue  and  yellow.  

When   you   combine   the   primaries,  you   get   the   three   SECONDARY

COLOURS:  orange,  purple  and  green.  

When   you   combine   each   secondary   colour  with   its   neighboring   primary,   you  get   six   TERTIARY COLOURS: which   are   yellow-­orange,   yellow-­green,   blue-­green,   blue-­purple,  red-­purple,  red-­orange.

 That’s  how  you  get  the  familiar  12-­colour  wheel.  

Every   colour   has   a   TEMPERATURE:   from   the  red/yellow   side   of   the   spectrum   it’s   warm,   and  from   the   blue/purple   side   it’s   cool.   It   has   an  INTENSITYthat’s  described  as  SATURATION  or  chroma.  Saturation   is  determined  by  how  much  or  how  little  grey  a  colour  contains.  High  intensity  colours  are  pure,  bright  and  vivid.  Less  saturated  colours  are  muted,  soft  and  subdued.  Every  co-­lour  has  a  VALUE,  determined  by  its  lightness  or  darkness.  When  planning  a  colour  combination,  value  and  saturation  are  as  important  as  the  HUE

DON’T        MISSUNDERSTAND  THE    BASIC  COLOUR   WHEEL   RULES.   Most  colours   look   great   when   combined   with  the   shades   in   various   values   or   intensi-­ties.   These   colour   schemes   are   called  MONOCHROMATIC, which   consist   of  colours  drawn  from  the  same  hue.

neighbors.  Any  three  neighboring  colours  on  a  12  part   colour   wheel   make   up   an   ANALOGOUS colour  scheme.  They  are  always  harmonious  as  they   share   the   same  undertones:   yellow-­green,  yellow   and   yellow-­orange.   To   add   a   bit   more  impact  to  the  analogous  group,  you  can  expand  it  with  another  neighboring  color,  e.g.  orange.

that’s   how   you   get   COMPLEMENTARY  colours:   they   are   the   opposite   hues   on   the  colour   wheel,   that   “complete”   each   other  when  used  as  a  pair.  Warm  colours  have  cool  complements  and  vice  versa.

I  found  this  handy  Flash  application  that  visually  explains   the   colour   wheel   in   an   easy   to   follow  style.  There’s  also  a  helpful  HP  colour  wheelthat  showcases  different  colour  schemes.

DO

ANALYSE  COLOUR  UNDERTONES.

If  you  like  blue  but  want  a  subtle  effect,  choose  a  white  or  grey  with  a  blue  undertone.  A  red-­orange  terracotta  pot  has  a  yellow  tone  to  it,  hence  those  colours  will  blend  harmoniously  with  each  other.  On   the   other   hand,   don’t   emphasize   an   unde-­sired  undertone  by  pairing  it  with  its  complement:  if  the  shade  of  brown  has  a  pink  undertone  to  it,  combining  it  with  green  (the  complement  of  red)  will  only  intensify  the  problem.

DON’T

NEGLECT   THE   FACT   THAT  COLOURS  CHANGE  ACCORDING  TO  THEIR  SURROUNDINGS.  A  large  rectangle  and  a  narrow  line  (or  type)  of  the  same  colour   will   seem   to   have   different   values  when  placed  against  a  white  background:  the  colour  in  the   line  will   look  darker   than   it  does   in   the  rect-­angle,  because  it’s  surrounded  by  much  brighter  white  space.    When  two  shades  of  the  same  colour,  one  dark  and   one   light,   are   paired   with   each   other,   the  darker   shade   will   look   darker   and   the   lighter  shade  will  appear  to  be  lighter:  Outlining  a  colour  in   a   darker   shade   will   enhance   the   enclosed  colour,   helping   to   keep   a   colour   from   “spread-­ing”   into  surrounding  areas.  On   the  other  hand,  a  lighter  outline  will  cause  a  colour  to  spread  to  adjacent  colours.

DOEXPLORE   A   COLOUR   AND   IT’S  PSYCHOLOGY.  While  perceptions  of  color  are   rather   subjective,   and  have  different  mean-­ings  in  various  cultures,  some  colours  affect  us  in  a  similar  way.  The  human  eye  sees  warm  colours  before  cool  hues.  Cool  colours  appear  to  recede,  while  warm  colours  appear  to  advance,  however  the  degree  of  saturation  can  make  a  difference  REDWith   its   aggressive,   stimulating   and   sexy  nature,   assertive   attention   and   provok-­ing   action,   the   red   is   impossible   to   ignore.  

PINKDepending  on  its  saturation  or  value,  pink  evokes  varied   mood   swings.   Magenta   and   fuchsia   are  perceived  as  sensual  and   theatrical.  But  water-­down  the  red  in  lighter  pinks  and  the  raw  sensual-­ity  of  red  is  replaced  with  gentle  romanticism.

ORANGEInheriting   some   of   the   drama   of   red,   orange   is  tempered   by   the   friendly   humour   of   yellow.   It’s  the  colour   that  stimulates   the  appetite  and  radi-­ates  with  warmth  and  vitality

YELLOWYellow   and   black   is   the   most   unignorable  colour  combination  in  nature  –  tigers,  stinging  bees   –   it’s   the   colour   that   says:   you’d   better  pay  attention  to  me.

BROWNRustic,   durable,   wholesome   and   deliciously  rich   are   just   some   of   the   traits   of   the   colour  that’s   often   associated   with   earth   and   home,  substance  and  stability.

BLUEEver   noticed   how   many   corporations  and   financial   institutions   use   blue   in   their  brands?  That’s  because  blue  is  seen  as  de-­pendable  and  committed.  It  is  also  the  colour  we   often   associate   with   calm   and   serenity.  Darken   the   blue   and   you’ll   add   an   instant  authority,  credibility  and  power  to  it.

GREENBecause  of   its   association  with   nature  and   foli-­age,  green   in  design  can  be  used  almost   like  a  neutral   colour:   greens   never   clash   with   red   or  

PURPLEIt’s   perhaps   the   most   enigmatic   and   complex  colour,  with  the  range  of  meanings  –  from  royal  to  elegant  to  spiritual  to  mysterious.  Purple  is  often  favoured   by   very   creative   and  eccentric   people  who  are  not  afraid  of  appearing  daring.

:Not   surprisingly   white   communicates   purity,  sense   of   clarity   and   simplicity.  White   is   also  perceived   by   the   human   eye   as   a   bright  colour,  that’s  why  it  works  so  well  in  contrast  with  all  other  colours.

BLACK  People  see  black  as  the  most  dramatic,  heavy,  powerful,   classic   colour   with   an   up-­scale   look.  Because  of   its  extreme  contrast   to  white,   black  and   white   is   the   quintessential   combination   of  depth  and  clarity,  power  and  innocence.

DON’T

BE   AFRAID   TO   EXPERIMENT  WITH   COLOUR   COMBINATIONS. Sometimes   even   the   forbidden   combinations  work.   Check   out   various   online   colour   tools  and  applications   that  will  help  you   to  chose   the  right   colour   combination   for   your   projects.   Mac  users  can  install  numerous  handy  colour  widget  for   the   Dashboard:  Adobe   Kuler,   Color   Theory,  ColorSchemer,  ColorBurn.

DO

EXAMINE   OTHER   SITES   AND  DESIGNS.In  one  of  the  upcoming  weeks,  I’ll  be  featuring  sites  that  were  designed  with  the  excellent  knowledge  and  sense  of  colour.  Meanwhile,  browse  numerous  CSS  galleries,  bookmark   the   sites   with   attractive   colour  schemes,  thumb  through  the  pages  of  various  design  magazines,   books,   not   just   the   ones  for   graphic   designers,   but   also   architectural  and   interiour  design  publications,  where  you  will  be  inspired  by  the  innovative  and  fabulous  colour  combinations!

DON’T

 FORGET   ABOUT   READABILITY   WHEN  COMBINING   COLOUR   WITH   TYPE.   It’s  true   that  we  mainly  deal  with   the  black   type  on  white  paper/page  background,  and   that  a  black  text  on  a  light  background  is  the  easiest  to  read.Pay  attention  to  the  relative  values  and  saturation  of   colours   when   a   background   colour   interacts  with   coloured   type.   The   contrast   between   type  and   background   diminishes   when   their   values  move  closer  to  each  other,  and  the  type  becomes  less  legible.  The  contrast  between  the  type  colour  and  the  background  colour  must  be  considerable  to  ensure  that  the  type  remains  visible.DD

N’T

COLORCCC RRR

DO’S & DON’TS

COLORHarmonious colour

combination reinforce the impact and

recognition, help in establishing

powerful identities and brand

Today we’ll examine the DOs and DON’Ts in designing with colour.

22pagelayout.indd 2-3 4/18/11 1:39 AMBose_2page.indd 13 2011/04/18 10:07 AM