Intro to Web Design

  • Semester: Fall 2026
  • Instructor: Michael McDermott
  • Location: Art and Design Building, Room 1020
  • Timing: Mondays or Wednesdays from 10:30–1:10pm
  • Office Hours: Scheduled here

Syllabus

delivery & timing

We will meet once a week in person for two hours and forty minutes in the Art and Design Building. The classes are required and during our sessions we will discuss work, complete demos, and further our design knowledge. The class is scheduled to run for 15 classes and you can expect to work for 6 hours outside of class each week.

prerequisites

AVT 180: New Media in the Creative Arts, AVT 110: Digital Design Studio, or permission of instructor.

course description

An introduction to contemporary web design, in particular to standards, as a successful tool in design communication. Students gain hands-on experience on design issues specific to Web-based presentations, learn web page layout, effective navigation and delve into the design process.

overview

Building a website or web application is a multi-disciplinary design process that encompasses visual design, interface design, interaction design, content development, coding, as well as business strategy. Exceptional web design is attentive to these different facets whether it is viewed from the perspective of product design, graphic design, or industrial design. Every student stretches themselves in this course.

This hands-on course teaches students how to conceive, prototype, and design websites. In order to better understand the possibilities and constraints of browser-based design, students will also gain a basic knowledge of how to build websites using modern web standards. This is not a course that will teach students about building websites from scratch or that use a CMS or framework like Wordpress, Squarespace, Bootstrap, or similar tools.

Participants should finish the course with improved layout and typography skills, an understanding of how websites are built, and familiarity with more technical facets like responsive design.

objectives

textbook

There is no textbook for this course.

programs

We will be using Figma for all design work in this class. You will also need a browser with a preference for Chrome, Firefox, or Safari.

content

This course consists of exercises, projects, demos, discussions, and critiques. The exercises are to familiarize students with specific concepts and ideas and the projects are to synthesize the concepts and ideas we will cover.

discussion of work

You will need to take an active role in both the presentation and discussion of your work. We will review projects in a variety of ways and you are expected to be able to talk and write about your own work and give feedback to your peers about their work. The ability to discuss your work and other student’s work is a very important part of your education at Mason. Use this class to improve on those skills.

communication

Your ability to communicate with me is of prime importance in this course. If you are going to be absent, late, or not have your work, it will be your best interest in communicating those things to me in advance. I do not need to know your reasons for being absent, late, or not having your work but I do need to know. A simple, short email will be fine.

The same goes for if you are struggling in this class or having other issues that are hindering your ability to complete work in this class. The more you keep me in the loop the more I can help you and adjust as needed.

attendance policy

Four absences, regardless of excuse, will be an automatic failure of the class. After the first absence, each class you miss will lower your engagement grade by 25 points unless you let me know you won’t be in class before class and make an effort to cover what you missed in class. For example, if we had a critique in class, you should probably schedule office hours to get some feedback on your work.

After the first late arrival, each class you are late to will lower your engagement grade by 10 points unless you let me know you are going to be late before class. Exceptions to this policy are for people actively communicating with me prior to the fourth absence.

engagement

Your engagement in this class will affect your final grade (and, by extension, the quality of your work) for this course. Your attendance is tied to this grade along with your ability to actively take part in this course in the following ways.

grading

Grades will be based on engagement (25%), exercises (25%), and projects (50%).

engagement (25%)

This percentage will be based on your engagement in the class which is explained on above. Attend class and be engaged in this course and its content throughout the semester and this should be an easy 25%.

exercises (25%)

Exercises are meant to be quicker, skill building tasks that improve your design knowledge.

projects (50%)

Each project will generate two different grades. One grade will be based on your ability to submit the required, weekly checkpoints for the project. These weekly checkpoints use a simple rubric based on your timeliness, improvement, and completion. The second grade will be based on the final project you submit and has a more extensive rubric. At the end of the semester you will have 4 total project grades that are all weighted equally for this 50%.

late work

Late work will be accepted for three weeks after a deadline with the exception of the final project which will be due at the end of the semester. There is a section on the rubrics showing how late work is factored into the assignment grade.

rubrics

Rubrics are used to grade exercises and projects. The rubrics are tied to each submission on Canvas. The rubrics allow you to understand how work is graded and to reference while working to self-evaluate.

campus closure policy

In the event that campus is closed due to weather or other emergency, this class will meet on Zoom to cover the material able to be covered virtually unless otherwise notified. If class moves to a virtual session, normal attendance and late arrival policies apply.

ai policy

Generative AI tools may be used in this course with clear guidelines. Students must disclose when AI tools are used and how they contributed to the work. Misuse may be treated as a violation of academic standards.

schedule

Most days we will meet for the entire time but some weeks we will have individual meetings or end early. Some classes will be work days so make sure to bring things to work on each class. Unless otherwise specified, all work is due at the beginning of class.

A note—Time management is an important skill to master and should be worked on all your classes. Staying up all night working is not a badge of honor, it typically means you didn’t budget your time correctly. Staying up all night isn’t healthy and making sure you are keeping yourself healthy is your first priority.

The schedule below is outline of what we will be covering this semester. It is subject to additions, subtractions, and shifts. The most current version is on the class website.

class 1

class 2

class 3

class 4

class 5

class 6

class 7

class 8

class 9

class 10

class 11

class 12

class 13

class 14

class 15

projects

Project 1: Learn Figma

Start your Figma Design learning journey by designing a portfolio website from scratch.

See Full Project →

Project 2: Website for a Blank

Fill in brief description.

See Full Project →

exercises

Exercise 1: 19 Questions →

Exercise 2: Copy It →

Exercise 3: Twelve Typefaces →

Exercise 4: I Can Be Your Hero →

Exercise 5: Visualizing Responsiveness →

Exercise 6: Weather Icon Set →

Exercise 7: Style Guide →

Exercise 8: Reverse Wireframe →

Exercise 9: Make It Responsive →

Exercise 10: Hover Board →

students