Design Resources

1
Design Resources

• Presented for Capstone Course in Educational
  Technology
• Danah Henriksen
• henrikse_at_msu.edu
• May 31, 2003

2
What do we mean by Design?

• Design can be both a process and a product
• It requires us to consider several factors
• Communication
• Reflection
• Aesthetics
• Psychology

3

• For the purposes of this course, we are generally
  interested in web design.
• Several important questions
• What is visually appealing?
• What is usable/user-friendly?
• What is good design?

4
Web Design - Schools of thought

• An engineering approach
• Emphasize Usability - User-centered Design
• Clean/Minimalist design No frills
• Little focus on aesthetics
• Reference Jakob Nielsen, Designing Web
  Usability
• Foremost scholar on usability
• http//www.useit.com for more info

5
Web Design - Schools of thought

• An artistic approach
• More focus on aesthetics
• What looks visually appealing or innovative
• Usability may be less of a focus in Flash heavy
  or technologically complex sites (but they look
  cool)
• Reference Try Macromedias Site of the Day for
  examples of cutting edge Flash sites
• http//www.macromedia.com/showcase/archive/

6
Web Design - Schools of thought

• Range of options between two perspectives
• Combining your sense of aesthetics, personal
  style and preferences with usable design ideas
  may provide balance
• Reference Donald Norman
• Once a usability guy, now considering aesthetics
• http//www.jnd.org/dn.mss/Emotion-and-design.html

7
Ultimately content is the key

• The design is the backdrop which highlights or
  displays your message.
• It should therefore emphasize or help to
  communicate your ideas.
• Consider what type of style or images would best
  fit your content.
• Look at examples of other interesting or
  appealing designs to gather ideas (print ads,
  interesting websites, quality design examples)

8
Elements of Design

• Whether designing for the web, a flyer,
  newsletter, activity, etc. it may help to keep in
  mind some elements of quality in creative design
• Research
• Typography
• Contrast
• Layout
• Grids
• Critique

9
Research informs the design process

• Designers often spend quite a bit of time making
  sure they understand the message of a design
  project (the style, spirit, etc.)
• Since you probably already know your
  content/message well, this may not be critical.
• Its helpful to have taken time to think about
  and reflect on what you want to communicate and
  what that might look like.

10
Typography The artful representation of words

• Which typeface personalities align with your
  message? (formal, modern, whimsical, digital)
• Endless fonts and typefaces are available.
• By considering the message a font communicates,
  designers can use type effectively.
• Investigate some new fonts at
• adobe.com/type/main.html
• emigre.com
• itcfonts.com

11
Contrast makes it visually engaging

• The element that tells us where to look first,
  what to notice second.
• Achieved in numerous ways
• Through form Strong and simple shapes, clean,
  stark lines, etc.
• Through value change Variance in the shading
  and sizes.
• Through color Hue (distinctive characteristics
  of a color), Value (lightness or darkness of a
  color)
• Experimentyour own eye is the best judge of
  contrast.

12
Layout the map for the viewer or reader

• Should provide specific direction to the viewer.
• Clear about what information is the most
  important and order in which it should be
  accessed.
• Good layouts provide a hierarchy that allows the
  viewer to make sense of the message.
• First page of the site should let the viewer know
  what is available and where.
• Try casually sketching/storyboarding your design
  ideas and bounce them off potential users.

13
Grid systems provide structure and rhythm

• Designers often create an underlying set of
  placement guidelines - a grid.
• Sketched as a starting point, grids help visually
  organize the information.
• Creates an underlying logic.
• No magic secret to designing a grid
• Redraw/recreate a grid system from a magazine,
  publication or ad that you like.
• Or just start by sketching one element of your
  information and move things around from there.

14
Critique Analysis develop your design eye

• Considering how and why other designs communicate
  well will improve your work.
• Most quality professional designs are influenced
  by preexisting work or ideas.
• Look for opportunities to read, discuss or
  reflect on examples of good, bad, or intriguing
  design.
• Analyze the successes and failures of the designs
  in the world around you.

15
In conclusion

• Designers seem to view many things in their
  environment from the lens of design.
• Looking for opportunities to articulate thoughts
  and criticisms, and evaluate the essentials of
  design will help to develop a sense of what works
  and what doesnt.

16
Final note

• With these things in mind, a set of useful
  resources and an eye for and interest in design
  are quite useful.
• Please feel free to take a look through a few of
  the web resources I have found, noted at
  http//www.msu.edu/henrikse/design
• And please feel free to contribute suggestions,
  sites, resources or questionshenrikse_at_msu.edu