︎

DSD-3771-A
Interactive Systems II

Projects
Lectures
Schedule
People
Resources
Library

School of Visual Arts
209 E 23rd St, New York, NY 10010
(508 Studio)
Tuesdays, 6:30-9:20pm
Spring 2025

Anthony Zukofsky
azukofsky@sva.edu

Last updated: January 23, 2025

About the site

PROJECT 2
Hybrid Storytelling

We are not the stuff that abides, but pattern that perpetuate themselves.― Norbert Wiener, The Human Use of Human Beings: Cybernetics and Society


Yung Jake , e.m-bed.de/d/ (live experience screen video), Shon Mogharabi, 2012.

QUESTION
How might you tell a narrative across various existing digital enivronments? 

INTRODUCTION
The goal of this assignment is to experiment with publishing online without using a single line of code or utilizing any interaction design principles. As a graphic designer working on the web, you should become adept at negotiating different platforms and social networks, understanding how information moves across these networks, how context is created by different tools and different communities and users.

LEARNING OBJECTIVES

  • become aware of how you use the internet and its many platforms

  • tell a story, real or imaginary

  • explore platforms, their opportunities, and limitations

  • understand user flows

ASSIGNMENT

PART 1
Choose a text, story, or poem and republish it three times, each on a different online platform. You may summarize in your own words, tell the story in images/sound, or publish the text word for word. (If you publish the text word for word, use a short text whose copyright has expired, or that has a creative commons copyright.) Ubuweb, Project Gutenberg and Internet Archive, Poetry Foundation, are good starting points.

  • How can you translate your text and tell the story in a new way, can you add another layer to the author’s work?

  • Do you keep your text intact or retell it in your own voice, in someone else’s voice?

  • Do you need words to retell the story of the text, or images, or sound, or a combination? (Consider how you might use images, sequences of images, videos, and gifs to help tell your story.)


Choose a text and test out three or more platforms in which you might re-present your text. Display 25% of your text/story on each platform as a proof of concept. (For example: test out how you would tell the first 25% of the story, for example: 25% of Alice in Wonderland on Vimeo, Twitter, Slack, etc.)

PART 2
Based on feedback from the class, republish 100% on three platforms. The title and author of the original text should be credited somewhere on each, if relevant.

PART 3
Create a landing page to display your project using figma. Your landing page should Include:

  • Format: 1440 x 1024
    (you are not limited to the length of the website, it can be endless) 

  • Title & author of your chosen text.

  • 1 sentence about why you chose that platform, what the idea is.

  • Links to each of the three platforms on which you chose to represent the story.

  • A typeface that relates to your story to design your landing page.

  • Complete documentation, how do you showcase important screenshots, screen recordings or gifs?

  • How do you organize all of this information on a single page website?  

  • How does scrolling come into play?

CONSIDER CONTEXT

  • How will the reading of the text be affected by the choice of platform?

  • Does the Tumblr community create a different context for text and images than the Twitter community, for example?

  • Think about the technical constraints of different platforms. (e.g. Twitter word count)

  • What is the typical way we read text on the service you are using?

  • Are you interrupting this ‘usual’ read or following it?

  • How are texts broken up? In 140 character blurbs? In comments?

  • How do all these elements affect your reading of the text?

  • How many of these elements can you control? What can’t you control?

PLATFORMS

  • Communication: Instagram, Snapchat, FB Messenger, Twitter, Instagram stories, WeChat, WhatsApp, Facebook, Pinterest, GMail, TikTok, Slack, Tumblr, Google Translate

  • Transportation: Google Maps, Uber, Lyft

  • Payment: Banking, Venmo, Paypal

  • Payment plus food: Postmates, Caviar, Seamless

  • Food: Google Maps, Yelp

  • Entertainment: YouTube, Youtube comments, Vimeo, Netflix, Spotify, Soundcloud

  • Games: Second Life, World of Warcraft

  • Creating and sharing content: Wikipedia, Medium, Google Docs

  • Shopping: Amazon, eBay, Taobao, Craigslist, individual e-commerce apps

  • School: Canvas, Dropbox Paper, Miro

DELIVERABLES
Create a landing page to display your project using Figma. Place the link to your landing page in a final Figma document.

SUGGESTED READINGS

  • Frank Chimero, What Screens Want, 2013.

  • Norbert Weiner, Cybernetics: Or Control and Communication in the Animal and the Machine, 1948.

  • Michael Rock, WYSIWYG, 2014.

ADDITIONAL LINKS AND RESOURCES