In-game artwork for the Dark Carnival campaign in Left 4 Dead 2.
Characters left to right: Rochelle, Nick, Coach, and Ellis.

This image isn’t an ad per se; it’s an in-game movie poster for one of Left 4 Dead 2‘s campaigns. This means that the audience is quite specific—it’s targeted at people already playing the game. This image shows up when a player is choosing a campaign to play from the list and during the first loading screen after they choose. The purpose of the image therefore is to encourage the player to pick this campaign, and once they do, to give them a taste of what’s to come and get them in the mood to play. In this case, that’s the carnival, the centerpiece of the campaign, and the clown, a special enemy type from this campaign. Since this is a game about killings lots and lots of zombies, the image should evoke a feeling of fear, but this feeling shouldn’t be too strong because it’s not just a horror game. For lack of a better term, it should look “badass” in order to entice players to pick this campaign.

In this image, repetition is used to form a unified gestalt feeling of mild horror (unless you hate clowns—then it’s probably outright terrifying). The most obvious example of repetition is the lights: lights around the billboard on the left, lights in the letters in the center sign, and lights strung up all over the background. There are also 4 spotlights. The coloring of the letters has some repetition—though different typefaces are used for the words “Dark” and “Carnival,” they’re both red with white outlines. The red/white color scheme is repeated in the background, but faded: it’s along the wall and in the “Eat Burgers” sign on the left, and also in the “Amusement Park” sign in the center. The blue color of the clouds is also repeated in a stuffed animal in the bottom right corner, the grayer blues are repeated in the pavement and in other stuffed animals, and similar blues from the sky are used in Rochelle’s and Ellis’s jeans. There is also repetition in the characters’ poses: Nick and Coach are facing the camera with guns over their shoulders, and Rochelle and Ellis are facing out to the sides. They all have weapons (though Ellis is holding his at his side), and none of them are smiling: it looks slightly scary and very badass, and that makes it seem like a fun campaign to play, which is the image’s purpose to begin with.

Summary

Keeping everything the same is boring.  Some things have to stand out on your page. The most important thing should be the most prominent, the second most important thing slightly less prominent, and so on. What you emphasize depends on what’s most important. Emphasis helps a reader pick out the important parts and makes your page interesting to look at. Techniques include making things big, bold, or bright; adding outlines; and fading things around the emphasized element. Novice designers tend to use emphasis too much when they first learn it, and knowing how much to use is an important part of learning design.

An example of emphasis. Notice that not only is the word “inflammation” the biggest element in the image, but it’s surrounded by arrows pointing to it. All of this draws the eye to the center, making it the focal point.

Key Terms

Visual hierarchy: the arrangement of visual elements according to their importance

Focal point: the most emphasized element on the page, where the reader’s eye goes first

Summary

CRAP is an acronym for Contrast, Repetition, Alignment, and Proximity. Contrast makes things stand out, repetition makes things look consistent, alignment makes things look organized, and proximity keeps things grouped together appropriately. The principles are simple, but their mastery is difficult. Each has its place—for example, you don’t want to use contrast unless you’re deliberately emphasizing or separating something.

Example

Most websites employ the CRAP principles, so I’ll pick the one that destroys most of my free time I’m most familiar with: Reddit. The site uses contrast with the blue hyperlinks, to make them stand out from the rest of the site—after all, that’s why people visit them. This format is kept consistent in most of the site’s individual pages, called subreddits. Next to each link, there is a number in between two arrows, indicating the submission’s score and allowing people to vote on it (provided they’re logged in to an account). Voting on a submission changes the color of the arrows in distinct ways: an upvote is orange, while a downvote is blue. This is more contrast—it helps users quickly identify the way they’ve voted, in case they accidentally click something they didn’t mean to. The link and score indicator together are an example of both repetition and alignment. The repetition is obvious—the setup for every link is the same, with the title, information, and links to comment/save/etc. The alignment comes into play when you look at the left side of the screen: the links and the score indicators are paired so that the score indicator is aligned with the link and its associated information. This also uses proximity: the links are left-aligned and the score indicators are placed right next to them. This, combined with the alignment, lets you know that they are associated with one another.

Summary

Starts with the popular definition of new media as anything that’s distributed on a computer, but Manovich finds that too limiting; he wants to include everything produced with computers, too. Computers are the convergence of computing and media technologies, starting with the Analytical Engine and the Daguerrotype, respectively. Computers used to just be big calculators, but now they have become media creation and manipulation tools. He marks new media as distinct from old media in that it has:

Key Terms

Numerical representation, that is, anything on a computer can be reduced to binary code;

Modularity, in that all the pieces still retain their identity and can be picked out of a piece of new media; 

Automation, meaning that because new media is digitized, many of the things that go into creating new media can be done without human interaction, on a level not previously possible;

Variability, in that multiple versions of the same thing are likely to exist for a variety of reasons;

Transcoding, meaning that all the parts of a piece of new media that have human or cultural meaning (like a story or a picture) also have a different level of meaning to the computer—basically the constituent parts of the software that converts it into an understandable form.

Old/New Media

Manovich’s dissatisfaction with what he sees as the popular definition of new media makes sense: books were a medium long before computers came around, but computers definitely did change books, so to leave them out of the definition seems strange in that light. Including things that are made with computers in the definition of new media makes sense because the whole concept of new media is ultimately tied to computers, and the whole “new media” thing is really a discussion of how computers have changed media.

Having spent a great deal of time on the internet, I’ve read many arguments about copyright over the years. So, nothing in the copyright readings was really new to me. I knew about Creative Commons and how it worked, and I knew about the rules for determining fair use. I didn’t know that different organizations had put together codes for their industry regarding best practices for fair use. I think the two most empowering fair use rules are commentary and parody, but perhaps that’s just because they’re the ones I encounter most. I don’t generally like to blame bad laws on Big Business buying off lawmakers, but with copyright law I think it’s actually the case—we wouldn’t have the ridiculously long copyright protection we do if corporations weren’t trying to squeeze every penny out of their intellectual property before they (reluctantly) give it up.

I haven’t had much experience with copyright myself. I learned about Creative Commons when Newgrounds started their audio portal for sharing music—rather than risk getting sued by the RIAA for pirating music, I started downloading things from Newgrounds that were meant to be shared. Another example would be using the Unity engine to create video games—when you launch your program, it’s branded with a “Powered by Unity” screen before it starts your game—I made a small game in Unity just last semester.

Promotional artwork for Borderlands 2

This image is geared toward gamers, especially fans of the first Borderlands. It appeals to people who like shooters because of the obvious gun imagery. The aim is, of course, to get people to buy Borderlands 2. There is conceptual repetition in this design because it plays on the box art for the first game, with the Psycho using finger guns to shoot himself in the head, and a different image making up the blood spatter. This image, while not perfectly symmetrical, uses symmetrical balance. The iconic Psycho and the title are centered; they’re the ultimate focus as the eye is drawn to the center of the image. A finger gun on each side, blood spatter on each side. Within the blood spatter, the right seems slightly heavier, which places focus on the main playable characters in the game. This interests returning players because they are different characters from the first game.

The whole image says three things: First, that this is a sequel to a popular game, to get you excited if you recognize it; second, that it’s a shooter, to pique your interest if you didn’t play the first one; and third, that this game looks much different from most shooters and has a radically different art direction from the mainstream. The symmetry is mostly playing on the “2” because it’s a sequel, but using two blood spatter images gives a chance to hint vaguely at the story: the folks on the right are fighting the guy on the left. The slight asymmetry in the image—the blood spatter, the slanted text, the Psycho’s tilted head—keep the image from feeling too orderly, which keeps the whole thing interesting. The game comes off as fun and exciting, especially to those familiar with the franchise.

I haven’t found any I like yet, but I’m thinking of using a picture of a computer surrounded by other digital devices like cameras and phones. What I’ll probably end up doing is using an image of just a computer as a starting point, and editing other devices into that image. I’m planning on using GIMP because it’s a skill I want to develop and because editing multiple images together will probably need a powerful program. And I’m broke.

Have you ever written a blog post? Commented on something? Updated your Facebook status? Taken a picture on your phone? Uploaded a video? Tweeted? Retweeted? Typed a paper? That’s what digital writing is. It’s anything you make that ends up in digital form. In fact, if you used a device like one of these to do it, it probably qualifies.

Key Terms:

Cropping: Removing part of an image’s edges. Often used to emphasize part of an image or remove unnecessary portions.

Flopping: Flipping an image from side to side, creating a mirror image of the original.

Silhouette: Selectively removing edge portions of an image, but not strictly in straight lines as with cropping.

Illustration: Diagrams, maps, charts, or drawings. Useful for showing complex information, explanation, or decoration as appropriate.

Summary:

Images add impact to a design, and appropriate use of images can make or break a page’s design. Photographs generally seem more credible because we associate them with journalism, and can evoke strong reactions in people. Image editing software allows us to manipulate photographs to better suit designs by cropping, flopping, silhouetting, etc. Illustrations are great for explaining and reinforcing text, but must match the tone of the text in order to be effective. Clip art can be useful, but may have restrictions on how it may be used.  Clip art can also be edited and does not have to be used as-is. Type can also be used as an image, in decorative fonts which can be edited.

Playing With Images:

With modern software, it’s very easy to play around with images, both in page design and in image editing software. There are free tools that allow this kind of play, and a great number of tutorials and guides explaining how to use these tools. This makes it relatively easy to learn how to use images in an experimental environment.

Edits to the Wiki:

Minor edits to: CRAP, Flew: New Media as Cultural Technologies, Flew: What’s New About New Media, Collective Intelligence, and The Ethics Challenge

Major edits to: Definitions and Copyright

Links in: OLD/NEW media, Digital Writing and New Media, Flew: What’s New About New Media, Jenkins>Key Terms, Appropriation, Collective Intelligence, Jenkins>Issues, The Ethics Challenge, and Jenkins

I also did a major edit to Jenkins and didn’t realize until I started this post that it never got saved. Oh well.

Reflection:

What are you most proud of in the entire wiki?

I don’t have strong feelings about any of it, but the “Issues” and “Key Terms” pages under Jenkins were pretty good.

What are you most proud of in terms of your contributions to the wiki?

Again, I don’t feel strongly about any of them, but I suppose the internal linking required the most effort.

What do you wish you had time to further expand, include, or revise in the wiki?

One thing I noticed was use of the first person in a few pages, and I tried to rewrite some of that. I would work on that and on creating a more neutral, informative tone similar to Wikipedia. Hopefully in such a way that the internal links would be more robust, as well.

When did you get stuck while working on the wiki? How did you overcome your problem?

Mostly, I just didn’t want to do it. My own apathy has long been my greatest enemy, and I just wasn’t interested in this project at all.How I overcame it is kind of a tough question, as “I just did” presumably won’t suffice. I went through and made a to-do list, and while it didn’t contain everything I could (and probably should) have done, it at least got me to do something.

What did you learn about yourself as a collaborative writer? What collaborative skills do you want to work on in the future?

That I’m maybe a little too timid about editing other people’s writing, though part of that may just be the apathy kicking in again. Once I decided to change something, I didn’t get hung up on the fact that I was changing someone else’s work, I just couldn’t figure out how exactly I wanted to write it, which is always a challenge anyway. In the future I think I need to get more comfortable with the idea of scrapping most of someone’s work and doing it myself.

 Discuss at least four of the course outcomes you feel you worked towards with this assignment. Provide evidence of your learning by pointing to specific aspects of the wiki or your project journal.

It would be hard to come out of this project without making progress on the collaborative problem-solving front. Our in-class meeting in particular was very useful. I tried with limited success to employ the CRAP principles on the pages I edited, particularly repetition in the pages that are essentially lists, by keeping headers and links similar. I did a little bit of play, in that some aspects of this particular wiki software were different enough from other wikis I’ve worked on that I had to figure things out by trial and error. Including a major edit that didn’t get saved, without my noticing. The wiki as a whole is a decent example of collective intelligence, especially considering the week where we all read different things and provided the initial pages for them—that wouldn’t have been done by any of us individually.