Tues agenda
• Set alarms to 3:20
• Hand out syllabus
• Hand out survey
• Show & tell of past projects
• Look at some Performance is Change over Time
• Hand out P0

Tues assignments

• Go over P0. By 9pm on Wednesday, email me (laurel@linkedbyair.net) your new Twitter username. Please tweet once before class on Thursday.

Thurs agenda
• Workshop 1

Thurs assignments
• By 9pm on Saturday, email me Part 1 and (if you got to it) Part 2 of the workshop.

Readings (all due Tues Jan 22)
• 
  February 8, 2010 and July 23, 2010 from Post Internet by Gene McHugh
• 
  Spirit Surfing by Kevin Bewersdorf, 2008
• 
  Change Over Time by Dan Michaelson, 2012

Tues agenda
• Discuss Week 1 readings
• Sign up for weekly interview presentations
• Clarify P0 Twitter Project
• Hand out P1
• Look at some Concrete Poetry
• Working time?

Tues assignments

• Start Level 1 and Level 2 of P1


• For Thursday, print out five of your visual tweets. Each should be 4" x 4". Please print in color. (A regular laser printer is good.)


• Make a simple personal homepage (for example: http://www.art.yale.edu/~firstnamelastname/interactive/) to act as a hub for posting all projects from this class. Send me the URL sometime before class on Thursday. It should display your name, email, and links to your Projects. (For now, your Twitter Project will be the only linked project.)

Weekly interview presentations
• Each week (starting Week 3), one person will give a ~10 minute presentation on a living designer, artist, or online presence. This person/presence should be contactable via the internet. To give your presentation, conduct an interview (via email, skype, twitter, whatever works) with this person and then present your findings.

Thurs agenda
• Workshop 2

Thurs assignments

• For Tuesday, bring in Levels 1 and 2 of P1

Readings (due Tues Jan 29)
• 
  A Tour of the Monuments of Passaic, New Jersey by Robert Smithson, 1967
• 
  (Optional) Excerpts from Invisible Cities by Italo Calvino, 1972
• 
  (Optional) Preface to Exercises in Style by Raymond Queneau, 1947
• 
  (For curious parties) The Ballad of @Horse_ebooks

The cultural origin of the internet is related to 60's counter-culture. The rediscovering of liminal experience is the appeal. For people who don't have some sort of spiritual practice, technological change is the thing that comes closest to the experience of the unreal. It's similar to the experience of getting a cell phone call for the first time. “This is weird, this is magic.” There are are all kinds of spooky experiences. It's not just newness, either — it's an experience where the previous understanding of the universe is broken. You don't get many experiences like that if you don't do drugs or have some sort of meditative practice. You don't play with social rules or create new social spaces. Magic changes the rules of the world in a way we don't expect. — Eleanor Saitta

Tues agenda

• Look at Levels 1 and 2 of P1
• Discuss Week 2 reading
• Look at some Text over Time

Tues assignment

• Select an article from Wikipedia in English. It can be any article, but make sure it has at least a few sections of text and some supplemental images. Think about how you might want to change its style in a way that lets Wikipedia users better understand (or provide some tension to) the content of your specific page. Please email me the link to your Wikipedia page by 9pm on Wednesday.

Thurs agenda

• Ria interviews Chris Collins
• Clarify Weekly Interview Findings
• Workshop 3
• Return surveys

Reading (due Tues Feb 5)
• 
  TypoPhoto by László Moholy-Nagy, 1925
• 
  Detail in Typography by Jost Hochuli, 2008

Tues agenda

• Look at two physical books
• Look at Levels 3, 4, and 5 of P1
• Look at some examples of TL;DR Defied (?)
• Discuss Week 3 reading

Display vs. Reading
Headline vs. Body Copy
Brief vs. Expansive
Title vs. Essay
Capitals vs. Lowercase
Distinct vs. Subtle
Adjective vs. Noun
Legibility vs. Readability
Face vs. Body
Memory vs. Behavior
Logo vs. Strategy
Talk vs. Walk
Tweet vs. TL;DR

Tues assignment

• For Thursday, bring in a total of 15 visual tweets. Again, they should all be printed out each as 4"x4", including the first 5 that we looked at during Week 2.


• Remember to email me your CSS file from Workshop 3. Finish this by the end of class on Thursday.


• Start a logo collection channel on Are.na. See the existing collections other users have started. Your collection should have a specific theme which is reflected in the title. (That said, it shouldn't just be titled "Logos".) When you're ready to show what you've found, make your channel public and add it to the Logo Collections channel. Start collecting your contents during class on Thursday. Publish your channel sometime before class next Tuesday.

Thurs agenda

• Emma interviews Rumors
• Look at 15 visual tweets
• Hand out P1.2
• Look at some Websites with Novel Navs
• Working class time and a few HTML & CSS pointers

Readings (and one video) (due Tues Feb 12)
• 
  The Design of Everyday Things, Chapter 1 by Donald A. Norman, 1988
• 
  Research & Destroy by Daniel van der Velden (of Metahaven), 2006
• 
  How to Explain it to My Parents with Harm van den Dorpel by Lernert & Sander, 2011. See the referenced work: Codec Breeze by Harm van den Dorpel, 2008.

Tues agenda

• Work in class day
• Discuss Week 4 reading
• ***Snow Day***
• By 1:30pm, please make your logo channel public and add it to the Logo Collections channel.

Thurs agenda

• Tim interviews Jeffrey Scudder
• Work in class day
• Hand out P2

Readings (and one video) (due Tues Feb 19)
• 
  In Defense of the Poor Image by Hito Steyerl, 2009
• 
  August 20, 2010 from Post Internet by Gene McHugh
• 
  Versions (2010) by Oliver Laric

Tues agenda

• Critique P1 and P1.2 in totality.

Tues assignment

• Show 5 artifacts from P2 on a simple website linked to your class homepage.
• Prepare Week 5 readings

Thurs agenda

• Anna interviews Daniel Levya, Andrew interviews Kim Ottesen of Reformat.no
• Look at artifacts from P2
• Discuss Week 5 readings

Thurs assignment

• Sketch two static mockups of your site. Use starter-package.zip.

Tues agenda

• Class overview of everyone's event, key artifacts, and website from P2
• InDesign pointers & shortcuts and demo
• Look at some brand guidelines
• Sign up for individual meeting times for Thursday (12:30–1:30, 2:10–3:20)

Tues assignments

• Revise your mockups as per our discussion and any new understanding of InDesign and the sketch-making process.


• Bring in 30 printed out visual tweets (your choice on size this time)

Thurs agenda

• Briefly look at 30 visual tweets (1:30–2:10)
• Workshop 4: DIY Responsive Design
• Individual meetings: look at static mockups of website

Thurs assignments

• By next Tuesday, show an in-progress (or close to complete as possible) mockup of the physical object artifact(s) you will produce for your event.


• By next Thursday, be ready with the HTML/CSS version of your event website. It doesn't have to completely "work", but all of the pieces should be in place, and it should at least look and feel like it works.

Readings (optional)
• 
  Identity and the arts: A talk at Artists Space, Rob Giampietro, 2011
• 
  Public Notice, Rob Giampietro, 2009. Originally published in Eye 73
• 
  Message on a Bottle, Dmitri Siegel, 2006. Originally published in Dot Dot Dot

Tues agenda

• Look at sketches of physical artifact in small groups
• Sign up for Thursday individual morning meetings
• Working class time for website, etc.

Tues assignment

• Be ready with your HTML/CSS mockup of your event website. It should be as complete as possible. Please make sure to link it to your class homepage.


• Your event website should have...
  • — the title of the event
  • — the time and date of the event
  • — the location of the event
  • — a map of the event's location(s)
  • — a trace of the passing of time (in some way)
  • — a piece of text (min 500 words) related to the event
  • — a navigation to view all these pieces
  • — min. two views: one for before the event takes place, and one for after it is over

Thurs agenda

• Class doesn't meet during class time. Please just come to your individual 15-min MORNING meeting time (8:15–11:15) to show HTML/CSS mockup of your event website.


• 8:15–8:30 am — Jon
  8:30–8:45 am — Tim
  8:45–9:00 am — Andrew Nelson
  9:00–9:15 am — Rachel Needle
  9:15–9:30 am — Jiyo
  9:30–9:45 am — Zach
  10:00–10:15 am — Ria
  10:15–10:30 am — Eric N.
  10:30–10:45 am — Anna
  10:45–11:00 am — Jenny
  11:00–11:15 am — Emma
  

Thurs assignment

• Place your order for a physical object by Friday, March 8. Email me a confirmation sometime on Friday. Or, if you are creating something yourself, email me some documentation of your physical object in-progress.

Tues agenda

• Work-in-class day with status updates on P2
• Zach interviews CW&T

Thurs agenda

• Final critique for P2 with guest critics Dan Brewster and Khoon Choi
• Hand out P2.4
• Hand out P0.2

Thurs assignment

• Show progress on P2.4: Make a responsive version, easily viewable on mobile devices. Using the website you've made, use Media Queries to your CSS stylesheet as explored in Workshop 4. Instead of five breakpoints like in Workshop 4, please only test two approximate sizes: desktop (approx 1024px wide) and mobile phone (approx 320px wide). Next Thursday, you will show your responsive design by demonstrating your website both on a desktop and on your phone. Only asking for two sizes gives you more time on making any edits to your P2 we critiqued on Thursday.

Tues agenda

• Look at some Tumblr Themes as Form
• Remaining time is work in class

Tues assignment

• Finish P2.4
• Start preparing your 50 visual tweets for next Tuesday. I've noticed some of you haven't tweeted at all during the month of March (although technically you didn't have to tweet during Spring Break), so please catch up over the next week.

Thurs agenda

• Review P2.4: Make future event site responsive for desktop and mobile
• Hand out P3

Thurs assignment

• Along with bringing in 50 printed out visual tweets, complete writing response for P0.2: Write about your visual tweets so far. Who did you initially follow and why? What are your visual tweets about? What are your methods? How did your methods change over time? Now that you have around 40 to 60 visual tweets, what do you think of their collective mass? Did you envision them looking like this? For next Tuesday, print this writing out on a letter-sized sheet to show with all your visual tweets.

Tues agenda

• Gene McHugh visits
• Look at 50 visual tweets and writing responses
• Discuss P0 work and writing responses with Gene

Thurs agenda

• Sign up for progress check (Week 12) and final critique (Week 13)
• Finish up discussing P0 work and writing responses (Jenny, Tim, Ria)
• Workshop 5: Tumblr Themes & PHP with HTML

Thurs assignment

• Email me your visual tweet writing response from P0.2
• Work on both P3 and P0.2. Come to class next week with progress on BOTH projects, ready to ask questions.

Tues agenda

• Jenny interviews Stuart Bailey
• Jiyo interviews Judy Linn
• Base code updates to P3. See updated Workshop 5.
• Part 1 of P3 and P0.2 checkpoint
• — Tim
  — Jon
  — Zach
  

Thurs agenda

• Jon interviews Chris Svensson and shows Frances Stark's My Best Thing
• Part 2 of P3 and P0.2 checkpoint
• — Anna M.
  — Emma
  — Jiyoni Kim
  — Eric N.
  — Jenny
  — Rachel Needle
  — Andrew
  — Machisté
  

Tues agenda

• Eric interviews David Horvitz
• Work in class time

Thurs agenda

• Rachel interviews ...
• Final critique for P3 and P0, P0.2 in totality (for everyone — class will go late)

Thurs assignment

• Please email or link me to a a .zip archive of your projects for this class. Divide into four folders: P0, P1, P2, P3. Any updates to projects are also welcome. Workshops are optional for this archive. Due May 1.

Download PDF

Spring 2013
Art 367b, Intermediate Graphic Design
210 Green Hall; Tuesday/Thursday 1:30–3:20pm
Laurel Schwulst, laurel@linkedbyair.net

 
Course description

This course focuses on interaction design with projects that are based online. Questions asked during the course include:

• —Is it specific?
• —Is it memorable?
• —Does it communicate the idea through its form?

This course has a formal emphasis, using what knowledge students have about composition, typography, and hierarchy as a basis.

• —What is the prompt?
• —What is the corresponding feedback?
• —Do the prompt and feedback make sense together?

We will look at an interaction as a prompt and feedback, an input and output, a call and response. We will examine their relation but also not limit an interaction to a closed, hermetic environment, but view the web as a very social ecosystem in which time and performance play an important role.

• —Where is the navigation?
• —Is this worth a click?
• —Is this worth scrolling?
• —What are the different conditions in which this can exist?
• —How does this change in each of those conditions?
• —What happens to this when it expands?

We will examine web-specific design problems, focusing on navigating a website and the pacing throughout. Design should be conditional online, changing in response to its users and environment, so we will create accommodating, flexible systems.

Students will learn best-practices online, both in code craft and website design. Students will be given instruction in basic front-end programming languages HTML, CSS, and some JavaScript in order to complete four multi-phase projects. No prior programming experience is necessary.

We will also examine the history of the web from its creation in the 1960s to its more widespread use today. We will understand the web's shift from a specialized zone for nerds and the technologically-minded to a more mainstream world for just about everyone.

The course will heavily employ real-world, contemporary examples of design, art, and presences online. These thematic groupings of portfolios, archives, exhibition platforms, magazines, web apps, etc. will be examined with a critical eye and mind. Additionally, we will discuss what makes a design practice and the importance of discovering each student's unique methodology.

This course is open to undergraduate students who have taken Intro to Graphic Design or Typography courses, graduate students in the Preliminary year, or through my permission.

Weekly activities

Tuesday's class will include any combination of...

• —example-based lecture
• —project critique and discussion
• —skill-based workshop
• —class discussion of readings
• —group activity to identify design elements in selected websites or books
• —short, ten-minute student presentation on interview findings

Thursday's class will be working lab time and individual consultation.

Projects

• P0 ... Visual Tweets
• P1 ... 25 Variations
• P2 ... Website for an Event
• P3 ... To Be Announced

Evaluation

In this class, students will strive to make memorable, functional online experiences. Assignments should both take a stance (be poetic, critical, and clear) and also be functional (achieve their goals and not break). The invention of useful products is not the focus of this class, but the invention of useful techniques and approaches might be. Craft (in both code and design) and overall presentation are also important. Taking risks and having fun are encouraged.

Academic Integrity

In the context of the web, we will discuss maintaining integrity by finding the right balance of original and appropriated content. In creating websites, we will learn what technologies are good (and necessary) to appropriate, how to credit, and the implications of being open source. We will also examine proper blogging etiquette, the difference between good and bad sources online, and the morality of “stealing” from the internet.

Grading

• 20% ... P0
• 20% ... P1
• 20% ... P2
• 20% ... P3
• 20% ... Homework

Attendance

Attendance is mandatory. Three or more absences or excessive tardiness will result in a failing grade. If you must miss class, please email me in advance.

Materials

Since the class takes place in a lab with computers, personal laptops are not required. However, students should be responsible for their files and either bring a physical zip drive to class or back up their files with a file hosting service. (I recommend dropbox.com, with free cloud hosting starting at 2GB.) Finally, for image-making and sketching, I recommend Adobe Photoshop and InDesign. Other good digital-image making tools include a phone, digital camera, scanner, screen capture, etc.