Web-Design-Course

Week 1 – sep 1 – The World Wide Web

  1. Introductions
  2. Syllabus: GD430_brigitte
  3. Course Overview
  4. Activities
    1. Student Survey
    2. Readings
      1. The Web We Have to Save https://medium.com/matter/the-web-we-have-to-save-2eb1fe15a426#.4u7p40k53
      2. The Fucking Open Web https://hueniverse.com/2016/06/08/the-fucking-open-web/
      3. The Open Web, Fuck Yeah! https://hueniverse.com/2016/06/20/the-open-web-fuck-yeah/
  5. Homework (due sep 15)
    1. In teams of two (using Invision, Illustrator, Sketch, something similar, or good-old-fashioned pen and paper), design two, complimentary online applications for a brand you deem in need of a makeover.
      1. One for Apple Watch following watchOS Human Interface Guidelines: https://developer.apple.com/watch/human-interface-guidelines/ https://developer.apple.com/watch/human-interface-guidelines/resources/ (especially don’t miss looking under resources which has templates and typefaces)
        1. Fonts: https://github.com/AppleDesignResources/SanFranciscoFont
        2. Want to try one on?  You don’t need an appointment anymore: http://www.apple.com/retail/towsontowncenter/
      2. One for Safari on desktop
    2. Design and present at least three screens per app
      1. Both applications should have a cohesive design language, point of view, and meet the rubric guidelines: http://brigittewarner.com/rubrics/
      2. Be prepared to articulate the challenges/differences between designing both apps

Want to design something practical?  Think service brands like: Craigslist, Yelp, Baltimore 311, Charm City Circulator,  Rock the Vote, Expunge Maryland, SPCA, National Park Service, Zipcar, or Wunderground

Prefer to create an experience?  Think products like Lego, STX, Ray Machine, Jlens, Under Armour, Taharka Brothers, Hot Pockets, Volkswagen, or Revlon

 

Week 2 – sep 8 – Browsers, Search Engines, and Surveillance

  1. Topics
    1. How the Internet works
    2. The Anatomy of a Browser
    3. Search Engines
      1. https://www.google.com/
      2. http://www.bing.com/
      3. https://duckduckgo.com/
      4. http://www.dogpile.com/
    4. AdBlockers, Advertising, Tracking
    5. Social Media, Free Speech
    6. Dark Web
  2. Activities
    1. Readings
      1. Zerofox doc https://www.dropbox.com/s/0nt4n86c83g707n/07329.pdf?dl=0
      2. Lilsis.org flowchart http://littlesis.org/maps/864-zerofox-monitors-black-lives-matter
    2. Further Reading/Listening
      1. Persistent Survelliance https://www.bloomberg.com/features/2016-baltimore-secret-surveillance/ + http://www.radiolab.org/story/eye-sky/
      2. Malte Spitz: http://www.zeit.de/datenschutz/malte-spitz-data-retention
      3. Undersea Cables: http://theconversation.com/in-our-wi-fi-world-the-internet-still-depends-on-undersea-cables-49936
      4. Digital Mapping Project: http://www.surfacing.in/
      5. Submarine Cable Map: http://submarinecablemap.com/
      6. Bathysphere: http://99percentinvisible.org/episode/bathysphere/
      7. How to Break the Internet: http://www.bbc.com/future/story/20150310-how-to-break-the-internet
      8. How the Web Works: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works
      9. Of Cables and Conspiracies: http://www.economist.com/node/10653963
      10. httpstatusdogs: https://httpstatusdogs.com/ (and cats: https://http.cat/)
      11. Internet Exchange Points by Size: https://en.wikipedia.org/wiki/List_of_Internet_exchange_points_by_size
      12. From the Deep Web to the City Streets: http://www.antropologia.cat/files/13_Grammatikopoulou,%20Christina_dossier2.pdf
      13. The Hitchhiker’s Guide to the Invisible Web: https://news.bitcoin.com/hitchhikers-guide-invisible-internet/
      14. How Snowden Escaped: http://news.nationalpost.com/features/how-edward-snowden-escaped-hong-kong
      15. FBI Records: The Vault: https://vault.fbi.gov/cointel-pro
    3. Watchings
      1. Citizenfour https://www.youtube.com/watch?v=oKkF-X4QLB4
  3. Homework (due sep 15) – finish Apple Watch/Safari applications
    1. Either emailed to me, uploaded to slack, or handed to me by 4pm sharp
    2. Complete Division of Work Feedback Form (only I will see the responses)

Week 3 – sep 15 – UX and Accessibility

  1. Critique Apple Watch/Safari applications
  2. Topics
    1. User flows
    2. User testing best practices
    3. Section 508 compliance
    4. Colorblindness
    5. Screenreaders
    6. Closed captioning tools
    7. I18n & l10n
  3. Homework (due sep 22 – choose one)
    1. Choose a website:
      1. Evaluate it for its accessibility/compliance (Section 508 guidelines)
      2. Create and deliver 5-minute presentation (lightning talk)
    2. Create a user flow for a common web process (login/payment processing/etc)
      1. Success/Failure
      2. Present polished (client-ready) flow

 

Week 4 – sep 22 – Developer Tools

  1. Accessibility/User Flow presentations
  2. Topics
    1. Terminals
    2. Text Editors
    3. Git
    4. GitHub
  3. In-class worktime
  4. Homework (due oct 6)
    1. Single-page Artist Website
      1. Must be upon GitHub Pages
      2. Only allowed two files* (*unlimited images is fine)
        1. index.html
        2. style.css
      3. Abstracted portrait of who you are and your design aesthetic (https://onepagelove.com/tag/artist)
    2. See rubric for details: http://brigittewarner.com/rubrics/

 

Week 5 – sep 29 -Introduction to HTML5/CSS3

  1. Topics
    1. Semantics & HTML5
      1. Lists
      2. Tables
      3. Links
    2. CSS syntax review
      1. Inline vs block level elements
      2. Margins/padding/borders
      3. Image replacement
      4. Responsive background images
      5. Importing fonts
  2. In-class worktime
  3. Homework (due oct 6)
    1. Single-page Artist Website
      1. Must be upon GitHub Pages
      2. Only allowed two files* (*unlimited images is fine)
        1. index.html
        2. style.css
      3. Abstracted portrait of who you are and your design aesthetic (https://onepagelove.com/tag/artist)
    2. See rubric for details: http://brigittewarner.com/rubrics/

 

Week 6 – oct 6 – Designing for Developers

  1. Asynchronous Single-Page Artist Website Critiques + Code Reviews
  2. Topics
    1. Style-guides
      1. Examples
      2. Color palettes
      3. Typography + Icon Design
        1. Fonts
        2. Icons – SVG vs. Icon fonts
        3. Resizing, changing color on hover, accessibility
        4. Icomoon: https://icomoon.io/
      4. Modules
  3. Activities
    1. Hand-draw/sketch icon set for the Station North Tool Library: http://www.stationnorthtoollibrary.org/
    2. In-class critique
  4. Homework (due oct 13)
    1. Choose from potential sites to be (re)designed
      1. Spend some time assessing needs and planning your approach
      2. Start to compile content, images, text, inspiration
    2. Style guide for (re)design as single-page PDF
      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:

a.) The DREAM client website (who would you love to build a site for?)

b.) A local (re)design American Visionary Art Museum (AVAM), Baltimore Kinetic Sculpture RaceSHOWSPACE, Baltimore School for the Arts, Current Space, Lost City DinerBoon St Farm, Maryland Volunteer Lawyers for the Arts, Mr. Trash Wheel, The Children’s Bookstore, Artist & Craftsman, Tortilleria Sinaloa, The Doll HouseBaltimore Bike Share, System Source, Second Chance, City Paper, Shoyou Sushi, The Land of Kush, Baltimore Threadquarters, Morton Street Dance Center

Week 7 – oct 13 – Designing for Developers

  1. Critique style guides
  2. Topics
    1. Developer-ready Comps
      1. Layer Comps – https://helpx.adobe.com/photoshop/using/layer-comps.html
      2. Photoshop and CSS
      3. Layouts
  3. Activities
    1. Readings
      1. Designing for the Web or Pixel Perfect Precision handbook
      2. Long-Term Exposure to Flat Design
      3. What Screens Want or The Webs Grain
      4. Google vs. Apple Maps Design Lesson
    2. In-class worktime
  4. Homework (due oct 27)
    1. Developer-ready comps
      1. Homepage
      2. About/Work/Portfolio/Gallery/Form/Contact page

 

Week 8 – oct 20 – Advanced CSS3

  1. Developer-ready critiques
  2. Topics
    1. Browser Inconsistencies and Gotchas
    2. Styling horizontal lists
    3. Centering
    4. Styling Forms (inputs, buttons, etc)
  3. Activities
    1. Find a broken website design on a device of your choosing, take a before screenshot, edit its CSS using the developer tools, and then take an after screenshot.
    2. Present your broken website makeover to the class
  4. Homework
    1. Complete Activity

Week 9 – oct 27 – Advanced CSS: Animations, Transitions, and Media Queries

  1. Topics
    1. Animations
    2. Transitions
    3. Media Queries
    4. Screen/Print
  2. Activities
    1. Readings
      1. Beginner’s Guide to CSS animations
    2. In-class time to work on HTML/CSS
  3. Homework
    1. Read SMACSS (due Nov 3)
    2. Create your redesign comp pages with HTML/CSS (due nov 17)

Week 10 – nov 3 – Advanced CSS: Preprocessors

  1. Topics
    1. Sass
      1. Syntax
        1. Sassy CSS (SCSS)
        2. Sass
      2. Bourbon, Neat, Bitters, Refills
    2. Less
  2. Guest Speaker
  3. Homework (due nov 17) Create your redesign comp pages with HTML/CSS

 

Week 11 – nov 10 – Advanced CSS: Hide/Show, Drop Downs, Forms

  1. Topics
    1. Hide/Show
    2. Drop Downs
    3. Forms
  2. Activities
    1. In-class work time on HTML/CSS
  3. Homework (due nov 17) Finish your redesign comp pages with HTML/CSS

 

Week 12 – nov 17 – Introduction to Javascript

  1. Redesign critiques
  2. Topics
    1. Variables
    2. Strings
    3. Numbers
  3. Activities
    1. First half of javascripting (through Number to String)
    2. Read Javascript: The Good Parts Chapters 1 – 2
  4. Homework – None! Enjoy your Thanksgiving!

 

Week 13 – nov 24 – Thanksgiving

 

Week 14 – dec 1 – Introduction to Javascript

  1. Topics
    1. Loops
    2. Logic
    3. Objects
    4. Arrays
    5. Functions
  2. Activites:
    1. Second half of javascripting
    2. Read Javascript: The Good Parts Chapters 3 – 4
  3. Homework (due dec 15) – Add Javascript to redesign pages

 

Week 15 – dec 8 – Introduction to Javascript

  1. Activities
    1. Interacting with the DOM
    2. Debugging Javascript in the Console
    3. In-class work time for adding javascript to redesign pages
  2. Homework (due dec 15) – Add Javascript to redesign pages

 

Week 16 – dec 15 – Summary / Conclusion

  1. One-on-one code reviews of redesign HTML/CSS/JS
  2. Student Evaluations