Kirsten Alexander- Grid

I found this example of a column grid online, from a graphic design student's portfolio.
Information is organized into vertical columns and the photographs are aligned vertically in the columns as well. It is more apparent on the second page which kind of layout she chose. The student chose to use a 3 column grid. Even though there is a lot of information on the second page, the grid does its job and organizes all of it well and it is not too overwhelming to the reader. She gives the reader's eyes a break with the bigger, colored quotations. 

Michael Johnson - Manuscript Grid in Responsive Web Type

This webpage is an example from an important article on A List Apart by Ethan Marcotte about Responsive Web Design.  It was meant to show how responsive type can be used on the web. When one visits the site, they can resize their browser window to see how the text size and spacing slightly changes to keep a nice measure and spacious margins for pleasant long readings. This would be most similar to the manuscript grid because of it's wide margins and because this page shows a long block of text.  In actual web language this would probably be referred to as a single-column grid. The grid is centered no matter how one sizes their page and the text is left-aligned. The designer put a text shadow on the text to make it feel more book-like I assume and it also provides more contrast that makes it somewhat easier to read.

Justin Halley_Modular Grid

This website, Tokyo Illustrators Society,  uses a simple modular grid. The modular gird is a useful tool for layouts that require a-lot of information to be presented in a small space. The site achieves a since of hierarchy by changing the size of the modules for more important information, while using a more standard set of proportions for everything else. The use of spatial zones to group together the content of the site (the content being the different illustrations) is another example of using the modular grid well. Another example of the use of the modular grid in an interesting way for this site, is that the right side of the page, with all of the content and spatial zones, contains so much content that it allows you to scroll down through all of it, while the section on the left stays in the same position, providing an interesting solution to the problem of how to present so much content without making the design to monotonous. Overall I'd say that this site is a success, with the modular gird giving a good sense of order, while the design still maintains enough of an artistic flair to keep things interesting.

EDIT: For whatever reason, the blog is not letting me post with pictures, so I'm just going to include a link. 

http://en.tis-home.com/

Modular Grid / Erin O'Quinn

I'm a big fan of using modular grids for websites, since they are perfect for scanning. Once such example is Viktoria Klein's website, where she incorporates all of her design elements into the modular grid. I also particularly enjoy the grid showing in the background of the website, which emphasizes it's rigid structure. Although all content can be found within the modules, Klein's website has a relaxed feel to it because things simply go in order, and she does not worry about not finishing a row by theme (such as her personal information,) or overflowing into the next line. Information just falls in hierarchical order. This could, however, be perceived as a violation of using the grid since hierarchy does not happen at levels, but I think it works well with her content, and her content flows nicely into one another.

http://www.viktoriaklein.de/

A. Adams Modular Grid System

I chose USA today's website as an example for a modular grid system. Grids allow us to organize content for an audience to easily view and navigate. Modular grids can not only organize but sometimes add an interesting element to the page by creating patterns within the organization. USA Today's information is ever changing with news and updates. Keeping the flow and navigation simple to use is key.

http://www.usatoday.com/

NiftyThrifty Grid-Shelby Stockman

When I saw the assignment I knew exactly which example I wanted to use for a grid. The website niftythrifty.com is designed by welkome design agency and uses a column grid divided into 13ths for their homepage. This 13 column grid is then separated into 4 columns with one of the 13ths left out for the scroll to top button. The organization allows for a distinct navigation and organization of their sales and information beside it. This really helps with the navigation and usability of the site. The columns make it easier to scroll through the sales they have and give it organization.
When reading the book I found the history of the grid to be very interesting. The fact that some art movements rejected the grid and some found inspiration from it I think is important. I like that the book addressed this because it shows that the gird is not a fixed practice and doesn't have to be used for everything. Grids are extremely helpful in deciding the placement of elements in your work but as the book says, it's the designer that goes outside the lines after using the gird to draw interest and put emphasis that will be successful. I understood that grids are more of a suggestion and guidelines rather than strict rules.

The Grid - Lindsey Laibinis

Reading pages 1-30 of Making and Breaking the Grid helped me out in learning the basics of the grid and gave me some background history about it. The reading covered the history of the grid's development talking about the Industrial Revolution in England, the English Arts and Crafts Movement, William Morris, Arthur Mackmurdo and Sir Emery Walker, and a lot more. It also talked briefly about some art movements such as Constructivism, the Bauhaus and The New Order, and the International Style. A lot of this historical background was a great refresher for me personally.

The reading then went into the grid starting with the basics. It stated that the benefits of working with a grid were clarity, efficiency, economy, and continuity. The grid basically gives systematic order to a layout. It then went into the grid anatomy. This was a nice review of what I learned in Type I, which talked about all the parts of a the grid including columns, modules, margins, flow lines, spatial zones, and markers.

Finally it covered the four main types of grids: the manuscript grid, column grid, modular grid, and hierarchical grid. The manuscript grid (or the block grid) is structurally the simplest kind of grid. It is used to accommodate extensive continuous text such as for a book or long essay. It's base structure is a large rectangular area. The column grid benefits for information that is discontinuous. It's a very flexible type of grid. This type of grid is common in editorial layout. The modular grid is most often used to coordinate extensive publication systems. It is used for tabular information such as charts, forms, schedules, and navigation systems. Lastly, the hierarchical grid is mainly used in web pages. It has an almost organic approach to the way information and elements are ordered. 

For my example of a grid, I chose a magazine called Preen that I got a couple years ago. It's the Spring 2008 issue. Lilly McElroy, the editor in chief describes the magazines as follows, "Preen is a fashion arts, lifestyle quarterly magazine for the young independent woman that has a curatorial eye for the world around her." So I would definitely agree that this magazine is targeted for young women interested in fashion.

This entire magazine is visually interesting throughout all of the pages. I love how each page is completely different from the next in both grid layouts and imagery. 

This particular spread caught my eye because of how the information is laid out. The main text uses a serif typeface that seems to be Times New Roman, Garamond, or something similar. As for the numbers, they're obviously set in a larger text size and may be bold. My first guess is that this spread is utilizing a modular grid. I know that most editorial layouts use a column grid, but this to me looks more like a modular grid. It looks more like a scrapbook presentation (which I remember reading about under modular grids in the book). I feel like the bodies of text represent the modules. 

The spread above utilizes a multi-column grid. You can clearly distinguish the vertical columns. The type used for the title of the article seems to be a Transitional Serif typeface that looks like Adobe Caslon Pro or something similar. I think it's a perfect fit to accentuate the word 'Flying' since it has that flowy and whimsical feel to it.


It was inspiring to pick this magazine back up and see how lovely all the spreads were. I would love to for my exhibition catalogue to create something as clean and unique as this magazine. Even though I have a more playful topic (Zelda), I think I can take the things I saw into consideration and still create something fun and playful but still keep it clean and appealing to the viewer.

Grid Example - Pedro Villegas

I found a website that I think it has a simple grid system but  at the same time a better  organized layout more than any other type of grid. The Nissan Innovation Garage website is a really good example of a simple grid. In this website there's a gallery and the grid that is used is a regular modular grid. It has a square format with vertical and horizontal lines that emphasizes the square shape of each garage photo which I think is a clever idea. This grid system works really well in websites that have a lot of images. The use of grids are really useful if I want to create a layout with a certain balance and rhythm.

Grid Example-Steph Dorazio

This is the home page for MYSA (mysa.com). It is the website page for the San Antonio newspaper  called the San Antonio Express News. I utilize the home page on a regular basis.
The home page layout contains modular, hierarchical and column grid design. The images, still frame captures of video, and advertisement placement are contained in a unified manner. The columns are separated by horizontal spacial zones between the columns. The grey bars separate areas of the site in order to organize the information in a way that the reader may better find an article about the subject that is of most interest to them. The text is black, sans-serif, and may be gill-sans (though I am not sure). The text is left justified and ragged right.
   The hierarchical elements on the page are developed by the use of color, logo placement, the size difference of the text as well as the images, and the grid layout. Grounding is used by the white space in the background. The designer creates visual interst and eye flow throught the page through hierarchical elements. This page places the hierarchy of the elements from the topmost portions as the important area, and the lower the page is, the less important it becomes. Also, the right side of the page has a similar concept.
   In Interactive class, we learned that the grid can have positive effects on the readability of the site. This is evidenced by most website homepages. This is just an example of the use of the grid in "everyday" use. In the future, the design layout of anything that I handle, will incorporate the grid use of this site.

The Grid- Kristin McCreery

Grids are very important to understand for basic design, grids help to create flow and continuity through out a design. It helps for the view to follow the page and gives it a clear view of the page.

The design I looked at was from Velhetica.com. It is composed of a 6 column modular grid. I though it was neat how they incorporated large block text along with smaller san serif paragraphs into on modular design, the paragraphs have so much structure they them selves make their own block. The image sizing also work really well on the second image where the one large picture is divided evenly into 4 smaller images.  I really enjoyed the simple layout and clean design that the grid provided for this page. I thought it was neat how easily you could tell where the grid on this site was, compared to others that you really have to investigate to figure out where it is.

This website was basically a digital museum aimed at modern art audience, I also really enjoyed the over sized type for the dates. 

I though this webpage really played into the line in the book where it says "grids don't make boring designs, boring designers do."

Walter Strasser: 200 Jahre Geigy // Stevie Sharp

This is a swiss graphic design book designed by Karl Gerstner

All Photos: http://wiedler.ch/felix/books/story/652



Although this book is in another language I thought it was a perfect example of a well used multi-column grid. The grid completes its biggest job which is giving the layouts a cohesive design. They effectively use the columns as independent and dependent guides. Meaning, they used the column independently to contain the text. The photos use the columns together to create an interesting composition. The columns are very flexible, you can also overflow the text into a neighboring column. The design of the book uses effective white space that counter balances the colorful photos. The designers use a san serif typeface and uses a left justification. I think the biggest thing I take away from this use of the multi-column grid is the use of white space and variety of column width.

Grids are extremely important to anything involving communication and design. In order to communicate something to an audience they must understand what it is you've designed for them. This is where grids come in. They assist the designer in getting their point across as well as the reader in understand that point. A good grid makes it easier on the designer and reader as well. With a set grid the designer can easily flow from one spread to the next, or even just from one paragraph to the next. And it helps the viewer to navigate from page to page, whether thats on a website or in print, and also helps them to get a clear understanding of what they're reading or looking at.

I found a really great example of a modified grid in the Winter 2000 edition of Critique magazine. In the Do Nothing article by Kim Levine, there is a huge oval shaped gap in the two column grid that makes absolutely no sense, until you read the article. It's about a designer that was hired to turn a butcher shop into a coffee house, and chose not to change a thing. The point of the article is that even though the designer "did nothing" to the space, he wasn't lazy or careless, he made the decision to do nothing only because he saw how it would affect the future of that cafe, which was very positively. The break in the grid just emphasizes that very thing. The designer chose to leave that spot blank, but it wasn't out of laziness, it was to make a point. Even where there is nothing, you can get something.

Grid Example - Amy Millett

Grids and columns are an important part of almost every single website I can think of. In fact, they're something we learned about early on in interactive class. Websites that utilize a modular grid (also referred to as tiling) are especially popular these days.

My example website is called foodgawker.com. It's kind of like Pinterest, but only for food.

Foodgawker uses a very clear modular grid, where information in broken up into rectangular chunks. You'll also notice that the margins and gutters are consistent between each module and that there isn't much that breaks up the grid. 

The modules help to define each spatial zone and the content that accompanies it. They provide a sense of order and clarity and make it easier to sift through the large amounts of information and photos on each page. People who come to this website usually search through tons of food photos until they find  one that they like, then click on it to take them to an outside link with a recipe. The most important thing to them is ease of access and immediacy; the viewer isn't really meant to spend large amounts of time looking at one specific area. This is why the modular approach is practical for Foodgawker. It organizes content simply and consistently but still works together as a whole.

Using Grids- McMillan

Aiga.org is a pretty good example of a column grid. It makes the site very consistent and clean in it's design. Column Grids are typically good for discontinuous information which is exactly what they use it for in this example. Some of the items in the columns are text, some are images, and others are a mixture, but it is a very simple way of making a lot of information look organized and easy to read. The gutters are a very consistent space apart throughout the site, giving it a sense of unity. Other websites usually don't have such distinct columns in their grids, but i actually like how obvious the columns are in this website because it takes us back to the basics of design. They also break the column at the top left text box, but it does not bother me because it isn't boxed in like the others. Overall i think this is a great use of Column grids.

Lauren McMillan

Grid example-Daniel Paniagua

This example is from one of the covers of the magazine CMYK. Cover to cover, the focus of CMYK Magazine is to give their readers a truly inspiring visual experience. They fill each issue with the creative output of many talented artists and designers at all levels of the creative talent pool. This cover its a good example of a modular grid, which are good for complex projects that require more control than a column grid can offer. Image galleries and shopping carts are likely candidates for modular grids.

Modular Grid - Sylvia Dang

The University Star is a great example of a modular grid system. Newspapers have massive amounts of information and a modular grid provides more control on organizing the information than a manuscript or columnar grid. The modules on the grid group together to form spatial zones that differentiate one topic or story from another. The University Star also uses wider gutters to further the distinction. These spatial zones also help the reader associate images to their corresponding story. And the use of type hierarchy like the titles, headers, and body text allows the reader to understand how the information presented to them is organized.

grid example - Daniel Seong

 

These examples are from Dekho: Conversations on Design in India. It features inspirational interviews with designers, focusing on India. I like the use hierarchy in these examples. Grid wise,  looks like the designers used 4 columns to design the layout. The margin and column-gutter between the texts are big enough to notice there is a column, and it is relaxing to our eyes to read, with plenty of negative space. There are various size of images in each layout but the way texts are organized is working out very well.

Grid Design - E. Ramirez

The website faebric.com is a great example of grid based web design. Using a responsive 12-column grid at its max window size, it uses perfect tight knit proportions with pictures to text, sizing the photographs 2x larger than the text boxes.

As a fashion site, the gridlocked aesthetic gives a strong trendy look to the site and despite being completely built out of squares, the arrangement of the boxes still has a dynamic flow.  Horizontally, not every image is cropped in the 2-column width, breaking up what would look like a blocky design. 

Jay Jones - Grid

I chose the magazine "Ceramics Monthly", which I was reading through looking for glaze recipes. The two images that I chose to post on here both use a simple 3 column grid. It allows for easy reading and navigation to any pictures one might seek. The type is treated very much like an article in the newspaper would be, serif old style. All these simple design aspects might be expected from the designer of a ceramics magazine. Nothing too exotic, yet very functional.

Grid example - Judit Villarreal

This is from a fashion magazine named Cleo. The grid is a modular grid which I really love, this grid allows for a very organized simple looking design. Vertical and horizontal columns of the same size allow for a very simple look. I really enjoy International Typographic Style/Swiss style, which they used a lot of grids and using grids is something I must develop more. I usually don't like being forced to cage my design in formats, but it definitely helps define space, and help the reader through the pages.

Grid examples-Villegas Mitch

Modular grids are grids with consistent horizontal and vertical lines that can govern both text and pictures like shown in the example above. The grid can govern text across a number of columns and vary the width of the columns to address different levels of information and create a hierarchy. The grid also helps to lay out images across different hieghts and widths.

Grid Example - Holli Hollingsworth

The example I chose is the website kollektivsued.com. I had Chrome translate it and I'm pretty sure it is for a German design agency. This website immediately caught my eye because of the unusual yet engaging layout. I think this website is using a modular grid. Even though you can see 8 columns in the background, some text and most of the images span across more than one column and module creating many different sizes of spatial zones. I really like how even though the spatial zones are various sizes that it still isn't confusing and is easy to navigate through.

Grid Example// Isabel Ann Castro

I get lucky at the thrift store sometimes and find neat Typography books. I happened to find a spiral bound book that was probably a textbook for type classes in the late 1960's. Type & Lettering by William Longyear, Fourth Edition: Revised and Enlarged.

In this book, it ranges on the types of grids used because they talk about copy casting, type terms, type specimens and the mechanics of type.The most recognizable grid was a hierarchical grid. It was used in the Type Specimens sections. This grid easily lays out the alphabet horizontally but in some instances allows a typeface to be a bigger type size than the other to hi-light it's special features. 

Grid example - Hi Fructose - Lily Kowalski

The grid example I've chosen is an artist (Oliver Vernon) spread in the magazine Hi-Fructose. Hi-Fructose is known for overwhelming the reader by allowing the artwork to take up a whole page, rarely allowing a grid-system. However, there still has to be informational text in a magazine, and that means there is a grid system taking place. I believe this grid system is a hierarchical grid system. None of the content areas are in the same proportion, and their modular dimensions present some sort of tension. Even the text itself that is stuffed within two small columns have such tension. However due to the hierarchy in the title, the text is magically organized. But the images have the most astounding hierarchy of the page, and for good reason, because why buy an art magazine if you can barely see the art on the pages?

Marie Solis- Grid Example

The grid example I chose comes from a booklet by Temporary Services: Records as Portable Exhibitions and Interactive, Participatory Objects. The grid system utilized in this booklet is a two column grid that moves the body type across the page allowing for images to be integrated into the page setup. This grid system is typical in editorials of this type for various reasons, however the one most obvious in this case is that, as previously mentioned, it allows for the accommodation of unusual breaks in the text that might be caused by images or variations in text, as would be seen with the different lengths of articles.

Mariajose Mendiola : Grid example

Wired Magazine Grid

I used the wired magazine website as an example for my choice of grid. Not only are they an amazingly designed magazine/ online source, but i have noticed they use a grid of three columns going horizontally. It is organized in a very well simple manner and it is not complicated at all to the eye, it shows their features, their photography, and information very well. Wired magazine is a san fransisco based magazine that have a big direction in design and also have many infographs, illustrations, and artwork, and they keep that in a well simple organized matter by using of what i guess a 5 horizontally column grid. 

Rachel Waddill - Grid Example

I found an example of a grid on designspiration.net. It's a fabulous website with plenty of different designs to get inspiration from, in case you didn't catch that from their web address. Their grid is a very clean and simple one with a six column layout. It follows the modular grid. This is shown in the fact that all the images are their own modules, which the modules then not only form columns, but rows as well. It's an excellent way of organizing this site because it could get quickly overwhelming if the images weren't as organized. Not only would you be looking at a ton of images, but there would be no order to make it easy to read.