Portfolio: AVT 415-001: Usability and Web Design Course Outline

AVT 415-001: Usability and Web Design, Spring 2017

Course Outline

This is the course outline section of my Spring 2017 AVT 415-001 Syllabus. I arranged the course into four units, each focusing on an aspect of creating usable web sites from ‘under the hood’ to user-centered design concepts. Another post details one of the course projects called The Big Idea.


Web Standards

Topics and Objectives

Web Standards

  • Define terms ‘user-centered design’ and ‘standards-based design’.
  • Explain the role of web standards in user-centered web design.
  • Explain the ideal of separation of structure, presentation, and behavior.

Progressive Enhancement

  • Describe design methodology of progressive enhancement.
  • Compare and contrast design methodologies of progressive enhancement and graceful degradation.

Semantics and Structure

Topics and Objectives

Content Structure

  • Identify and label content types within a web page.
  • Organize content into a hierarchy by type for a web page.


  • Define term ‘semantic’ and explain how it applies to HTML.

HTML Semantics and Structure

  • Define term semantics and describe how it applies to HTML.
  • Demonstrate using semantic markup to describe the structure of an HTML document.

HTML5 Sectioning and Grouping Elements

  • List the most common sectioning and grouping elements used in HTML. Describe the types of page content are suitable for each.

Semantics with IDs and Classes

  • Demonstrate using labels on HTML elements and as CSS selectors to enhance the semantics and readability of the HTML and CSS code.

Stylesheet Semantics and Structure

  • Describe a semantic approach to organizing style declaration blocks and selectors in CSS.
  • Discuss pros and cons of using semantic selectors or class names.
  • Identify at least one methodology for organizing a stylesheet.


  • Identify and describe an HTML micro format.
  • Explain how and why micro formats are used to enhance the semantics of an HTML document.
  • Demonstrate using a micro format

Responsible Presentation

Topics and Objectives

Responsive Design

  • Identify at least three concrete ways to make a design responsive.
  • Define term responsive design.
  • Describe the challenges and benefits of making a design responsive.

Responsive Typography

  • Demonstrate use of relative units (em, rem, %, vh, vw, vmin) for setting fluid or flexible type.
  • Describe how type display is affected by context, device size, and screen resolution.
  • Describe how a progressive design approach can benefit web typography.
  • Demonstrate use of media queries to adjust type sizing based on design breakpoints at different device sizes and contexts.

Responsive and Flexible Images

  • Demonstrate using srcret attribute and element on a responsive web page.
  • Explain the “resolution switching” and “art direction” problems images have on responsive sites.
  • Demonstrate flexible scaling/sizing of images to fit multiple screen sizes/devices.

Breakpoints and Media Queries

  • Demonstrate use of media queries to adjust CSS properties at multiple breakpoints.
  • Define term “breakpoint”
  • Describe the difference between major and minor breakpoints.
  • Describe at least one method for determining breakpoint widths.

Flexible Layouts

  • Demonstrate affect display property values inline, block, and inline-block affect box-size and position.
  • Demonstrate creating a flexible layout using the flex box display value.
  • Define terms flex container, flex item, main -axis, -start, -end, -size, cross -axis, -start, -end, and -size of the flex box CSS module.

Usability and User-Centered Design

Topics and Objectives

Getting to Know the User

  • Compare and contrast user research with user testing.
  • Define terms ‘user research’ and ethnography.
  • Identify at least three sources or means for conducting user research.
  • Describe the role or purpose user research has as part of the design process.

Creating Personas and Scenarios

  • Define terms ‘user research’ and ethnography.
  • Identify at least three sources or means for conducting user research.
  • Describe the role or purpose user research has as part of the design process.
  • Define terms ‘persona’ and ‘scenario’.
  • Create a persona character based on user research.
  • Write 2-3 scenarios describing the persona character’s actions, needs, and/or experiences using an interactive product.

Content Strategy

  • Define term ‘content strategy’.
  • Describe how content affects the user experience.
  • Describe how content strategy fits in the interactive design process.
  • List and describe types of content that can appear in a web site.
  • Identify content, collect content, and organize content for a web site.

User Flows

  • Define term ‘user flow’.
  • Describe a user’s path through an interactive web site or app.
  • Create a user flow for a web site or app.


  • Define term ‘microinteracton’.
  • List and describe at least three examples of common microinteractions.
  • Design a basic microinteraction.

Designing for Input

  • List at least three ways a user can input data.
  • Describe the components of an input form.
  • Identify and list design features that help and hinder user completion of forms.
  • Design and build a form prototype.

Accessibility by Design

  • Define ‘accessibility’ and describe how the term applies to a web page.
  • Identify and list basic accessibility practices.
  • Apply basic accessibility design to a web page.

Usability Principles

  • Define term ‘usability’.
  • Identify and describe usability principles.
  • List and describe five ways to measure usability.
  • Apply usability principles to a web page.

Usability Testing

  • List and describe at least three types of usability tests.
  • Compare and contrast qualitative testing methods and quantitative testing methods.
  • Design and conduct a qualitative usability test for a web site.
  • Apply design modifications to a web site based on usability test results.