Calendar

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

• Lecture

  • 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
  • P1 Step 1 - brainstorm ideas for a personal utility.
• 2
  Welcome to the Web!
  03/11

• Lecture

  • Information Architecture Basics (Sitemaps)
  • Intro2HTML

  Activities

  • Join a team to work with this semester
  • Re-introduce yourself: Share your ASCII house
  • Review Concepts for Personal Utility with your teammates
    • Place overviews of your concepts into this Figma project for later review and access
  • In-Class Exercise: Popular IA/Sitemap

  Assignment

  • Choose a concept and create a information architecture and wireframes for your personal utility in Figma
  • Exercise: Class Website
  • Recommended: Codecademy: Learn HTML Unit 1 (Elements and Structure)
• 3
  Hyperlinks
  03/18

• 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
  States
  03/25

• Lecture

  • Intro to Protopie (download and sign up with your school email and apply for an education plan). (chris is also contacting them about a class level license)

  Activities

  • Group Meetings
  • Extra-Credit Exercise: Dark Mode 1 (Toggle)

  Assignment

  • Decide on your prototyping tool and refine your simple prototype showing at least 2 interactions for P1
  • Highly Recommended: Watch Protopie 101 Crash Course
• 5
  Principles
  04/01

• Lecture

  • CSS Basics 1
  • HIG History

  Activities

  • In-Class Exercise: Style Your Personal Site
  • Meet in small groups: Black, Pearl, Blue and Sapphire teams meet with chris (I'll try to meet with more groups / individuals if time allows)

  Assignment

  • Semi-Final version of P1 Prototype
• 6
  Descriptions
  04/08

• Activities

  • Shaheer Tarar's guest lecture has been rescheduled for May 27
  • Small Group Meetings –  refer to the schedule here. You only need to be present for your meeting, but since I'd like to meet with everyone please arrive on time for your meeting! I will do my best to keep on schedule...
  • In-Class Pair Exercise: Product Description

  Assignment

  • Finalize P1 and be prepared to share your protoype in class in two weeks. As a format we will have a "gallery" style showing of our protoypes where you set up a device with your prototype running, followed by a brief presentation and discussion. As a reminder of what's due:
    • Refine your prototype using Figma/Protopie/etc. developing one full interaction across a minimum of 3 screens... 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/15

• Activities

  • No Class! Optional 1:1 Meetings on zoom or asynchronously over chat – message Chris on Kakaotalk to schedule a time (meeting times are best after 3pm KST)

  Assignment

  • Finalize P1 and be prepared to share your protoype in class next week. As a format we will have a "gallery" style showing of our protoypes where you set up a device with your prototype running, followed by a brief presentation and discussion. What's due:
    • Refine your prototype using Figma/Protopie/etc. developing one full interaction across a minimum of 3 screens...
    • A short presentation and a brief demo of the product. Share your final utility concept, product description (what, why, how), sitemap, static design and prototype with 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). It's ok if you present in Korean, but please make some english captions for me! Each presentation should be about 6 mins.
    • Each student will be responsible for giving written feedback on their projects / presentations (more on this soon..)
• 8
  Sharing
  04/22

• Activities

  • P1 Crit: Sharing
    • Because of the class size we will need to be efficient in our reviews. Therefore, I'd like everyone to plan to present for 5-6 minutes with 1-2 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 2 people's written feedback. When you present, introduce yourself so the feedback can be addressed properly.
    • It is ok to present in Korean, but please provide some subtitles, or notes, in English for me 😅
    • Sign up for your critique time here
    • Everyone please arrive on time!
  • Intro P2: Public Utility

  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
  • Recommended Reading: Towards Relational Design by Andrew Blauvelt
• 9
  Relationships
  04/29

• Lecture

  • Relational Design
  • Intro to CSS pt 2

  Activities

  • Andy Chung from read.cv Guest Lecture
  • Finish remaining P1 Reviews
  • Coding From Life
  • Review P2: Public Utility interview results in small groups, and brainstorm how you may build your application

  Assignment

  • Create a site architecture (including outside services) and wireframe sketches for P2
  • Recommended: Codecademy: Learn CSS (modules 1-5)
  • Recommended if you want to refresh on HTML: Codecademy: Learn HTML Unit 1 (Elements and Structure)
• 10
  Workshop pt. 1
  05/06

• Activities

  • Workshop pt. 1 with 최건혁
    • If you haven't confirmed your participation (or absence) yet, please do so here before class on Monday
    • Make sure to bring/have: a Google account, Chrome Browser installed on your laptop, your laptop, a pen and paper, Photoshop, and a camera (camera phone works!)

  Assignment

  • Share your concept for P2 with Chris via email
  • Recommended: Codecademy: Learn CSS (module 6)
  • Reminder: Deadline for CSS Still Life extended to May 20!
• 11
  Workshop pt. 2
  05/13

• Activities

  • Workshop pt. 2 with 최건혁
  • For those who weren't able to join the workshop last week (and won't independently catchup and join for part 2) and want to complete the alternative workshop, please do the AI Emoji exercise created by chris
  • Discuss you concept for P2 with Chris during breaks in the workshop

  ---

  • If you don't join the workshop, please check in with Chris either in person or over Kakaotalk, to share an update on your P2 concept

  ---

  Assignment

  • Finish P2: Step 2 – and finalize your concept for your web-based utility. Considering the practical implications of creating a product on the web, make a site architecture for your product that takes this into account and wireframe sketches of 3 representative screens.
    • If you want to get ahead of schedule, make design comps showing the graphic style of your wireframes (I recommend doing this!)
• 12
  Refresh
  05/20

• Lecture

  • Yuseon Park Guest Lecture
  • CSS and HTML Coding Review and Q+A

  Activities

  • Review Coding From Life: CSS Still Life and vote on winner
  • Discuss P2: Public Utility Concepts, sitemaps, and wireframes in small groups
  • In-Class Exercise: Personal Site Interactive Type

  Assignment

  • Refine your wireframes into high-fidelity designs and start coding P2: Public Utility
  • Optional Exercise: HTML Wireframe
  • Highly Recommended: If you haven't already, please check Codecademy: Learn CSS
• 13
  Events
  05/27

• Lecture

  • Shaheer Tarar Guest Lecture
  • Intro to JS pt. 1

  Activities

  • Exercise: Dark Mode pt. 2
  • Share P2 Progress in groups

  Assignment

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

• Lecture

  • Media Queries
  • Intro to JS pt. 2

  Activities

  • Working session + 1:1 Check-ins
  • Exercise: Media Query
  • Optional Exercise: Clock

  Assignment

  • Finish 80% version of P2
  • Note: I'll have extended office hours this Thursday afternoon and Sunday – If anyone wants to meet to get feedback or help with your projects, please message me to setup a time to meet.
• 15
  Refinement
  06/10

• Activities

  • 1:1 Meetings (sign up here)
    • Check in on remaining questions / get feedback before the final presentation of P2 next week

  Assignment

  • P2 final review next week!
• 16
  Sharing Pt. 2
  06/16

• Activities

  • P2 Crit: Sharing
    • Because of the class size we will need to be efficient in our reviews. Therefore, I'd like everyone to plan to present for 5-6 minutes with 1-2 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 two people's written feedback.
      *It is ok to present in Korean, but please provide some subtitles, or notes, in English for me 😅
    • Sign up for your critique time here
    • Everyone please arrive on time!

  Assignment

  • Make all changes to your projects by June 25th
  • Update your class site with links to all exercises and projects, and share with Chris by June 25th
    • I have created one more extra credit exercise: Diary – for those who are interested!