DESIGNING EFFECTIVE AND PROFESSIONAL- LOOKING web pages require more than knowing how to use web page creation software. Especially when creating instructional web pages, it is important to design page layouts that will communicate the information easy and clear to the learner. In The Non-designer’s Web Book, Williams and Tollett (2000) draw attention to four basic design principles that can help you design motivating, readable, and navigable page layouts. Those four basic design principles are alignment, proximity, repetition, and contrast.

Alignment means that items on the page are lined up with each other (Williams &Tollett, 2000). You can choose to align items on the right, on the left, or centered.

The rule of thumb is to avoid mixing alignments. For an ordered and clean page look, choose only one alignment and to stick to it on the entire page. On the other hand, alignment does not necessarily mean to place every item along the same edge. 

Proximity is the relationship that items develop when they are grouped close to each other. The space you put between the elements is important, because readers use spacing as a cue to decide whether or not elements are related.

When you group related elements in close proximity, you create a visual unit and give the message that those elements are related to each other. If items are far from each other, they lack that relationship. On the other hand, by grouping unrelated elements or by failing to group related elements, you can confuse the reader and cause misunderstandings.

Items that are related to each other should be in close proximity with each other. 

Can you tell what is related to what? Failing to group related items can cause confusion. 

Repeat design elements throughout a project. Repetitive elements can be certain colors, illustrations, format, layout, typography, or the like. The repetition principle creates consistency and visual unity for the entire site.

Take a look at the page on the left. What are some of the repetitive elements that gives it a consistent look?

Bigger font used for the initial letter of every word.
Fish image used as bullets as well as before the main title.

Create contrast with a bolder, bigger, or different style type, different colors, or spatial arrangements. In order for the contrast to be effective, it has to be strong. "If two elements, such as type, rules, graphics, color, texture, etc., are not the same, make them very different—don’t make them almost the same" (Williams & Tollett, 2000, p. 118).

Strong contrasts add visual appeal to a page and help to draw readers' attention. Contrasts also help create a hierarchy of information. For example, you can organize the information on your page by using different size, color, or type for your titles and main text. In this way you can guide the reader and communicate the information on your page more effectively. 

Different text size and strong text-background color difference provide contarst. 

When all fonts are the same size, there is no hierarchy of information. Also, due to poor text-background color contrast, text is hardly readable.

Melis Soguttekin, Graduate student
SDSU Educational Technology

Soguttekin, M. (2005). Basic design principles. In B. Hoffman (Ed.), Encyclopedia of Educational Technology.