DSD-3771-A
Interactive Systems II
School of Visual Arts
209 E 23rd St, New York, NY 10010
(508 Studio)
Tuesdays, 6:30-9:20pm
Spring 2025
Last updated: January 23, 2025
PROJECT 3
A Hypertext Narrative
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, Ordinary Hypertext, 1987.
![]()
QUESTION
How can a story be expressed through linking and various page types?
INTRODUCTION
The goal of this assignment is to experiment with typography on and across the web. How might you visually express a piece of text across an interactive experience through using only hypertext links and pages.
LEARNING OBJECTIVES
-
To interpret a story through expressive typography online
-
Adapt a text to an online reading environment
-
To build a multi-page website
-
To experiment with navigation to convey meaning
ASSIGNMENT
Using only typography, typeset a text across mulitple pages so that the reader will not only be able to read the story but also experience your interpretation of the story.
Use the language of the web—hypertext, responsive design, and other forms, color—to express the meaning of your selected text.
REQUIREMENTS
- Text Title
-
Text Author
-
You must use multiple viewport widths to convey this experience — it will be viewed on both large and small (mobile) screens.
-
You may use one typeface.
-
No images allowed, type only.
-
Must use your entire text.
-
Styled links (if relevant)
-
Designer credit somewhere on the page
-
Optional to use sound.
-
Minimum 1 pages.
GROUPS
- Dexter Barrett + Jen Hong
- Yuha Cho + Inwoo Baek
- Bo Jung + Seogyeong Kim
- Nicole Kim + Ashley Kang
- Kevin Park + Shirley Li
- Xiaofan Liu + Hyungjoon Kwon + Kaia Shin
CONSIDERATIONS
Interpretation: What is the nature of writing in general? What is the nature of your text specifically? How do you interpret this particular text? What do you notice about it? The most successful projects will have a single point of view expressed through a decisive design move.
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.
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?
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? Note: Do not try to illustrate the text. The least successful projects will be ones that try to visualize the text literally.
PART 1
Skim and choose a text from this list. Once you’ve chosen one, read the text multiple times, interpret it from all angles. What is the subject matter in your own words? Consider the tone, syntax, word choices, sentence and paragraph length, rhythm...
What images or associations does it bring up? Is it visual, metaphoric, descriptive, are there a lot of nouns or adjectives? Is it sparse, dense or in between? Of all your findings, what do you want to point out to the reader about this text in your designed interpretation? How might you do it? In Figma, record your observations and ideas, be prepared to discuss in class. Then create a list of 10 or more words, phrases, ideas, images that describe your text.
PART 2
Refine your ideas down to a single approach or direction.
Map out your user flow for an overall experience and how someone might engage with your site structure.
Come up with 3 design directions for how you could present your text online. Share visual sketches (hand-drawn + Indd/Ps/Figma), design references or otherwise, code snippets (if relevant), and written descriptions of your intentions for each direction.
Make sure we have something to look at as well as ideas. Your visuals/sketches should communicate as efficiently as possible what the idea is (don’t spend too much time digging into the details of the design yet.)
PART 3
Consider both mobile and desktop views. Consider site structure and navigation. Your site could be one long page or it could be 100 linked pages. But remember you must use your entire text (whether it exists all at once or not.) If a direction is more than one page, you might include a wireframe to explain the site structure. Remember: no images, type only!Each direction should emphasize 1–2 concepts from your list of 10 from Part 1. Compile all of this into a webpage, google doc, are.na page or otherwise. Be prepared to present/discuss.
DELIVERABLES
A Google Slides document walking us through your process along with a set of final prototypes to share your execution.
