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.

The only thing I've done for the past two weeks...

Okay, so I haven't really done very much homework since March 19. Instead, I've been on ESPN.com and Yahoo! Sports, editing and perfecting my bracket in anticipation for the most glorious sporting event in the history of the universe, the NCAA tournament. I've had plans to go to Detroit ever since SU earned a 3-seed in the easiest region and I WILL drive 10 hours to get there no problem. To sum it up, I LOVE BASKETBALL. All this nonsense aside, I decided to check ESPN while I was brainstorming for this post, and I found the perfect idea--the website itself.

This is their homepage. Note the grid, combining three columns with a larger image, etc. Scroll down a bit more, and this is what you see:

Note the same type of three column grid, now with six at the bottom. Instead, its a 6 column grid. This reminds me a lot of a newspaper, something classic like the New York Times, that doesn't have any column breakage and uses different numbers of columns simply to make it easier to find changes in articles. 

ESPN also publishes a magazine (aptly titled, ESPN the Magazine). The grid system on their website, at least in my opinion, channels that of a magazine with the strict set of columns. I think their layout works well, because they highlight the big stories of the day across all of the sports, and at the top they provide links to specific leagues (NFL, NBA, College Basketball, etc.). ESPN knows what their readers/watchers want, and they provide it at the top, as soon as their eyes grace the page. 

I think their layout is especially effective this time of the year, when thousands of people like myself are constantly checking sports websites for information on teams in the tournament that can make or break brackets. It's clear through all of the stories under the "headlines" category on the right and through the featured videos and articles that basketball is on the brain for most of America, and personally I really like it. It works well when I need to check stats/scores/info on schedules in an instant while watching a game or discussing with my friends. I probably need more hobbies.

Perez's Grid

Websites, just like newspapers and magazines, rely on a grid to keep order and bring functionality to the website. Most users, including myself before I took this class, don't realize that grids are being used, but they bring a sense hierarchy and a natural feeling of order. PerezHilton.com uses a grid to do that. It has a main column in the center of the page, with probably occupies two or three sections of the grid. On each side of the main column, two smaller columns with ads, and other information run down the page. These column are probably set to occupy one seciton of the grid. Even the ad banners and title are aligned with the invisable grid. Without the use of grids by PerezHiton, the page layout would be chaos, and Perez leaves the chaos shoudl to the celebrities.

Shopbop.com

 Shopbop.com is a premier online shopping boutique for the fashion savvy female, carrying everything a woman needs for her wardrobe. I log onto shopbop.com at least once a day, for it is updated on a daily basis. I don’t only love shopbop because of the amazing clothes and accessories it carries, but the site is very easy to navigate. Shopbop uses a grid to organize categories and direct customers to their proper needs. You can see how on the top left shopping can be narrowed by four categories: shop by brand, shop by category, shop by trend, and designer boutique. Below designer boutique there is a list of every designer the website carries making it very easy for customers to navigate. On the top of the page, going across you can click on: what’s new, sale, lookbook, designer index, exclusives, style guide and denim guide. All the categories you can shop from are all bolded and each grid has a white border and white lines, separating each category. The main colors of the site are orange, light gray, dark gray and white. The colors complement each other and the white typography on the orange and the gray really stand out, so the eye is drawn directly to the categories. The colors and calm and easy on the eyes, which makes the overall site enticing. Shopbop does a great job of showing why it is necessary to have a grid in online organization. Without grids, customers or visitors would be left lost with no form of direction. 

Yahoo Shine

As Lupton explained in the text, grids are a method of spacing that allows one to use uniform areas of space to better organization and improve understanding of a design. We may not realize it because we are just so immune to it, but websites ARE design. Someone has to sit there and load content. Someone has to make sure that users can access it and know what they are accessing too.

There is a section on Yahoo by the maps and shopping and sports called SHINE. If you ask me, it is an underrated option indeed. It is almost like a mini Cosmopolitan Magazine, complete with sections like fashion, health, horoscopes, advice, etc. Nevertheless, I would not know this if it were not strategically formatted into clear, distinct grid areas. Especially with online websites, it is crucial to foster readability so that people know how to get around the page and onto different sites/links as well. The guides that are set in place on Yahoo Shine split the page into areas that are denoted by similarity principles. Color, font, and placement help to make this website efficient to navigate. Even the chosen pictures and icons are formatted for the grid system employed; as one can see, they are uniform sizes. There appears to be three equally sized columns on Yahoo Shine which works rather well if you ask me. Not only is quite balanced in this respect, but it also allows for visuals to bring that dynamic element to the page.

SurfTheChannel

"While single-column grids work well for simple documents, multi-column grids provide flexible formats for publications that have a complex hierarchy or that integrate text and illustrations. The more columns you create, the more flexible your grid becomes. You can use the grid to articulate the hierarchy of the publication by creating zones for the different kinds of content. A text or image can occupy a single column or it can span several. Not all the space has to be filled." (142)

SurfTheChannel follows the same balance described in the Lupton text. The different kinds of content are placed in different sections, each occupying a different number of columns. The tabs at the top, which guide you through most of the site, occupy several small columns each. Then there's the search feature, which basically takes the entire span of all columns on the grid, but is seen as only one column. The same goes for the information bar below it. The internal links and the sole image (which is also a link) take up what appears to us to be three columns, all the same size (but larger than those used for the tabs). The external links take up what looks like five columns (larger in size than the internal links and the tabs), and are placed next to an ad because it fits and is close enough in size that can almost appear to be one of the external links.

By dividing the page into sections by content, the site becomes somewhat more balanced and allows the reader to find what he/she wants more easily. This is further aided by the grid used, which, while organized, is still flexible enough. The tiny white spaces between sections allows for less clutter, although I feel it could use more space than it does.

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).