essay

1. The action or process of trying or testing.

4. A taste, or first taste, of food or drink presented...

8. A composition of moderate length on any particular subject, or branch of a subject... more or less elaborate in style, though limited in range.

sketch

1. a. A rough drawing or delineation of something, giving the outlines or prominent features without the detail...

2. a. A brief account, description, or narrative giving the main or important facts, incidents,...

b. The general plan or outline, the main features, of anything.

The EssaySketch is a synthesis assignment. Identify, articulate, and connect key themes from the readings. Interject what matters to you. Develop your own personal expressive voice by taking a position, interjecting your own perspective among those articulated in the readings and in class. Use World Wide Web standard technologies, including JavaScript and CSS.

You will compose a visual and conceptual interface to the important ideas we are addressing. What are the significant conceptual models? How do you relate to them? Voice the ideas. Illustrate the models. Position yourself. Developing your own conceptual models, and underlying metaphors. Integrate these perspectives in a hypermedia project. Forge a creative space that develops connections between them. Integrate theory and practice thoroughly, using techniques such as self-reference.

content nodes

Go over the assigned readings. Re/read until you understand deeply. Highlight as you go. Extract key ideas.

Using these key ideas, from different readings, curate a set of 6-10 content nodes to form the backbone of your EssaySketch conceptual model. Each content node is a short essay, with illustration, that contextually explains a key idea from one of the concept or design modules of our curriculum.

For each concept module node: Explain the operative conceptual model. Comment on how your design will express and manifest it. Why are these models important? What is their role as structures of interactive information? Develop explanations and new connections between the nodes.

For each design module node: Explain the operative design principle. Comment on how your project will express and manifest it. Why are these design principles important? What is their role as structures of interactive information?

Here is a list of possible jumping off points for content nodes (not at all meant to be complete):

• [conceptual] Vanevar Bush envisioned the trails of the memex, as a means of representing our, "association of thoughts." The memex code book would store trail names (a form of metadata!), and sets of pairs of locations, joined by the reader/trailblazer's personal sense of significance.
• [conceptual] Borges garden of the forking paths is a labyrinth, in which form and content articulate congruent models of time through narrative.
• [conceptual] In Timecode, Figgis continuously presents four different camera perspectives, without edits, in synchronization. What is the impact on storytelling (narrative)? How does this relate to and instantiate other key conceptual models?

• [conceptual] Duchamp's Fountain demonstrated the power of context in the interpretation of found objects, and the role of metadata. He inaugurated the postmodern era of choosing and referring as a fundamental creative act, in contrast with the prevailing practice of creating new masterworks.
• [conceptual] Ted Nelson posited hypertext as nonsequential writing. He developed notions such as chunk style, windowing, and compound hypertext. He argued for integrating the roles of author and reader. He articulated the value of transclusion.
• [conceptual]. Landow advances Barthes' notion of lexia, as units of meaning that get assembled, with important qualities. What are they? What is their significance? How do they become manifested? How do they relate to "ideal textuality"?

• [conceptual] Landow relates Foucault's notion of the archaeology of knowledge, emphasizing how any "text" is interpreted through its network of references to and citations from other texts.
• [conceptual] Landow, on a similar plane, offers Derrida's concept of morceau, bites, which become chewed, as units of meaning ripe for decomposition and reassemblage.
• [conceptual] To argue for connecting the roles of reader and author, Landow points out that Virgil read and rewrote Homer, and that Dante read and rewrote Homer and Virgil.
• [conceptual]. Meanwhile, DJ Spooky addresses remix through forms that involve sampling of sources such as James Brown, Parliament Funkadelic, and D.W. Griffin. He identifies anything published through networks as material for mashup.
• [conceptual] Rauschenberg samples flags, the news, and other popular culture sources in his prints, which combine photo-etching, lithography, and physical objects.
• [conceptual] Hypertext poets and fiction writers use imagery, links, and interactive strategies to develop active, conceptual framings in conjunction with more traditional texts.
• [design] Meggs and Hurlburt develop the roles of explicit and implicit grid structures as means for organizing graphic space.

• [design] Tufte provides visual strategies for presenting complex information and making relationships clear.
• [design] Itten synthesizes physics, cognition, and the history of artistic practice to create a theory of color.
• [design] Carter, Meggs, and Hollis articulate principles for working with type in space.
• [design] Norman unearths the symbiotic roles of affordances, mappings, and conceptual models, and situates them amidst designers, developers, and users.

conceptual model → metaphor

Develop an overall conceptual model for your EssaySketch. Relate your found objects, nodes, and linkages to this conceptual model. As a basis for presenting the conceptual model, discover a metaphor. The role of the metaphor is to function as a real world / cultural structure—to which you relate your found objects and nodes—which binds them together as a whole. The metaphor serves as a means for relating your conceptual model to the participant / reader of your project. The metaphor is expected to serve as a basis for your interface. The metaphor guides user experience. It needs to specific, a detailed instance of your underlying conceptual model.  Form conceptual mappings among your metaphor, nodes, and found objects.

nexus of linkages

Construct a conceptual nexus, linking your nodes to form a personal conceptual interpretive interface ecology. An interface ecology is an integrated collection of heterogeneous elements that are essentially connected. An ecology is characterized by relationships among elements, more than by the individual elements themselves. Build your interface about hypermedia, using hypermedia. Give attention to each aspect of the assignment, and to their ensemble of interrelationships. Develop the flows between them. This requires both a vision of the whole, and attention to lots of little details. Your interface ecosystem defines an experience for those who interact with it.

expressive voice

Integrate your own personal experience. Express yourself! Develop your voice. Begin with how you choose found objects that are both meaningful to you and able to provide perspective on the theme of the course, in relationship to each other and your nodes.

found objects

In relation to your nodes, curate materials from the Internet, addressing topics such as elections, wars, energy, the environment, gender, race, diversity, disability, entertainment, fashion, and the job market (don't be limited by this list). Quote from diverse web sources, including art, news, and scholarly articles, as well as products, social media, and blogs. Be as specific as possible!!! Develop clear analysis of what you are drawing from, and how it relates to the concepts you are developing.

NB: In most cases, pictures of the authors are not particularly useful as found objects. Avoid them!

modular visual program

Remember that according to Meggs, a visual program involves:

• a system [parameters] → unify sequence [designs];
• a grid structure;
• consistent type sizes, styles;
• numbering placement.

Hurlburt articulates that the foundation [modular design process] incorporates:

1. understanding the communication problem.
2. defining the nature of visual material, space it will occupy, order and continuity best suited to presentation of content.
3. distillation [all] → design concept. grid & modular system that serve the concept.
4. form of grid → same simplicity [structure] as design concept.
5. function [content] → form [grid].

Create a clear visual program for the project as a whole. Develop grid, layering, color, and typographic structures. Use space clearly. Develop foreground / background relationships. Be consistent! Design consistent and varying visual constructs, which extend through the work, to help you convey your underlying themes and models.

interaction design

How will people interact with the materials? How can the site be playful, and communicate ideas? Use elements of games, exhibits, visualizations, and any important prior experiences. Use JavaScript and CSS events such as onmouseover, onmouseout, and hover to transform styles, text, images, visual presentation. Be creative.

iterative design

Continuously develop your ideas, as your understandings of conceptual and technical materials grows. In the course of working on developing your deliverables, you will get feedback. Some will come in class; some outside. Some will come from the teacher; some from classmates. As you are working, engage your friends with prototypes. Continuously iterate your concept and design in response to feedback. And inspiration. Iterative design process means you can always revise anything, given that you are willing to do the work to thoroughly develop your new ideas.

Every time you present or turn in a new information composition, use IdeaMache's Make a Copy feature to make a new version when you start your iteration. Do not change the old instance at all after you present it or turn it in! This will enable the teaching team to compare your previous and latest work.

perspective on the whole

For some examples of prior work by students on a similar (but somewhat different!) EssaySketch assignment, check out the must see! exhibition. Note that prior iterations of the course had more other assignments, and less time to complete this. So see this precedents as on the light side. Their strength is in their holistic delivery of concept and functionality.

The EssaySketch is due as a series of installments, which instantiate an iterative design process.

Deliverable 1: Concept + Found Objects

Curate a set of 8-15 found object media assets -- consisting of images, texts, sounds clips, and video -- that will support your idea. The found objects should be from diverse web sites and web site types, including higher quality sources, such as scholarly articles, news articles, creative works, and perhaps patents, as well as products, blogs, and social media. Label the found objects, individually and in groups, to clarify their relationships to each other and to your overall conceptual model.

Develop your overall concept, in 2 paragraphs of writing and a series of sketches. How will you illustrate it? How will the found objects support this? What themes from the reading will you address and intertwine? How will you interject a personal perspective? What story will you tell?

Use the medium of information composition, via IdeaMâché, to connect the found objects to each other, and to themes, conceptual models and your story. Use of all of your visual and information design skills on your composition, as a whole, as well as on the individual deliverables that define your EssaySketch. Use scale to nest sets of elements, where appropriate, to create readability, since you are sure to have more elements than can fit in working memory at one time.

Turn in the URL of your composition, or Mâché, both as a link on your class homepage and via this form.

Deliverable 2: Information Design and Visual Program

Engage in a modular design process. Create an information design and architecture, which include:

• a list of 6-10 hypermedia content nodes -  including articulation of essential concepts involved in each;

• a set of 2-4 types for nodes and node components, which you will use for presentation, and develop in your visual program (see below); name and purpose each of these types;

• a well-organized sitemap -  which shows navigational links (directional) that will connect content nodes to form an integrated conceptual nexus;
• a set of conceptual mappings - which relate found objects from Deliverable 1 to content nodes and links.
• a visual program (make sure to look this up in the readings), which defines how your project will present content (nodes). The visual program defines graphic space. Engage in a modular design process, as per the graphic space readings.

• Use a grid and/or proportion to define graphic space for spatially organizing content for your design. You can imitate a grid program from the readings or create a new one.
• Develop a set of 2-4 presentation types, each representing one way of presenting one or more content nodes. Specify the name and explain the purpose of each presentation type;
• In this deliverable, present your visual program through a set of wireframe designs, one for each presentation type. Each wireframe design presents, in detail, the layout of static and interactive content, that you will use to present corresponding nodes.

• For each content node, specify which wireframe(s) will be used for its presentation.
• For each wireframe design, create at least 2 example instances, each representing a different content node. In each example instance, include a title, subtitles, text, links, and found objects.
• Present your visual program by showing the grid(s) and other structures by themselves, then as manifested through wireframes;
• Add labels and ~1 paragraph of writing to explain your visual program as a whole. Specify if you will rigidly follow your grid or use it as a basis that you then make adjustments from.
• Note: for now, the visual program should not address color or font, but only address spatial layout and the sizes of presentation types. For now, use a single font family.

Citing Mok, "the architectural model is concerned with the relationships among [entities], time and space." "Projects that are well designed only look simple because designers have spent countless hours making them look that way."

wireframes

Wireframes are widely used in web design to represent the layout and arrangement of content for a page or module. For this deliverable, use principles of graphic space, as manifested in your visual program, to design your wireframes. Create each of these using a vector graphics editor such as Adobe Illustrator, SVG-Edit, Inkscape, or Dia. Output as SVG, onto your desktop, and then drag your SVGs onto your information composition. Make sure to label and explain wireframes and their types, in the composition, to contextualize them. You can also make the sitemap, either as a whole, or as components, in the vector graphics editor. Or, you can create it directly in your information composition, using IdeaMâché's sketching capabilities.

whole deliverable

Again, use IdeaMâché to assemble and exhibit this deliverable, as a whole. As a start, make a copy of the composition from your last deliverable. Add new deliverable material, in relationship to the old stuff, rearranging as necessary. In other words, engage in iterative design.

Integrate the node list,  sitemap, and wireframes into the composition. Articulate relationships among your metaphor, components of your concept, your found objects, your nodes, and your story as a whole. Use sketching as well as graphic space and writing. Again, use of all of your visual and information design skills on your composition, as a whole, as well as on the individual deliverables that define your EssaySketch. Create layering and separation. Use graphic space, position, size, sketching, and perhaps rotation. Write texts to label and explain. Connect your lexia! Since the number of elements  in your composition continues to grow, you will need to make further use of scale, as an organizing principle, to develop a clear design for the composition.

Deliverable 3: Visual Program + Interaction Design

This deliverable further develops visual program, while developing an interaction design, and an initial website. The visual program and interaction design will involve creating external documents and incorporating rich clippings for each into your information composition. The website will be HTML. You will link the website both into your composition, and into your course home page.

visual program

Complete your design of the look and feel of web pages and interactive components, in detail. Develop a color scheme. Make typography precise. Indicate affordances. Create foreground / background relationships. Through all these differences that make a difference, develop layering and separation.

The form of the visual design deliverable is a set of mock-ups. Create at least 2 mock-ups for each presentation type, based on what you developed in Deliverable 2, with any appropriate revisions via iterative design. Each presentation type mock-up should fully include real content for a single instance of a node(s) presentation. It should include all visual elements. Create these mock-ups using a program such as Illustrator, Photoshop, Paint.NET, or GIMP. Output as PDF. Also create an icon for each mock-up. Host the PDFs on your website. Incorporate the icons, each with a link to its PDF and a textual explanation, into your information composition. Make sure it is clear, in the composition, both what type each mock-up is, and what nodes are being presented. Position the icons for each mockup in relationship to its corresponding wireframe.

interaction design

Specify a sophisticated interaction design. Define affordances, that is, what the user sees that indicates interaction, and the underlying action that is mapped. Define state transitions. You can use interactivity within a node, from one node to another, and/or to blend nodes. Use sketching and explanation, in reference to your wireframes, to show what the user will do to interact, what will change state, and how.

Design means connecting form and content. Thus, use interactivity specifically to express and develop key conceptual ideas, connecting form with content, rather than to merely make things fancy. Design conceptual interaction models, and their manifestation through affordances mapped to functional transitions. What sensory cues will you provide to indicate what interaction is possible? What feedback will you use to show the user the current state, as it changes? Make your affordances communicate the conceptual models directly to the user, without any need for documentation. Connect the mappings from affordances to functionalities with your EssaySketch concept components. Develop flow charts about any non-obvious flows of control.

Note: a "sophisticated interaction design" means more than just clicking on hyperlinks. It means using JavaScript to define algorithms and event handlers.

Include in your interaction design deliverable:

• a catalogue of affordances, feedback, and mappings;
• wireframes and/or mock-ups that show a series of states for each sophisticated interaction. Make it clear what the user does to affect state transitions. Make it clear how you are using animation. Annotate wireframes with text and sketching to make transitions clear;
• for complex interactive functionality, use some kind of a flow chart to express events and control flow.

information design

With inspiration from Mok, Tufte, and the other designers, create and connect any other useful graphic and textual components that will help you develop and communicate your EssaySketch design.

initial website

Create an initial website, in HTML5, which contains all of your content, including content nodes (including writing explaining the concept), found objects, and navigational links. Represent the spatial relationships of your wireframes, along with any appropriate revisions, through iterative design. You are not yet expected to implement any further interactivity. At this point, invest minimal attention into typography and color, as critical feedback on your mock-ups is expected to result in revisions.

whole deliverable

Incorporate your visual and interaction design components into your project information composition, using IdeaMâché. Make a copy of your old composition (keeping the old one for reference), and continue working in this new instance to help you articulate relationships connecting these new design components with your metaphor, concept, found objects, content nodes, and story as a whole.

The idea is that your composition becomes a kind of design notebook for your EssaySketch. Use of all of your visual and information design skills on your composition, as a whole, as well as on the individual deliverable components. Since the number of elements  in your composition continues to grow, you will need to make further use of scale, as an organizing principle, to develop a clear design for the composition. Create layering and separation. Use graphic space, position, size, sketching, and perhaps rotation. Write texts to label and explain. Connect your lexia!

Also add a link to your initial website, as well as to your information composition, directly to your course homepage.

Deliverable 4: Complete EssaySketch Midterm - HTML5 Interactive Website

For the final deliverable, build your EssaySketch as a whole using HTML5. Use your metaphor to connect aspects of the user experience. Re/write your content node texts carefully to explain principles from the curriculum. Use CSS to create a design equivalent to or beyond that specified in your mockups; that is, add color and refine text styling.

Use CSS and JavaScript to implement the interactivity addressing or going beyond that specified in the previous deliverable, incorporating iterative design feedback and inspiration. Make sure that you have clear affordances and mappings, which effectively communicate the interaction design model to the user. Also make sure that the interaction design model is aligned with your metaphor, concepts, and content.

You will turn in a link to your EssaySketch website. Also, please add this link to your Deliverable 3 IdeaMache and to your home page.