Week 1 Google Doc

Monday

• Hand out syllabus, survey, and quiz
• Spend 30 minutes filling out survey and quiz
• Discuss syllabus
• Sign up for weekly presentations
• Laurel introduces herself and shows some past projects
• Students show own work and two websites
• Explain P1

For Wednesday

Read your assigned chapter of Italo Calvino's Six Memos for the Next Millennium.

Wednesday

• Discuss Six Memos chapter in small groups
• Further clarify weekly interview presentations
• See when everyone is available for class fieldtrip
• Look at works related to P1
• Follow steps in Exercise 0 to create class homepage
• Work in class on Codecademy

For next week

Reading

• February 8, 2010 from Post Internet by Gene McHugh
• The Language of Internet Memes by Patrick Davison, 2012
• Spirit Surfing by Kevin Bewersdorf, 2008

Create 3 discussion questions for this group of readings.

Code

• Make sure you pasted your class homepage link in the Google Doc (above)
• Codecademy: HTML Basics, HTML Basics II, HTML Basics III

Week 2 Google Doc

Wednesday

• Check badges from Codecademy
• Reading discussion
• Look at structure and brief history of the Internet
• Explain roles of Sublime Text and Github
• Look at a few more works related to P1
• Look at HTML
• Work in class on Exercise #1
• Reminder about GD Convocation

For next week

Project

Finish two prototypes for P1 that you will present to the class on Monday. Please make sure your class website shows your two proposals as well.

Reading and Watching

• Chapter 1 of Protocol by Alexander Galloway, 2006
• The Cobweb by Jill Lepore, 2015
• Archive directed by Jonathan Minard, 2013

Code

Codecademy "CSS: An Overview"

Week 3 Google Doc

Monday

• Summarize readings and video and talk more about the Internet
• Discuss readings and video in small groups
• Check Codecademy new badge
• Presentations by [1] Reaji [2] Mike
• Look at your two proposals for P1 in small groups
• Clarify reading questions guidelines
• Show where PDFs from lectures are on the class website (in Resources!)

Wednesday

• Talk about CSS
• Work in class on Exercise 2: Style your Wikihow article

For next week

Project

Finish P1 for final version due Monday.

Reading

No reading. But please make sure to send 1 or 2 burning questions (if you have them!) about the Internet Archive to greg@archive.org.

Code

No Codecademy

Monday

• Final critique on P1
• Presentations by [1] Ryan [2] Kelly
• Look at some Concrete Poetry
• Deploy P2

Wednesday

• Field trip to Internet Archive (meet at 4pm at 300 Funston Ave.)
• Meet at 3:15pm at school if you want to carpool with class via Lyft

For next week

Reading

What is Code? by Paul Ford, 2015
(This is a very long article. We aren't going to read the whole thing, but you can if you want to. Required parts: all of chapter 1, all of chapter 2, chapter 3 intro, 3.1, 3.2, chapter 5 intro, 5.1, 5.2, 5.7, 5.8, chapter 6 intro, 6.1, 6.2, 6.5, 7.1, 7.5.)

Code

Codecademy: CSS Selectors

Project

Finish levels 1 and 2 of P2

Week 5 Google Doc

Monday

• Look at Codecademy badge
• "What is Code?" reading discussion
• Look at some of Bloomberg Businessweek's Design. More here and here.
• Presentation by [2] Ashley
• Look at Levels 1 and 2 from P2
• Work on Codecademy and P2

For Wednesday

• Codecademy: CSS Positioning

Wednesday

• Check Codecademy badge
• Presentation by [1] Lynn
• Learn about CSS Positioning
• Work in class on Exercise 3: Website Portrait
• Work in class on P2
• Return grades for P1

For next week

Reading

• The Crystal Goblet by Beatrice Warde, 1932, 1955
• Fuck Content by Michael Rock, 2009
• Research & Destroy by Daniel van der Velden, 2006

Project

Complete Levels 3 and 4 of P2 for Monday
Complete Level 5 of P2 for Wednesday

In-class exercise

If you didn't finish it, complete your Exercise 3 (one website portrait) and upload it to your class site.

Week 6 Google Doc

Monday

• Presentations by [1] Gurleen [2] Jady
• Reading discussion
• Look at Levels 3 and 4 of P2 in small groups
• Remaining time work in class

For Wednesday

• Complete Level 5 of P2

Wednesday

• Look at Level 5 of P2
• Deploy Phase 2 of P2
• Look at examples of navigations on Project 2 page
• Look at websites designed by Geoff Han
• Look at rothko.me
• Working class time

For next week

Project

Complete Phase 2 of P2, your navigation system for 25 Variations, for Monday. Remember that it may be helpful to first sketch out (either pen and paper or InDesign) how you want your navigation system to be. Try to have a clear idea of what you want to do before you code.

Reading

• Vernacular Web by Olia Lialina, 2005
• Stop Trying to Make the Web Beautiful by Oliver Burkeman, 2014

If you're curious, I've collected more articles about web design criticism here.

Week 7 Google Doc

Monday

• Presentations by [1] Alfonso [2] Jared
• Look at Phase 2 of P2 navigation system
• Reading discussion
• Look at My Boyfriend Came Back from the War by Olia Lialina, 1996

Wednesday

• Exercise 4: Coding from Life

For next week

In honor of midterm season, please rest this weekend.

However, if you haven't posted your Exercise 4 to your class homepage, please do that. Also, if I recommended you make any changes in my individual feedback, please make them on your P2 25 Variations. I will be grading P2 on Tuesday. Do any other catching up you need to do.

Monday

• Check that everyone has published Exercise 4 to class website
• Deploy P3
• Look at typography on screen
• Presentations by [1] Emely [2] Nanfang
• Demo P3 letter drawing
• Work in class time
• [1] Survey on Laurel
• Please note that I will grade P2 tomorrow, Tuesday

For Wednesday

For P3, create three unique directions for your typeface after viewing the demo in class. Begin by sketching the letters H O D N O P. Conceptually and formally, each direction should be uniquely different from each other. While sketching, consider how each typeface would exist as code and in the browser space. (Do this in InDesign or Illustrator, and come to class on Wednesday with a PDF.)

Wednesday

• [2] Survey on Laurel
• Return grades from P2
• Laurel talks about Muriel Cooper
• Review initial sketches for P3
• Exercise 5: Responsive Design

For next week

Reading

Computed Type by Christoph Knoth, 2012

Project

Based on feedback, design "HODNOP" in three additional directions for P3. If you have a favorite direction, see how far you can push it. Try creating specific words in your typeface that aren't HODNOP. Try seeing what happens when you have a whole sentence. Then show how at least one letter of your typeface looks or behaves in code. Continue to think about how your typeface as a whole will behave on the web.

Tips:

• Revisit the examples on the CSS Typeface page
• Ask yourself: What makes the typeface specific to the screen or the web?
• Think about your typeface in two states. (How does your typeface "breathe"?)
• Think about what your typeface would do if it were a screen saver

Exercise

Remember to finish your Exercise 5 and post it to your class website.

Week 9 Google Doc

Monday

• One-on-one meetings to look at P3

Section 1

12:00 — Laluna
12:15 — Kyoka
12:30 — Emely
1:00 — Alfonso
1:15 — Lynn
1:30 —Yaqi
1:45 — Ryan
2:00 —Gurleen
2:15 —Reaji

Section 2

4:00 — Ashley
4:15 — Mike
4:30 — Tammy
4:45 — Jared
5:00 — Janice
5:15 — Heike
5:30 — Jady
5:45 — Nanfang
6:00 — Kianna
6:15 — Yasmeen
6:30 —Lauren
6:45 — Kelly

For Wednesday

Complete your typeface drawing (in Illustrator, etc.) as much as possible. Here are the characters I would like you to have by then:

abcdefghijklmnopqrstuvwxyz
or
ABCDEFGHIJKLMNOPQRSTUVWXYZ
(choose either lower or upper case)

0123456789 (numbers)
.?!,”“ (punctuation)

Wednesday

• Presentations by [1] Laluna [2] Tammy
• Laurel talks about Takenobu Igarashi
• CSS Typeface Working Session

For next week

Please create two unique proposals (using InDesign) for the website your typeface will live on. How can your website's focus not only reinforce but push forward the concept of your typeface? Remember to upload the PDF to your class website.

If you haven't already, please put your Exercise 5 on your class website. If you haven't completed it, please use this weekend to do so.

Monday

• [2] Shiraz Gallab visits
• Look over two proposals for website for P3
• Presentations by [1] Yaqi [2] Janice
• Website pairings activity

Wednesday

• Exercise 6: JavaScript Basics
• Work in class time on Node School Javascripting workshop
• Show this jsfiddle to enable easy reuse of letters

For next week

Project

For P3, continue developing your website and your typeface. See how far you can push it. On Monday, I want to see it in code, as complete as possible. It will be due the following week (Week 12).

Code

Finish Node School Javascripting workshop

Monday

• Presentations by [1] Kyoka [2] Lauren
• Look at P3 updates
• Talk about critique format next week
• Check in how JavaScript exercise went

CSS Typeface Critique Format

Next week, we'll be having a final critique on CSS Typeface. The format will be a bit different than before. We'll spend about 14 minutes on each person. For the first ~4 minutes, we'll look/experience at the work without any talking. Then, for the next ~8 minutes, everyone but the designer can talk. During this time, we should try to have a conversation about the work, or at least describe it. Then, in the last ~2 minutes, the designer can respond to the conversation we just had.

Wednesday

• Class cancelled

Thursday and Friday

• I am having office hours for anyone who needs help with more coding on Friday Please sign-up on this Google Doc.
• Here is a jsfiddle update to re-using your letters

Monday

• Final critique of P3 with guest Mindy Seu

Wednesday

• Presentation by [2] Yasmeen
• Exercise 7: jQuery
• Deploy P4

For next week

Listening and reading

Listen to the podcast and read the PDF on the P4 Hoax page. Think about the connections between the two and your personal opinion on both. Paste a paragraph written response in the Week 13 Google Doc before 10am on Monday.

Project

Produce a wireframe/sketch of the hoax website, beginning with the home page. Once your wireframe is complete, design one or more basic page templates for the site. If you are proposing a complex user interaction, quickly code an interaction prototype.

Week 13 Google Doc

Monday

• [1] Return grades for P3
• Presentation by [2] Heike
• Quickly go over written response to P4 podcast and reading
• Look at wireframe for P4

Wednesday

• [2] Return grades for P3
• Work in class day

For next week

Project

Code your Hoax website. By next week, your site should be online and basically functioning as intended. This will allow us to troubleshoot design and code issues in class and give you the final week to fine tune the elements (such as the responsive-ness) of the site.

Week 14 Google Doc

Monday

• Presentation by [2] Kianna
• Look at working website for P4

Wednesday

• Announce due date change for class archive (.zip file)
• Work in class day

For next week

Project

For next week, fine tune your Hoax website. Remember, it should be responsive and/or utilize JavaScript and jQuery.

Class archive

From the syllabus: "At the end of the term, you will be required to send me an archival .zip file to document your projects. Divide your materials into five folders: P1, P2, P3, P4, and Presentation. Within each project (P1, P2, P3, P4) folder, make three new folders: Project, Documentation, Description. Put all of your project materials (code and required assets) into the Project folder. In the Documentation folder, place a video screen capture (made using Quicktime) to concisely document your project. Within the Description folder, place a text file containing a paragraph description of your project. Within the Presentation folder, place a PDF version of your presentation into the folder. When you make the .zip file, send it to me over wetransfer.com. Please keep this in mind as you organize your materials throughout the semester."

Update: This is due via email on Friday, December 11th.

Week 15 Google Doc

Monday

• First 20 minutes: retake quiz from first day
• Work in class day
• Last 20 minutes: class evaluation

Wednesday

• Final critique of website for P4 with guest [1] Shiraz Gallab
• Return quizzes
• Reminder that class archive is due on Friday, December 11th

Friday

• Class archive (.zip file) due