Monday, October 25, 2010

type: find & grid. or grid & share.

i have been finding to share throughout this class period. i have found much! i will share some.

first, though, i'm just going to throw down some cool links to sites i encountered in my traversing. they were very informative and undoubtedly will be helpful in the coming years and thus i thought i might offer them up.

exhibit a: grid based design toolbox, by fuel your creativity. this link alone will give you dozens of related helpful things, examples and tutorials and articles etc.

exhibit b: design by grid dot com. contains more examples and more resources and gallery and such.

exhibit c: designing with a grid based approach, from smashing magazine. more links, interviews, examples. a lot of really great quotes and tips about using grids in design:



The grid is the most vivid manifestation of the will to order in graphic design. [...] Units are the basic building block of a grid. They’re all uniform. Columns are the grouping of units that create the visual structure of the page. They are not necessary uniform. [ Grids are good ]


sometimes i get so caught up in reading things online that i don't know what to do with myself! i want to read everything and learn everything, a feat that becomes exponentially more impossible with every heartbeat, given the speed with which content can be generated.

anyway. i have not read all of those sites and all their links and all the links their links will link to, is what i'm saying. i would like to, but it is exceedingly improbable, particularly during just this class period.

so here's some images i happened upon through my finding:



(if you've reached this parenthetical giving me the benefit of the doubt about whether or not i can read that text, you can take back your doubtful benefit. i definitely can't. sorry to disappoint!)

this magazine page from a july issue of arena magazine uses an extremely simple grid. it was mathematically built in a four column layout, i'm noticing, but it acts like the three column page i initially thought it to be because the textblock is proportional to the man, and also proportional to his shadow, cutting the page into thirds, if with a comfortable margin to the interior. i just found this to be a pretty beautifully composed layout due to the consistency of the columns.

i also found a really exciting walkthrough of how the grid structure of the onion's website functions, which i will summarize and also link to because he explained it all very well.

(if you read this, you can skip the rest of this blog post for redundancy)

basically, the onion (above the fold of the website looks kinda like this, perhaps you've seen it?

















evidently that is based, in its absolutely most basic way, on a grid rather like this one:



while they would never in a million years display that many columns of separate content, having it divided this specifically eliminates the confusion over where to align things of a much greater variety of sizes. and then they are able to combine those columns into lots of options of "supercolumns" depending on their needs.



like this, for instance, being a structure on which the homepage is largely built. given that ads are nigh  inescapable on the web, this grid allows for their integration without toooo much frustration, and they live in the spaces marked by black:



for those times they just really need to let us read a lot of text, like searches and archives, there are pages like this: (black still denotes ads)



while for the articles, they have this extremely subtle "cut in half" page which is not cut in half, being 9 & 7 columns on either side of the active gutter, giving the text its necessary attention without slighting the "value-add functionality" and links and such.



so. people use grids! all the time. they are ubiquitous and necessary when we act out of our "will to order." (what a nietzschean design principle.)

now i need to go work on mine more.

2 comments:

  1. *I had a typo

    The Korean guy in blue is a member of a this really popular Korean hip-hop group called Big Bang and goes by the stagename T.O.P. The group is really revolutionizing the world of mainstream Korean entertainment, but I would say Asian entertainment as a whole.

    ReplyDelete
  2. yeah, i saw those names, but there wasn't really any context for them. cool! thanks for the insight, for sure.

    ReplyDelete