# 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 :wink

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 :smile:


----------



## 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

koala said:


> 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. :smile:
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

koala said:


> 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

Chevy said:


> 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 -razz:


----------



## Chevy

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


----------



## v-six

Chevy said:


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


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?


----------



## Inactive

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.


----------



## Inactive

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

Chevy said:


> 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.


----------



## koala

Can I have another go? I think I'm starting to get it now, but I'm still having trouble with the font size & leading calculations though.

In this layout in Photoshop, I used Ariel 12pt, the grid is set to create a gridline every 12 points, and the leading is set to 12 (this is where I'm confused). I know it looks very cramped, I'm just starting off with 12/12/12 until I know what I'm doing.

The background image is centrally aligned to the page, I'm not sure how this relates to the grid though.

'Franz Kafka Metamorphosis' is in Impact font, 60pt and 42pt, leading 48pt, which appears to fit the grid but using 2 different font sizes may have messed up the calculations. Help!

The photo is aligned to the top and bottom of the text paragraphs, and centrally below the title. Is that the correct placement when using a grid? Any advice appreciated.



Showing grid and guidelines


----------



## v-six

@ Koala, You're right on. There's no one "right way" to set an image like that into the grid.. centered, right align, left align, it's just a matter of aesthetics and personal choice. Changing the font size shouldn't affect anything. Here's another quickie to help explain leading and font size.


----------



## koala

So if you made the leading 18 instead of 24, you'd get 4 lines of text per inch, more tightly spaced, but making it 20 would mess up the grid system. Thanks Six, I think I've got it now.

In your last example, where the picture is right-aligned with the text above and the start of 'More Grids', does it make any difference that the left of the picture isn't lined up with the text?


----------



## v-six

_So if you made the leading 18 instead of 24, you'd get 4 lines of text per inch, more tightly spaced, but making it 20 would mess up the grid system._
Exactly

_In your last example, where the picture is right-aligned with the text above and the start of 'More Grids', does it make any difference that the left of the picture isn't lined up with the text?_
Doesn't make much of a difference, since the text is set align right/ragged left, thus the picture can be ragged left too. It would only be breaking flow if the left margin of the text in that column was set to end at a gridline, which it's not. If I wanted to be very strict, I wouldv'e cut everything off at that first 36 pt. line.


----------



## Chevy

Ok .. I'm seeing it a bit clearer ... I mistook your first image to be a "grid", that is your way of sectioning a page (thought it was freeform) ... Graph Paper ... got it ...


----------



## Inactive

sorry six, i've been way off the mark. i've read your pdf on grids & early death... so this exercise is text orientated more so than graphics. i'll have to do something completely different for this exercise.


----------



## v-six

No sweat on the misunderstanding guys, I probably didn't explicate my intentions very well. (P.S. if you can guess the word of the day you win the prize). Just remember, next time you're doing some design work and you find yourself struggling with the placement of content... think grids! If anyone's really interested, I can recommend some good reading on the subject.


----------

