1 / 17

Introduction to Web Authoring

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.

dkozlowski
Download Presentation

Introduction to Web Authoring

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to Web Authoring Ellen Cushman cushmane @msu.edu Class mtg. #22 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 1 • Readability • Rhetoric of Color • Activity • Progress Report Template • WedSolutions Design 2 • Space • Movement • Activity • Work on Progress Reports

  4. 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!

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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

  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 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

  14. Progress Reports: Content 1 • What are your, questions, data sources, & methods in each of our four major focus areas: • Usability • Accessibility • Sustainability • Design 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

More Related