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.

January 24 — Week 1

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

Lessons

1.1: Introduction
1.2: XD Basics
HTML & CSS Test

Starting

E1: A Little Backgroud
P1: Tell a Story

Resources

Adobe: Get Started with Adobe XD: Design.

January 31 — 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

2.1: Plugins and Prototyping in XD
2.2: Accessibility in Web Design

Starting

E2: Linking in XD

Digital References

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

February 7 — Week 3

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

Lessons

3.1: Prototyping in XD (continued)
3.2: CSS Basics
3.3: Classes and Ids

Starting

E3: Hover and Animations in XD

Digital References

Adobe: Get Started with Adobe XD: Prototype.

February 14 — 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

4.1: Writing and Styling Links
4.2: Responsive Design
4.3: Media Queries

Starting

E4: Valentine’s Day Card
E5: Linking Links

Digital References

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

February 21 — 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

5.1: Web Typography
5.2: Forms
5.3: CSS Box Model

Starting

E6: Form Redesign
P2: For Sale

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

February 28 — Week 6

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

March 7 — Week 7

This week we will focus on wireframes.

Lessons

6.1: Wireframes

Starting

E7: Reverse Wireframe
E8: Landing Page

Digital References

usability.gov: Wireframing
Balsamiq: What are Wireframes?
Figma: How to Wireframe
Adobe: Everything You Need to Know About Wireframe Design and Prototypes
Interneting is Hard: Semantic HTML
Interneting is Hard: Flexbox
Interneting is Hard: Forms

March 14 — Week 8

No class, Spring Break!

March 21 — Week 9

This week is a catch up week. We will look at the progress on P2 but otherwise it is a time for you to work in class and make sure you are all caught up on projects and exercises.

Lessons

Individual meetings

March 28 — Week 10

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.