Design and Prototyping for Drupal

Step Two: Setting Up the Header

Now that I have my grid in place, I want to take a bit of time thinking through how the navigation will be organized and setting up some type defaults. For that, I’ll create a new layer called “header” and bring in my logo, the navigation links and other elements. I can bring these in directly from my style tiles (see Chapter 4, Using Style Tiles to Explore Design Ideas).

With the navigation, I may want to play around with the format of links, text, colors, etc.—but I want to be able to change them across the board when I make edits. For this, I’ll convert the navigation to a symbol called “navigation” (do this by selecting the navigation elements, right clicking, and selecting “Convert to Symbol” from the contextual menu). I’ll also set up some Styles for the navigation, including the type format for links in their on and off state, and a style for the background of the on state. Figure 7-2 shows what my Layers and Styles palettes look like when I’m done.

Figure 7-2. Our new navigation, straight from the mood board we created earlier

Once we’ve created the navigation, we want to make sure that we label our new layer “Header” and share it to all pages in our document. I’ll also add a small “Accepting work in:” status message (see Figure 7-3) in the upper-right corner, which will be brought in as a block when I build the site.

Figure 7-3. Our header is starting ...