Theme Design 101
by Brandon R. Jones
With your theme planned out and a set of rough wireframes in hand, it's time to start the design phase. This is my favorite part of the entire process, because it's where you make your vision come to life! The goal of the design phase is to end up with a fully realized set of mockups for your theme to use as a basis for the development phase.
This chapter will be broken up into two main sections: first, we'll review how the traditional principles of good web design specifically relate to WordPress; then, we'll discuss the anatomy of a WordPress theme, with examples of how you can approach the design of each component of your theme.
Before you start designing, you'll want to decide on a favorite method of mocking up your ideas. Many designers (myself included) use Adobe Photoshop as their software of choice, but I would be remiss to suggest that this is the only tool out there. In addition to using quite a few other competent graphic-creation applications, you can also theoretically do all of your designing directly by coding the CSS on the fly (which some ultra-fast coders prefer). I've even seen designers mock up everything by hand.
Whatever method you pick is fine, but it's worth noting that there are some key advantages to using Photoshop (or a similar program) to design your theme:
It's the industry norm. You'll end up with an industry-standard file that you can give to people using your theme, which makes it easier for them to implement changes.
■ It's more organized. You'll be able to quickly organize your image layers into folders. I personally use a different folder in my Photoshop files for each page template in my theme, so that I can quickly toggle the page design I am working on.
■ It makes redesigning a breeze. Creating a new skin of the theme will be as easy as creating some duplicate layers and customizing them.
The following section is intended to be a quick primer on how core design principles will play into a WordPress theme. It's worth mentioning that there are some terrific books that discuss these principles in a lot more detail than I'll go into here. Sexy Web Design1 and The Principles of Beautiful Web Design2 are two excellent starting points from SitePoint. If you're new to the design process, I'd highly recommend digging in a little deeper to familiarize yourself with the principles of design. With that said, this section should serve as a solid review for readers of all levels of experience.
Unless you're designing a WordPress theme for a single-use website, it's always a good strategy to design with customization in mind. Most of the publishers using your site will want to make it their own, either by adding their logo and adjusting a few colors, or by rearranging the sidebar and menus, for example.
Although coding is reserved for a later chapter, it's still important to consider at this stage which portions of your theme design will be constant (the layout, content structure, and so on) and which portions will be variable (colors, fonts, and the like). You can make your theme more skinnable by separating the core, unchanging elements from the superficial, variable ones. If the publisher wants to make a change, they won't need to go digging in your theme's core; they'll just need to swap one skin file for another. Or, better yet, you can make the skin selection a custom option in your theme's administration section (Allan will be covering this in Chapter 7). Even if you're designing a theme for a single site, this separation practice is still a good idea: it will make changes down the road much easier.
Entire books have been written about color theory, so I'll avoid going into too much detail here. It's assumed that you'll select a harmonious color scheme that works with your vision for the theme. What matters in a theme design is not about the kind of color scheme you use, but rather how you implement it in your theme.
Plan for Customization
Color has an important function in terms of branding any website. If color plays a dominant role in the theme (for example, if the site's background is a vibrant red), publishers will likely want to have control over that color to suit their own brand colors. Figure 3.1 shows an example of a template design that allows for customization of the color without any change to the core layout.
Notice how the custom color is used in a number of places in the theme: the background color of the header and footer, the large buttons at the top of the front page, and the standard link color.
In addition to considering how color is utilized for the important elements of the page, you can also make your theme "pop" just by changing the color of decorative elements: using horizontal color stripes, bullets, frames for images, colorful sidebar elements, and bold splashes of color in the footer, for instance.
There's more to color than being decorative, though. Figure 3.2 and Figure 3.3 are examples of themes in which color takes a more central role in the overall feel of the design.
Daina Reed web deilgmr / project manager / team leader
Was this article helpful?