Design+Code01

15FNMDC000 / Fall 2015

• 00Pre-Class Set-Up

  Before the first day of class, please set up your laptops according to the following instructions:

  • If you don’t yet have one, create a GitHub account
  • If you don’t already have a text editor (e.g., Sublime, TextWrangler) installed, install GitHub’s Atom editor (Recommended: Install Autocomplete Plus and Autoclose HTML. Go to Atom > Preferences > Install then search for autocomplete plus, autoclose html and click Install.
  • Download & install (or upgrade) Xcode command line tools. For Yosemite (OS X 10.10+), follow these instructions (Scroll down a bit to the section “MacOS Yosemite.” You”ll need to create a Mac Developer account if you don’t already have one.)
  • Install Git using Homebrew. Watch this brief video for installation instructions: http://vimeo.com/14649488
  • Set up GitHub SSH key: https://help.github.com/articles/generating-ssh-keys/
  • (Recommended) Cache GitHub password https://help.github.com/articles/caching-your-github-password-in-git/

• 019/28: Welcome! Intro to the Command Line, Git, GitHub

  Review of command line basics, Git and GitHub: Week01 Exercise

  Additional Resources: Git Reference: Pro Git, Git videos.

• 0210/5: Intro to Photoshop & Illustrator; Web Design Basics

  Review: class syllabus, survey results

  Exercise Files: Week02

  Photoshop Basics: Learn the Essentials

  Basic Elements of Web Design:
  Layout & Grids; Typography; Color; Figure/Ground; Rhythm & Balance; Pattern; Texture & Repetition; Scale & Proportion; Hierarchy & Framing.

  Additional Resources:

  • Font Resource: Google Fonts
  • Tips for combining typefaces from the acclaimed foundry formerly known as Hoefler & Frere-Jones: http://www.typography.com/techniques/
  • Read: What is Typography?, Typography in 10 Minutes and Summary of Key Rules
  • Video (might require a Skillshare account): Typography That Works: Typographic Composition and Fonts
  • Robert Bringhurst’s seminal book, The Elements of Typographic Style, adapted for the Web: The Elements of Typographic Style Applied to the Web
  • Watch: Bitmap vs Vector Understanding the difference between raster and vector images 
  • Google Design Guidelines: Google’s Material Design, Android UI Guidelines
  • Apple: iPhone & iPad (iOS) User Experience Guidelines, iPhone & iPad (iOS) User Interface Guidelines, Mac OS X User Experience Guidelines, Mac OS X User Interface Guidelines 

• 0310/12: Intro to HTML + CSS

  Exercise files: Week03

  • HTML
    • W3Schools HTML Tags Reference
    • HTML Validator
  • CSS
    • W3Schools CSS Reference
    • CSS Validator
  • Dev Tools
    • http://browsershots.org
      
    • How to Use Chrome Dev Tools like a Pro
    • Chrome DevTools reference
    • What’s new in Safari 9 (for OS X El Capitan)
    • Safari Web Inspector

• 0410/19: HTML + CSS, continued

  Preparing for the Midterms

  Exercise Files: Week04. Includes lecture notes. Also, see Week03 links (above).

  • Tutorials
    • Building Web Pages with HTML 5
    • Video: Intro to HTML (Thanks, Evan!)
    • Codecademy: Make a Website

• 0510/26: Special Topics

• 0611/2: Midterm Project presentation

• 0711/9: Responsive Design

• 0811/16: SVGs & Crash Course in Illustrator

• 0911/23: Advanced Selectors

• 1011/30: Final Project presentation