Composition in any visual art (such as design, painting or photography) is the purposeful placement or arrangement of visual elements-line, shape, texture, value and color. For webpages, these concepts apply to how everything is organized on a page. Many designers use a grid structure to help them position items on a page, and the same is true for web designers. Many web designers use a grid called the 960 pixel grid. Essentially, it is 960 pixels wide with 12 equal sized columns of 60 pixels each and 20 pixels between each column.
Grids set consistent proportions and spaces between items which helps create a professional looking and flexible design. It is possible to create many different layouts using the versatility of the 960 pixel grid.
While a grid might seem like a restriction, in actual fact it:
- Creates a continuity between different pages which may use different designs
- Helps users predict where to find more information on various pages
- Makes it easier to add new content to the site in a consistent way
- Helps people collaborate on the design of a site in a consistent way
This grid design also makes it easy to balance design elements on your page, meaning an equal distribution of the visual units- color, value, size, etc. Balance allows the viewer’s eye to travel around your page to different focal points versus heavily focusing in one dark, picture heavy, or text heavy area. Moving the viewer’s eye around your page really starts with the theme and background of your page- is it light or dark? Use the opposite value of lightness or darkness to grab attention. For middle and dark valued backgrounds, small amounts of white, bright colors and primary colors will have a lot of pull, so pay attention to the amount you use. In both design scenarios, dark objects and colors have a stronger visual weight, especially if grouped or in large proportion to everything else, so they will pull your eye in their direction. Balance can also be achieved with repeating elements, such as line, color, texture, shapes, etc. throughout your page. No matter the elements, your goal is to have the viewer zero in on your most important piece of information on your page (your logo, introduction picture, etc) and then move to the subsequently important information.
Keeping a clean and simple page will greatly simplify this process and keep clutter from being the reason viewer’s eye can’t focus in on your information. Using design elements will help highlight your focal points or points of interest with your business and they will help professionalize your site. However, every site scenario will be different, so our advice is to test different combinations and see what makes your eyes happy.
