Design Principles

1,513 views
1,301 views

Published on

Published in: Design, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,513
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Design Principles

  1. 1. Design Primer Graphic Design Principles Interface Design Analytical Design
  2. 2. Principles of Design In this presentation we see how simple principles of Balance, Emphasis, Rhythm, and Unity transfer from graphic print media to web design.
  3. 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. 4. http://www.tbshumorstudy.com/main.html
  5. 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. 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. 7. How to ... Focal Point • Make it BRIGHTER • A DIFFERENT COLOUR • BIGGEST • A Colour if everything else is B/W • Make it Go a Different Direction, A Different Value, Give it Texture ... IN THE WEB 2.0 WORLD, MAKE IT MOVE MAKE IT TALK.
  8. 8. http://whiteboard.ups.com/
  9. 9. How to ... Visual Hierarchy • Where do you look first?? • Where do you look second?? • Where do you look third??
  10. 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. 11. Do these principles of RHYTHM apply to http://www.mtv.ca
  12. 12. Unity Continuity, Grid, Alignment, Flow Develops from: New York Times Magazine (Hard Copy)
  13. 13. UNITY See how these principles of (Continuity, Grid, Alignment, Flow) apply to http://www.nytimes.com
  14. 14. Principles of Interface Design Gillian Crampton Smith From: Designing Interactions http://www.designinginteractions.com/interviews
  15. 15. 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
  16. 16. 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.
  17. 17. 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.
  18. 18. 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
  19. 19. Principles of Analytical Design Edward Tufte
  20. 20. 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
  21. 21. From: http://www.edwardtufte.com/tufte/posters
  22. 22. 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.
  23. 23. http://www.sundialmedia.com/maxmag.tv/index.html

×