Lupton Post

Grids are an essential part to website designs, mostly because navigation is so key for effectiveness. While researching for this assignment I've noticed that a lot of websites follow a 3 column grid (and my example is no different). I stuck with something I see every day, my homepage. A snapshot of CNN.com is shown below.



As you can see, the website is pretty well organized, with a set color palette, and user friendly appeal. But a lot of it has to do with the grid organization of the website. The top of the left column showcases a major news story, and big headlines are followed beneath it. In the middle, there are 10-15 quick newsworthy lines and on the right end, stock info, videos, and polls are available for CNN.com's audience. Overall, I really like the design of this website. In fact, when I was picking which news site I wanted as my home, I picked CNN because of it's organization of information and accessibility.

Lupton III: Grid (Starter Post)

In the last section of the Lupton's "Thinking With Type" she describes grids and their importance to all forms of graphic design, whether they be print or web based.

"For graphic designers, grids are carefully honed intellectual devices, infused with ideology and ambition, and they are the inescapable mesh that filters at some level of resolution, nearly every system of writing and reproduction." (113)

Grids certainly do guide design, whether it is in the making or breaking of the grid. Magazines and newspapers thrive on a grid system in order to create consistent environments that are functional and reproducible. Some have challenged this layout. We'll at a few slides from David Carson in a few weeks (click name to watch a video) and his design for "Raygun" magazine from the 1990's and you'll see how he broke the grid. But even in breaking the grid a system of order is created, that although not traditional in a linear sense, still can feel very natural and organized.

Lupton goes on to discuss the power of grids in magazine and print design and the evolution of the grid in web design through tables and Cascading Style Sheets and the more free form environment afforded by the use of Flash. Which leads us to your objective, should you choose to accept it...

Find an example of a grid system being used in print or on the web. You can select from magazines, web sites or newspapers. Discuss the grid system in place. How well do the designs work within the boundaries, or even by breaking boundaries of the grid? Our minds are trained to see and be comfortable with order. We organize the second we look at anything because of those Gestalt principles and our craving for the whole. How does the grid in your example aid the reader or user? Does it engage them with its structure or lack thereof? Does it cause tension, either positive or negative?

Attach screen shots, links or images in order to help illustrate your example.

Screen capture on a MAC:
Apple Key + Shift + 3

Screen capture on a PC:
Hit the "Print Screen" button (usually found on the top right of the keyboard).

Lupton Text--the Obama website

Reading the Lupton text only increased and amplified my belief that the design of the website not only defines the company//corporation//or campaign, but also determines whether or not a user will be intrigued by it's aspects. The example I have chosen for this post is Barack Obama's website, which proved essential in his presidential campaign.
























The website conveys so many messages in just a simple, yet intricate design. It emulates American spirit through it's color scheme (Red, White, Blue), and speaks to its audience directly by calling out for real stories and real people. There's a direct link to donate money, as well as to get more involved, volunteer, view media clips, check out the Democratic Party and platform, and many others. Everything about the site is a call to action for unity and spirit, even in the worst of economic times.

Overall, Obama's website is impressive and inspiring. It makes me want to get involved, and cheer for America even when skepticism seems the most popular state of mind. I firmly believe he has accomplished his goal (obviously, I guess) and really portrays a strong, yet subtle message that all audiences can understand.

Lupton Text

When thinking of a website that involves interaction and different type faces used to help the reader, I automatically thought of Google, which I probably use at least 15 times a day but have never actually sat down and analyzed the format of the website.

If you enter the website by simply going through google.com a giant logo and search box pop up.  The logo is easily recognized because of its vast use of colors for each letter.  Once a topic is searched the results pop up in large type and the titles are in blue to make them stand out against the small black description underneath.  The words that match your search are in BOLD so they stand out and you can see how often the terms pop up.  The actual website title in in green again contrasting other things on the web page so it can stand out to the viewer.  The same sans serif font is used for all the type on the page, so the size differences are what catches the viewers interest.  Obviously the more important things are large and bold and less important simply black and small.  The indents underneath each entry where the summary and website are found visually organize the site and make it easy for the eye to jump from one entry to the next down the page.  However, the use of only one different indent level prevents the stair effect and keeps the site looking clean and well composed.

I'd used the site a million times but never really analyzed how much thought was put into it before.  Looking at it from a graphics angle shined new light on a site I've been using for years.

Facebook: The Other White Meat

As soon as I read the prompt for this week’s blog post, I realized that the website I, and probably most of us, check the most every day would be perfect. It’s addictive, it’s interactive, and, unfortunately, sometimes it’s a key to my social life. Yes, of course, I am talking about Facebook.

The overall design of Facebook is VITAL to the way it is used and the way its users interact with the myriad of content available on it. In fact, the design of Facebook has been a hot topic over the past year or so, when the executives made the decision to permanently switch to what was known as “the new Facebook” in September. In changing the design of Facebook, the creators wanted to give its users “a new, cleaner, and simpler design,” according to an article from newsfactor.com.

Perhaps you can recall what the original Facebook looked like when they first allowed high schoolers?

Then, they added the “mini-feed,” which allowed users to see what a person had been doing, who they had been talking to, and what they had commented on.


Facebook adopted the “News Feed” soon after, which made some users feel like too much content was being displayed. Everything anyone did on Facebook was thrown into the News Feed in a seemingly haphazardly way, although it was very organized.


With the addition of first high schoolers and then everyone in the world being able to join a network on Facebook, there became a need for more organization. A lot (and I mean A LOT) of people complained, protested, and made Facebook groups to stop the change from “old Facebook” to “new Facebook,” but the switch was made anyway. People complained about the Wall that used to display only wall posts to your profile being combined with picture comments and status updates, along with the sporadic yet annoying application notifications. There were gripes about the tabs on the top of the home page, about the ads, and so many other things that people don’t like that I just don’t feel like talking about here.

Personally, I like the “new Facebook” design. Maybe it’s because it isn’t really “new” anymore, and I’ve become accustomed to looking at it so often every day. However, I can see the different types of principles that we are learning about in class being applied every day. As Ellen Lupton says on page 76 of Thinking with Type,

“The dissolution of writing is most extreme in the realm of the Web, where distracted readers safeguard their time and prize function over form. This debt of restlessness is owed not to the essential nature of computer monitors, but to the new behaviors engendered by the Internet, a place of searching and finding, scanning and mining. The reader, having toppled the author’s seat of power during the twentieth century, now ails and lags, replaced by the dominant subject of our own era: the user, a figure whose scant attention is our most coveted commodity.”

Graphic designers today are constantly forced to trade in elaborate, intricate designs that work so well on paper when they are using the Internet. There is a need for an understandable visual hierarchy when navigating on the web because, as we’ve heard time and time again, the designer’s job is to make it so the reader does not have to work to find what they need. I feel that Facebook succeeded in doing this when they switched to their current layout. The information that you want is listed in tabs on the top, which allows the user to go straight to “photos” or “status updates” if that is what they care about (see image above). On the user’s profile, they have the “wall,” which is the default, then the “info” and “boxes” tabs (see image above). The latter provides a cleanliness that the older Facebook was lacking by confining all the (sometimes useful but mostly stupid) applications onto one page. Users can alter their settings to show or hide as much information as they want and also to alter their profiles and homepages to show what they want to see the most in the most conspicuous spots. The engineers of Facebook have created a design that looks modern (with the uniform sans serif font) and creates a strong hierarchy while directing users to what they want the most with ease.

However, that is just my opinion. I probably would not have said the same things last summer as the switch was occurring, before I began this class. What do you think about the structure and hierarchy of Facebook? It’s all logical, yes, but are there problems with the design?

BONUS:

"The impatience of the digital reader arises from culture, not from the essential character of display technologies."

I feel that this quote has been said over and over again in a thousand different ways, but the meaning isn’t any less true no matter how many times you hear it. Our culture today is obsessed with now and no one wants to waste time to, god forbid, actually search for something on the Internet. Google is the most popular search engine because of the way the developers search the billions of pages on the Internet to find what they software sees as the most helpful choice. Normally, that database is right. I agree with the quote from Lupton that I quoted up above when she claims it is not the fact that we are looking at a monitor that makes us more anxious, it is the culture. Because there is so much to find on the Internet, and so many resources are at our fingertips when we are on the web, we don’t want to sit around and look for one thing at a time. I have four or five tabs open on Firefox at any given moment so while I stop one search I can start another—that’s just the way I operate on the Internet.

This trend of being constantly active while on the Internet is not slowing down; it is only speeding up. Web designers will need to listen to feedback from the user to learn where they have glitches and then make edits. Users are the most important resource because they are the consumer the designer wants to please.

LUPTON II: TEXT

Reading the second section of Ellen Lupton's book "Thinking With Type," hopefully the section about "Birth of the User" (Pg. 73-76) http://www.elupton.com/index.php?id=38 caught your eye, as it is very relevant to what is going on today with the emergence of the Internet.

"The dominant subject of our age has become neither reader nor writer but user, a figure conceived as a bundle of needs and impairments—cognitive, physical, emotional. Like a patient or child, the user is a figure to be protected and cared for but also scrutinized and controlled, submitted to research and testing." (73)

Objective: Pick out one website where the user interaction is crucial in the communication of the message that the website and/or organization is trying to convey. Keeping in mind everything we've talked about in lectures, classes, and information found in the Lupton book, how does the current design enhance the user experience and why? Or how does the current design provide "creative interference" and ruins the user experience?

Bonus:
"The impatience of the digital reader arises from culture, not from the essential character of display technologies."

In your opinion, describe our media culture today and how it affects the way we will have to display content now and in the future?

Note: You probably will want to take a screen capture or add a link to your selected website.

Screen capture on a MAC:
Apple Key(Command) + Shift + 3
Screen capture on a PC:
Hit the "Print Screen" button (usually found on the top right of the keyboard). Then paste into your favorite image editing program (photshop, paint, etc.) and save the file as a jpeg.

Giving Serif a Facelift

In the section Letter in Thinking with Type by Ellen Lupton, she demonstrates how Serif types carry a connotation of formalness and clarity, while Sanserif types are less formal and used more artisitically. Lupton clearly has an argument, citing that most news publications, texts books, official documents, etc. are printed in serif fonts.

After reading through the chapter and thinking about it, I decided that I liked serif fonts better because they’re more decorative. In my opinion it’s sanserif fonts that are boring.
Despite what Lupton says about the inherent formalness of serif fonts, I wanted to find examples of serif-use that had an edgy quality. They also might inspire some resume/workmark projects.

I found an Urban Outfitters logo that I thought showed how serif font could be manipulated to look more informal. They made the “urban outfitters” all lowercase and then tilted the first word (urban) so that the whole design was a little asymmetrical.

Similiarly, the hair product Bedhead adds edge to their serif font logo through all caps, and having parts of the letters appear chipped away.

The Rolling Stone logo also uses serif font. In my opinion, what makes this font appropriate for an youth geared, music magazine, it’s almost always bright red. In this case, it’s an intense color that made the serif font have a little flavor.

Seventeen Magazine also makes serif font youthful by making their title hot pink.

Pepsi and Design

Pepsi underwent yet another rebranding a couple of months back, something that I for one had been oblivious to until I saw my roommate drinking a bottle of Pepsi several hours ago (yes, I know Pepsi is everywhere on this campus). Pepsi decided to change both its red, blue, and white circle and its typography.

For one thing, the Pepsi circle has changed, becoming more diagonal. Some people have discussed whether this was done in order to make it more similar to the Obama symbol. What has sparked even more conversation, though, is the fact that it now looks like a smile—perhaps this is Pepsi’s attempt at some sort of subliminal message that ties Pepsi and smiles together in the consumer’s mind?

Also, they made the white swirl on the Diet Pepsi thinner than that on the Regular Pepsi, which one could interpret to be due to the different effects each type of Pepsi could have on your body. However, the Pepsi can with the thickest white swirl is that of the Pepsi Max, which throws things off, because it, too, is a diet drink.

“In the early 1990s, as digital design tools began supporting the seamless reproduction and integration of media, many designers grew dissatisfied with clean, unsullied, surfaces… (Lupton 29)” Over the last couple of changes, however, Pepsi has brought this back to its logotype.

The old font, which used to be all in uppercase letters, is now all in lowercase. The sans serif typeface was also slimmed down. Furthermore, the letters were distributed more loosely, giving them space to make them look more relaxed. All of these changes might be said to add more simplicity—something people often look for in today’s rushed and complicated world—to the Pepsi logo.

Will Pepsi’s decision to change at the same time America changes bring it prosperity?

Type Type Type

Ever since I joined my high school yearbook, I realized the importance of typography. Different fonts can insinuate completely different images, even if the discrepancies between the two are minor. A font says a lot about a design, ad, or image; often, it defines them.

The first two images I’m putting up illustrate serif fonts. The first phrase is written in Times New Roman, and the latter is in Minion Pro. Times is unoriginal, conventional, and normal. Minion looks mostly the same, but has a seemingly greater sophistication than Times. These subtle differences had the ability to change the entire feel of our yearbooks (and ultimately, designs on the whole). Thus, I can only imagine how varied a tone can change when using completely different looking fonts.

I adore the intro to the most recent version of Casino Royale. I've attached it here because every aspect of the credits works so well together, including the type. That video, among others (including ones like that Kanye video posted below) inspired me to design that way for various school projects.

I love type//typography. It’s an amazing way to express the tone and message of a design. What if Harry Potter had been written like so?

The whole Medieval look doesn't really suit the cover even though it could be argued that the style is the same. No, we (Harry Potter readers) grew up with the US title design of Harry Potter and most happen to find it completely appropriate.

Type is so easy to analyze, yet so difficult to master.
Hopefully by the end of this class, we will all have a better grasp on the typography phenomena.

Lutpon Letters

I'll admit that initially I was not sure how interesting a chapter on letters would be, however I was surprised at how many interesting thing I learned. First of all I thought it was really interesting how referring to letters as "uppercase" and "lowercase" originated. In print shops capital letters were literally kept in the case above the one were the smaller letters were kept thus creating an upper and lower cases respectively. 

I also thought it was really interesting that italic letters were originally used as a more casual style of handwriting. Italics were actually used in cheaper writing shops, because the cursive form saved money by saving space. To me personally, however, when I see italic letters they tend to have a connotation of more formal writing. For example many times on fancier invitations you see italics used. I think it is interesting how there has been a shift in how we perceive italic letters. 

On pages 18-19 there are example of John Baskerville letters. At the time that they originated they were seen as "shocking" this was also funny to me, because to me the letters seem so basic, perhaps even boring by our standards today. I could not imagine walking down a street and seeing a poster with this type and having the type along be what stops me in my tracks and shocks me. It's interesting how as a society were have really increased our tolerance to shock. I would imagine that for a graphic designer it become increasing difficult overtime to really shock people with your choice of typeface. 

I also found it really interesting that it was actually the increase in advertising that caused the need for an increase in letter size and new types of typography. I guess I never realized the direct connection between the two and just sort of assumed that the larger letters allowed for advertising - rather than the reverse. Today though there has probably been similar increasing demands for certain typefaces as we experience such technological innovation. We see type everyone on our computers screen, our PDA, cellphone, even the supposedly "basic" cell hpoe have text-messaging capabilities,  video-games and more. The amount of type we see in one day has dramatically increased over the past couple of decades and I imagine that trend will continue. 

As our demand for letters continues to increase I can only imagine the innovations that will develop in regard to typeface. Perhaps one day we will look back on the seemingly "shocking" typeface that exists today and just think " wow, thats pretty boring." 

Type Analysis

Type surrounds us everyday and everywhere.  But how often do I consciously observe and analyze it?  Almost never.  So when looking for examples of type in design I started in my kitchen.  A place where I go everyday, and where type is constantly present, but I've never bothered to think more about the type than the fact that is designates which cereal box I'm grabbing.

The first object that caught my eye was a jar of peanut butter.  "Smucker's" arched across the top of the label in a type that's enclosed in a border shaping it like an old-fashioned wooden store sign.  That idea blends well with the rest of the jar and label, which is meant to remind you of jars homemade jams would come in.  NATURAL is the largest font on the label, separating it from the other smaller words on the label that surround it.

The size and elegant font of NATURAL grabs the reader's attention at first glance.  The change in type size and font style tells the viewer that something is special about this jar, as opposed to others on the store shelf, because this jar is natural.  Small type on the rest of the label tells the reader that that information is insignificant because it is all thin small type that bends together the list of nutritional facts and ingredients.   The reader's attention is grabbed again at the ingredients list when PEANUTS is boldfaced contrasting all the other ingredients listed.  This signifies importance again; telling the reader is is something worth noting.  The small variations in type size and style clearly demonstrate what the viewer is supposed to look at and what their eyes should avoid.

LUPTON: Letter (Starter Post)

Type bombards your everyday life. Every waking moment you are surrounded by messages expressed in typographic form, whether it is the box of your favorite morning cereal to your school textbooks. Designers take a lot of time and consideration to select the most appropriate typeface to convey that message to you.

In the first section of your reading entitled "Letter" from Ellen Lupton's Thinking with Type, she discusses how typography derived from handwriting and evolved over the years.

Through the evolution of type during the Renaissance, Baroque, and the Enlightenment periods up to present day, the preservation of type heritage became very important in the classification and identification of typefaces.

As a graphic designer, it is through these classifications (humanist, transitional, modern, etc.) that you will be able to express certain moods and emotions by selecting an appropriate typeface(s) to accomplish the message you are trying to send to your audience.

From page 30 of Thinking with Type:

There is no playbook that assigns a fixed meaning or function to every typeface; each designer must confront the library of possibilities in light of a project's unique circumstances.

Now take time to explore the use of type in your everyday life. Find, post, and discuss examples of type in design used appropriately, or even inappropriately, and the message the designer is trying to send to his/her audience. Keep in mind the discussions we've had in class including the lectures on hierarchy and typography.