Design and Prototyping for Drupal

Step 6: Step Up the Visuals

Up until this point, with the exception of the logo and header, I’ve purposely kept the visuals pretty low-key. The purpose of this first phase of design is to focus on the grid and the structure of the page, similar to what I’d do in the wireframing stage. Once I have those standards set, though, it’s time to start adding some more interesting visuals to the page.

The first piece is to start adding color. I’ve already created my color palette and chosen my fonts in the style tiles I created earlier (see Chapter 4), so I’ll start by making my headers brown, and setting them in Impressum, the font I’ve chosen for the headers. I’ll do this by selecting the post title on any page, restyling it with my new color and font, selecting it, and then choosing “Redefine Style” from the Styles palette (see Figure 7-11). Once the style is redefined, any instance of that style will have the new attributes I have chosen.

Figure 7-11. Redefining our H1 style. If we look on our pages once the style is redefined, we’ll notice that everything has been restyled now

After I’ve defined my headers, I’ll redefine the styles for the other elements of my page using the same process. Add a few flourishes, and we’re looking pretty darn good. Figures 7-12, 7-13, and 7-14 show some of my completed pages with the new styles.

Now we have a layout that we can ...