Demontage
Sophomore year, spring
Interactivity is not a simple matter of buttons, screens, and user paths. It is a (probabilistic) modeling of experience. This project challenged students to construct a functioning website that renders user interaction explicitly meaningful. It was based on an earlier print-based assignment—the Montage—in order to stress media-derived affordances.
Sketch of site structure by Dana Trentlage (far left) and site plan by Mitchell Dunkinson.
The Setting
Preceding this assignment (in the same course) were two other modules: one a series of web-based interaction exercises (taught by me); the other a Montage project (taught by Kermit Bailey). The Montage required students to choose a theme and represent it in a complex poster (I am simplifying here). Building off of Kermit’s assignment allowed me to bypass some project definition and get more quickly into method. Staging earlier brief exercises in HTML and CSS took some technical burden off of this module.
Demontage was incorporated into the sophomore-level Imaging II course at NC State’s College of Design, as one of four “modules”—the assignment was given in turn to both sections of the course. The class is a 3-credit support studio that meets Mondays and Wednesdays for 2 hours. Students at the College of Design have dedicated desks with 24-hour access.
Project in Brief
The students began by decomposing their earlier Montages. The result was a listing of visual elements and embedded concepts. Through small and large group discussions, they generated ideas for interactions with that material (pointedly ignoring the formal characteristics of the Montages). We spoke in terms of how the material could help stage an experience, and they were planning in those terms.
Justin Morgan’s site ★ forces the visitor to participate in a militaristic rebuilding project (below).
The project brief ★ described the task as such:
Disaggregate your Montage (de-montage it). Then expand on it, and reassemble it into an extensive web site. To disaggregate the Montage, you’ll identify its particles: the elements of your Montage. The obvious ones are images and image-types. A pig, for instance. Less obvious, but still critical, are ideas expressed through graphic devices. Containment, for instance, or mapping, or dichotomy. You will then identify relationships between these particles, and expand upon their possible meanings… ultimately leading to a never-before-made site. It seeks to accomplish the same conceptual goals as your Montage, but its form is new to the world.
Considering the Montage poster and Demontage site: Each medium has unique and beneficial qualities. Our concern is with the site. Can we include more information now? Can we present multiple and conflicting viewpoints? Can we accommodate more backstory? (Hint: The answer to all of these questions is yes.)
Darwin Campa’s site ★ engages its visitor in a nerve-wracking strictly-timed game. (Warning: The site will interfere with your browser window, though in an entirely non-damaging way.)
A strict requirement was that the site had to be dramatically different from its original source (the Montage). This helped keep the project from becoming a tedious repetition, but more importantly it drew a distinction between an expression of the same conceptual material in a printed poster and an active website.
Criteria for Judgment (grading):
- Does the site’s structure itself convey meaning?
- There is a real process to this module. We will progress together. I am justified in grading on this process well beyond the final concrete result. So investment is important. Try it out. Did you work through the process with spirit and panache? Did you participate in all group discussions?
- Does it meet the unique criteria you have determined for it?
George Lamontagne’s site is an experiential treatise on memory. It provides a disorienting space populated with messages about the importance of memory and its tenuous nature. The site itself displays partial information at times, while at others, through cursor response, it takes information away altogether.
Further Prompts
We spoke about three core aspects of an immersive site. A site is built on repetition, nuance, and stupefaction…
Repetition: Our understanding of how to move through a site’s space comes from internally-consistent structures determined by the architect (you). These structures take the form of repeated elements and positions (the structure of the screen), and conventions (the stylistic regulations). You can rely on established conventions (don’t), or you can make something new. To do so, it’s critical that your site follow its own internally-consistent logic; and that the logic must be made apparent to a visitor.
Nuance is what justifies a site’s existence—without it we should make a single page and go home. The nuances of a site are its points of interest. The truth is in the details…
Stupefaction: If repetition is the bedfellow of boredom, then stupefaction is the first smooch of true love. To be stupefied is to be engaged, and a site must engage a visitor if it hopes to be noticed and remembered. We tend to retain the memory of our most devastating (and most exhilarating) day in high school over the second day of the second month of our second year.
When working in a new medium, it’s often productive to provide some leading suggestions, to begin to delineate the designer’s purview. These points were provided as “things to consider”:
- What you can do with scrollbars as reveals…*
- what moves when scrolling and what doesn’t (fixed position)…*
- how rollovers might operate…
- what color could signify…
- what might a visitor expect, and not…
- how a viewer explores (in time) a poster, and how that might translate to the web…
- screen as expansive space…
- screen as open box…
- screen as viewfinder…
- &c.
Critter Wentworth riffed on the first two points above with a site ★ that cleverly pairs fixed and scrolling elements with transparency (above). The visitor’s use of the scrollbar creates revelatory hand-cranked animations. Ariana Farquharson’s site (left) utilizes fixed and scrolling elements in a similar way, with aggressive typography obscured and exposed in turn.
Outcomes
Being the first (and for some the only) exposure to actual web design, this project was disorienting and demanding—and especially because the available software was poor. I knew we couldn’t achieve the same kind of refinement possible with other kinds of projects, and so I made it clear that my major concern was with the modeling of experience—a great deal of sloppiness was necessarily tolerated. The results were quite interesting. This project is certainly not an “authentic” website, but it’s an early project (sophomore year) and served to engage students in truly interactive principles.