This document discusses principles of design for interfaces, including balance, emphasis, rhythm, unity, and visual hierarchy. It provides examples of how these principles can be applied to graphic design as well as web design. The document also discusses principles of analytical design put forth by Edward Tufte, including showing comparisons, causality, multivariate data, integration of different media, and quality of content. Finally, it discusses principles of interaction design such as usability, sociability, and languages of interaction including words, images, physical form, and time-based interactions.

1. McMaster University MM1A03
Introduction to Multimedia for the Humanities
Interface Design
The Principles of Design
From: “Fundamentals of Graphic Design” chapter by Robin Landa.

2. Principles of
Design
In this presentation we see how
Balance, Emphasis, Rhythm, and Unity
transfers from graphic print media to web design.

3. Balance
• Balance is an equal
distribution of weight.
• Understanding balance
involves the study of
weight, position, and
arrangement.
Shark bus doors, National Geographic Channel

4. http://www.tbshumorstudy.com/main.html

5. Emphasis
• Emphasis is the idea
that some things are
more important than
others.
• Must establish a focal
point and a visual
heirarchy.
http://csauce.files.wordpress.com/2007/09/zu_trail_destruction_1.jpg

6. A Focal Point
• A Focal Point is the
part of a design that is
most emphasized.
• Supporting focal points
are known as accents.

7. How to ... Focal Point
• Make it BRIGHTER • A DIFFERENT COLOUR • A
Colour if everything else is B/W • Make it Go A
Different Direction, A Different Value, Give it Texture ...
IN THE WEB WORLD MAKE IT
MOVE MAKE IT TALK.
• Other How-to’s?? Check out Page 66! Then embellish!

8. http://whiteboard.ups.com/

9. How to ...
Visual Hierarchy
• Where do you look first??
• Where do you look second??
• Where do you look third??

10. Rhythm
• Rhythm is a pattern
created by repeating or
varying elements.
• Think music where
there is a sense of
movement from one
sound to another.
mtv

11. Do these principles of RHYTHM apply to
http://www.mtv.ca

12. Unity Continuity, Grid, Alignment, Flow
Develops from:
New York Times Magazine (Hard Copy)

13. UNITY
See how these principles of
(Continuity, Grid, Alignment, Flow) apply to
http://www.nytimes.com

14. Principles of
Analytical Design
Edward Tufte

15. Analytical Design
Probably the best statistical graphic ever drawn, this map
by Charles Joseph Minard portrays the losses suffered
by Napoleon's army in the Russian campaign of 1812.
Beginning at the Polish-Russian border, the thick band
shows the size of the army at each position. The path of
Napoleon's retreat from Moscow in the bitterly cold
winter is depicted by the dark lower band, which is tied
to temperature and time scales. — Edward Tufe

16. From: http://www.edwardtufte.com/tufte/posters

17. Tufte’s Principles
For well-mapped analytic design, make sure you show:
1. Comparisons, Contrast, Differences.
2. Causality and systematic structure.
3. Multivariate data, that is more than 1 or 2 variables.
4. Integration of words, numbers, images, diagrams.
5. Documentation of data sources, authors, sponsors, etc.
6. Quality and integrity of content.

18. http://www.sundialmedia.com/maxmag.tv/index.html

19. Principles of
Interface Design
Gillian Crampton Smith
In Your Coursereader

20. Interaction Design
If I were to sum up interaction design in a sentence, I
would say that it’s about shaping our everyday life
through digital artifacts.
— Gillian Crampton Smith

21. Three Stages of Technology Use
1. The Enthusiast Stage. (Early Adopters)
Don’t care how easy or hard to use. Just want in.
2. The Professional Stage.
People who have a vested interest in it being hard to
use. The harder it is, the more valuable their skills.
3. The Consumer Stage.
The current stage in the use of computer technology.
Nonexperts who just want to pursue their everyday
lives. “If it’s hard to use they won’t buy it.

22. From Usability to Sociability
1. Interactive design systems must have implicit as well as
explicit meanings. The aesthetic qualities speak to people in a
different way by reading meaning into artifacts.
2. We design for usability, utility, satisfaction, communicative
qualities *and* we design for sociability.
3. The technologies we design should enhance a social web.
To this IT systems need to support the social aspect of work
and leisure.

23. Languages of Interaction Design
The Dimensions: 1-D, 2-D, 3-D, and 4-D
1. 1-D includes words, ie are the words in a menu the most
accurate encapsulations of the action they denote?
2. 2-D representational metaphors include graphics and icons
that are images symbolizing a larger idea.
3. 3- D are those of physical sculptural form.
4. 4-D. The fourth dimension is time. Animators have been
developing a language that expresses plot, emotion,
anticipation, and action