Portfolio: AVT 217-001: Introduction to Web Design Course Outline

AVT 217-001: Introduction to Web Design, Fall 2017

Course Outline

This is the course outline portion of my Fall 2017 AVT 217-001 Syllabus. I arranged the course into six units. Each unit has a series of topics and activities covered in that unit. The Mechanics and Toolkits for Web Design unit topics overlapped with other units to cover the topics in context. Each unit had activities and assignments. Some unit assignments were part of larger projects. One of the projects, My Favorite Thing Web Page Design, is detailed in another post.

Units


The Field of Web Design

This course is an introduction to web design. To get our feet wet and our sights oriented, we start with learning about the web design world. The activities in this folder focus our attention to look at the web not just as users, but as designers and problem solvers. We look at what the web is as a medium, the history of web design, design patterns, and why web sites exist. Some activities also try to stretch our creative muscles to look at from different angles and think about the web with different perspectives.

Web design, like any other design field, is about solving problems. To solve a problem, you need to understand the problem (and knowing is half the battle). To understand the problem, you need to study it.

Topics and Objectives

Roses & Thorns

  • Activity: In class discussion, continued as a discussion forum
  • Identify and list properties of the web that delight us, frustrate us, and challenge us to fix so that we gain an awareness of the web medium as designers.

Why websites exist

  • Activities: In class discussion, “What’s the point?” assignment
  • Identify and describe purpose of a web site.
  • Identify and describe the target audience of a web site.
  • Identify and describe a web site’s “look and feel”.

Types of web sites

  • Activities: In class discussion, “Web site scavenger hunt”
  • List and describe the types of content presented.
  • Identify a web site’s type based on the content presented.
  • List at least three different types of web sites.

Anatomy of a web page

  • Activities: “Dem Web Bones” assignment
  • Identify common design patterns in web page layouts.
  • Identify and label the structure of a web page based on content and design.

History of web design

  • Describe a basic timeline of the history of web design.
  • Identify significant influences/influencers that shaped web design over time.
  • Activities: “Web Design Trends” assignment and presentation
  • Identify distinguishing features/trends of different periods of web design.
  • Identify and describe current web design trends

Creative Endeavors

These activities are geared towards stretching those creative muscles, within the context of the above topics.

  • “Architecture imitates web imitates architecture”
  • “I’m so trendy”

Designing for the Web

Topics and Objectives

Design tools

  • Identify digital and analog tools useful for designing for web.
  • Compare and contrast tools for suitability for tasks.
  • Demonstrate use of tools for a web page design.

Design principles for the web

  • Describe how the principles of graphic design are applied towards designing for web.
  • List and demonstrate design principles specific to web/UX design.

Design cycle

  • Identify and list the typical design needs for a web page or site.
  • Describe a design process suitable for web design.

Role of content

  • Describe the role content plays in affecting the design of a web page.
  • List at least three different types of content typically present on a web page.

Design patterns

  • List and describe an example of a design pattern. Explain what problem the design pattern attempts to solve.
  • Define term ‘design patterns’ and describe how design patterns may be used in web design.

Sketching for UX and design studio

  • Describe the role sketching plays in problem solving.
  • Create a series of sketches that help solve a web design problem.

Prototypes and mock-ups

  • Define terms ‘prototype’ and ‘mock-up’.
  • Compare and contrast prototypes and mock-ups. Identify where each would be used as part of the design process.
  • Demonstrate using a prototype or mock-up to visualize a web page design.

Image formats and optimization

  • List and describe at least three image formats suitable for web page delivery.
  • Demonstrate the use of at least three types of web-ready image formats.
  • Describe the role image optimization plays and the tradeoffs/considerations for optimizing images for the web.

Typography on the web

  • Explain the role typography plays in web design.
  • Identify and describe the challenges specific to web typography.

Creative Endeavors

  • Project: ‘My Favorite Thing’ web page mock up

Skills building


Mechanics and Toolkits for Web Design

Topics and Objectives

How the Web Works

  • List and describe the components/tools/software needed for delivering and receiving web content.
  • Describe the general process/route data takes from page request to web page receipt.

How Web Pages Work

  • Describe, in general, how a browser loads and displays content.

Development and Delivery Tools

  • List and give examples of the types of tools needed for developing web pages and publishing pages to the web.

Publishing to the Web

  • Describe the process and tools necessary for publishing a web page on the internet.
  • Demonstrate uploading a web page to a server and viewing the uploaded page in the browser.

Managing Web Site Files

  • Demonstrate file and folder organization for a web site.
  • Describe and demonstrate how to indicate the path to a web page or asset file from the URL locator bar.
  • Demonstrate how to indicate a path to a file (web page and/or asset) from within an HTML file.

Validation

  • Define the term ‘validation’.
  • Describe how and why validation is used within the web design industry.
  • Demonstrate validating a web page using a validation service and display the result.

Skills Building


Building for Web

Topics and Objectives

How to speak HTML: HTML language and syntax

  • Describe and demonstrate the structure of an HTML document.
  • Describe and demonstrate correct HTML syntax.
  • Identify the parts of an HTML tag.

Semantic HTML

  • Define term ‘semantics’ and describe how it applies to semantic HTML
  • List and describe a benefit of using a semantic approach to HTML.

Structured HTML

  • Demonstrate using semantic HTML to create a structured HTML document.
  • Identify sectioning and no-sectioning elements

Putting the hypertext in HTML

  • Demonstrate how to create an anchor (link) to another HTML page.
  • Describe the difference between an absolute path and a relative path to another page or file.
  • Demonstrate using relative and absolute paths for creating an anchor (link) to another page and to insert an image in an HTML document.

Tables and Lists

  • Describe how to structure a table and a list in HTML.
  • Create a table of data using appropriate HTML table tags.
  • Create a list of items using appropriate HTML list tags.

Skills Building

  • All About Me
  • GIFs on the Table

Presentation, Styles, and Layout

Topics and Objectives

How to speak CSS

  • Describe and demonstrate correct CSS syntax.
  • Identify the parts of a CSS style declaration block.
  • Describe and demonstrate the three ways to add CSS to an HTML document.

Selecting HTML elements and applying styles

  • Describe how the browser uses CSS selectors to apply style to page elements.
  • List at least three types of CSS selectors.
  • List at least three selector combinators.

Fonts, colors, and decorations with CSS

  • Demonstrate applying styles to an HTML element that affects the element’s color, typeface, and type size.
  • Demonstrate three ways to declare a color value.
  • Use CSS to apply an image as a background to an HTML element.

Classes and IDs

  • Describe the difference between an ID and a class for an HTML element.
  • Demonstrate how to apply a class and an ID to an HTML element.
  • Explain how classes and IDs can be used to enhance semantics of the HTML and of the CSS.

Understanding the Cascade

  • Explain how inheritance affects an element’s style.
  • Explain how the browser uses specificity, importance, and proximity of CSS selectors to determine what style is displayed.

Document flow

  • Define document flow.
  • Describe the difference between static, relative, absolute, and fixed position property values affect document flow and an element’s location within the document.

Boxes and rectangles

  • Describe the difference between the content-box model and the border-box model.
  • Define term ‘box model’. Describe how the box model determines the size of an element’s boundary box.

Positioning elements

  • Demonstrate using CSS properties to arrange elements on a page into a layout.
  • Define floats and describe how to use floats for positioning elements.

Flexbox layouts

  • Describe the CSS Flexbox structure.
  • Demonstrate using Flexbox to arrange elements in a layout.
  • Identify types of layouts Flexbox is best suited for.

Grids and layouts

  • Describe the CSS Grid structure.
  • Demonstrate using Grid to arrange elements in a layout.
  • Identify types of layouts Grid is best suited for.

Creative Endeavors

  • Scary Web Page
  • CSS Graphics

Skills Building

  • Stone Soup layouts

Usability and Experience

Topics and Objectives

Basic Usability

  • Conduct a basic usability test on a design. Make design adjustments based on test results.
  • Define usability

Basic Accessibility

  • Incorporate basic accessibility features into a web design.
  • Define accessibility.
  • Describe features of an accessible web site.

Responsive Design

  • Define term ‘breakpoint’
  • Define term responsive design.
  • Demonstrate using media queries to modify a design at a breakpoint.
  • List and describe strategies for making a design responsive.

Responsible Design

  • Discuss practical strategies for responsible design.
  • Discuss the designer’s responsibility to the user.