Calendar

• Week
  Topic
  Date
• 1
  Pre-Internet texts
  03/03

• Talk

  • Concrete Poetry to ASCII

  Activities

  • Introductions and Class overview
  • Sign up, download, and join Sublime Text, Github, and Figma (use your .edu email for these services, and for Figma verify student status under "For Students" here)
  • Exercise: ASCII Town
  • Kickoff P1 – Personal Utility

  Assignment

  • Finish ASCII Town pt 1 and pt 2
  • P1 Step 1 - brainstorm ideas for a personal utility.
• 2
  Welcome to the Web!
  03/10

• Talks

  • Information Architecture Basics (Sitemaps)
  • Intro2HTML

  Activities

  • Create a team in class to work with this semester
  • Join the UI Design team in Figma (make sure you use your .edu email!)
  • Re-introduce yourself: Share your ASCII house
  • Review Concepts for Personal Utility with your teammates
    • Submit a link to your Google Slides or Figma presentation in ETL
    • If you made your proposal in Figma, please also move it into this Figma project for shared review and access
  • In-Class Exercise: Popular IA/Sitemap

  Assignment

  • Choose a concept and create a information architecture and wireframes for your P1 – Personal Utility place your work in Figma here
  • Exercise: Class Website
  • Recommended: Codecademy: Learn HTML Unit 1 (Elements and Structure)
• 3
  Hyperlinks
  03/17

• Lecture

  • HTML Basics
  • Intro to Figma demo files

  Activities

  • Review Personal Utility sitemaps and wireframes
  • Make your wireframes interactive

  Assignment

  • Link your ASCII House to your personal site
  • Refine your wireframes into high-fidelity, interactive, comps for Personal Utility in Figma
• 4
  Principles
  03/24

• Talk

  • CSS Basics 1
  • HIG History

  Activities

  • Group Meetings
  • In-Class Exercise: Style Your Personal Site

  Assignment

  • In Figma refine your simple prototype showing at least 2 interactions for P1
  • Recommended: Codecademy: Learn CSS
• 5
  Variables
  03/31

• Talk/Demo

  • Figma Prototyping Pt. 2

  Activities

  • Exercise: Interactive poster
  • Group Meetings

  Assignment

  • Continue refining your designs – aim to have a refined aesthetic and interaction language by next week!
  • Work on your poster and have a rough draft by next week
  • Next week at Gallery Sambo/AG Lab – 서울시 마포구 동교로12길 41 (41 Donggyo-ro 12-gil, Mapo-gu, Seoul) at 3:30pm
• 6
  Gallery Trigem | Writing
  04/07

• Activities

  • Meet at Gallery Sambo/AG Lab – 서울시 마포구 동교로12길 41 (41 Donggyo-ro 12-gil, Mapo-gu, Seoul) at 3:30pm to learn about the gallery, and talk about wikis and screensaver workshop with Min Guhong
  • Find a partner to work on Exercise: Product Description and begin working on the prompt

  Assignment

  • Finish Exercise: Product Description and save it to use in your final presentation
  • Finish Exercise: Interactive poster and share the url on ETL. Note the text for Seungmee's poster has been updated!
  • Continue refining your prototype using Figma/etc. developing one full interaction across a minimum of 3 screens... be prepared in two weeks (on April 21) to share your final utility concept, sitemap, static design and prototype with the class in a presentation format (I'd suggest creating a slideshow which includes a screen recording your prototype to present, as well as sharing a link where we can interact with it).
• 7
  No Class!
  04/14

• Activities

  • Reminder: No-class today!
  • Please share the url for your Exercise: Interactive poster on Kakaotalk and post the link to ETL

  Assignment

  • Continue refining your prototype using Figma/etc. developing one full interaction across a minimum of 3 screens... be prepared in two weeks (on April 21) (on April 28) to share your final utility concept, sitemap, static design and prototype with the class in a presentation format (I'd suggest creating a slideshow which includes a screen recording your prototype to present, as well as sharing a link where we can interact with it). The deadline for this project will be extended one week due for more in-person feedback and is now due April 28
• 8
  Seungmee Lee Class Visit + Animation Extras
  04/21

• Activities

  • Jitter Demo
    • Intro optional Emoji Animation Exercise
  • Working time + additional feedback
  • Guest Lecture with Seungmee Lee

  Assignment

  • Continue refining your prototype using Figma/etc. developing one full interaction across a minimum of 3 screens... be prepared next week on April 28 to share your final utility concept, sitemap, static design and prototype with the class in a presentation format (I'd suggest creating a slideshow which includes a screen recording your prototype to present, as well as sharing a link where we can interact with it).
• 9
  Sharing Pt. 1
  04/28

• Activities

  • P1 Crit: Structure
    • Because of the class size we will need to be efficient in our reviews. Therefore, I'd like everyone to plan to present for 6-7 minutes with 2-3 minutes of quick verbal comments.
    • You will also be responsible for providing written feedback to the person before and after you in the sign up order – this way everyone will receive at least 2 people's written feedback. When you present, introduce yourself so the feedback can be addressed properly. – you can provide written feedback for anyone! Just make sure to also provide it for the person before or after you in the presentation order.
    • It is ok to present in Korean, but please provide some subtitles, or notes, in English for me 😅 and your classmates without Korean language skill
    • Everyone please arrive on time!
  • Submit a link to your P1 outcome on ETL here

  Assignment

  • Reflect on feedback from your review and make changes to your prototype.
  • Begin thinking about P2: Public Utility, and complete Step 1: "User" Research Interview by conducting interviews with two people about the issue you'd like to address in your next project and post your responses to ETL
  • Read: Towards Relational Design by Andrew Blauvelt and post a response on ETL
• 10
  Children's Day
  04/28

• Lecture

  • Relational Design
  • CSS Basics pt 2

  Activities

  • Optional Meeting: Happy Children's Day!
    • Chris will be at our classroom from 2-4pm if anyone wants to have the lecture in-person and work on coding together
  • Next week we will finish P1 Reviews

  Assignment

  • Complete and leave comments on your classmates P2: Public Utility Step 1: "User" Research Interview on ETL (you will be randomly assigned 2 people's work to review after you have submitted your interview)
  • Create a proposal (with site architecture and wireframe sketches) for P2: Public Utility and prepare a short overview of your proposal which explains your idea (including imagery that helps us understand what you envision)
  • Extra Credit: Coding From Life
  • Recommended: Codecademy: Learn CSS (modules 1-5)
  • Recommended if you want to refresh on HTML: Codecademy: Learn HTML Unit 1 (Elements and Structure)
• 11
  Grids
  05/12

• Activities

  • Finish P1 Critiques
  • Share Coding From Life outcomes (if you did the extra credit assignment)
  • Extra Credit: Code My Shelf exercise
  • Review P2: Public Utility proposals in small groups

  Lecture

  • CSS Grid and Flexbox

  Assignment

  • Next week is the Screensaver Workshop with Min Guhong, please bring your laptop and be on time!
  • Finish Extra Credit: Code My Shelf exercise
  • Create high-fidelity designs in Figma for P2: Public Utility
• 12
  Workshop with Min Guhong
  05/19

• Activities

  • Workshop with Min Guhong

  Assignment

  • Share feedback on your group members designs for P2: Public Utility in Figma (share and leave comments on each other's files)
  • Using HTML and CSS, begin translating your designs into basic HTML pages
• 13
  Events
  05/26

• Activities

  • CSS Basics Pt 3: Web Type
  • Intro to JS

  Lecture

  • In-Class Exercise: Personal Site Interactive Type
  • Exercise: Dark Mode pt. 2
  • Share P2 Progress in groups

  Assignment

  • Finish Adding Dark Mode to your site
  • Rough version of P2 Code
• 14
  Media
  06/02

• Lecture

  • Media Queries
  • Demo: Getting your site online

  Activities

  • Working session + small group meetings (sign up in the class Google doc)
  • Exercise: Media Query

  Assignments

  • Finish 90% of your P2, first rounds of presentations begin next week, but you can have until June 16 to refine your projects
• 15
  P2 Presentations R1
  06/09

• Activities

  • P2 presentations R1 (please refer to sign up sheet)

  Assignments

  • Finish 100% of your P2, and submit a class archive (more TK) – final round of presentations next week
  • Make sure the url to your clock url is submitted by today!
• 16
  P2 Presentations R2
  06/15

• Activities

  • P2 presentations R2 (please refer to sign up sheet)
    • Everyone be prepare an up to 6 minute presentation about your work, we will have many reviews that day so it's important to be prepared!

  Assignments

  • Submit your Class Archive by uploading files to Google Drive here by June 24 (more detailed instructions here)
  • Make updates to your clock (check this document for feedback)
    • We will visit AG Lab this Thursday June 18 at 7:45pm for those who would like to take photos and debug your work (we can also grab some food together after if you like!)