Advanced Web Design Course

Week 1 – jan 25 – Intro to Tools + Deployment

  1. Introductions
  2. Share Previous Work
  3. Course Overview
  4. Student Survey
  5. Activities:
    1. Github
      1. Create Account
      2. Fork github project
      3. Install Github app
    2. Setup Atom
      1. Linters
      2. Configurations
    3. Workflow
      1. Keyboard ShortCuts
      2. Time-saving apps
  6. Homework – choose one track (due feb 1)
    1. Track 1: Github Pages
    2. Track 2: Static Site Generators – Jekyll, Middleman, and many more!
      1. Jekyll examples
      2. Middleman examples
    3. Track 3: Ruby on Rails app

Week 2 – feb 1 – UX and Accessibility

  1. User flows
  2. User Testing Best Practices
  3. Section 508 compliance
  4. Colorblindness
  5. Screenreaders
  6. i18n & l10n
  7. Homework – everyone – (due feb 8)
    1. Create user flow common web process (login/payment processing/etc)
      1. Success
      2. Failure
    2.  Choose one of the following websites:
      1. Evaluate it for its accessibility/compliance (Section 508 guidelines)
      2. Create and deliver 5-minute presentation (lightning talk)

Week 3 – feb 8 – Designing for Developers

  1. Accessibility presentations
  2. In-class readings and small-group discussions
    1. Long-Term Exposure to Flat Design
    2. What Screens Want & The Webs Grain
    3. Google vs. Apple Maps Design Lesson
  3. Style guides
    1. Color palettes
    2. Typography + Icon Design
      1. Fonts
      2. Icons – SVG vs. Icon fonts
      3. Resizing, changing color on hover, accessibility
      4. Activity: Create 1-2 icons that would belong to an existing set
    3. Modules
  4. Homework (due feb 15)
    1. Choose from potential sites to be redesigned
      1. Read about Markdown for ReadMe
      2. Add short paragraph to ReadMe describing accessed needs
      3. Start to compile content, images, text, inspiration
    2. First draft of style guide for redesign
      1. Choose font pair
      2. Create 3 or more icons
      3. Color Palette
      4. Modules
        1. Buttons
        2. Inputs
        3. Dropdown
      5. Optional!
        1. logo
        2. favicon

Potential sites for redesign:

Week 4 – feb 15 –  Designing for Developers

  1. Critique style guides
  2. Developer-ready Comps
    1. Layer Comps
    2. Photoshop and CSS
    3. Layouts
  3. HTML/CSS review
    1. HTML5
    2. CSS3
  4. Homework (due feb 22)
    1. Choose and create a demo of a technique you don’t know how to do
      1.  HTML/CSS
        1. Parallax
        2. Flexbox
        3. Email Templates
        4. z-indexing
        5. Animatron – HTML5 Animation
        6. …and more!
      2. Rapid prototyping
        1. Flux
        2. Framer
        3. Invision
        4. Pixate
        5. Principle
        6. …and more!
      3. Et cetera
        1. ASCII art with Monodraw
        2. Piskell app – pixel art and animated sprites
        3. Create a musical instrument using your web browser
    2. Read Designing for the Web & Pixel Perfect Precision handbook
    3. Go over Photoshop Layer Comps
    4. Developer-ready comps (using elements from style guide)
      1. Homepage
      2. Wildcard web page

Week 5 – feb 22  – Designing for Developers

  1. Demo techniques
  2. Discuss techniques
    1. Usability and aesthetics
    2.  Problems that were encountered
  3. Developer-ready Comps (continued)
    1. Audit comps using ustwo’s Pixel Perfect Precision Handbook
    2. In-class worktime
  4. Homework (due feb 29)
    1. Read SMACSS
    2. Developer-ready comps (continued)
      1. About/Work/Portfolio/Gallery page
      2. Form/Contact page

Week 6 – feb 29 – Advanced CSS: Preprocessors

  1. Developer-ready comp critiques
  2. Scripting/Preprocessors
    1. Sass
      1. Syntax
        1. Sassy CSS (SCSS)
        2. Sass
      2. BourbonNeat, Bitters, Refills
    2. Less
  3. Angelique Weger talks
  4. Homework (due march 11) Create your comp pages with HTML/CSS

Week 7 – march 7 – Advanced CSS: Transitions & Media Queries

  1. Animations/Transitions
  2. Media Queries
  3. Screen/Print styles
  4. Alert Styling
  5. Form Validation
  6. Individual/Small-group activity (30-min time box)
    1. Read Beginner’s Guide to CSS animations
    2. Animate a thing
  7. Present Group Activities
  8. Individual activity – Add animations/transitions, media queries, or alerts to redesign
  9. Homework: (due march 11) HTML/CSS of website completed

Week 8 – march 14 – Spring Break

Week – 9 march 21 – Intro to Javascript

  1. Syntax, Variables, Strings, Numbers
  2. Activity: Alerts
    1. Create and share gallery of good and bad alert messages
    2. Mockup form (credit card payment, ) with form validation
  3. Homework:
    1. First half of javascripting (through Number to String)
    2. Read Javascript: The Good Parts Chapters 1 – 2

Week 10 – march 28 – Intro to Javascript (Brigitte at EmberConf)

  1. Loops, Logic, Objects, Arrays, and Functions
  2. Activity: TBD
  3. Homework:
    1. Second half of javascripting
    2. Read Javascript: The Good Parts Chapters 3 – 4

Week 11 – april 4 – Intro to Javascript

  1. Debugging and the Console
  2. JSON API
  3. Optimizations
  4. Activity: TBD
  5. Homework: (due april 11)
    1. Read Javascript: The Good Parts Chapters 5 – 7
    2. Optional: Join and attend the charmCityJS Meetup on Wednesday, April 6

Week 12 april 11 – Intro to Javascript

  1. Interacting with the DOM
  2. Adding Javascript to your site
  3. Activity: TBD
  4. Homework: (due april 18)
    1. Use javascript in your redesign
    2. Complete Redesign

Week 13 april 18 – Intro to Javascript Libraries and Frameworks

  1. Final Redesign Project Due
  2. Overview of Javascript Libraries
    1. JQuery
    2. d3
    3. React
  3. Overview of Frameworks
    1. Ember/Angular
    2. Phaser
  4. Homework choose one track (due may 2)
    1. Track 1: Create or use a JQuery plugin
    2. Track 2: Create a d3 visualization
    3. Track 3: Create a small app using a javascript framework
  5. In-class work time

Week 14 april 25 –Intro to Javascript Libraries and Frameworks

  1. In-class work time
  2. Support, code reviews, small group critiques

Week 15 – may 2 – Summary / Conclusion

  1. Student Evaluations
  2. Student Presentations