Understanding Design Elements (Design Principles) (Digital Desktop Publishing) Part 3

Web Repetition

Repeating information and graphics from one web page to another serves several purposes. It quickly identifies to the reader that this page is still part of the original site. It helps orient the reader to page information. It also reduces the distraction that often comes when each page is completely different. Repetition is a key tool for web designers.

Balance is the use of elements so they counter each other, for example in opposite corners of a page.

Gridlines show how parts of the page balance one another.

Figure 6.17

Gridlines show how parts of the page balance one another.

Balance

Balance is a type of repetition where elements that are similar in size or shape are placed in such a way that they counter each other. Balanced elements might be in opposite corners or they may be across from one another. The use of balance creates a page that is in harmony. It is not necessary for the same type of element to be used to create balance. Text can be balanced by white space or by an image.


In Figure 6.17 the brochure is divided into a grid. The use of grid lines makes it easy to see how parts are balanced. In this case, the contact information in the bottom left balances the opening text box in the upper right.

Figure 6.18 is a good example of a simple text document that is balanced. Notice how one column balances the other. In addition, the text at the bottom balances the text at the top. Even the lines separating each list are balanced.

This CD insert for a software product is primarily text. Even without an image, though, it is neatly balanced.

Figure 6.18

This CD insert for a software product is primarily text. Even without an image, though, it is neatly balanced.

Web Balance

Because it’s not always possible to know that content at the top of a web page will be visible at the bottom of the page, balance from top to bottom is not usually part of a web design. Pages that do have a horizontal balance are easier to read and feel more harmonious.

Tension

A cake recipe may call for extra sweetness offset by a tart taste in order to enhance the overall flavor. For the same reason, some design elements are used so that they are purposely disruptive. This deviation from harmony is called tension.

Symmetry

It is easy to believe that each element on a page must be completely balanced with another. While this is often pleasing to the eye, it can also create boring pages that are too predictable. Symmetry is when a page or its elements are perfectly balanced. Figure 6.18 is an example of a symmetrical page design.

Tension is the opposite of harmony. It can add interest to a page or cause it to feel incomplete.

Symmetry is when elements on a page are evenly balanced.

Asymmetry is when one or more elements on a page are not balanced.

Closure is the desire by the human brain to complete a drawing or design.

Stickiness is a design that encourages the reader to keep reading or to stay on a page.

Asymmetry

Pages that are not perfectly balanced are considered asymmetrical. One element may be separated from all the others which makes it stand out. This lack of balance can make a more interesting page than a symmetrical one. It is a good use of design tension.

Compare Figures 6.19 and 6.20. Figure 6.19 is a symmetrical page with the two blocks of text at the top balancing each other and the title of the topic balanced against the figure below. In Figure 6.20 the yellow triangle in the upper right corner is not symmetrical. It jumps off the page drawing your attention to the CD information. The asymmetrical element makes the page feel less static or boring.

This cover is simple with a symmetrical design.

Figure 6.19

This cover is simple with a symmetrical design.

This cover is identical except for the simple asymmetrical triangle in the upper right corner. A single change makes a significant difference.

Figure 6.20

This cover is identical except for the simple asymmetrical triangle in the upper right corner. A single change makes a significant difference.

The single short line draws a reader's eye as it seeks to create closure.

Figure 6.21

The single short line draws a reader’s eye as it seeks to create closure.

Closure

The mind tends to want to finish that which is left undone or to seek closure. If you draw a series of vertical lines that are of equal length (shown in Figure 6.21) except for one that is slightly shorter, the mind tends to focus on the shorter line, trying to force it to match the others.

This is an example of the need for closure.

This unfinished line creates a feeling of visual tension as the reader tries to create completeness. Such tension can increase reader interest and add to the page’s stickiness. Stickiness is a concept borrowed from web page developers. It is a design component that keeps readers on the page instead of clicking away. Print documents also need stickiness in order to attract readers’ interest. A business card is a good example of a document that needs stickiness since it is easily discarded. Businesses have found that turning a card into something useful (such as a magnet) is one way to create stickiness.

Alignment

Alignment is the placement of text or images so that one line of text falls exactly below another or so that the edge of an image lines up with the text above or below it. The need for alignment of elements is the same human characteristic that seeks closure. The difference is that failure to align usually does not create harmony. Instead, the page feels not quite right. As a result, elements purposely placed away from other elements should be far enough away that it is clear this was the designer’s intention. This helps reduce an unwanted tension. Notice in Figure 6.22 that the web address is just slightly below the image. It appears that the designer has made a mistake rather than an intentional choice.

Design Decisions

It is easy to be overwhelmed by all the decisions one must make in designing a page. There are so many details to think bout that it is hard to even know where to start. The place to begin learning how to make design  decisions is by studying designs created by others. Look at magazine ads. Look at web pages. Look at junk mail that arrives at your home.Begin to dissect these samples looking for layout decisions. See if you can find examples of the Rule of Thirds. Look for symmetry and asymmetry.Look for tension on a page and decide if it improves the page or
not. Pay attention to the details. You will find that as you begin developing your own eye, you will also develop your own sense of style and taste. Remember that the most important part of any design is the question “Does the document serve its purpose?” If the design makes that Y possible, then it succeeds.

The production information on the CD cover needs to be moved up to create an effective alignment.

Figure 6.22

The production information on the CD cover needs to be moved up to create an effective alignment.

Alignment is vertical and horizontal placement so that text or images match.

Designing pages is time-consuming and difficult. Even the simplest design may require multiple versions before it is satisfactory. One ethical consideration that many people overlook is recognizing the time it takes for someone to produce a work of art. Well-designed pages are art in the same way as a painting or musical composition. Make sure that those around you who are producing such work are given the credit they deserve. Ignoring their contribution just because it appears "simple" is just as unethical as stealing it.

This text contains all three proofreading errors mentioned above.

Figure 6.23

This text contains all three proofreading errors mentioned above.

Summary

In this topic you saw how the Rule of Thirds can help make a page appealing.You learned about the elements of design that are used to create a document that is in harmony. You saw the importance of symmetry, consistency, proportion, and balance. You learned how closure and tension can also be used to add interest to a page. You are now ready to take these design tools on to the next step.

Key Terms

alignment

golden ratio

Rule of Thirds

asymmetry

grid

stickiness

balance

harmony of design

symmetry

closure

proportion

tension

consistency

repetition

Fibonacci sequence

rhythm

Next post:

Previous post: