technology

Informed Infographics: Using Theory to Support Visual Presentations

“Hurricane Sandy: The Financial Aftermath” infographic presents financial data, statistics, and a personal account in one space, and it examines the financial plight of storm victims in light of the financial assistance they have received through FEMA and insurance policies, compared to the financial loss suffered.

To set up a comparative framework, (as seen in the screenshot below) I contrasted the number of FEMA grant applications sent in from Connecticut, New Jersey, and New York, with the number of FEMA grants that were actually approved for those states respectively. For example, in the upper third of my infographic, I used icons to help convey different kinds of information:  the folder icon for bureaucratic process, the money bag icon for funds, and an icon that resembles our capitol building to represent state government.  Edward Tufte, (2006) contemporary author and expert on the visual display of qualitative and quantitative information, writes in Beautiful Evidence, to place labels directly on images when possible–which in turn helps to reinforce and concretize connections and causal relationships. “For showing evidence, the map metaphor suggests that labels belong on images, that external grids help scale images, and that data are more credible when contextualized” (p. 21). Likewise, I have placed the labels for “FEMA Grant Applications” and “FEMA Grants Approved” directly onto the orange and green folder icons. The names of the states and the numerical data are placed in very close proximity so that they appear as sets of information, easily distinguishable from one another.

Hurricane Sandy: The Financial Aftermath

Tufte instructs, “For explanatory presentations, important comparisons among images should usually be pointed out to viewers by means of annotations, arrows, highlighting, or other methods of directing attention” (p. 45). Therefore, to concretize connections on the page-space, I use different styles of arrows. For example, in the mid-section, the green arrow that flows off of the green line functions to connect the upper portion featuring the data about “FEMA Grants Approved” to the graph which states the exact dollar amount of the Maximum FEMA Grant ($31,000) and the percentage of people in Connecticut, New Jersey, and New York who received the Maximum FEMA Grant Award.

Hurricane Sandy: The Financial Aftermath

Moving over to the left-hand side of the mid-section, (see screenshot below) I use curved black arrows to connect the first statistic about Hurricane Sandy being the 2nd costliest hurricane in U.S. history to more specific financial data. First, I state that the estimated debt from the storm as being $30 – $50 billion and then just below that statistic I provide a breakdown, ($20 billion in property damages and an estimated $10 – $20 billion in lost business). The arrows are black because the icons are gray; so having a difference in color between the elements helps to break up the visual field and differentiates the arrows from the images.  Here, the arrows not only serve to visually connect the information, but they also create a sense of hierarchy by functioning as bullet points.

Hurricane Sandy: The Financial Aftermath

Now, when creating the pie chart to represent the financial aftermath of the storm on an individual level, I had the option to simply connect the financial data to the chart using thin lines in a minimalist style. However, Tufte would argue that, “The more generic the arrows and lines, the greater the ambiguity” (p. 68). So, in line with his ideas, I decided to create customized arrows to help ground the text and numbers to the exact place on the pie chart. Doing so helps to avoid confusion and assists the reader in being able to quickly scan the infographic and see what information is being communicated without having to closely study and dissect the graphic.

Hurricane Sandy: The Financial Aftermath

Ellen Lupton, (2010) author of Thinking With Type, writes, “A typographic hierarchy expresses the organization of content, emphasizing some elements and subordinating others” (p. 132). To create a sense of hierarchy for the bottom third of the infographic, I used the same font for the header, “The Battlefield of Individual Financial Recovery” that I used for the main title, “Hurricane Sandy, The Financial Aftermath”. I made this design choice in order to convey that the information presented is not a continuation of the mid-section, but instead a new set of information. Additionally, I added visual distinction by shading it in green. Just below the header, outlined in a blue speech bubble, is a direct quote from Nicholas Dorman, a Great Kills, Staten Island resident, which serves as a caption: “A disaster happened and they’re making money off of us.” I wanted to use a direct quote from a real person to allow the statistics and financial information a more human feel, which in turn helps the reader to better identify with the case presented.

Some readers are “primarily attracted to pictures and captions, while others prefer to follow a dominant written narrative…” (Lupton, 2010, p. 130). The caption assists in framing the range of financial facts and data in a more local scope and personal context, and it also lets the reader know at a glance specifically what the text is going to discuss. Regarding typographic design choices for pie chart label, I selected a vivid blue in a Helvetica typeface at a size 14 font, bold. These attributes allow the chart label to be easily read while appearing visually soft at the same time, so as not to be appear too heavy or overpowering.  As Lupton writes, “Scale is the size of the design elements in comparison to other elements in a layout as well as to the physical context of the work” (p. 42).

Hurricane Sandy: The Financial Aftermath

Sources

Lupton, E. (2010). Thinking with Type. New York: Princeton Architectural Press.

Tufte, E. (2006). Beautiful Evidence (3rd Edition). Cheshire: Graphics Press LLC.

Categories: infographic, information architecture, technology, tufte | Tags: , , , , , , , , , | Leave a comment

Generative Poem Reflection 2

There are two threads that are repeated in our readings of digital composition: the belief that producers must offer over some control over the creation of meaning of a text to their audience, and we should be arranging ideas/information differently-focusing on associative rather than linear connections.

So, how do these ideas fit in with poetry and electronic literature? Word choice is one way. As I mentioned in my other reflection, given the generative poem’s code structures-think poetry formatting rules like iambic pentameter or haiku and you’ve got it-writers aren’t really sure when and where any given word will appear. They can estimate where in the poem a word will appear by looking at where they add it into the code, but beyond that, it’s random. What does this mean? That word choice cannot be as “random” as it appears. The thought that electronic literature is simply a lot of randomly generated text is a fairly disparaging idea that is bandied about too much. The words in generative poems are not randomly selected, rather like traditional print poems they are governed by form.

Further dispelling the myth of random selection-as in all poetry, the words that appear in a generative poem are selected because they are deemed effective and connected to the topic by the writer. So it goes with generative poems. However, this must be taken a step further. Words in generative poetry must be especially effective, since as stated above we remain unsure when and where they will appear. That means the poet must carefully select words that will impact and further the idea/topic of the poem. The poet cannot have any weak words, each must be able to be associated to the poem. Takei, George provides a fine example. Lines about warp factors, rapiers,  internment camps, action figures, and homosexuality seem odd, to say the least. Until you as a reader begin to think in an associative way, looking for connections. Then we can see that the lines are telling us about Mr. Takei’s life-from a childhood in an internment camp during WW2, to popularity as Star Trek’s rapier-wielding Mr. Sulu to becoming a leading figure in the gay community.

Associative thinking also encourages the handing over of the control and creation of meaning. We as writers must recognize that meaning is ultimately decided by the reader, what they put into a piece, what they attach to words. Generative poetry naturally extends this. Go back to Takei, George. It does not start with the same line it did when you first went there. This is a conscious decision made by the producer of the poem/poem’s code. It is designed to remove the idea that there is only ONE spot to start reading, and only ONE spot to end, which means that you can be reading a poem the wrong way. Random line generation, as well appearance and disappearance of lines, removes the idea that there is only one way to read the poem. This hopefully focuses the reader on absorbing the words, rather than focusing on the style-since they generate fairly rapidly, the reader must pay them all of the attention. The style also forces the poet into favoring short phrases and individual words, so they can never be quite sure how a line will end up looking. for readers, this means the poet cannot lead the reader to a conclusion, as is the case in print.

It is strange that generative poetry not be considered as serious a literary style as print genre. Such poems certainly fit the definition of poetry. Even if readers (wrongly) approach generative poetry with opinions based off of traditional literature, it cannot be denied that generative poetry is as evocative as its print counterpart, and that the two share more stylistic heritages than might be suspected. If creators and consumers can begin to approach generative poetry and elit on their own terms, than there is no reason that the body of literature cannot make room for these genres.

Categories: elit, ergodic literature, generative poem, information architecture, technology, Uncategorized | Leave a comment

Treaty of Greens: Generate this! (Reflections)

Treaty of Greens (generative poem)

Reflection 1

As a person who isn’t that into traditional poetry, I was less than enthused with an assignment that was labeled as “generative poetry.” In traditional poetry, I typically pick a specific subject or mood and run with that, so I did the same approach with this assignment. At the beginning of this assignment, I was in the process of writing a theorized letter to my CEO (at Walgreens), where I argued the lack of love for cashiers. I was feeling pretty passionate about my job, so that’s how I stumbled upon Walgreens as my subject matter. I planned on creating a poem that showed the virtues and triumphs of cashiers, until I had a terrible day at work. My goal evolved into showing the “dark side” of Walgreens.

The word choice part was pretty easy, at least in comparison to traditional poetry. I decided to have one group of words that portrayed more to my job title, and another category of words that portrayed to the customer. I decided to capitalize words that would show anger or aggression, or other words that could relate to such a subject. For example, I capitalized ASSHOLES because that’s typically something cashiers scream in their head at rude customers. In a different light, I capitalized PATIENCE because it’s something most customers seem to lack. I think by capitalizing certain words this emphasizes certain points in the poem, which seems to add a nice touch. Furthermore, this creates contrast. The verbs were a little bit more difficult to come up with, for some reason I cannot explain. I think part of it is because I was trying too hard to think of unique verbs. I felt that most of the verbs I managed to scrounge up were rather boring and didn’t paint a picture, but I wanted the verbs to relate to Walgreens. I did manage to get a few odd verbs in there as “engulf”, “defecates”, and “delegate”. These are still loosely tied to the job of a cashier, especially at my store, and I think it really puts a twist on the generative poem.

As mentioned previously, I wasn’t crazy about traditional poetry before this, so I wasn’t too excited for this assignment. While I didn’t love this assignment, I did enjoy that I could essentially have a computer create a poem for me, only each time it would magnificently different than the previous time. This poem definitely challenged me to rethink how poetry is composed in general. By creating poetry in this way, through code, it really changed what poetry can be. It helped me see that poetry, whether through code or traditional, follows some type of pattern with words. However, the generative poetry really expands poetry. Instead of having a traditional sentence, that most people would write, generative poetry can create these crazy, enlightening sentences that one would never think of creating. It’s this aspect that has challenged me to really rethink poetry; maybe I didn’t like traditional poetry because of all of the constraints and limitations. This generative poem has helped me see that anything can be poetry; I don’t need to conform to certain poetry idealism’s in order to create a great poem. Furthermore, this assignment has helped me to start to consider that code itself is poetry; it follows a certain pattern, adheres to certain rules, and creates meaning in something.

Reflection 2:

There are many people in society today who don’t believe that this very assignment on generative poetry is not a true form of literature; we could even argue that there is one of those nonbelievers among our graduate course (cough Jason cough). It’s understandable for most readers to first assume that generative poetry is unlike traditional poetry and literature in general, but after studying it and learning the essence behind codes, it can be argued that there really is no difference at all.

In Perspectives on Ergodic Literature Espen Aarseth (1997) argues that cyber text focuses on the “mechanical organization of the text, by posting the intricacies of the medium as an integral part of the literary exchange,” (p. 1). In simpler terms, the computer is not just the medium, it’s part of the text too.  Aarseth further argues that cyber text is no different from other texts because all literature is different for every reader, the reader has to make choices in order to make sense of the text, and a text can only be read in one sequence at a time (p. 2) All three of these standards apply to both the generative poem assignment, as well as traditional poetry or literature in general.

Generative poetry and electronic literature challenges traditional text, but that doesn’t mean that the newly invented literatures don’t qualify as literature. Aarseth writes that “text is something more than just marks upon a surface,” (p. 12), meaning that text is something that creates meaning and allows for the flow and exchange of ideas. In The Semantic Web Revisited, Nigel Shadbolt, Wendy Hall, and Tim Berners-Lee (2006) claim that the Web consists of “documents for humans to read to one that included data and information for computers to manipulate,” (p. 96).  Even if computers are manipulating the text, much like in the generative poem, meaning is still being made by the reader, or even, humans. And then, the same argument occurs: there is a difference between paper and computer texts. But what is the difference? Aarseth argues that “the real difference between paper texts and computer texts is not very clear,” (p. 10) and it is true; other than the medium, what is the difference?  There are obvious subtle differences, like computers run on electric and the words are coded to appear on a screen, but the argument is that this code is literature too. How? Code uses a certain language and follows a pattern in order to create something meaningful to the reader. Codes can change the color of a text or background, among millions of other things. In comparison, the human hand and mind can write poetry with a certain rhythm that displays different emotions. The medium is still literature.

Since we can consider generative poetry as a type of literature with the evidence presented, we must consider what this means for the composition and structure. Aarseth writes that cyber text “centers attention on the consumer, or the user, of the text,” (p. 1), which changes the way that we compose. Instead of composing a poem for a traditional reader, we must begin to consider other options. For example, readers can be users or even co-authors. We must write in such a way that can account for that; the text must be more interactive to allow for the co-authorship. However, this poses a bit of a threat for the “reader”. Aarseth argues that the cyber text reader “is not safe” which means we can argue that “they are not a reader,” (p. 3). Most books are predictable and allow for full control, but with these newly developed ways of writing, more risks are available for the reader. The reader can fail at understanding how to navigate through the text which leads to a lack of understanding.

Understanding then, is linked to interpretation. But not interpretation as we know it. In “What does it mean to ‘interpret’ code,” a blogger writes that interpretation is no longer what it used to be; it’s not that “search for what the author secretly meant,” but rather it is the exploration of “semiotic objects in order to explore culture and systems of meaning.” This definition changes how we view literature; it’s not about that problem or climax, it’s about the meaning behind the text, and the interaction the text has with the medium to create that meaning. Just as words work together on a page to create a narrative, or within a Haiku to show imagery and emotion, words work behind the screens of a screen with code and the computer to create meaning.

Resources:

Aarseth, E. (1997). Introduction: Ergodic literature. In Cybertext: Perspectives on Ergodic            Literature. Baltimore, MD: Johns Hopkins University Press. Retrieved from            http://cv.uoc.edu/~04_999_01_u07/aarseth1.html.

Berners-Lee, T., Hall, W., Shadbolt, N., (2006). The semantic web revisited.

What does it mean to ‘interpret’ code? (n.d.) Critical Cod Studies.

Categories: Alphabetic Text Analysis, class activities, elit, ergodic literature, evidence, generative poem, images, information architecture, mapping, semantic web, technology | Tags: , , , , , , , , , | Leave a comment

Generative Poem Reflection 1

I really enjoyed this kind of approach to writing. After finding my topic, ( the poem is based off a weird dream I had, which stood out more because I don’t dream) After getting the title/topic-Tlaloc, an Aztec deity, and all sorts of apocalyptic  imagery, I had began my word choices. Before this, though, I looked at the html set-up of Tacoma Grunge. I noticed beyond organizing words by  nouns, adjective, etc, the poet also selects words that will build environment.

This is something I tried to copy, and it’s something I think is a key difference in writing generative poetry. I can estimate, using the code, where and in what circumstances my words will appear, but cannot really say what lines will appear. So what I tried to do, what I thought I saw Chuck Ryback, author of Tacoma Grunge doing, was to construct a wordbank that all related to the topic at some level.

I did some research about Tlaloc, trying to find ideas or things associated with him that I could use in my poem. Since my dream had a very doom-y perspective, I tried to build this mood in my verb and adjective choices, deliberately choosing harsh sounding words and words that have a negative connotation. Unhappy stuff, lots of death.

In all honesty, I think I went a little too far afield. I think my poem could be a little more focused on Tlaloc and aspects of him-more water related stuff, more Aztecian mythology in general, Tlaloc celebrations. I bring in other mythologies-Christian, Nordic, North American Native American, Islamic, as well as various New Age mysticism and fringe cults and what have you. While I think they were interesting, I think I could have limited my focus-I feel the poem is less about Tlaloc than it could have been, and with a little more research I can come up with a lot more great Aztec/Tlaloc specific stuff.

Making verb selections was interesting. I would pick a word, and then that word would make me think of three others. This was helpful in fleshing out the poem, and making sure that lines/phrases/words didn’t repeat themselves too much, which made everything look new, but it also made me question if I was writing, or simply playing word association. I was trying to associate words with the topic, and I feel the paranoiac atmosphere I was going for gave me some leeway, but I am still not completely satisfied. I’m also split between this being unhappy with the way the words kind of took off in a million directions, away from Tlaloc-centric stuff, or unhappy because I was projecting a different kind of expectations to the writing.

In the first attempt, I was much more interested in getting the words up there than anything else. For the final poem, I tried to be a little more cognizant of my placement. To this end, I made an alteration to the html code,  constructing a variable of just god-names. I also changed some code to fix the s (the letter just seemed to crop up, which lead to odd spelling). These are small changes but I think they improved how my poem looks and reads.

I’m totally enamored with the project. I really like seeing how lines are constructed just from a database I set up and kept tweeting lines because I was really pleased with some. There were lines I would have never thought of writing, and it just keeps going.  Poetry to me is all about creating lines that convey extraordinary meaning, and I think that generative poetry is an extremely effective way of doing that, since you are more carefully adding words since you  have less control where they appear.

Here, anyway, is Tlaloc Grins

Categories: elit, ergodic literature, generative poem, technology, Uncategorized | Leave a comment

#iamondays How to Write E-Lit

On Twitter, Devon posted this:

blogpost4a

Which is a link that leads us to this:blogpost4

The “Fun da mentals” of e-lit. A very old image to teach us how to do something new. When I first saw this picture, I was immediately reminded of Robinson and his book The Story of Writing, and for some reason, the fossils reminded me of the section about “rebuses”. And with good reason, I think. These fossils are rebuses, and they relate to e-lit because most often, e-lit uses pictorial images. It’s crazy to think that we are still using techniques from the middle ages. But then again, everything we know has developed from something in the past. For example, the computer, and it’s many components (such as the internet, hypertext, and cyber text).

Hypertext is e-lit. But first, let’s look at the actual structure of this page that Devon posted. In my own opinion, it’s quite simplistic and bare. In fact, it even seems to resemble a piece of paper, which still shows that we’re relating how we write today to how we once used to write. However, the website seems to do a nice job of incorporating grids, as we learned about from Lupton. If we just browse at the first page, there is a cornucopia of blue. Blue, of course, is hypertext.  As Nelson wrote, hypertext means “forms of writing which branch or perform on request,”; in other words, any of the blue links that we see daily.

But how do these links happen? How can you possible think of making all of the connections? There are ways, tutorials, and even webpages that will do it for you, so it’s really not a question of how. It’s actually, more of a why. But the why is in the purpose of this blog post: electronic literature.

Now then, first we must learn to understand electronic literature. It’s unlike traditional literature, it’s not bound by specific outcomes and there’s no specific beginning or ending. So how can we learn about it with the idea of traditional reading and writing lodged in our noggins? With practice and coherence, it can be done.

Fun da mentals actually offers some interactive ways to learn and become familiar with electronic literature, which is something that Nelson writes is a good thing. There is a “hornbook” which helps students begin to understand how to read electronic literature. The hornbook teaches about nodes and paths, but also provides exercises that allow the students to get involved. By clicking on the “reader” section we can learn how electronic literature let’s us explore it. This section is headlined by “This sentence is false” and then teaches how different nodes (clickable parts of a sentence) can develop different stories or ideas, much like in The Jews Daughter.

The most interesting part of Fun da Mentals is the “Coloring book” link. As the only way to learn how to color is by practicing, at some point you learn that you’re doing it right when you color inside the lines. Students learn about creating electronic literature by doing similar exercises to that of a coloring book. It involves navigation by clicking.

Speaking of navigation by clicking, the Fun da Mentals is almost an example of  e-literature. Yes, it’s obvious that the page is full of hypertext, but what makes e-lit is that the reader is in control. He or she can click around and expand the story on their own. For instance, once I begin reading the description of “the coloring book” I see that the word “anatomy” is a link, in which I click it. It takes me to the anatomy interactive portal, which is not directly related to what I was just focusing on. In this same description, there is a clickable word that says “electronic tool”. I am compelled to find out what an electronic tool is, so I click on it. I read about electronic tools. However, here is where there’s an issue: Each page that I’ve clicked on, they’ve offered other links, but none of them seem to take me back to the original story line. Therefore, we could argue that this is not electronic literature.

Electronic literature can be complex, especially when we’ve grown up and only been exposed to one type of literature (traditional). It takes time and practice to learn a new trade. As Fun da Mentals is attempted to do, it’s important to constantly practice and enrich yourself into what you’re trying to learn in order to better adapt.

Categories: #IAMondays, Alphabetic Text Analysis, class activities, evidence, images, information architecture, mapping, pictorial images, semantic web, technology | Tags: , , , , , , , , , | 3 Comments

It’s time to transform with creative thinking

You’re currently reading words that are floating around on cyberspace. You’re not viewed as a reader, but as Aerseth writes, you are on your own adventure, taking risks. So, while we’re taking risks and exploring, Nelson mentions that most of us don’t actually understand the computer.  At first I thought that this meant we don’t understand how computers work, or even, how to operate computers and I expected to read something like a computer manual. Don’t get me wrong, Computer Lib / Dream Machine is certainly a manual of some type, but not the traditional manual.

Everything we’ve been reading and learning about recently has been quite the opposite of the traditional things we’re used to. I even though about writing this blog post in a different way, against the grain, but I had no idea where to even start; we must take baby steps. As Nelson argues, we learn most things by beginning with “vague impressions” (p. 303).  The first step in understanding the computer is to learn that it is a media that provokes emotions and helps us write, think, and show (Nelson, p. 306).

Now, the key word is help. It’s not the writer itself, nor it solely just the delivery method. For example, in Taroka Gorge (and the others too), a real human being came up with the basic structure: the main idea and the words. The computer put together the form and structure: how the words appeared to the audience. In the poems we read, there’s a feedback loop that keeps using the same words and creating different outcomes. I’m going to attempt to do so myself, but I have a hunch it’s much easier when a computer does it.

Roscoe retaliates to grab my banana whole heartedly.

My banana retaliates.

Roscoe grabs.

My whole banana.

My heartedly banana grabs Roscoe.

I think you get the point. Something that took me a few minutes to do would take a computer seconds to do. So in essence, it can be argued that computers essentially think for us, but not without the correct input.

But how do we learn what the correct input is? Well, as Nelson shows from the article,  “No more teachers’ dirty looks”, it’s beginning next to impossible to teach. Schools are focusing so much on standardized this and standardized that, that creativity is thrown out the window. Surely this is displayed in any type of creative situation, but especially in computers. How can the youth of the future learn how to be creative when computer classes are tailored to very specific tasks and are very standardized?  Furthermore, it can be said that the education system is behind in change. Literature teachers are teaching poems from a long history ago, yet they seem to glide over the current period of poems: e-lit at its finest.

Last week, we struggled, or at least I struggled, to understand the electronic literature we were required to read. We learned that it was difficult for us to tailor our traditional style of reading because it was all that we had known. If schools spend time teaching electronic literature, alongside traditional literature, students would become accustomed and be better able to code switch from one to the other.  As Nelson argues, “students should develop through practice, abilities to think,  argue, and disagree intelligently (p. 310).  But instead of this, students spend countless hours learning about topics that bore them to tears. One that I can recall, from both high school and community college, is the basic computer class that teaches you how to use Microsoft programs. Why is that a real class? And even more, it strictly taught and tailored the projects we would do. The whole class had to create an excel spread sheet from the same baseball statistics. How boring and inconclusive. And even more, these classes started the rave for PowerPoint, and we all know how Tufte feels about PowerPoint (which I think goes for all of us as well). I think it’s time the school systems caught up to the technology that is vastly developing.

The question about all of this, which Nelson asked as well ,is how will we use these creations? (p. 117). This is something that could truly be in our hands, yet it might also slip away if not treated carefully. School systems, and society, need to recognize these new ways of writing and creative thinking as a real possibility, and they need to begin to educate on them.  The time for transformation is now.

Categories: class activities, images, information architecture, mapping, semantic web, technology, Uncategorized | Tags: , , , , , | 4 Comments

An Infographic on the Importantance of Breakfast!

infographicfinalforreal

 

Reflection 1

I originally started out wanting to create an infographic on waffles, but I ran into a dilemma: what is there really to say about waffles? This is when I realized that there is so much to be said about breakfast. In this infographic, I wanted to build awareness that breakfast is essential for a healthy life and I also wanted to try and encourage those who don’t eat breakfast, to eat breakfast.  Furthermore, towards the end, I wanted to stress that it’s not just eating breakfast that is important, but what you eat for breakfast.

I start my infographic out with a timeline, which I feel slowly invites people in, especially when they see the “Eggo shortage” point.  After I get my audience’s attention, I share the statistics of the percentage of people who skip breakfast by age groups. These statistics are then followed by what percentages of those skippers are obese. I believe that these statistics alone will shock and draw attention to the changes that need to be made.  Towards the end, I have “building blocks” about nutrition, followed by lists of ways to create, and help any individual stick to a healthy breakfast.  I think these all flow together to help support my goals in educating the world about a healthy breakfast.

I think if I had to write a paper on this topic instead, it wouldn’t be as inviting or as easy to understand. I wanted to show statistics, but not in a way that was boring or repetitive.  However, this assignment did pose some challenges and issues. First, Piktochart separated everything into blocks which allowed for a lot of issues to occur when attempting to move things around. Second, it offered a limited amount of icons that didn’t really apply to my topic. For instance, after we spent a whole class deciding that a coffee cup would suffice for my chart, I had come home and I did not have the coffee cup available any more on my screen (for reasons unknown).  In my other chart, I had different color circles represent the amount of favorite breakfast foods, yet Piktochart made the key displayed as boxes. While I was able to cover these boxes with my own circles, this was a lot of unnecessary work that could’ve been avoided if Piktochart created a better presentation.

In the end, I think this might’ve been easier if I was a designer with some experience on how to put things together in a way that creates a good flow. However, as an experienced writer, I think I was able to create a good piece of writing. A piece of writing is about good content and the presentation of it, not just one or the other.

Reflection 2

Before I even started putting things on my infographic, I realized that Piktochart was already separated into blocks, which made it easy for me to think about it in terms of grids. As Lupton writes, grids “break space or time into regular units,” (p. 151).   On each block, I tried to figure out how I could create grids. For example, the title and explanation (at the top of my infographic) is broken into two grids, while the one that follows (the timeline) is displayed in one grid. I tried to alternate grids to create a better flow, but it also depended on the type of information I planned on displaying.

The information I used in my infographic varies on how it needed to be displayed. The timeline is a great example; it needed to be displayed in a whole block to show the distance of time from year to year. Furthermore, it was shown across the page, because according to Tufte “reading across describes sequence of movements,” showing the movement of time from left to right (p. 33).  I originally had my timeline going downwards, showing movement from an older year to a newer year, but I decided to change it as it didn’t match our metaphor of time. As humans, we often view time as across the horizon, moving towards one year and away from the other.

In the next grid, I display two statistics, which were crafted around both Tufte and Lupton’s theories on information design. Lupton writes that “design and text gently collaborate to enhance understanding,” (p. 7).  I put the percentage in a circle and had it displayed larger than the text it collaborated with in hopes that it would draw more attention to itself, and I believe this technique worked. The number and the text are not directly together; instead the text lies parallel to the number, but in a way that is not directly connected. As Tufte argued, most graphics that have nouns are connected by arrows or links, because “the evidence in variation in connections is stronger than evidence for sameness,” (p. 79). From this, I was able to pick out an arrow/link to connect the two together that provided a strong connection without distracting my audience. When I first came to these two statistics, I wasn’t sure how to display them. Originally, I had just thought that by writing it out as “22% are obese”, it would come off as boring and ineffective. I had remembered how I once read statistics in a magazine that was similar to the way I presented it, and then I recalled the theories presented by Lupton and Tufte, which were right on point. Tufte claims that there should be “no distinction among words and images” (p. 49), and I think by using arrows and links, there is no distinction between the two, at least in this case.

Next to this grid, I show more statistics; the percentage of people who skip breakfast, varying from male and female and from age group. This was originally displayed in a bar graph, which was what Tufte defined as chart junk. It was chart junk because it took information and made it into a bunch of junk that really had no effect on my audience. As Tufte argued, mapped pictures should “combine representational images with scales, diagrams, overlays, numbers, words, and images,” (p. 13).  In this grid, I attempted to do just that. I used the icon of a plate and utensils to display a certain percentage of people. This is what Tufte refers to as a sparkline, or a “data intense, design simple, and word sized graphic,” (p. 47). By displaying this information in this way, instead of the original bar graph way, it provides a greater level of understanding.

Understanding is the main goal of any piece of writing, so it’s important to involve metaphors in the way information is presented, as that’s how humans relate to things. In the next section, I used a squiggly boarder to make the grid appear as a chalkboard. Inside of the “chalkboard” I put blocks, and labeled them as “the building blocks of breakfast”.  I thought that this was a dead giveaway to the metaphor of building up your life to a great one. Furthermore, I really wanted to incorporate movement arrows in among these blocks, to show the relationships of the blocks. Tufte argues that “important comparisons among images should be pointed out by arrows, labels, and other methods of directing attention,” (p. 45). I added the circular arrows and other arrows to draw attention to the importance of each, but also to show the relationship among them.

In regards to relationships among the design, the text relationship to the design further enhances understanding. Although I was limited to the types of fonts available, I made sure each font correlated to the words. As Lupton writes, the goal is “to find an appropriate match between style of letters and the specific social situation and body of content that define the project at hand,” (p. 32). In other words, I viewed each portion of text as a human. Lupton claims that “words originated as gestures of the body” (p. 13) and that they give “language a physical body” (p. 13). I selected certain fonts depending on how they appeared, much like how we judge humans on how they appear. Furthermore, Lupton argues that the contrast between big and small type “creates drama and surprise,” (p. 45), so I attempted to use this technique to my advantage at certain points in my infographic. Overall, I think it’s safe to say that without Lupton and Tufte’s information design techniques, I may not have created a beautiful infographic that enhanced understanding on healthy breakfasts.

Resources:

Lupton, E. (2010). Type (2nd Expanded ed.). New York, NY: Princeton Architectural Press.

Tufte, E. (2006). Beautiful evidence (3rd ed.). Cheshire, CT: Author.

Categories: #IAMondays, class activities, diagrams, evidence, images, infographic, information architecture, mapping, pictorial images, technology, tufte | Tags: , , , , , , , , | Leave a comment

breakfast; the most important meal of the day

piktochart

Categories: #IAMondays, diagrams, images, infographic, mapping, pictorial images, technology, tufte | Tags: , , | Leave a comment

Life Application of Lupton’s Ideas on Typography

For this week’s class we looked at Ellen Lupton’s book Thinking With Type (2010). This book describes design principles involving typography. Until reading Lupton’s book, I never put much thought into the typeface I was using. I didn’t even really know fonts and typographies had a history. I guess I sort of assumed they just somehow appeared on my computer. But there is a rich history behind many of the typefaces we use today. Lupton explains the evolution of type, type weight, and typographical design throughout her book in a compelling way that makes even people with almost zero knowledge, like me, want to keep reading.

 

Admittedly, this book wasn’t my first primer for typography, entirely. In my Publication, Layout, and Design class I had already learned about the appropriate use of certain fonts for specific styles of writing. For example, some fonts are more appropriate for “fun” things, and others for “serious” or “academic” things. I also was told that sans serif fonts are how children in Europe are taught to read, while serif fonts are how children in the US are taught to read. (Fun fact?) But it all seemed basic, and common sense, that typefaces had different purposes. Lupton delves deeper into the design and aesthetic aspects of typography, which I think will be extremely helpful for me in my Publication class and in future endeavors!

 

One of my favorite parts of Lupton’s book was her explanation of the way kerning and tracking can give different typography a different feel (105). Her examples of different logos provide a visual representation of her words and really show what she means. Tufte would be proud! Until reading this part, and seeing her evidence, I didn’t put much thought into how certain logos or type achieved aesthetic appeal and personality. It is still shocking to me that changing letter spacing can have this much effect on how we view words!

 

The more I delve into information architecture, the more I want to put what I have learned to use. From Tufte to Lupton, these new ideas about how to present information to readers has made me totally rethink the way I want to write in the future. From the Lupton reading we are able to see evidence of just how much impact typography can have. Tufte shows us some of the best ways to lay out information and evidence. Now, traditional fiction, with standard gridded pages and uninteresting spacing seems flat. So, how can I apply these techniques and ideas to my hopeful future as a fiction writer?

 

I have been asking myself this a lot throughout the course of this class, and I think it all comes down to the risks I am willing to take. Books are already moving from the print era to the digital era, so why not push things a little further? Lupton talks about how readers from the digital realm have certain expectations for reading. She writes, “The impatience of digital readers arises from culture, not from essential character of display technologies…They expect to be in search mode, not processing mode” (98). So if we can put to use what we know about how people read in this new world, maybe we can work with the shortening attention span of digital readers, rather than trying to figure out how to fix it. I think we should try something new. We should play with type, manipulate design, and challenge traditional books in another new way. Pictures aren’t just for children, and neither is fun typography. In many realms of writing, we ignore the power (or for me, don’t see the power) of typography and graphic-enhanced storytelling. I think it is time we work with these new ideas and see where they can take us. Lupton presents us with a lot of information in her small book, but I find it all to be very useful. We need to understand the power not just behind words, but how we choose to represent them.

Categories: Alphabetic Text Analysis, technology | Tags: , , , , , , , , , , , | 3 Comments

#Iamondays The Lack of Mapped Images?

Christen tweeted about Interaction Design Foundation, which is a webite that shows a lot of free educational materials involve Interaction Design. I clicked this link, after I prepared to be wowed. However, I was rather disappointed. The website seemed to lack the interactive design as well as any existence of mapped images. While the website is easy to navigate, it’s a bit plain and dull. This seems kind of ironic as it’s promoting interactive design. The colors are black, white, and gray. The only color that seems to stand out is the blue buttons at the top right of the screen that highlight the users to join them, log in, or publish something with them. I supposed these colors are used to emphasize the most important elements of the website. This could further indicate that you must join in order to participate in this website. The headlines and subtitles are typically bold. There’s not a lot of confusion happening on this website. There is a toolbar across the top, which displays exactly what the bleak images and subtitles display on the homepage (the main information of the website). Furthermore, if you scroll down on the homepage, each section is displayed again, with an image and a summary of what you might find in each section. I find that this design seems like it may be too much. I’m not sure I’d agree that it needs to display the main ideas three different times on the same area, what do you think?

I decided to click on the section labeled “Free Wiki Bibliography”. Again, this section of the website was well organized and easy to navigate, but it was full of text only. I thought that each section could have been created into a mapped image. For instance, each conference on the Wiki Bibliography could’ve had timelines that were interactive. Instead, the user must select a specific date, click on it, and further read through the information available. As Edward Tufte argues in Beautiful Evidence, data is more credible when contextualized (p. 22). If each event was contextualized in some way, it would become much more credible and easily associated with.

The website requires a lot of clicking around and exploring. I decided to check out the “Free Encyclopedia” section. By clicking on this link from the home page, I’m then directed to a page of 35 titles of self-help articles involved in some type of interactive design or service. Other than the titles, I had almost no knowledge of what was behind the articles. I wanted to click on something that might offer more user interaction, so I decided to look at “Visual Representation”. Each article is available in a tablet or PDF version, and offers links to a forum or a question form for the author. I thought these were neat buttons introduced, but they seemed a bit oddly placed at the top of the article.  This specific article on “Visual Representation” involved a lot of different approaches. It not only offered text, but also video, graphs, and data as well. As Tufte states, users must understand “what the words mean in relation to the image, and what the images mean in relation to the words,” (p. 88).  For instance, in this specific section of the website, you might not understand the importance of “The Grid System” if you failed to read the article or watch the videos on Visual Representation.

There’s also a “free image” library, where one can use as long as they adhere to the “copyright terms of each individual image”. I find this attribute pretty awesome, as most pictures involve Creative Commons, which is something the world should be pushing for. When I clicked on “Join us” in the top right corner of any section, I was surprised by what came on the screen. A nice interactive design showed up, that allowed me to become a member. I could write my name in an actual certificate. There are nine different certificate templates I can chose from and place on any number of websites if I wanted to. I could find my network on an actual map. I could list my skills based on types of technology. I found this small section of the website to be the most inviting and enriching. Each image tied in with the specific section it was explaining.

Another tiny little tool I found to enhance the website: you can click that little tree in the top left corner any time to return to the home page. The tree represented a home. To me, this is a metaphor in itself. Trees grow tall, humans grow tall. I’m a big fan of this tree, especially as I assume it’s the logo image of the company. The tree appears as a big, white oak tree. Instead of buds on the ends however, are pieces of paper. I think this logo could be incorporated much more into the design, as it’s a metaphor that speaks for the company itself.

Categories: #IAMondays, Alphabetic Text Analysis, class activities, images, mapping, pictorial images, technology, tufte | Tags: , , , , , , , , , , , | 4 Comments

Blog at WordPress.com.