Inspired by print
April 14th, 2008
In the web design world we usually do not have to concern ourselves with elaborate printable versions of our work. Some might regard this as a luxury, while others might argue that we simply cannot compete with the print media. When we are ready to make a site, post, or page live, we either through a UI, publish it, or upload and link to it. In doing so with our choice media, we can update/edit this newly created work “on-the-fly”, something our print brethren cannot control as easily.
Print designers do not have the luxury to say “Whoops!” without it being followed by, “You’re fired” very often. This is not to say that we are allowed to make mistakes, or should not proofread all our content (something I should probably consider doing more often), but rather we can make those quick changes, or completely add a note to a page after being made widely available.
But, imagine if print designers had to:
- Worry about varying canvas size (like we have to with screen resolutions)
- 10 second downloads (no more 40mb hi-res, 600dpi images)
- Be standards compliant (validate your newspaper!!!)
- Use system fonts (I know we can use other methods of text replacement, or sIFR to achieve this, but it might not always work)
- Worry about server resources
- Control spam
Just to name a few. You get the point. I know it might sound as if I am knocking on print, and I am in a way, but I respect their work totally and completely. With the above in mind, I think it is great to learn from our less handicapped brothers, and even go as far as borrowing from their creativity when looking for a bit of inspiration.
Enter the grid
More and more these days we are being inundated with talk about grid based design, a technique seen throughout editorial print. In a nutshell:
A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.
Taken from Wikipedia
So to summarize, they have a lot to do with math.
One thing to keep in mind is when and where is it appropriate for your audience to chose a grid based layout? Grids really help to organize information into easy to read, and follow layouts, but this might not suit your every desire. Like everything, there is a time and place for grids.
A fun way to analyze potential layouts, might be to create gray box comps from some of your favorite magazines, or editorials. Just simply scan them into your computer, and roughly overlay the content areas with gray boxes. You can worry about the exact column sizes later on, but just to get a rough idea of how to organize your content, this works well.
If you do decide to go with the grid check out some of these sites:
Grid Resources
- Mark Boulton - Five simple steps to designing grid systems
- 960 Grid System
- Design By Grid
- Design By Grid - Tools
- A List Apart - Thinking Outside the Grid
- Grid Designer 2
- The New York Times
- Khoi Vinh
- Posted at 11:41 am in inspiration
-
Leave a comment
Another key factor to point out would be that people who read newspapers, not always, but usually have invested from the start. They have spent that $.50 to get it, or whatever the price may be. They are more likely to read on.
Not to say this is a good thing necessarily, but just another difference between most web news services.
Nice post, btw.
It’s a shame that the web doesn’t accomodate flowing text across columns like in many print designs. Using the width of our screens would be great for no scroll design.
@ Adam
Excellent point there about the cost factor. I think that you notice that a lot of the time with things that you have to pay for.
@ Sketchee
Well, I am not sure if I got what you were saying right, but CSS could probably achieve this, with some positioning applied to the text.
Nice paintings by the way.
Another spot on post, Matt. An understanding of grid-based design is one of the most important things anyone who wants to build websites should know. One of the biggest challenges I face in digital advertising is switching people on how to creative grid design can be. It’s especially difficult when almost everyone around you quantifies creativity in terms of Flash animation, HD video and believe it or not, splash intros!