Managing screen real estate: grid design process

One of the most crucial aspects of designing for the web is managing the screen real estate, making sure your content communicates clearly and makes the best of the device it is being displayed on. Here is the thinking process i personally go through. This is a method that takes into account screen responsiveness and allows for instance to plan the media queries you’ll need.

Conceiving the right grid for your project

Here is the process i go through when determining the grid i’ll use on a new project

This comes after the mockups phase so i know at that point what graphical elements will compose my screens. I also know at that point, thanks to the information architecture study if i should provide different content for different devices.

1. target devices: mainly screen, handheld, print
2. target screen resolutions?
3. behavior: fixed / elastic / flexible
4. content horizontal positioning: left – center- right / specific value
5. content vertical positioning: specific value
6. GRID DESIGN
   • based on 996.gs or other (warning: you are allowing others to decide for a fundamental part of your design)
   • homemade:
     • find out the elementary unit
       • trial ‘n error
       • from past experience, i usually use a landscape rectangle, with a width at least twice the height
       • based on logo (or logo element)
       • based on ideal typography or any other fundamental graphical element
     • gutter space, do you need one? If so, how much?

At this point, my grid is ready and i can proceed on placing elements. Note that it’s not always that streamlined. More often than not, i finetune the grid in the layout design phase.

 

Resources

If you use Fireworks, i found the Guide Panel Fireworks extension (for CS3 but works in CS5) to be really useful to generate your guides.