Schedule

This schedule maps out what we are covering in class each week and what work we are starting that day. It is very subject to change as we go along in class.

If you want to know what is due for next class, check here.

August 29 — Week 1

In our first week we will review the syllabus, get our programs set up, go through some Figma tips, and test our HTML and CSS knowledge.

Lessons

Overview
Figma Basics
HTML & CSS Test

Starting

E1: A Little Backgroud
P1: Tell a Story

Resources

Figma: Figma Learn
Adobe: Get Started with Adobe XD: Design.

September 5 — Week 2

The ability to create and interactive prototype of a website is an incredibly powerful tool for a designer. It is also important for designers to understand accessibility as it relates to the web. We will cover both these topics this week along with reviewing HTML basics.

Lessons

Plugins and Prototyping in Figma
Accessibility in Web Design

Starting

E2: Linking in Figma

Digital References

Figma: Prototyping
Figma: Guide to Components
Adobe: Adobe XD Get Started: Components and Libraries.
Adobe: Get Started with Adobe XD: Prototype.
Interneting is Hard: Introduction
Interneting is Hard: Basic Web Pages
W3C Web Accessibility Initiative
Wai-Aria 1.1 Cheat Sheet
WAVE Web Accessibility Evaluation Tool
Easy Checks - A First Review of Web Accessiblity
W3C Validator
Contrast Checker
Hemingway App
Dos and Don’ts on designing for accessibility

September 12 — Week 3

We will continue exploring the possibilities of prototyping in Figma and continue reviewing HTML and CSS basics.

Lessons

Prototyping in Figma (continued)
CSS Basics
Classes and IDs

Starting

E3: Hover and Animations in Figma

Digital References

Figma: Prototyping
Adobe: Get Started with Adobe XD: Prototype.
Youtube: Create a Functional Hamburger Menu Navigation in Figma
Youtube: Hamburger Menu Items as Anchors

September 19 — Week 4

A website can’t exist without links and this week we will refresh our memories of coding and styling links. We will also talk about responsive design and how responsive design is implemented in code through media queries.

Lessons

Writing and Styling Links
Responsive Design
Media Queries

Starting

E4: Birthday Card
E5: Linking Links

Digital References

Interneting is Hard: Links and Images
Interneting is Hard: Responsive Design

September 26 — Week 5

Continuing on the HTML and CSS path we are talking about web typography and forms this week. We are also reviewing the CSS box model.

Lessons

Web Typography
Forms
CSS Box Model

Starting

E6: Form Redesign

Digital References

Interneting is Hard: Web Typography
Interneting is Hard: CSS Box Model
Interneting is Hard: Forms
Adobe: Prototype
Adobe: Design a Sign Up Form
Adobe: Common Use Cases for Component States
User Inyerface
Can’t Unsee

October 3 — Week 6

A general review on some coding and design topics covered in previous weeks.

Starting

E7: Landing Page
P2: For Sale

Digital References

Interneting is Hard: Semantic HTML
Interneting is Hard: Flexbox
Interneting is Hard: Forms

October 10 — Week 7

No class this week. Use it as a catch up week to make sure you are all caught up on projects and exercises.

October 17 — Week 8

This week we will focus on wireframes.

Lessons

Wireframes

Starting

E8: Reverse Wireframe

Digital References

usability.gov: Wireframing
Balsamiq: What are Wireframes?
Figma: How to Wireframe
Adobe: Everything You Need to Know About Wireframe Design and Prototypes

October 24 — Week 9

People being able to use the sites we design is an important consideration while designing. This week we will start our conversation on usability for the web.