170 likes | 172 Views
This class focuses on web authoring techniques, including web design, usability testing, visual rhetoric, and readability of fonts and color schemes. Students will work on assignments and projects to develop their skills in creating effective web solutions.
E N D
Introduction to Web Authoring Ellen Cushman cushmane @msu.edu Class mtg. #22 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 1 • Readability • Rhetoric of Color • Activity • Progress Report Template • WedSolutions Design 2 • Space • Movement • Activity • Work on Progress Reports
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. Visual Rhetoric: Fonts Some designers say readability includes legibility. Some say the opposite!
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 WebSolutions: Readability
Try these guidelines out for yourself: http://www.hgrebdes.com/colour/spectrum/colourvisibility.html The greater the contrast between colors, in general, the better the user’s perception of the words. Unless, of course the user is color blind. WebSolutions: Readability, 2
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 WebSolutions: Readability, 3
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?cat=603 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?cat=201 WebSolutions: Legibility, 1
A font’s 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 :) WebSolutions: Legibility, 2
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 WebSolutions: Legibility, 3
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! WebSolutions: Color
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 Activity
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 project’s scope or increase resources for the project in light of unexpected circumstances (e.g. lack of progress). Assess & Request Work completed Work remaining
Progress Reports: Content 1 • What are your, questions, data sources, & methods in each of our four major focus areas: • Usability • Accessibility • Sustainability • Design RDC
Progress Reports: Content 2 • How is your inquiry progressing? What is done? What remains to be done? • Usability • Accessibility • Sustainability • Design Gantt
Progress Reports: Content 3 • What have you learned so far? • Usability • Accessibility • Sustainability • Design Findings?
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