Introduction to Web Authoring

1
Introduction to Web Authoring
Ellen Cushman cushmane _at_msu.edu
Class mtg. 22
www.msu.edu/cushmane/wra210.htm www.msu.edu/cush
mane/wa2.htm
2
Where we are
Note the changes in content as per 3/26
discussion

• 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

3
Today in Class Next Class

WedSolutions Design 1 Readability Rhetoric of
Color Activity Progress Report Template
WedSolutions Design 2 Space Movement Activity Work
on Progress Reports
4
Visual Rhetoric Fonts

• Font Readability
• Perception of the words
• How easy is it to scan the word and decode it?
• Can a word or phrase be perceived from its
  surroundings (white space, size, color)

• Font Legibility
• The design of typeface itself
• Is the design transparent?
• Does it have serifs?
• Does it draw attention to itself and have a
  message.

Some designers say readability includes
legibility. Some say the opposite!
5
WebSolutions Readability

• Readability W3C Guidelines
• Studies have shown that perception of text, our
  ease of scanning it, and decoding it is enhanced
  by contrast in colors. See guideline 2 on color
  visibility
• http//www.w3.org/WAI/ER/IG/ert/ert-19991221.html

6
WebSolutions Readability, 2

• Try these guidelines out for yourself
• http//www.hgrebdes.com/colour/spectrum/colourvisi
  bility.html
• The greater the contrast between colors, in
  general, the better the users perception of the
  words.
• Unless, of course the user is color blind.

7
WebSolutions Readability, 3

• Color blindness affects many people, making
  websites difficult to read. To see the ways in
  which color blind people view your text, use this
  tool
• http//gmazzocato.altervista.org/colorwheel/wheel.
  php

8
WebSolutions Legibility, 1

• Legibility has to do with font size and style,
  its personality if you will.
• Some designers strive for fonts that send a
  message
• Handwriting on the wall
• http//www.dafont.com/theme.php?cat603
• Blood of Dracula? Sabrina Star?
• http//www.themeworld.com/fonts/index.html
• Watch out for stereo-typography!! (Check out the
  foreign look fonts here
• http//www.dafont.com/theme.php?cat201

9
WebSolutions Legibility, 2

• A fonts transparency
• Some designers believe that fonts should be seen
  and never heard!
• They should invisibly carry their message--not
  draw attention to themselves.
• Need a sample? Look at the font in these slides
  )

10
WebSolutions Legibility, 3

• Size does matter! At least in fonts.
• This is a matter of accessibility
• And a matter of readability
• Check out what happens when you increase the size
  of a font on a website
• Notice the sea of white space?
• The indefinite word breaks?
• http//www.hgrebdes.com/typefaces/sizemyth.php

11
WebSolutions Color

• Color psychology
• Colors are culturally and psychologically loaded.
• http//www.colormatters.com/brain.html
• Dr. J.L. Morton summarizes many ways in which
  colors impact people. Interesting!

12
Activity

• Using the framework for fonts readability,
  legibility and any psychological aspects of color
  you choose
• Analyze your site together as a group.
• What recommendations might you make for redesign?
• Take notes on your slides, come together as a
  group, and discuss your recommendations

13
Progress Reports The basics

• This is a persuasive genre! You will likely have
  one of two aims
• To convince your audience (me, in this case) that
  your team is on track, organized, and likely to
  meet the goals you set
• To convince your audience of a need to re-focus
  the projects scope or increase resources for the
  project in light of unexpected circumstances
  (e.g. lack of progress).

Assess Request
Work remaining
Work completed
14
Progress Reports Content 1
What are your, questions, data sources, methods
in each of our four major focus
areas Usability Accessibility Sustainability D
esign
RDC
15
Progress Reports Content 2
How is your inquiry progressing? What is done?
What remains to be done? Usability Accessibility
Sustainability Design
Gantt
16
Progress Reports Content 3

• What have you learned so far?
• Usability
• Accessibility
• Sustainability
• Design

Findings?
17
Progress Reports FAQ
Q How long? 3-6 slides Q What
format? PowerPoint two charts RDC Gantt, notes
to me Q How do we turn it in? A Post it to
your project page, load it up, show it to me on
Monday 4/14