Principles of Design and Page Layout

Ideally, the layout of the HTML page enhances the communication or intent of the author. Every element on the page effects how other elements on the page are perceived. When looking at an HTML page, it is important to be able to comprehend the entire composition as a unified whole rather than a collection of parts. When working with layout, it is essential to focus on balance and the shape of the unused space. By applying principles of figure/ ground relationships, contrast and similarity, and proportion, the designer can structure the space into an effective whole.

Structuring Whitespace

The designer can change the background color easily, so when we refer to white space, we are referring to the background color or the "ground" in a figure/ground relationship. The whitespace in a composition is as important as the elements that have been placed upon it. Just as the rests in a musical score give shape to the overall comprehension and appreciation of the music, whitespace gives form to the page. It is important to never ignore whitespace. In earlier versions of HTML, it was difficult to structure the space in an HTML document. It was easy, (and still is, to some extent) to fall prey to lopsided pages because of the technical difficulty of creating columns and aligning elements on the page. All whitespace should be accounted for. This does not mean that you should fill all whitespace - it means that when you have areas of whitespace it should add to the overall compositional balance of your page.


When arranging elements on the page, you should consider the visual weight of each element. Weight can be determined by the size of the object, the value (dark objects weigh more than light objects), and the density of the detail or texture. Balance in terms of visual contrast is also important. Con-trast typically draws the viewer’s eye and can be used quite effectively. When the contrast between elements is too great, harmony and balance are lost. It is important to work with both visual similarity as well as contrast in a composition. Proportions and size relationships should also be considered when trying to establish balance. All objects on your page will be evaluated in relationship to other objects on the page, therefore a large object will appear much larger when placed next to small objects, thus affecting the balance.



Symmetrical Balance

There are many ways to create balance when designing an HTML page. The simplest type is a formally or symmetrically balanced page. This occurs when the right side is nearly identical to the left side of the page (or the top and bottom of the page are similar to each other). I have seen attempts at designing formally balanced pages where the designer has centered everything on the page. In some cases, this type of design works well, although the readabil-ity of the text often suffers. In general, a formally balanced page is rather static and the eye is not encouraged to travel around the page and explore new elements. Another type of balance is an informally or asymmetrically balanced page.


Asymmetrical Balance

An asymmetrical compositional layout depends on the skillful arrangement of elements with different visual weights. For instance, a large body of text can be balanced by a dark image. A series of small elements can be balanced by a larger one. There are numerous variations to be explored. Asymmetrically balanced pages can be produced by the intuitive nature of the designer or through carefully calculated mathematics. The best way to begin working with informal balance is through the use of grids. An asymmetrical or infor-mal composition can create a visually dynamic page.



Lack of Balance

The last type of balance discussed is an unbalanced layout. Most often, pages are unbalanced because of limitations of the technology or limitations in the knowledge of the designers. The technology is becoming more amenable to various forms of alignment, soon we will only be able to blame the designer. Sometimes the intent of the designer or artist is to create a feeling of uneasi-ness or instability. An unbalanced page may work well to convey this concept or feeling, but when created unintentionally, an unbalanced page can detract from the effectiveness of your site.


Consistency Across Pages

Typically you do not design just one HTML page. Often, there are a number of pages that relate to an overall theme. It is important to think of the entire WWW project as a whole when beginning the design. With hyperlinks, we are accustom to drastic changes in the visual environment as we click from page to page. In this case, visual changes inform the user that we have now left one site and entered into another. In most cases, you do not want to in-voke that feeling if the viewer clicks from page to page in your project. You may want to establish consistency among your pages by using a header image or a distinct layout or a set of specific colors. When considering how you will make your pages consistent with each other, be aware that variation within consistency can add visual interest to your site and encourage the viewer to more readily explore your site. In some cases, you will want to avoid monotony by varying the design of your pages, thus creating a sense of excitement as you go from page to page. In other cases, you will want to establish a layout formula and stick with it so that the placement of information is consistent from page to page.



Designing for Paper vs. Designing for WWW

One thing we have to keep in mind when designing for the WWW is that computer screens are typically wider than they are tall. This makes it difficult to design for both screen and paper. Years ago, a paperless world was predicted, yet it seems we are using more paper today than ever before. People may still want to print out your HTML pages no matter how convenient computer access is. This can be problematic if you designed your pages horizontally rather than vertically. Fortunately, some browsers reshape your page before printing but often times that reshaping destroys all efforts at creating an interesting page design. Some people will declare that the material was intended for the screen. It is important to realize that some material may be more practical in a vertical format to ease printablility.

Using Grids

When designing the layout, it is often useful to use grids when arranging elements on a page. Grids are an invisible structure used as a guide. Grids help to establish organized unity to one or more pages in a Web site. In many desktop publishing packages, there are guide lines that can be used to align elements on the page. Some Web page generators have similar tools, but when developing web pages using a text editor, no such tools are available. In this case, it is useful to draw thumbnail sketches of portions of the page. Once you have decided upon a grid for your page, you can use this structure to make sure your graphics and text blocks are aligned, and the balance of your page is maintained.

One may think that using a grid results in boring pages that are monotonous in their overall design. When grids are used properly this is not true. Once you have established the structure of the page, there are numerous ways in which you can arrange the elements within the grid structure. Variation in the arrangement of your elements is important from page to page. Elements can occupy one area of the grid or can extend into two or more areas. Text can occupy an area that was used for graphics on a previous page. You can have two or more grids for a project and alternate between them depending on the content of the page. Often the use of multiple grids in a project works towards creating visual rhythm as you move from page to page.

Focal point

After finishing an HTML page, open it up in a browser and stand back. Do not read the text. Close your eyes for a few seconds and then open them. Look at the WWW page. What element on the page first draws your attention? Where does your eye move next? Trace the path that the eye takes when traveling around the page. Being the designer, you may be biased, therefore ask other people to evaluate the focal point and path. If the focal point is overwhelming because of contrast, size, density, or value, then the eye has difficulty leaving this point and the rest of the composition is rendered less important. If all the elements on the page demand equal attention, then the eye will be confused on where to go first and where to travel to next. Whether the designer has consciously or subconsciously designed a path for the viewer’s eye, be aware that the path that the eye takes contributes to the content or experience of the page.

Previous page : General Issues

Next Page : Creative use of Color in Page Design

Back to main page of Chapter 1