Clicking, Feeling:
Introduction to Interactive Design

T/Th 9:30AM–12:15PM
Jan 18, 2022–Apr 29, 2022

Class meetings on Gather

Final Critiques:
Room 108, Art Building

Office Hours by Appointment

Projects & Exercises

In addition to readings, discussions, and tutorials, students will complete three projects in addition to several exercises. Exercises are meant as scenarios for practicing newly learned web-development concepts. Projects in this course are the main and most important work students will complete in this course, they should have a strong conceptual framework and be finessed and functional in its final delivery.

Projects

Project 1: Space—Place—Artifact

Due: Tuesday, March 1

Choose a place, it can be a real place, or be made up. Metaphorical spaces are also encouraged for this project.

  • PART 1 (Visual Essay):
    Write an extended description of the place you chose. To get you started, think about how the place sounds, how it smells, how it makes you feel, etc. Does this place exist? Is it made up? Is it a place from a different time period? Is it from the past, or the future? Is it on this planet? If writing about the same place from EX.1, revisit your writing from before and build on it, or start over—this writing should be new. Use photos/drawings/sounds/videos to supplement your description. All media should be your own.

  • PART 2 (Artifact):
    Make an artifact that represents your place. It can take the shape of anything, like a letter, a fax, a book/pamphlet, a post-card, a necklace, a piece of clothing, a thumbdrive, a sculpture, etc. The artifact should be something tangible, meaning, it should be something that can be held in your hand. Refer back to your writing to generate ideas.

  • PART 3 HTML:
    Using HTML only, create a multipage tour of this place. The pages should be linked together using <a> tags. Your original writing should be included on one of these pages, the order/location in which it appears is up to you.

  • PART 4 CSS:
    Make a second version of your tour using HTML and CSS. This version can be totally different from Part 2.
References:
  • Cooper McHatton Playfic Tutorial
  • View our Project 1 Slack channel for more references

Project 2: Print to Screen

FINAL CRIT: April 5

Design a new layout for a text you find from the library using HTML and CSS. Your interactive experience should invite the reader to experience not only the story, but also your interpretation of the story. Use what you’ve learned so far—hypertext, responsive design, color, html, css—to transform this story from a print experience to a reading experience that is lives in the browser.


Metaphor is the meeting point, not of two words, but of two structures.
— Ulises Carrión

“Unrestricted by sequence, in hypertext we may create new forms of writing which better reflect the structure of what we are writing about; and the readers, choosing a pathway, may follow their interests or current line of thought in a way heretofore considered impossible.”
— Ted Nelson, “Hyperworld” 1987


OBJECTIVES

  • To translate a printed story, or essay, into an online reading experience.
  • To generate design and interaction concepts from themes within the story.
  • To experiment with how navigation can influence the reading experience—and compare it to analog forms of navigation (table of contents, footnotes, etc).
  • To use typography to express meaning, and encourage new interpretations.

REQUIREMENTS

  • Text Title
  • Text Author
  • Text must be at least 1,500 words long.
  • Original text must be found in the library, and be in print.
  • Use media queries so your design works on multiple screen widths.
  • You may use no more than two typefaces.
  • Type only—no images allowed.
  • Must use your entire text.
  • Style links—consider hover states, color, etc.
  • Minimum 1 page.

CONSIDER

  • Interpretation: Your interpretation of this text is unique to you. What comes to mind when you read this text? In order to properly analyze and interpret a text, you will need to read it multiple times. As you read your text, mark it up with your notes, write down any questions, or what comes to mind. Don't let these thoughts come and go. Keep track of them. Consider how your interpretation of the text can translate to a new reading experience. The most successful projects will have a single point of view expressed through a decisive design move.
  • Sequence: What is the experience of reading this text in print? What is the pacing like? How is the text organized? Is the author in conversation with themselves? With others? How are the footnotes, and endnotes referenced? Think about the sequence you would like to set up for an online reading of this text.
  • Typography: How does the typography enhance your point of view and help you convey meaning? Pay attention to typographic details: special characters, leading, words per line, etc. Are there multiple perspectives in this text? How can those perspectives be made visual through type?
  • Interaction: How does the viewer/reader progress through the story, scrolling, clicking, hover-states, pop-ups, resizing browser, all of the above?
  • Links: How do internal/external links or anchors enhance the meaning of this text? What is revealed? What is hidden?
  • Page width: What happens to your site when the browser window is resized? Is it the same? Is it a different design? Are only certain pieces of information accessible at certain viewport sizes?

    • Do not try to illustrate the text. The least successful projects will be ones that try to visualize the text literally. Remember this project is also about how YOU are interpreting the text.


PART 1
Due: March 3
  1. Find a printed text from the library, scan it and save it as a pdf. Once you’ve chosen this text, read it multiple times, and write a short response to this text. What is it about? Pay close attention to how the text was written—word choices, tone, etc. Are metaphors used? Is the text descriptive? How are nouns and adjectives used?
  2. Based on how you interpreted the text, what do you want to point out to the reader in your browser-based design?
  3. Record your observations and ideas, be prepared to discuss in class.
  4. Then create a list of 10 or more words, phrases, ideas that describe your text.
  5. Link all of this on your class website and label it “Project 2: Part 1”

PART 2
Due: March 10
  1. Come up with three distinct design directions for how you will design this text as an online reading experience. Write a description for each concept. Share your sketches, these can be made using InDesign, Photoshop, or Figma—or any combination of these. If you have any design references, share these as well. In this initial phase, your sketches should communicate what overarching the concept is.
  2. Remember, your ideas should connect to your interpretation of the text.
  3. Your sketches should include ideas for mobile and desktop views.
  4. Consider how the user/reader will navigate through your site. What is the navigation system like? How does it connect to each concept?
  5. Think about the structure, is it one page? If it’s more, consider drawing a wireframe to give an overview of the pages.
  6. Each direction should only use type, no images or illustrations. Graphic elements are allowed; borders, background colors, etc.
  7. Compile your sketches, and research into a document (web-page, GoogleDoc, etc.). You will share this in class.
  8. Link this on your class website and label it “Project 2: Part 2”

PART 3
Due: March 22
  1. Choose one of the directions and develop it further.
  2. Begin developing it in code, and supplement this with mockups in Indd/PS/Figma.
  3. Link this on your class website and label it “Project 2: Part 3”

PART 4
Due: March 24
  1. Create at least 5 drafts in code as five separate URLs. Each draft should have 1–2 changes (e.g. margins, type size/s, typeface, color palette, etc). The drafts should be sequential, meaning, each draft should build on the last.
  2. Link the 5 URLs on your class website under the label “Project 2: Part 4”

PART 5
Due: March 29
  1. Create 3 or more coded drafts, each building on the last. Incorporate feedback received in class.
  2. Make your site responsive.
  3. Check to make sure your site meets the requirements of the project.
  4. Link these drafts on your class website under the label “Project 2: Part 5”

PART 6
Due: March 31
  1. Create 5 more coded drafts. Incorporate feedback received in class.
  2. Double check your site meets all the project requirements (see list above.)
  3. Link these drafts on your class website under the label “Project 2: Part 6”

PART 7 (Final Project & Bookmark)
Due: April 5
  1. Finalize media queries, check your site on multiple viewport widths.
  2. Complete project.
  3. Design a printed bookmark that has a short description of your project, and has a QR code that leads to your site.
  4. Print 3 copies of your bookmark. Insert 1 bookmark into the printed book you chose from the library. Document this, and add it to your class website.
  5. The second bookmark will be turned in to me, and the third is for you to keep.
  6. Link final project to your class website and label it as “Project 2: Final”

This project is adapted from Sasha Portis’ assignment; “Stories as Networks.”

Project 3: Instruction (Scavenger Hunt)

FINAL CRIT/GAME DAY: Tuesday May 3, 11am-1pm

In groups of two, design a scavenger hunt experience for another group to follow. Each group should come up with 16 sets of instructions. The games you design should hybridize physical and digital space—think about how the two connect to each-other.


Score

In the visual arts the term score is borrowed from music to refer to a predetermined series of physical, verbal, or musical actions conceived by an artist and meant to be reinterpreted.

The creation of a performance score in an artwork usually means that the work is not entirely ephemeral; the existence of a score means that it can be re-created or reinterpreted either by the artist himself or by a third party. In this sense the score becomes both a form of documentation and preservation of an artistic idea and a relatively flexible structure that usually allows a certain degree of interpretation of the work.

In the area of visual performance art, the score has become a crucial tool for structuring a composition, often becoming a conceptual scaffolding that provides focus and direction to a given performative work.

Furthermore, scores in the visual arts have been taken to realms outside their traditional existence as published or written description; they can also exist as a verbal agreement (as for Tino Sehgal) or a loose set of instructions (as in some Fluxus pieces). Further to be explored is the notion of the social score—the process by which, as artists merge life with art, social behavior becomes an extension of the structured/scripted artwork.
—Pablo Helguera


Scavenger Hunt
noun
a game, typically played in an extensive outdoor area, in which participants have to collect a number of miscellaneous objects.


Wikipedia Definition:
A scavenger hunt is a game in which the organizers prepare a list defining specific items, which the participants seek to gather or complete all items on the list, usually without purchasing them.

Usually participants work in small teams, although the rules may allow individuals to participate. The goal is to be the first to complete the list or to complete the most items on that list. In variations of the game, players take photographs of listed items or be challenged to complete the tasks on the list in the most creative manner.


REQUIREMENTS

  • Your scavenger hunt should have a theme.
  • This project will have a total of 18 pages. Your scavenger hunt should have a main web page, and 16 sub pages, one for each item/instruction on your scavenger hunt list. You will also have a documentation page.
    • Page 1: Scavenger hunt main page
    • Pages 2-17: Scavenger hunt items
    • Page 18: Documentation page
  • Each of these pages should be unique and different from the rest, and should provide instructions to the players on how to complete the task, or find the item.
  • Your scavenger hunt should have a name. Each web page should have the name of your scavenger hunt.
  • The pages should be linked together with hyperlinks.
  • Must work on mobile
  • Your scavenger hunt should take 1.5 hours to complete.
  • If items are to be completed in a specific location, this location should be within a 5-10 minute walk from DC.
  • As a team, you will come up with a method for collecting documentation/ proof the other team completed each task. Do participants take photos? Video? Audio recording? Make a tiktok? do a tweet? If so, how do you (the designers of the game), collect this proof on game day?
    • Make sure the required documentation methods are clearly outlined for participants. Documentation methods can vary for each item.

GAME DAY: Tuesday May 3, 11am-1pm

  • On game day you will exchange scavenger hunts with another group, and race to complete each other’s hunts. The team that completes the game first is the winner.


SCHEDULE


APRIL 12

  • Project Introduction & work session
  • Read The Hunter Games in class
  • Start generating ideas with your team—collect ideas on a Google doc and link to your class website as “Project 3 Research & Ideas”

APRIL 14

  • Theme for scavenger hunt and 6 scavenger hunt items due.
  • Add these to your Google doc

APRIL 19:
Pages 1-7 Due

  • In addition, Google doc with should have more ideas for scavenger hunt items/instructions

APRIL 21:
Pages 8-11 + Coded drafts and visual sketches for Page 18 Due

  • Google doc with should have more ideas for scavenger hunt items/instructions

APRIL 26:
Pages 12-17 Due

  • MIDPOINT CRIT with visiting critic Anezka Minarikova

APRIL 28:
Page 18 Due


MAY 3:
GAME DAY



Exercises

Exercise 1

A Place
  • Part 1:
    Describe a place in 25 ways. Your description can be a list of words, a collection of sentences, a paragraph, or any combination of these.

  • Part 2:
    Using only HTML, make 10 pages that display your writing from Part 1. Begin to experiment with how the available HTML tags can visually shape your writing.

Exercise 2

Dinner Table

What is for dinner? What’s on the table? In this exercise you will use HTML tables to recreate your dinner table, and then use CSS to give it some style.

  • Part 1:
    Make a multi-row table using the HTML table element.

  • Part 2:
    Fill cells with what is on your dinner table—you can include text, images, emojis, anything. Have fun!

  • Part 3:
    Use CSS to add styling to your table.

Exercise 3

Written reflection on Jodi's Infrastructure
Due: 2/10
  • Part 1:
    Due: 2/8
    Write a written reflection on the reading for week 4: "Jodi's Infrastructure"

  • Part 2:
    Due: 2/10
    Use HTML & CSS to typeset, and publish your writing on your class website.

Resources: The Elements of Typographic Style Applied to the Web

Exercise 4

Views From a Window
Due: Thursday Feb. 24
  • Part 1:
    Take 8 photos from the view of 8 different windows.

  • Part 2:
    Write a caption for each photo.

  • Part 3:
    Write alt text for each photo.

  • Part 4:
    Make a simple HTML page with your photos, captions, and alt text.

    For captions use the caption tag, for alt text use the alt text attribute alt=”alt text goes here”. Use the width and height attributes to size your photos: width=”number goes here ” height=”number goes here ”

  • Part 5:
    Add CSS to style this page
    Use Flexbox & Media Queries

Resources:

Exercise 5      Image Map Workshop

HTML Image Mapping
  • This exercise was completed in class as a workshop. Please link your image maps on your class websites

Exercise 6      Touching-Feeling: Workshop with Mengyi Qian

Workshop Document