design3

Layout and Composition
47
Figure 1.49. Proposed home page wireframe for KRG
Notice that there are no colors, no real images, and no actual HTML elements in this example. The
goal of a wireframe is simply to establish the layout structure and the positioning of elements. In
a good design, users “recognize each page as belonging to the site. That doesn’t necessarily mean
that the layout of each page has to be exactly the same. In fact, it’s good to work in some contrast
between the home page and other pages in the site. As I created the wireframes for the rest of the
site, I “spiced up” the process by planning alternate layouts for some sections, such as the Blog
section shown in Figure 1.50.
Figure 1.50. Wireframe for the Blog Page of KRG
The Blog page has a similar appearance, but the layout is completely different. Keeping elements
such as the header and the sidebar is fine, but the layout of the blog post area has to be different.
Dividing the post content into multiple columns, like those found on the home page, would make
the post text difficult to read. Unifying these two columns into one gives the text plenty of room to
breathe. A call-to-action for an email sign-up is located at the bottom of the post.
Okay, maybe “spiced things up” is a bit of an overstatement when talking about colorless wireframes,
but the design ball has certainly started rolling here. Now that the rough KRG layout is mapped
out, it’s time to move on to the next subject: color!