10.04.2018 Views

design3

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

12<br />

The Principles of Beautiful Web Design<br />

With this simple gridwork in place, we can begin to lay out our elements. This is often referred to<br />

as a wireframe. Wireframes are simple sketches or layouts where you design blocks of content and<br />

their positioning on the page. Wireframes are extremely useful, because you can quickly and easily<br />

move elements around. The largest, outermost rectangle represents the container that we talked<br />

about in the section called “Web Page Anatomy”. When using this method of layout design, I like<br />

to place the biggest block first. Usually, that block represents the content. In my first rule-of-thirds<br />

grid, I place the content block within the two-thirds of the layout at the lower-right. Next, I place<br />

my navigation block in the middle third of the left-hand column. I place the text part of the identity<br />

block over the left side of the content, and the image part of the identity over the menu. Finally, I<br />

squash the copyright block below the content, in the right-hand column of the grid. The result is<br />

the top-left of the four possible layout arrangements shown in Figure 1.9.<br />

Figure 1.9. Four layouts in grids that follow the rule of thirds<br />

These initial sketches provide a quick look into what general layout approaches might work for<br />

your website. No need to stop there, though—the growth in popularity of grid-based design on the<br />

Web has inspired many great articles about—and tools for—designing websites on a grid.

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

Saved successfully!

Ooh no, something went wrong!