Web Design, Advanced Template

WEB DESIGN TOPICS TEMPLATE: Usability, Accessibility, and Information Architecture (adv, liberal or non-liberal) 4 credits

A. PURPOSES

Since you already have extensive background in the tools and techniques of implementing websites, this learning contract focuses on designing for users: usability, accessibility and universal design, and information architecture.

B. LEARNING OBJECTIVES

While the specific weights placed on these objectives will vary based on your concentration and interests, your work will demonstrate these attributes:

Design: Your website and papers will demonstrate that you learned good principles of web design by showing

  • understanding of, and attention to, your audience
  • clarity of purpose
  • usability (as defined in the readings)
  • accessibility (as defined in the readings)
  • effective organization of information for a large-scale website
  • integration of your readings in principles of web design with your own taste in websites and articulation of your the synthesis of ideas
  • application of the above synthesis in designing your website and articulation of that application in your final paper

Techniques: Your website will demonstrate the ability to apply what you learned by having these characteristics

  • the site works on multiple browsers and devices (including smartphone and tablet): pages load and work as the user expects
  • The site is built with valid code (as defined by the world wide web consortium (W3.org))

The site is compliant with accessibility standards (validator: web accessibility evaluation tool http://wave.webaim.org/

Professionalism: All of your work will show that you can not only build effective websites for your purpose, but that you can also work with clients (internal or external) in a professional manner.

C. LEARNING ACTIVITIES

TOOLS AND TECHNIQUES

HTML5 and CSS: You have previously studied web design tools and techniques; the materials in this section are suggestions that you may use for filling in gaps and maintaining currency: Head First HTML and CSS by Elisabeth Robson and Eric Freeman, second edition (or a comparable book of your choice subject to my approval) doing each exercise as you move through the book.

You will check your work with the validator at http://validator.w3.org/ to validate your HTML. For CSS, you will learn to use the current W3C Specifications found at <http://www.w3.org/Style/CSS/> and you will learn to use the CSS validator <http://jigsaw.w3.org/css-validator/>. Working through the book means that you will try the exercises, post them on a practice web site, and view them from at least two browsers to verify what works and what does not.

DESIGN PRINCIPLES

Web Design and Usability:

You will read and work through (1) “Web Develop” by John December, http://www.december.com/web/develop.html , (2) Don’t Make Me Think Revisited by Steve Krug, and (3) Web Style Guide: Basic Design Principles for Creating Web Sites, by Patrick J. Lynch and Sarah Horton http://webstyleguide.com/wsg3/index.html

  • Based on the December website, you will prepare a brief paper in which you describe the Audience, Purpose, and Objectives of your web site.
  • You should then select several web sites from a variety of types, organizations, and styles. Using both your own taste and the design principles in December, critique each web site in your learning journal. You should build a set of criteria for evaluating websites based on your own taste and upon what you’ve learned about the principles of web design. I will also provide you with URLs (website addresses) for web sites which discuss web design principles in the web site which supports this contract.
  • You will write a paper (approximately 5-8 pages) in which you explain to me what conclusions you’ve drawn about web design and the reasoning behind those conclusions. This is where you’ll demonstrate integration of the ideas from the readings with your ideas from your critiques.
  • You will devise a plan for usability testing of your website.
  • You will submit a Storyboard/wireframe of your website so that (1) I can see what you plan for the site as a whole, and (2) we can agree on what portion of the site you will implement for this learning contract.

Accessibility:

Accessibility combines facility with tools and techniques with a solid foundation in usability. To learn the importance of designing for universal accessibility, as well as the techniques for doing so, you will work through A Web for Everyone: Designing Accessible User Experiences by Sarah Horton and Whitney Quesenbery. Other resources can be found at the HTML Writers Guild’s AWARE Center (AWARE stands for Accessible Web Authoring Resources and Education) <http://aware.hwg.org/> as well as the Web Accessibility Initiative (WAI) of the W3C http://www.w3.org/WAI/. You will work through the appropriate chapter in Lemay to learn how to use Cascading Style Sheets appropriately.

 

Information Architecture:

To extend your understanding of web design to large scale web sites, you will read and work through Information Architecture for the World Wide Web, current edition, by Louis Rosenfeld and Peter Morville. You will use this material to develop a process for working with clients. You will present this process to me in an appropriate format for client presentation.

FINAL PROJECT

Finally, you will complete a project, designed in consultation with me, in which you apply what you’ve learned to the design and implementation of a large-scale web site [Note: you will design and plan a large-scale website; you will build only a small fraction of that website]. You must have approval of your project design before you start your project. You will also write a paper in which you explain your purpose and goals, what choices you had to make, what you tried and didn’t work, and how your web site served your goals.

 

D. METHODS AND CRITERIA FOR EVALUATION

You will be evaluated on your written work and on your finished web site. Your knowledge of web technology and web design will be demonstrated in your web site. Your web site will demonstrate your facility with the tools and techniques of web page creation. Whether you hand code with HTML or use an editing program, your web pages must be consistent with W3C standards for HTML (e.g., valid code) and for accessibility for people with disabilities (e.g., compliant with Priority 1 and 508 guidelines). Pages should load quickly and should work on a variety of browsers using different devices (including mobile). More important, the thought processes that you use to demonstrate how your web site achieved your goals, as well as the application of good design principles, must be clearly explained in your written work. Your paper will show that you have met or exceeded the learning objectives outlined above.

E. PLAN FOR FORMATIVE ASSESSMENT

Since each student’s project and learning contract will vary depending on concentration, interests, and goals, this section provides a framework for you to use in designing your plan to complete this study.

  • Identify the papers/presentations that are included in your learning contract. The Audience, Purpose, Objectives paper should be completed within the first two weeks; the paper on good principles should be completed about four weeks after that.
  • Your Storyboard/wireframe of your website should be completed by the middle of the term.
  • You should be able to start building individual pages AND POSTING ON A SERVER FOR VALIDATION no later than week 9 of the term. This will give us something to use for validation before you’ve built your entire web site!