Introduction to Web Authoring
Class
mtg.
#24
Ellen
Cushman
cushmane
@msu.edu
www.msu.edu/~cushmane/wra210.htm
www.msu.edu/~cushmane/wa2.htm
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
Today in Class | Next Class
WedSolutions Design 2
Progress Reports Due
Space
Workshop your final reports:
Movement
1. compile findings
Activity
2. assign tasks
Work on Progress Reports 3. begin final presentations
WebDesign 2: Whitespace

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

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

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: Real Estate

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: Movement

Recall Wodtke’s principle #3:
Designing ergonomically for the whole
body.
– http://www.eleganthack.com/blueprint/sam
ple.php

Consider scrolling issues, are pages
too long? Would sub menus help?
 Consider media elements to engage
ears and eyes.
WebDesign 2: Movement

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/scientifi
c-web-design-23-actionable-lessons-fromeye-tracking-studies/
WebDesign 2: Information layout

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.
Homework

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.