Introduction to Web Authoring

1. Introduction to Web Authoring Ellen Cushman cushmane @msu.edu Class mtg. #24 www.msu.edu/~cushmane/wra210.htm www.msu.edu/~cushmane/wa2.htm

2. Where we are • M 3/17 assignment #4 intro, assign groups, brainstorm orgs. • W 3/19 selecting organizations, problem analysis procedure • M 3/24 proposal workshop • W 3/26 web standards (proposals due 1-2 pages) • M 3/31 designing test, planning • W 4/2 testing and compliance, executing • M 4/7 visual rhetoric, intro (readability (fonts & white space), rhetoric and psych of color schemes) • W 4/9 visual rhetoric, 2 (space: real estate, eye/hand movement, information layout) • M 4/14 Workshop usability testing (Progress report due 3-6 slides) • W 4/16 Presentation workshops. • M & W 4/21- /23 Presentations on websolutions Reports due. 4/23 Note the changes in content as per 3/26 discussion

3. Today in Class | Next Class • WedSolutions Design 2 • Space • Movement • Activity • Work on Progress Reports • Progress Reports Due • Workshop your final reports: • compile findings • assign tasks • begin final presentations

4. Or in this case, blackspace (wadka wadka) The space between elements on the page Comes in two flavors: Macrospace: space between major elements Microspace: the space between minor elements, like words! http://www.alistapart.com/articles/whitespace WebDesign 2: Whitespace

5. Preference for negative space is subjective and culturally based! Yep, depending on where you were raised and how, negative space is either an asset (think Feng Shui) or it’s a sign of abundance (think Victorian era design) or it’s a sign of discipline (think of religions that value the spartan look). WebDesign 2: Whitespace

6. Whitespace in WebSolutions projects How well does the whitespace draw your eyes to important features of the site? How well does whitespace indicate the importance of structural elements (does it help us see navigation? Content headings? Chunks of text? Is the whitespace there for a rhetorical purpose or is it a problem with coding? (Floats set incorrectly? Columns too short or wide?) WebDesign 2: Whitespace

7. Real Estate refers to the page/window size of your typical users. Screen sizes Window sizes Viewing for the visually impaired. How well does your group understand the screen and window sizes of their typical users? How economical is the use of space? WebDesign 2: Real Estate

8. Recall Wodtke’s principle #3: Designing ergonomically for the whole body. http://www.eleganthack.com/blueprint/sample.php Consider scrolling issues, are pages too long? Would sub menus help? Consider media elements to engage ears and eyes. WebDesign 2: Movement

9. Eye tracking The eye is trained to move in particular ways from our engagement with various kind of media. Here are tips for designing with eye movement around print on a web page in mind: http://www.virtualhosting.com/blog/2007/scientific-web-design-23-actionable-lessons-from-eye-tracking-studies/ WebDesign 2: Movement

10. Activity Using the above criteria, analyze your site in terms of its layout. Write notes on your slide, post your slides, then meet with your group to discuss the findings and recommendations you may make to your organi zation. WebDesign 2: Information layout

11. Progress Reports are due in the middle of next class See notes from last class for the templates of these reports. Post these reports to your personal pages Workshop for next class on reports & presentations. Homework