Revision of DRAFT IN PROCESS Week 2: web vs print; designing for people from Sat, 2011-01-29 03:58

Our focus this week will be on two interrelated topics:

• Web design vs. print design
• The role of graphics, color choices and font styles in user experience

As with Week 1, we will have two threads for discussion of the main points, and a third thread for more general discussion of these two topics. 

How print design is different from web design

Essentially, print design is static and primarily limited by printing technology and budget, while web design needs to be dynamic and is primarily limited by accessibility and bandwidth. 

• Audience attention:

With print design it's okay to design for brief interactions, because most print design is intended for that (ads, brochures, business cards). With physical objects, people will also often go back and look at them more than once.

Conversely, with web design, you need to design to both attract temporary interest and also maintain longer interactions, because the web is ephemeral and users tend to not return to look at a site without a compelling reason (usually content). Design grabs and helps focus attention, while content and ease of use maintain it.

• Canvas size:

Print design can be limited to a tiny design space (a card) or allowed an enormous one (a newspaper or magazine page, a foldout page, a billboard). The limits are only dictated by budget, purpose and focus.

While the web can allow for an infinite canvas, user behavior limits what people will be willing to scroll to see, and the user will only initially see what his screen is capable of displaying. Increasingly, that also means that designers need to design for  netbook, tablet and mobile users, whose screens are smaller than laptop and desktop users. This is a bit like set design for a play or film - you are designing for the "camera frame" of the user's screen, and trying to make it enjoyable, easy, and worthwhile for the user to scroll.

Reading:

1. Jakob Nielsen on Print vs Web Design, in 1999: http://www.useit.com/alertbox/990124.html Much of this is still applicable, especially if you are designing for mobile users.
2. A very basic breakdown of Web Design vs Print Design: http://desktoppub.about.com/od/transitionprintweb/tp/Print_Design_vs_Web_Design.htm
3. An excellent discussion of the disconnect between the two types of design, professionally: http://www.myintervals.com/blog/2010/06/16/web-design-vs-print-design-and-the-wired-interactive-magazine/

The role of graphics, color choices and font styles in user experience

Web design is an evolution of print design.  Many things that work well in print do not work in web design, and vice versa. Fonts, graphics and color choices that work well in print need to be modified or adapted in order to make for a pleasant design and user experience on the web. 

• Graphics for the web can be confusing. Only a few file types are widely supported for the web: jpeg, gif, and png (we are not including media fie types in this stage of the discussion).
• Color choices
• Typography is a complex subject, but the main things to understand in reference to using them on the web is that fonts intended for digital display are relatively limited, and the vast majority of fonts are designed for print only. There is a movement toward making more fonts available, but it is still in development and may present more problems than solutions, at least to start with.
  • Legibility, or ease of reading, is the primary focus of font choices for web design.
  • Using images to show display fonts is becoming a deprecated practice.
  • Elaborate display fonts that work well in print do not usually work well at all as graphic elements (the exception to this is web-optimized logos)
  • Using multiple font families on a site is jarring to the reader's eye. Choose one for text, and if necessary, only one other for headings/menus/etc.
• Layouts also need modification to work on the web. For example, the print term "above the fold" now means "what the user sees on site loading"  when applied to web sites.

Reading:

1. How newspapers need to evolve for the web http://blog.ted.com/2009/04/02/the_fate_of_the/
2. http://www.cooper.com/journal/2009/09/shadow_of_the_moon.html a discussion of typography and how it relates to web design, including the future use of fonts on the web
3. On Web Typography is an excellent discussion of font choices and how they affect users: http://www.alistapart.com/articles/on-web-typography/
4. Real Web Type in Real Web Context describes the practicality of the Web Font standard: http://www.alistapart.com/articles/real-web-type-in-real-web-context
5. designing for people :http://www.ted.com/talks/lang/eng/david_kelley_on_human_centered_design.html