I had an art project once to make a sculpture out a rectangular block of plaster molded from a milk carton. I had to be somewhat delicate with it to make sure it didn’t break into a million pieces, which is mostly the reason why the sculpture retained some of its blockiness. In the end, it had a good, interesting design, but you could still follow the lines around it and decipher its original form.

Now, my forte is not sculpting obviously, but the same principle can be applied to web design. You start out with a blank document and fill things in bit by bit, usually according to a grid. By the way, I recommend using the web-safe 960-pixel grid. Here’s a good article with instructions on how to build one in Photoshop: Web 2.0 Style Web Design. (If you follow this and come out with a grid only 940 pixels wide, no worries; there is a 10-pixel margin on either side.)

Okay, so now you have your basic but completely grid-ridden webpage, trapped in its milk carton block. How can you break out of it? One word: Expand. You don’t have to necessarily ignore the lines of your grid, but just allow yourself a lot of extra space to expand beyond the lines with dynamic graphics. Next, modify any elements you feel need to be accentuated. This usually pertains to the top of the webpage, since that is the essence of style that creates the foundation of the design for the rest of the site. I’ve included a few recycled examples so you have some clue as to what I’m talking about.

OYPRO is a commercial real estate business, but as you can see, its website is far from the usually boring real estate stereotype. It’s because of their creative use of the ‘earth-comet’ graphic that flows across the top of the page, diving over and under the other grid-savvy elements. Just this one interesting graphic pushed the creativity and uniqueness of the site up a notch.

MB DRAGAN created a fun portfolio site that gives off a more personal touch that really portrays his own designs. The box-free aspect of this site is the menu. There is absolutely no indication of a grid as each word is completely juxtaposed in terms of alignment. They float off on their own, mingling with the stars. The rocket trail adds just the right amount of direction that you can follow. And the thumb and forefinger holding the logo is a great, fresh idea, too.

Oh, great, you say. Another fairytale-like B&B manor, the beginning of one more happily ever after. Maybe, but DARA'S GARDEN pulled off a wonderful website. This beyond-the-grid technique is simple but effective, and is being used frequently in current websites. Instead of just slapping a single image across the top, the designer included teasers of other pictures, giving a scrapbook feel, as if a pile of old, memorable photographs are really strewn over the page. The sharp corners of the grid are faded, especially with the use of leaves poking out.