FADN303 Web Design
Roski School of Art and Design
University of Southern California Spring, 2017

Instructor: Joe Potts, Email: josephpo@usc.edu
Classroom: Harris Hall 112D
Class time: Friday, 2:00 p.m. - 4:50 p.m.
Office hours: Friday, 12:00 p.m. - 2:00 p.m. (by appointment)

Please Note: Schedule is subject to change. Please check frequently and e-mail instructor with any questions.

Week 1: Friday, January 13

Introduction: HTML, FTP, Page Sourcing, and the Web
In Class
  • Introduction to course, syllabus, browsers, best practices, and sourcing HTML documents
  • Intro to Web, HTML, markup, and semantics
  • Download and install Brackets and/or Sublime Text 3
  • Demo: Basic HTML
Lecture Slideshows

Week 2: Friday, January 20, 2017

Content Management Systems (CMS) and Image Formats

Week 3: Friday, January 27, 2017

HTML/CSS Foundations
In Class
  • Assignment #2 (IxD Research Blog) Due
  • DIVS and The CSS Box Model; Margins, Padding, Border; Block Level and Inline Elements; IDs, Classes and Pseudo-classes
  • Lecture/demo: Assignment #2; Quick Review (Web Literacy, Syntax, Client and Server, File Naming Conventions, Folder Structure); IDs, Classes, Pseudo-classes; Semantic Tags; Color; Box-sizing: border-box vs. content-box
  • The Difference between div ID and div Class
Useful References:
Lecture Slideshows

Week 4: Friday, February 3, 2017

HTML/CSS Foundations (Continued)
In Class
  • Assignment #3A (Style an Interview) Due
  • Demo/lecture: FTP, Upload Your Site!;
  • Download and install Cyberduck 5.0.11
  • Create a simple class homepage. Post a link to your Assignment #2 project blog on your class homepage
  • Lecture: DIVs and Block Elements / Designing in HTML/CSS
  • Upload your site to FTP
  • Lecture/demo on putting elements together
  • If time: CSS Linear Gradients, GitHub
Useful References:
Lecture Slideshow

Week 5: Friday, February 10, 2017

Midterm Project Phase One: Research, Ideation, and Sketching
In Class
  • Assignment #3B Due
  • Lecture: CSS Background Properties
  • Assignment #3C “Make Your Homepage!” Grading Rubric Discussion
  • Lecture: Style Tiles
Begin Work on Midterm:
  • Project Statement (200-300 words)
  • Research References (5 references)
  • Project Precedent Studies (i.e. something similar to what you'd like to do)
  • Sketches and Style tiles
Lecture Slideshows

Week 6: Friday, February 17, 2017

Midterm Project Phase Two: Sketching and Prototyping & Phase Three: Composition and Refinement
In Class
  • Midterm Statement, Research, and Project Style Tiles Due
  • Lecture: HTML Page Anchors/“Bookmarks”, HTML5 <video> Tag
  • Assignments #3C: Work Session and Desk Critiques
Lecture Slideshow
  • Assignment #3C: “Make Your Homepage!”
  • Finish Midterm Project

Week 7: Friday, February 24, 2017

Midterm Presentations & Critique
In Class
  • Midterm Assignment #3C Due:formal presentations and critique
  • Assignment #4 design brief
  • Chris Marker, La Jetée (1962), viewing/discussion
Lecture Slideshow

HTML / CSS case study, media queries, Simple Single Page Scroll site

2D Transformations, Transitions, intro to scripts with uilang
In Class
  • Assignment #4 Check-in (complete collection of photos and description of plan)

JavaScript, jQuery, Pagination, Scrolling, and Parallax
In Class

Github and Jekyll
In Class
  • Finish Meta-website
  • Host meta-website on github
  • Present two possible ideas for a final project
Extra Credit
  • Use Jekyll to build meta-website

Final Projects (Research Phase)
In Class
  • Due:Assignment 6: Meta-website
  • Informal presentations and group critique
  • Assignment #7 Final Project Brief
  • Assignment #7 Project Statements: 100-word printed statement addressing scope, objectives, audience, and goals of your final website
  • Assignment #7 (Final Project): “Real Clients”
  • Assignment #7 sitemap, wireframes, and mood boards / 'style tiles'

Final Projects (Work in Class)
In Class
  • Due: Assignment #7 design research, sitemap, wireframes, and mood boards / 'style tiles'
  • Build out full draft of final projects

Final Projects (Finishing touches)
In Class
  • Critique draft, looking at structure, visuals, interface, and typography
  • Class evaluations
  • Finish Final Project, plus anything else you need to do to finish up older projects. Upload all to the class page. You may also upload to your github page.

Final Critique