Posts Tagged With: multimodal

Website Analysis: Hailey Winstone Illustration

As part of course requirements to employ the use of social media toward stimulating discussion around relevant topics pertaining to information architecture, my classmate, Wayne Stainrook shared this tweet:

The website belongs to Hailey Winstone Illustration.

Upon clicking the link, I am greeted by the site’s visually-centered homepage. In the background, I see a sample of the illustrator’s work which appears as a faded-watermark. At a glance, the artwork embodies a metaphor that represents elements of the internal (a human brain and eye–thus creativity) and the external (a planet and surrounding outer-space–our world). An affordance of the way the illustrator features her work here is that it draws me in, yet it is not distracting; I also find it meaningful in multiple ways. The navigational interface is placed directly at the center of the screen; it reads concisely with the logo at the top (whose typeface has a customized feel) and directly below are two content boxes which mirror each other in design. The navigation option on the left dares the user: ‘crazy version’ here (enlarged) and just below (in smaller typeface), ‘if you & your machine can handle it…’ the option to the right accommodates: ‘lazy version’ here… for slower computers and connections.’The homepage emotes an interesting sense duality–as its aesthetic is of a bizarre, whimsical nature, juxtaposed by a navigational interface that conveys acuteness in its attention to precision. A win, in terms of design, is that the image and the text do not compete with each other–instead they work to complement the work as a whole.

As author, illustrator and scholar, Edward Tufte asserts, in Beautiful Evidence, most techniques for displaying evidence are inherently multimodal, bringing verbal, visual, and quantitative elements together (83). All components are treated as ‘colleagues in explanation.’

Additionally, I find the initial options to be constructed in such a way that I am directed with visual ease to the offerings. In terms of an effective visual representation, or mapping of the information, the designer maximized the use of color and typography in a way that serves to embody a sense of graphic consistency, yet adds a layer of interest. Specifically, through use of a single color (white) for navigation, the text is crisply highlighted and flows in smooth contrast with the background image. The text (again, all white) is featured in two typefaces–the logo is highly stylized but balanced by navigational text in a classical, yet stylized serif typeface.

So far, so good. I decide to enter the site choosing the ‘crazy version’ option. What happens next is that the background image transforms into a full-color image, (as opposed to the very faded version on the homepage) and as I scroll over the image I discover that the drawing has become interactive. Although not all ‘interactive parts’ of the artwork function as navigation, I enjoy it as an ‘ imaginative experience of discovery,’ and feel that the designer’s intent is to provide an interactive experience for the user, where anything can happen–as there certainly seems to be a sense of the ‘unexpected.’ The user interaction that occurs on this level also serves to reinforce the brand and identity of Hailey Winstone. As I scroll over ‘the eye,’ white ‘click to enter‘ text appears; the eye then looks to the left at a menu offering links for: Paintings, Pen & Ink, Portraits, and Other. Each link (text) is accompanied by a white, graphic (image) that is iconic of what it represents–for example, a classical-looking paint brush graphic is paired with the Paintings link. Thus, the result is quality of resonance as the text and image complement and reinforce one another.

I venture into the Paintings section of the site; there appear 3 rows, each containing 5 thumbnail scroll-shaped images. The first row and (majority) of the second contain illustrations for the book, Mother Holle, by the Brothers Grimm. As you scroll over each thumbnail image, a small bit of descriptive text appears above it. As Tufte asserts, nearly always, the words closely follow the images–and the images closely follow the words…(90).

A strong, consistent theme that the designer employs is the accompaniment of  text to bring specificity, context, and definition to the image-based content. This serves to connect the illustrative subject matter with a specific literary genre–thus giving the illustrations a sense of credibility by connecting them with their market niche. On the bottom row, I thought the relationship between the image and supporting text was of particular interest; the thumbnail depicts a close-up portion of a human face–with fangs. The illustration category is: Christmas Cards, with the description: a Christmas card featuring a scary Santa, and finally the caption: He’s coming for you. As a point of visual connection and associative meaning-making, just left of this image is a thumbnail featuring a classic-looking Santa–therefore, you can form a fairly accurate educated guess as to what the ‘scary Santa’ image is–without actually scrolling it to reveal the supporting text. In sum, I feel that the informational ‘mapping’ of this site exemplifies Tufte’s theory that, mappings help tell why the image matters (45).

Categories: #IAMondays | Tags: , , , , , , , , , , | 3 Comments

Embodied Connections: Meaning-Making in a Multimodal Discourse

This past week in our graduate course on Information Architecture with Professor Bill Wolff, we’ve explored techniques and design philosophies centered on information display. Our discussion was informed by selected readings from Edward Tufte’s  Beautiful Evidence, as well as interactive and PDF versions of  Fighting to Live as the Towers Died, by the New York Times. A specific area of focus was the concept of  ‘mapping,’ within the context of  multimodal composition. (As a preface, it is important to make the distinction that, for purposes of discussion, our definition of mapping is not limited to ‘maps’ in the conventional sense of cartographic renderings–although, it could certainly include the use of them.)

According to Tufte, mapped pictures are representational images that combine scales, diagrams, overlays, numbers, words, and images (13).

Multimodal-mapping presents the audience with several different kinds of information, via a single, visual plane–through a process of layering. Each ‘layer’ serves to signify a different kind of knowledge. For writers, mapping affords a visual dissemination of  interconnected webs of knowledge and causal relationships. In terms of information architecture and as a form of composition, multimodal-mapping frames and contextualizes specific intersections within a greater body of knowledge.

If we reflect on the discipline of communication, as writers, at the heart of our craft is effective communication with our audience. What this means in terms of execution–is that in our ‘writing,’ the intended message should come across in a way that is consistent with precisely what we mean to say. In other words, it is paramount that our composition–and therefore our message–not transmit in a convoluted or disjointed way.

So, you may ask, how does multimodality come into play, and why is ‘mapping’–or incorporating other elements besides plain text–important?

As our author asserts, at times, it is necessary to include multiple sources and levels of data (78) in order to illustrate connections and relationships, as well as make different kinds of comparisons; the use of additional kinds of information assist to better explain what we mean to say. For example, the strategic arrangement of annotative and  typographic elements–lines and arrows–as well as colors, images, and text, all function together to transmit a message that is dynamic, visually engaging and robust. Important to note, is that these elements also function to provide context and directional navigation to the page–therefore, enabling the reader to clearly ‘decode,’ or ‘read’ the message.

Another facet of multimodal-mapping is that it offers the capability to take extremely complex, high-density information–such as that of cartography, brain research, molecular biology, physics and other high-resolution fields–and re-present it in a way that the linear data becomes embodied into a single, compact, visual representation. Tufte refers to this type of visual information as sparklines or data-words (58). This definition lends itself to that of semiotic metaphor. Another way to imagine sparklines or data-words, is to think of a ‘constellation of information’–or individual, interconnected pieces of knowledge that come together, making up a whole. An example of  a sparkline is the double helix of DNA encoding (13) or Tufte’s representation of all 65 of Galileo’s published observations of Jupiter and its satellites. (Pertaining to Tufte’s re-design of Galileo’s work, we note that when the original, ‘intervening’ text was omitted, a new architecture of information presented itself, resulting in the visual evidence becoming adjacent, sequential, linked, moving (108)–a continuity became present that was not there before.)

To further extrapolate on this concept, imagine an illustration of an adult, human skeleton. Now, in order for the message to be clearly understood, specificity is essential–what is needed is clear direction, scope, and scale. With a nod to the author, presenting ‘everything’ results in contextualizing nothing (31)–it conveys a message that is abstruse. So, we don’t want to focus on the ‘whole skeleton’ per say–instead, what we want to focus on is one area. Say, it’s the left leg–and even more specifically, the tibia. According to Tufte’s definition of beautiful evidence, every image presented must reside within the universal measurement grid (45). So, connecting back to the example I discussed above, what we are concerned with, is the portrayal of relationships within a given body of knowledge–showing things in context with one another provides for a local and precise way of understanding.

Tufte also discusses explanatory mappings and the practice of exploratory image analysis. Explanatory mappings appear in scientific research, newspapers, textbooks, technical manuals, legal proceedings, engineering reports and medical research (45). However, they are not constrained exclusively to these fields of discipline; they also extent into the arts and humanities and many times are interdisciplinary, because they represent complex information.

Below is image is from a journal article in Current Opinion in Neurobiology; an example of an explanatory mapping.

Networks for segregation in the human brain.

Below, this image  is a representative time-space map of the USA belonging to an article titled, The shrivelled USA: representing time–space in the context of metropolitanization and the development of high-speed transport from The Journal of Transport Geography.

During a discussion centered on one of the interactive mappings in Fighting to Live, one of my classmates commented, I don’t know when I’m supposed to stop and when I’m supposed to look at the images.

Regarding the page’s architecture of information, my classmate’s comment was reflective of bad design in terms of the page’s directional signifiers. In sum, just as a freeway has road signs and indicators of when to stop and when to go, when to turn here and exit there, multimodal mappings are beautiful evidence of what they represent only when elements therein properly signify or ‘point to’ what they were intended to, and result in a clear transmission of the message.

Categories: evidence, mapping, tufte | Tags: , , , , , , , , , , , , | 4 Comments

Blog at