Lupton: Grid

As you can observe from the two images above, the first image is of an article from NYLON the magazine whereas the bottom image is of NYLON's website.

Both the print magazine and the website use multi-column grids which allow the designers to fit in a ton of things in an interesting manner. However, both the website and print magazine do not make use of big margin space at the sides. Although the tight margin space may cause the pages to look crammed with stuff, it actually goes well with the theme of the magazine which is edgy, funky and different.

Despite having such tight margin space, the grid set-ups for both the print magazine and the website is still easy on the eyes of a user to read and navigate his or her way around the contents of the page. NYLON uses the grid set-up differently for both its magazine and website although both of them are essentially using multi-column grids to fulfill different purposes. The design of the print magazine doesn't stick strictly to the grid set up as the pictures are arranged to slightly overlap each other whereas for its website, NYLON kept its design strictly to the grid set-up. This is because the design of the magazine intends to create a more dramatic feel to it while the design of the website needs to be clean and structured to make it easier for a user to navigate as the website will usually contain more information than the printed issue.

Overall, I think NYLON did a great job with the grid system as they know how to use it and play around with it to fit the theme and purpose of their magazine.

image source; here and here

LA BLOGOTHEQUE/Lupton

One of my favorite websites that I often visit is la blogotheque, a site devoted to "take away" shows of musical artists that span all spectrums of the musical genre. Besides the musicians that they film playing in the streets, cafés or a small churches, the website dedicated to the shows is also very well-designed and sophisticated. The grid system that is implemented in the site is very simple but ultimately, gets the job done. To me, the whole site itself looks very vintage. Using a multicolumn grid design, each row has four pictures of artists that link to the actual video. It's not very complicated and makes it easy for viewers who have horrible eyesight (like me) to read. When I'm sifting through the site for a particular video or artist, I'm easily guided by the natural lines of the grid. I think one thing that I really enjoy about the design of this site is the use of white space, or in this case, gray/black space. It allows the box of each artist to essentially "breathe" and doesn't give off the impression that the creators of the site were trying to cram every last band they filmed on the site. I feel carefree looking at the site, and even more so listening to and watching the take away shows late at night.

One of my favorite artist is Bon Iver and when clicked on the link, the site redirects itself to a new page. The grid system here is also very simplistically designed but again, aesthetically pleasing to the eye. The grid deviates from the 4-column grid, but rather, keeps it down to 2 large columns. The "take away" shows take up a very large portion of the column, while the sidebar is filled with info about other shows. The creators manage to squeeze even more multi-designed grids within the sidebar, making the whole design and idea of the redirected site useful.

Overall, I've realized that I gravitate towards sites that have often inconspicuous well-designed website layouts. It's representative of the creators' aesthetic preference directed to a large media base. la blogotheque has completed the job, but even more so with the "take away" shows that they film and the artists that they invite.

Lupton III: Grid

An example of a grid system used on the web is CNN's new website. If you would like to get a better look at how they implement a grid system visit http://www.cnn.com

After reading Lupton's section on grids the system that CNN appears to be using is a multi-column grid. A multi-column grid has a complex hierarchy that integrates text and illustrations. CNN also creates zones for different kinds of content. A modular grid appears to be in place as well. There are consistent horizontal divisions from top to bottom and vertical divisions from left to right.

For the most part their website is effective as it is easy to navigate and engages the reader. I visit CNN's website every day and have to say that I like the new design better. The website prior had one large photo with the most important story to the left of the page. The rest of the information just seemed to fall to the wayside. Now CNN offers more stories at the top of the page by implementing three sections of breaking or important news. There is still a system of hierarchy as less pressing information is found the closer you get toward the bottom of the page.

A horizontal bar labeled "Editor's choice" engages the reader by encouraging you to read through the "top pics" or watch videos. Below the editor's choices are 12 boxes that use a modular grid system. Pretty basic without any pictures. Hierarchy is implemented by breaking up the information by topic and links are given for each story.