10.04.2018 Views

design3

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

20<br />

The Principles of Beautiful Web Design<br />

Figure 1.18. Unity among the monkeys<br />

Although less of an issue these days, unity is one of the many reasons why web designers have always<br />

despised HTML frames. It’s important that unity exists not only within each element of a web page,<br />

but across the entire web page—the page itself must work as a unit. We can use a couple of approaches<br />

to achieve unity in a layout (aside from avoiding frames): proximity and repetition.<br />

Proximity<br />

Proximity is an obvious, but often overlooked, way to make a group of objects feel like a single unit.<br />

Placing objects close together within a layout creates a focal point towards which the eye will<br />

gravitate. Take a look at the digital painting in Figure 1.19. While composed of a seemingly random<br />

assortment of strokes, the five strokes that are the closest to each other appear to form a unified<br />

object.<br />

Figure 1.19. Creating a group using proximity<br />

We practice the concept of proximity on the Web when we start setting margins and padding for<br />

elements. For instance, when I define the CSS style rules for sites, I usually change the default<br />

margin that exists between common HTML elements such as headings (h1, h2, h3 …), paragraphs,<br />

blockquotes, and even images. By altering these values, I can cause more or less space to appear<br />

between elements, thereby creating groups.<br />

If you look at the two columns of text in Figure 1.20, you’ll notice that they look similar. The only<br />

difference is in the placement of the headings. In the column on the left, the word “Unkgnome” is

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!