Storyboard Example

© 2014 Laureate Education, Inc. Page 1 of 1

Two-Column Script Example

PAGE

© 2014 Laureate Education, Inc. Page 1 of 1

 © 2014 Laureate Education, Inc. Page 1 of 6  

Design Layout Techniques: Text, Font, Color, and Image     Introduction   This  presentation  is  a  quick-­‐reference  guide  to  aide  you  in  the  design  of  your   multimedia  learning  objects.  While  your  final  product  will  be  in  a  digital  format,  the   basic  principles  of  design,  color  theory,  and  typography,  as  traditionally  defined  by   the  Bauhaus  in  the  early  1900s,  still  apply.  Using  these  principles  and  theories  in   laying  out  the  design  of  your  page  or  screen  will  help  ensure  the  visual  clarity  and   quality  of  your  learning  objects.    

Text  and  Font     Typography  Basics   Nearly  every  design  begins  with  text.  Choosing  the  right  look,  size,  and  color  of  text,   along  with  making  it  legible  and  readable,  creates  good  typography.  The  typograph-­‐ ic  quality  of  your  design  is  often  determined  by  how  the  text  looks  because  often   there’s  more  text  than  anything  else.  It  is  very  important  to  make  the  text  look  good,   as  it  sets  the  stage  for  the  rest  of  the  design.  The  appearance  of  the  text  is   determined  primarily  by  the  four  typographic  choices  listed  below.     Typeface  or  Font  Choice   The  typeface  is  the  classification  of  a  family  of  fonts,  for  instance,  Helvetica  Regular,   Helvetica  Italic,  Helvetica  Bold,  and  Helvetica  Black.  The  font  is  the  look  or  design  of   the  text  characters  within  a  typeface  family.  The  most  common  typeface   classifications  are  serif  and  sans  serif.  A  serif  is  a  short  distinguishing  stroke  on  the   end  of  character  strokes  and  stems.  Sans  serif  fonts  are  without  any  distinguishing   strokes  as  the  name  suggests.    

Helvetica Regular Helvetica Italic Helvetica Bold

Serif Sans Serif

  Point  Size     Point  size  is  the  relative  measure  of  the  height  of  the  characters.  The  most   commonly  used  size  in  printed  documents  is  12  point  (this  document  is  using  12).   Different  fonts  may  not  appear  equally  as  large  at  a  given  point  size,  which  is  why   the  measurement  is  relative.  Be  prepared  to  adjust  as  necessary  when  varying  fonts   within  a  document.    

12  Point   24  Point  

 © 2014 Laureate Education, Inc. Page 2 of 6  

  Text  Alignment   Text  alignment  is  making  a  choice  of  where  your  text  starts  on  the  page.  This  is  also   known  as  justification.  A  typical  word  processor  or  design  software  provides  four   choices  for  text  justification:  left,  center,  right,  and  justify.  Even  though  left  and   justify  look  similar,  justifying  the  text  might  make  the  last  line  of  text  in  a  paragraph   considerably  shorter  than  the  other  lines.    

Left   Center  

     Right   Justify     Line  Length  or  Measure   Line  length  is  the  horizontal  width  of  a  text  block  (often  referred  to  as  column   width).  It  is  important  to  get  the  line  length  right  in  your  document.  In  print  we  can   easily  set  margins  to  keep  the  measure  accurate  on  the  page.  If  you  are  producing   for  the  web  or  video  screens,  a  measure  that  is  too  wide  may  get  cut  off  at  the  edge   of  the  screen.  A  measure  that  is  too  narrow  may  cause  the  reader’s  eyes  to  be   constantly  moving  back  and  forth.    

Color       The  Color  Wheel   A  color  circle,  based  on  red,  yellow,  and  blue,  is  traditional  in  the  field  of  art.  The   color  wheel  is  a  tool  for  designers  to  help  them  create  good  color  compositions   within  their  designs.  Knowing  how  to  use  the  wheel  to  pick  colors  that  harmonize,   complement,  and/or  contrast  each  other  will  help  you  select  a  color  scheme  that  can   create  an  eye-­‐pleasing  composition.                            

 © 2014 Laureate Education, Inc. Page 3 of 6  

Complementary  Color  Scheme   Complementary  colors  are  two  colors  opposite  one  another  on  the  color  wheel  (e.g.,   blue  and  orange,  yellow  and  purple,  and  red  and  green).  High-­‐intensity   complements  are  placed  side  by  side  to  create  a  visual  vibration  and  draw  attention   to  the  element.  Low-­‐intensity  contrast  is  accomplished  by  adding  black  or  white,   changing  the  values  of  the  hues  to  soften  the  effect.    

Blue  and  Orange   Yellow  and  Purple  

  Analogous  Color  Scheme   Analogous  colors  contain  a  common  hue  and  are  found  next  to  each  other  on  the   color  wheel  (e.g.,  violet,  red-­‐violet,  and  red).  They  are  similar  and  tend  to  blend   together  for  a  sense  of  harmony  and  are  effective  at  creating  a  feeling  of  depth.            

              Monochromatic  Color  Scheme   A  monochromatic  color  scheme  is  created  by  using  only  one  hue  (color)  and  various   values  of  it  (shades  or  tints)  for  a  unifying  and  harmonious  effect.          

 © 2014 Laureate Education, Inc. Page 4 of 6  

Neutral  Color  Scheme   Neutral  typically  means  without  color.  Neutral  colors  are  not  found  on  the  color   wheel.  They  are  created  by  using  black,  gray,  or  white  (without  color)  and  adding  a   tint  of  hue  to  create  undertones  of  color.  For  example,  beige  might  have  an   undertone  of  pink  or  tan  or  gold.  White  might  be  slightly  ivory,  yellow,  bluish,  or   peachy.  Black  can  be  a  very  deep  purple  or  blue.          

  Contrasting  Colors  with  Text   Contrast  reduces  eyestrain  and  focuses  user  attention  by  clearly  dividing  elements   on  a  page.  The  most  apparent  example  of  contrast  is  an  effective  selection  of   background  and  text  color,  as  shown  below:    

Black  and  White   White  and  Black  

  Image  

  The  Principles  of  Design   Wong  (1972)  defines  design  as  “visual  language.”  This  language  is  the  basis  of   design  creation.  Visual  language  is  similar  to  written  language,  as  it  is  made  of  small   elements  that  are  placed  together  on  a  page  to  create  a  human  communication   experience.  See  the  following  chart:    

Written  language   Visual  language   Letters  of  the  alphabet   Lines  and  shapes   Words   Forms   Sentences   Images  or  pictures   Paragraphs   Compositions   Essay   Painting    

 © 2014 Laureate Education, Inc. Page 5 of 6  

As  you  can  see,  there  are  many  elements  working  together  to  make  up  the  final   product.  The  final  product—an  essay  or  a  painting—has  guiding  “principles”  to  help   define  its  structure.  We  all  remember  writing  the  dreaded  three-­‐part  essay  in   grammar  school:  introduction,  body,  and  conclusion,  each  with  its  own  set  of  rules.   Visual  language  has  principles  too.  We  will  discuss  five  of  the  basic  principles:   balance,  contrast,  unity,  rhythm,  and  proportion.     Balance   Balance  is  defined  as  the  equalization  of  the  weight  in  the  elements  of  a  design   layout.  Placing  the  elements  symmetrically  on  the  page  and  distributing  the  weight   equally  achieve  balance.  Informal  or  asymmetrical  balance  may  be  achieved  when   the  value,  size,  and  location  of  unequal  elements  on  a  page  are  changed,  but  the   composition  is  balanced  because  no  one  part  of  the  design  overpowers  the  others.    

  Contrast   Contrast  in  a  visual  composition  is  creating  significant  degrees  of  difference   between  lines,  colors,  shapes,  values,  forms,  and  textures.  Creating  contrast  among   elements  in  a  design  includes  using  contrasting  colors,  sizes,  shapes,  locations,  or   relationships.      

  Unity   Unity  creates  a  feeling  of  wholeness  in  a  composition.  Unity  can  be  achieved  through   the  interrelation,  balance,  and  organization  of  all  graphic  elements  of  an  artwork  to   achieve  a  quality  of  oneness  or  a  pleasing  sense.    

 © 2014 Laureate Education, Inc. Page 6 of 6  

  Rhythm   A  composition  of  rhythm  creates  a  feeling  of  movement  in  which  some  graphic   elements,  lines,  shapes,  colors,  or  patterns  recur  regularly  in  a  work  of  art.    

  Proportion   Proportion  is  the  relationship  of  the  distance  of  objects  in  a  composition.  Proportion   is  achieved  by  altering  the  relative  size  and  scale  of  the  various  elements  in  a  design,   creating  a  relationship  between  objects,  or  parts,  of  the  whole  composition.