Transcript Design Resources

Design Resources
Presented for Capstone Course in
Educational Technology
Danah Henriksen
[email protected]
May 31, 2003
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

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?
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
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 Macromedia’s Site of the Day for
examples of cutting edge Flash sites

http://www.macromedia.com/showcase/archive/
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
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)
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
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.
It’s helpful to have taken time to think about and
reflect on what you want to communicate and
what that might look like.
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
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)
Experiment…your own eye is the best judge of
contrast.
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.
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.
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.
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 doesn’t.
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 questions:
[email protected]