Tips for Successful Web Designs 1

I'm going to start a series of short posts with tips for successful website designs. Actually these tips can be applied to any kid of designs, whether you create a poster, a brochure, menu, flyer, ... Today, I would like to cover the concept of "a grid" in your layouts.

• One of the important things is to create an invisible grid and arrange your objects on the page so that they would follow this grid. 

We used to be some what limited by technology - with the use of tables, most of our websites looked too "blocky". Now with the use of <div>, we got all the flexibility. And I love it! The new trend is to break that linear blocky look and to create a website that would produce a free floating feeling, feeling of open,.. However, for a clean looking web design, we need to arrange our little building blocks so that the whole page / structure looks clean and organized.

When there is no inner grid, a viewer gets the sense that something is off, something is wrong, without even pointing what exactly is bugging him. The same goes for, let's say, a flyer design. Your tagline or title should be aligned with another object on the paper. It could be a picture, a block of type, a logo,... They don't have to be all in one place. The title could be at the top of the page and the block of text could be at the bottom. Here is a simple sketch to illustrate what I'm talking about.

As you can see the title at the top is aligned (on the left) with the block of text at the bottom. If you decide to move one of these objects to the right, don't move it just a little bit, move significantly. This way nobody will think that you just missed it and didn't align the objects perfectly; instead, it should look that you did it on purpose.

Here is an example of a website that I came across that needs some improvement on layout. I think designers didn't use enough sense of "grid" or placement. We are not talking about the colors here.
http://www.spinecenter.com/legacy/non-fusion.php

If you look at this website on a small screen, it looks more or less OK. If you look on a big screen (like mine), you can notice that actually the grid was used but then it leaves us with the feeling that it's all over the place. Agree?

So, the first tip is to use an invisible grid that would help aligning objects or building blocks on the page/screen.

The best to you in design!
__________
Follow us to http://www.creative365design.com/website-design-creative365.html