Thinking about grids

What’s a grid?

A grid is a two dimensional mix of horizontal and vertical lines with the purpose of structuring content.  The simplest grid design is a single column surrounded by margins.  With more complex information, multicolumned grid designs are better by further dividing the space for images and different types of texts.

What are margins and why are they important?

Margins are spaces left at each side of a page that surround the main body.  Margins can symmetrical or asymmetrical with respective to a single page or the facing page depending on style.  Margins are important because it determines how much of a page is devoted to conveying information.  In addition, with varying spaces that surrounds the page, different feel can be portrayed.

Which sample design do you like best from this chapter? Why?

I liked the design under “Modular Grid” because it combines the “hangline” and consistent vertical and horizontal division.  This is how most textbooks are designed, which is why I find them extremely easy to read and conveys the needed information very well.  Designs that deviate from the “Modular Grid” like most magazines I find difficult to read, because the parts are just everywhere.

What grid(s) are used to layout the “Grid” chapter of this book?

I think the chapter is designed using a modular grid system, with the columns split with the golden ratio proportion and the rows based on the height of the heading.  It’s much easier to see how the column is split vs the rows, since all the text seems to all stop at the golden ratio (some pictures don’t go all the way).  Horizontally it’s a tough call because it’s hard to see what’s the largest spacing that consistently divides all portions of the chapter.

What type of grid is best for simple documents?

For simple documents, the single column grid works great.  It’s the most default one (aka how most people write papers for class).

Tracing grids

Magazine Tracing 1

This was the beginning of an article on a travel destination.  It seems regardless of the magazine content, there’s always a ginormous picture to start off the article.  The first page rarely contains a majority of text.  There are three columns and about four rows counting the title and the sub-heading.

Magazine Tracing 2

The second page contains more text, but still opens with a picture (another pattern I noticed with gird designs).  There are still three columns and the pictures are still on the left side of the page like the first page, with the two right columns containing text. Tracing uses the grid system well with four distinct columns and six rows (some overlapping).  The pictures aren’t oversized and are very consistent with the heading/text underneath.  Very easy on the eyes while presenting the same info.

Resume and business card final

Final Resume

Took in the suggestions from Tuesday’s critique and changed the name to be in one color with heavier stroke.  Additionally, added more space between Courses and Language.  The area between the left and right column has also expanded for clear separation.  Arrow bullets were removed due to distraction, and the overall resume was slight adjusted in location.

Final Business Card

Keeping with the clean design of the resume, name is colored and bolded in Garamond with title, affiliations, and contact information in Helvetica.  Carnegie Mellon logo adds prominence to institution association.

Business card rough draft

Business Card Sketches

Sketches were more conservative due to my major.  There are no diagonals or vertical placements.

Business Card Draft

Keeping with the clean design of the resume, name is colored and bolded in Garamond with title, affiliations, and contact information in Helvetica.  Carnegie Mellon logo adds prominence to institution association.

Resume rough draft


Sketches were aligned to the two thirds, one third rule.  Played around ideas stemming from the classical resume layout.

Resume Draft

Used Garamond for name to differentiate from the rest of the resume.  Coloring highlights the main parts of the resume (along with all caps).  Following the two thirds, one third rule to focus attention on employment experience.  Four levels of hierarchy to further classify personal information.

Typographic Hierarchy (part 5)

Final Design

Final design changed most of the negative critiqued elements.  “School of Design and Pittsburgh Filmmakers” and “present” have their letting adjusted back to normal.  Size of “Hayao Miyazaki” is increased slightly.  Titles for respective films ditched the bland brown color and instead used the same color as title, so a total of three colors are used.  “Breed Auditorium” is put in black as to not take focus off of the films and title.

Standing back 10ft, “Hayao Miyazaki” can be clearly seen, 5ft is good enough for viewing everything clearly.  The contrast between the orange-ish red, black, and white makes it pretty easy to read.

Typographic and Color System

There is a lot of differences in sizes and weights to help create the hierarchy along with indentation.  Focus is put on both weight and size, and combinations of those two aspects determine the overall importance of each element.  Color choices of Black, Warm Red, and Teal make way for a high contrast yet light feel of the poster, representative of Miyazaki films.

Subway Poster

One can spot “Hayao Miyazaki” extremely quickly and can almost guess what the middle is.  However, this poster is more designed at a 8.5″ by 11″ scale so blowing it up to poster size isn’t exactly the design goal.  For a large size poster, I would have definitely upped the scale of “Hayao Miyazaki” even more, decrease the size of “Film Series”, and finally increase the size of the film names.

Typographic Hierarchy (part 4)

Color Design 1

This was a redesign of one of the critiqued designs from part 3.  Moved all of the films to one side to maintain unity.  In addition, not all words are hugging along the same diagonal line (the dates for example).  Used minimal coloring as Miyazaki films aren’t very heavy and dense, but rather light and innocent.  Brought “Admission free” up to top of line so more emphasis is given.  Italicized “present” and dates to add some differentiation.  Choice of colors still doesn’t seem to be ideal.

Color Design 2

This design is also one that was critiqued in part three.  Though the design still emphasized indentation, there are slight changes in the general left to right style to create a more centered approach.  This redesign brought up importance of the main subject with bold colors and has a blockbuster feel to it.  This is probably my favorite of the three designs for this assignment.

Color Design 3

This design is build upon one of the non-critiqued designs from part three.  The general left and right is preserved with added interplay of colors.  “Hayao Miyazaki” is moved to the left as opposed to the right to create more balance and emphasis.  “Admission free” is put at the bottom to create a focal point, so viewers can see it despite its smaller size.  Again minimal color is employed to give a lighter feel.