Web design can employ a number of simple techniques to polish off the finishing details of a website, giving it an extra level of detail that will make the design stand out. While a lot it has been said about the use of anti aliased text, contrasting stroked borders, subtle gradients, and improving the quality of images, you publish using Photoshop’s unmasking tools and levels & curves; few have mastered the technique of using a grid-based layout.
While it is still possible to come up with a great web design without having to use the grid layout, the process can be very difficult. Even so, the website often ends up in some kind of loose grid anyway.
Virtually, all web design processes should be based on some kind of grid. The grid not only expedites the whole design process but also makes it easier for the designer to come up with a site with superior usability for visitors. The presence of the grid in any web design process drastically reduces the options available to the designer. This makes it very easy for the designer to make such decisions as the width and height of various elements on the website.
Most gird based systems are divided into nine, twelve, sixteen or 20 columns. However, custom grids can be created, which may have fewer or more columns. Sometimes, the grid can be used to break the design into horizontal rows with the same pixel width as the columns. Though many designers opine that grids should only be used in web design if a fixed width layout is required, grid-based web design is versatile and flexible enough to be employed in fluid web layouts. In fact, numerous gird frameworks have been established for use in fluid layouts.
Several things have to be kept in mind when undertaking web design with a grid. While some of the tips am going to point out may be pretty well known to experienced designers, it is important to know them to make your grid-based web design project easier. It would be perfectly normal for you to depart from the norm as long as you do it deliberately and consciously.
• Use only the exact number of columns needed for your web design. There is no point in using a 10 column grid if you are only going to use 5 of them. It is perfectly normal to combine columns for different elements. Using more columns than is needed will only lengthen and complicate the web design process.
• Choose the vertical and horizontal spacing carefully. It is impossible to design along horizontal baselines in some grid frameworks. In case you have to work with a grid that doesn’t support this; you can create horizontal rows on your own. This will help in the vertical spacing of elements.
• If possible, use pre designed grids- it is not always wise to try to reinvent the wheel. There are numerous tried and test grid based web design layouts available. Choose one that fits the needs of your design process and just tweaks it a little.
While grid-based web design is certainly the easiest and most widely used technique, it is possible to encounter situations when it becomes necessary to go outside the grid. This is perfectly acceptable as long as you make it as a conscious decision to expedite your web design process. One of the most common scenarios when you have to break free of the grid is in the design of headers and footers when complex backgrounds are being used.
