Web Design

1. Web Design Bill Pegram April 25, 2011

2. Goal of Presentation • Summarize ideas from part of The Non-Designers Web Book, Third Edition, Robin Williams & John Tollett, Peachpit Press, 2004

3. Design Issues on the Web • Print vs. Web and how it affects Design (Chapter 5) • Basic Design Issues for Non-Designers (Chapter 6) • Designing the Interface & Navigation (Chapter 7) • How to Recognize Good & Bad Design (Chapter 8)

4. Print vs. Web and how it affects Design (Chapter 5) • Cost of publishing – web much lower than print • Color – print uses CMYK (cyan, magenta, yellow, and black) whereas web uses RGB (red, green, blue) – many colors don't exist in CMYK • Revisions, updates, and archives – inexpensive and expected by web user • Distribution – distribution not a problem on web, but challenge is to make your web address known

5. Print vs. Web and how it affects Design (Chapter 5) (cont.) • Customer response much easier • On web, you can link to additional information rather than publish it yourself • File size – print files need to be high resolution whereas web images need to be low resolution • Sound and movies are an option • Web designers don’t need to be in close geographical proximity to clients

6. The print advantage • More portable • Cheaper to read • More familiar • Read and take it anywhere • Print tools are better developed • Print is reliably WYSIWYG • Print is faster

7. Chapter 6 – Basic Design Principles for Non-Designers • Alignment • Proximity • Repetition • Contrast

8. Alignment • Choose one alignment and use it on the entire page – e.g. if you choose to align the basic text on the left, then left align all the text, including the headings (i.e. don't center the heading) • Horizontal alignment is just as important as vertical alignment – type sits on an invisible line called the baseline so align all the text on the same baseline • If you have items left aligned, draw vertical lines along all flush left edges – the more things along the line, the stronger the alignment • Not everything has to be aligned to the same edge

9. Additional points • Wiliams and Tollett discourage beginning designers from centering everything • Move elements away from the extreme left edge of the web page • Don't set headline text in all caps; it makes things harder to read

10. Proximity • Proximity refers to the relationships that items develop when they are close to one another • If you have a series of paragraphs and each has a heading above it, if the same amount of space is above and below the heading, each heading and paragraph appears as separate elements

11. Repetition • Each page in a web site should look like it belongs to the same web site; repetition makes this happen • Repetitive elements – navigation buttons, colors, style, illustrations, format, layout, typography – e.g. http://santafean.com/index.html

12. Contrast • Contrast should be strong, not mild • Pages should have a focal point

13. Web interview with Robin Williams • http://www.graphic-design.com/Web/feature/Robin/index.html • "At the onset of a project, designers should print up the first pages of several sites that exemplify the category for which they are designing. Then they should begin asking questions about the category or genre of sites:What are the distinctive features that create the style?For instance, what kind of typefaces do they use in body copy, what size of type, what are the line lengths for body copy, what is the ratio of image to text, what kinds of typefaces are used in headlines or graphic text, what kinds of images are used (people photos, abstract images, collages, upscale illustrations, etc), how are the images used (text wraps around images, backgrounds, tilted, overlapped, etc.), how much white space is left, what kind of backgrounds are used, how much Flash is used, how prevalent are DHTML menus, what sort of navigation do they use, and on and on." • "So you need to walk a thin line between audience expectations and a unique look for your client."