Premeditated Design

[v-six]

Graphic Design for the sake of problem solving and not personal expression takes careful planning. If you have a design problem in front of you, every part of your solution should be thought out – no decision should be arbitrary. You all saw this in the lesson on white space. If your task is to make a website, you will be more successful 99% of the time if you plan it then build (the other way around is a good learning experience though )

There are many ways to make conscious decisions about your work. One of the most omni-present layout devices in graphic design is the grid. In her Thinking with Type, Ellen Lupton dedicates 1/3 of her book to a chapter called Grid. She's the director of the Graphic Design MFA program at MICA, so you better believe she knows what she's doing. I've mentioned Josef Müller-Brockmann's book on the grid before... it's an oldie, but still studied today. Pick up a well-made magazine and take a good look – most likely you'll find a grid system present.

If you're tired of my ramblings already, I threw together the invisible grid to one of my favorite reads. It's ugly and not 100% accurate, I put it together by hand in InDesign with the drawing tools... but you'll get the idea. Should help put things in perspective.

Anyway, I'm not going to drill you on how to most successfully implement a grid. You've got homework though :)
Using a grid, put a layout together with both images and text. It can be whatever you want, as long as the content is appropriate for TSF. The gridlines shouldn't be visually present in the final piece, but we should be able to infer that they're there. If there's any questions, ask away. I'll be doing the homework too, but I'm running out the door as I type, so I'll post mine later this afternoon.
Happy gridding

[koala]

I couldn't manage anything as complicated as your grid (I couldn't even work it out!), so here's a simple 4x4 grid, 640x480, showing how the same elements of a page can be repositioned and resized while still fitting into the grid format.







Just wondering, do designers use grids as a rough template or do they try and stick to it rigidly? And is it used to keep a layout looking uniform, or as an optical guide to direct the viewer's eye from one area to the next?

[v-six]

Originally Posted by koala

Just wondering, do designers use grids as a rough template or do they try and stick to it rigidly? And is it used to keep a layout looking uniform, or as an optical guide to direct the viewer's eye from one area to the next?

Rough template or rigid? either.

Uniform or optical guide either.
The largest advantage of a grid is that it limits the desiger's choices, which can be empowering. It can be overwhelming to try to decide where to put something on a layout, but with a grid, the options of where to put something are right in front of you, letting you evaluate the pro's/con's of each one. It basically lets you make a conscious design decision instead of making an unsure arbitrary decision.

Koala, if you want to strictly adhere to your grid, there's a few things you can change.
In your first layout, the header could be aligned left or right onto the grid instead of being centered. In the second, the top or bottom doesn't seem to be set onto the grid, is it vertically centered in that row?

... Soon to come is a pdf I'm putting together with more than any of you ever wanted to know about aligning your text to a grid. Go buy some band-aids and a box of Kleenex now. You'll need them.

[koala]

Would you recommend using something like InDesign for this type of project? I had to use Photoshop with guidelines, so the result is a bit rough. I'm working from memory from my Pagemaker days.

Looking forward to your pdf.

[Chevy]

Something like this?

With the gridlines:




And without:




I approached this as a magazine ad, so I left a gutter on the left side.

[v-six]

Originally Posted by koala

Would you recommend using something like InDesign for this type of project? I had to use Photoshop with guidelines, so the result is a bit rough. I'm working from memory from my Pagemaker days.

Looking forward to your pdf.

Guidelines are all you need

[v-six]

Originally Posted by Chevy

Something like this?

Instead of gridlines as an outline, think of arranging pictures on graph paper, where all of the pictures had to align with the gridlines of the paper. Wait till I post my pdf, you'll get pretty good idea of what we're fighting with. We're working at creating a solid relationship between the placement of every element on a layout. Also, what program are you working in? I may have to ask for help from others about working with a grid in your program if I'm not familiar with it.

[Chevy]

I'm using Paintshop Pro 8 ... I believe there is a show grid option (snap also)

[v-six]

Here's what I put together. Don't even bother reading it first, just look at how everything is set on the grid. Pretend it's in Latin if you have to. (I didn't use any images as they weren't really relevent.. I'll do another layout with text & images). If you're really feeling adventurous, have some tea and give it a read. Just be warned... I broke a sweat just writing it!
Guide to Grids & Early Death

.gif showing gridlines
p.s. corrections are welcome

[Chevy]

Ok ... we need to work on your titles, ok?

[v-six]

Originally Posted by Chevy

Ok ... we need to work on your titles, ok?

Hah, I'll try a friendlier version next time. if you can get your grid going, try playing around with the alignment of your design. Also, if you don't mind horribly, send me a screenshot of the work-in-progress inside PSP with the grid turned on. I'd like to see what it looks like.
Thanks Chev.

[v-six]

this could be interesting.. freddy, can you get a three-dimensional (or even two-dimensional) grid going in the program you're using?

[freddyhard]

six,

do you mean develop the grid more in 2D or take it into 3D - hence develop it more. the grid i did in autocad, so yes 3D is very easy, in fact i find it hard to draw things in 2D. the image was finished in photoshop. BUT, i do not know anything about graphic design. your comment;

"think of arranging pictures on graph paper, where all of the pictures had to align with the gridlines of the paper"

is what encouraged me to keep going with this one.

[v-six]

I'm scratching my head on this one... trying to figure out something you could do in 3d do that would be relevent to the 2d lesson here. Give me a bit to think (it's a slow process). P.S. If youve got external image hosting, attach your images from there. It's not the end of the world, but 100k adds up over time.

[freddyhard]

if you have access you can delete my attachments in the earlier post. i didn't have any external image hosting at the time. i might try something in the 3D over the weekend - if i have time. i need to catch up on some work.

[Chevy]

Here's how it looks with the grid in PSP

[v-six]

Originally Posted by Chevy

Here's how it looks with the grid in PSP

Great Chevy, that'll work just fine. The only step left is aligning all of your elements in relation to the grid.