Dragon Ben site pages
Here are my images for the two pages I designed- its true, photoshop slows the whole process for me too.
About page:
About Page with grid:
Class Schedule page:
Class Schedule page with grid:
brief: Let’s start designing!
Due: September 3rd
Now that you’ve learned a bit about grid based design you’re going to build your first grid:
- Go over the Grids Are Good pdf again.
- Choose two pages from your site structure - the main page and one of the internal pages.
- Build a grid that is flexible enough to accommodate both (you can use the grid calculator here as a tool)
- Design both pages in Photoshop using the grid layout.
- Use either real text for what requires it. Remember words are important tools for interaction, use them carefully.
- In some cases it does make sense to use dummy text but never something like:
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.
As you can see it creates a pattern that doesn’t serve as a text block representation. Some Lorem Ipsum tools here and here. - Post to the class blog 4 PNG images - 2 of each page. One with the design “as is” and the other with the grid layout viewable on top of the design (like this)
Obviously the design should represent the look and feel you choose for your site. You should build hierarchy and consistency between the pages and make sure the design communicates the content and makes for an interesting and friendly browsing experience. Here is a little something for inspiration.
Grids Are Good
The grid is your best friend and a very powerful tool for creating graphic compositions. On the web when the technology itself expects the boxy architecture, grids become even more crucial. We will learn to create pixel perfect grids and we have a great guide to refer to.
Before we do that, we need to understand the box model. Here is a great illustration, courtesy of “A List Apart”:
Margin - spacing outside of the box - pushes the box from the page or other elements around it
The Element - This is the html element itself, if we give it a background color or image.
Border - a colored line that can be sized, colored and styled in several ways (solid, dashed, dotted, doubled…). The border extends into the element and therefore does not changes its dimensions.
Padding - spacing within the element, meaning the space between the boundaries of the element and the content within it.
Content - other elements contained withing the html element. If we give it a size, it will refer to this space. (can be text, image, Flash movie, video player or whatever)
Khoi Vinh, a leader web designer working for the New York Times and a big pusher of grid based design has made a presentation available for us. It is titled Grids Are Good and it gives a very good introduction to the subject.
More tools for building a grid:
- Grid Calculator
- Grid CSS Generator (also creates a png you can tile)
- Vinh again with tips for building grids in Photoshop (his way)
- A background image ruler (might be useful in the future, when you’re actually going into html)
- Firefox Extension for easily resizing the window to preview it in different resolutions
- and of course, when and how to break the grid
on 
