... Tues Jan 15 & Thurs Jan 17
- 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 (email@example.com) 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 Jan 22 & Thurs Jan 24
- 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 Jan 29 & Thurs Jan 31Tues agenda
- 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.
... Tues Feb 5 & Thurs Feb 7Tues 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. ReadingTues assignment
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
- 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.
- 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 Feb 12 & Thurs Feb 14Tues 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.
... Tues Feb 19 & Thurs Feb 21Tues agenda
- Show 5 artifacts from P2 on a simple website linked to your class homepage.
- Prepare Week 5 readings
- Anna interviews Daniel Levya, Andrew interviews Kim Ottesen of Reformat.no
- Look at artifacts from P2
- Discuss Week 5 readings
- Sketch two static mockups of your site. Use starter-package.zip.
... Tues Feb 26 & Thurs Feb 28Tues 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)
- 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)
- Briefly look at 30 visual tweets (1:30–2:10)
- Workshop 4: DIY Responsive Design
- Individual meetings: look at static mockups of website
- 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.
... Tues Mar 5 & Mar 7Tues agenda
- Look at sketches of physical artifact in small groups
- Sign up for Thursday individual morning meetings
- Working class time for website, etc.
- 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
- 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
- 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 Mar 26 & Thurs Mar 28Tues agenda
- Work-in-class day with status updates on P2
- Zach interviews CW&T
- 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 Apr 2 & Thurs Apr 4Tues agenda
- Look at some Tumblr Themes as Form
- Remaining time is work in class
- 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.
- 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 Apr 9 & Thurs Apr 11Tues agenda
- Gene McHugh visits
- Look at 50 visual tweets and writing responses
- Discuss P0 work and writing responses with Gene
- 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
... Tues Apr 16 & Thurs Apr 18Tues 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
... Tues Apr 23 & Thurs Apr 25Tues agenda
- Eric interviews David Horvitz
- Work in class time
- Rachel interviews ...
- Final critique for P3 and P0, P0.2 in totality (for everyone — class will go late)
- 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.
Art 367b, Intermediate Graphic Design
210 Green Hall; Tuesday/Thursday 1:30–3:20pm
Laurel Schwulst, firstname.lastname@example.org
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.
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
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 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.Hot-Diggity-Dog!