Core Interaction

Stories as Networks

Objectives

  • To build a multi-page website
  • To experiment with navigation to convey meaning
  • To interpret a story through expressive typography online

Introduction

Jorge Luis Borges was an Argentinian writer famous for his short stories that deal with labyrinths, dreams, religion, and mathematical ideas (particularly set theory concepts like infinity and cardinality). His circuitous and meandering prose, full of allusions and vivid imagery, is a good way to think about the web as a network that has many nodes and many connections that continuously folds upon itself. It is the act of navigating through this maze that brings meaning to the web experience.

Project

Read the short story selections here. Choose one short story and set the text using HTML and CSS (JS optional) so that the reader will not only be able to read the story but also experience your interpretation of the story. Use the visual language of the web—hypertext, responsive design, forms, color, divs—to express the meaning of your selected story.

Requirements

  • You must use multiple views to convey this experience— it will be viewed on both large and small (mobile) screens.
  • You may use no more than two typefaces
  • Representational images are not allowed

Considerations

Point-of-View: What is text? What is writing? How do you see or read this particular text? The most successful projects have 1 point of view that is 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.

Links: How do internal/external links enhance the meaning of this text?

Scale of the Page: What happens to your site when the browser window is resized? Is it the same? Is it a different design? Are only certain information accessible at certain sizes?

Do not try to illustrate the text. The least successful projects are ones that try to visualize the text literally.

Schedule (Week 3–7)

  • 02/04 Discuss: Lecture + reading. Introduce: Project 2. Assign: Ideas.
  • 02/09 Review (1-9): Idea. Assign: Iteration
  • 02/11 Review (10–18): Idea. Assign: Iteration
  • 02/16 Review (1-9): Iteration. Assign: Implementation.
  • 02/18 Review(10-18): Iteration. Assign: Implementation.
  • 02/23 Review: Implementation
  • 02/25. Review: Implementation
  • 03/02 Project critique