1. Design Resources Presented for Capstone Course in Educational Technology Danah Henriksen henrikse@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 http://www.useit.com

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 Macromedia’s 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. It’s 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) Experiment…your 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 doesn’t.

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 http://www.msu.edu/~henrikse/design And please feel free to contribute suggestions, sites, resources or questions: henrikse@msu.edu henrikse@msu.edu