15 Is

Paid Social Media Jobs

Social Media Jobs

Get Instant Access

view plain copy to dipbcaraf print ?

.rate_widget {

border: Ipx solid #CCC;

overflow: visible;

padding: 16px;

position: relative;

width: ISSpx;

height: 32p x;

.ratings_stars {

background: url( 'star_einpty.png' } no-repeat;

float: left;

height: 2Spx;

padding: 2px;

width: 32px;

.ratings_vote {

background: url('star_full .png') no-repeat;

Figure 2.2. Code snippets on the Nettuts+ site

WineLibraryTV (http://tv.winelibrary.com/)

This website delivers reviews of wine in a style that's both comical and educational. The videos often take 20 to 30 minutes to review a handful of wines; however, the host will usually only spend a few minutes on each particular wine. Because of this, users often like to skip directly to the spot in the video that reviews the wine in which they're interested. As an indicator of good planning, WineLibraryTV uses a video player that allows for bookmarks in the video, so that visitors can instantly find the content they're looking for, as seen in Figure 2.3.

Figure 2.3. Video player on the WineLibraryTV site


This website features a lot of content catering to web and graphic designers. Because the audience is web-savvy, many visitors are eager to share its content on social networks that they use. As another good example of preparation, the site owners have built in a social media bar at the bottom of their posts, making information sharing as simple as possible. This example, shown in Figure 2.4, receives bonus points because it also includes a section that helps users find further content.

Figure 2.4. The social media buttons on Psdtuts+

Planning for the audience involves more than just anticipating the type of content they seek; it is actively preparing ahead for the smoothest user experience possible. Your goal should be to anticipate your visitors' tasks, and then make them as easy to accomplish as possible. What this means in terms of a theme's design will vary on a case-by-case basis, naturally. By studying the types of websites that you think accomplish similar goals to yours, you can figure out ahead what works for the audience.

Planning Milestone

■ What will the ideal site visit using this theme look like? Outline a few tasks that a visitor of your theme might want to accomplish.

Planning for Publishers

Now that you've put some thought into the visitor experience for sites powered by your theme, it's time to consider the direct users of your theme: the publishers. WordPress is primarily a publishing platform. Planning for the authors who will use your theme to publish their content is just as vital—if not more so—to the success of your theme as considering the sites' visitors.

As with your target audience, it's impossible to pinpoint the type of author who's going to be using your theme. Even within a specific group (let's say, casual photographers), there'll be an array of authors with varying levels of experience. For instance, some photographers will be quite comfortable filling out several custom fields in a blog post, having years of experience using their own custom HTML and CSS. Others, however, will be hard-pressed to figure out how to publish a simple post.

As a general rule, you should plan your theme for the least-experienced user—within reason, of course. If you're planning a photography theme, it's safe to assume that most authors will understand to some degree how digital images work (for example, a concept as basic as how a thumbnail image is different from a full-size image). However, it would be best not to take for granted that the average photographer understands how to make a thumbnail image trigger a JavaScript lightbox to reveal a larger image. So if you include this type of functionality, it's important that you make it easy to use, and include clear instructions in your theme package (the topic of instructional material will be covered in greater detail in Chapter 8).

Take time to investigate the features that you think authors using your theme will want. Think about the types of design to which they're likely to be drawn. And, as much as possible, support such brainstorming with research; for instance, ask people you know who fit your target author profile what they'd want in a theme.

Planning Milestone

■ What can you reasonably expect your theme's publishers to know about running a website?

■ Are you planning on including features that might be beyond the reach of the average author?

Planning for Organization and Hierarchy

At this point in the planning process, you should have a fairly good idea of the content your theme will excel at delivering, as well as the design and features that best complement the content. You've also spent time thinking about how to ideally serve the theme's audience and its users. Finally, you've researched the themes, plugins, and scripts currently on the market to refine those design ideas into a more unified vision, preferably with a well-defined feature list.

What this information amounts to is a feature set that will distinguish your theme from any other. Now it's time to figure out how to turn that feature set into an organized wireframe for the design process.

Let's start by laying out a few basic principles of a usable WordPress theme. Regardless of your archetype, these content guidelines will be relevant. Your content should adhere to these principles:

Easy to navigate

Whether your theme is intended for sprawling, multi-author blogs or small, five-page business sites, the core content has to be easy to find and navigate. Visitors should be able to readily understand how to navigate the site within seconds of arriving. The content on each page should have a clear visual hierarchy, and the site's pages should be linked in a logical organizational structure.

Easy to engage with

Carefully consider which interactive features you want to include, such as comments, social media share links, and anything else that helps visitors engage with the site's content.

Easy to organize

Plan for the effective use and display of categories, tags, and search functionality. Visitors should be able to find a particular blog post or page in your theme without having to resort to Google.

Organization is all about how you're going to slice and dice the content. In this phase of the planning, you should return to the breakdown of a WordPress theme's components that we saw in the section called "What do you start with?" and decide how you want to put those pieces together to form a functional site theme. In order to do that, you'll want to start drawing a sitemap that shows how the various pages connect, and wireframes showing what content is presented on each of these pages. Throughout this process, keep the three principles of organization front and center in your mind, and use them (along with your theme's mission statement) to guide you with any decisions.

The Theme Sitemap and Wireframe

Creating sitemaps and wireframes for WordPress themes is a little different from designing them for a standard website because, in a WordPress theme, the final content is unknown. It's impossible to anticipate how many pages, subpages, or blog posts will need to be accommodated, and you'll be unable to plan for the exact content on specific pages or in particular regions of the page. However, you still have to draw out your theme's core content structure and plan ahead for where individual pieces of content will show up on each page. These two tasks are the domain of the sitemap and the wireframe, respectively.

The Sitemap

Most WordPress sitemaps look quite similar, but how you organize the content is what will be unique to your theme. Evidently, you should plan for the variation that individual publishers will bring to your theme. Remember that they'll be able to add any number of posts in any number of categories, not to mention any number of pages and subpages.

Some of the questions you'll need to consider are:

■ Will you have blog posts on the home page? Will blog posts be presented in full, with excerpts, or only as a list of titles?

■ How will users navigate from the front page to each page or blog post? How will they move between posts?

■ Are there any custom features on your list that need to be included in the sitemap? For instance, you might require both a featured post spot as well as a custom category loop on the home page. If a feature affects the way that content is organized, make note of it on the sitemap.

A sitemap is also a great place to start recording which custom page templates you want to include. Some examples might be a custom image-gallery page template, a full-width template (with no sidebar), or another form of specialized content layout.

There is a nearly limitless number of ways that you can approach your theme's sitemap, but let's take a peek at two examples for the sake of highlighting differences, in Figure 2.5 and Figure 2.6.

Generic Page 1 ^^B Generic Page 2 ^^H Image Gallery Page ^^H Services Page Template ^^H Contact Page Template

Full Blog Archives

Home Page

Recent Blog Posts Blog Posts by Category Blog Posts by Tag Blog Posts by Date Blog Posts by Author

Figure 2.5. An example WordPress sitemap

Figure 2.6. An alternative sitemap

In these two sitemap examples, notice how users arrive at the blog content differently. In the sitemap shown in Figure 2.5, the home page serves as a hub for all the blog content. Conversely, in the sitemap in Figure 2.6, all the blog content is tucked away in a blog section, which is reached by clicking a link on the home page. What you do with your own sitemap will ultimately depend on how you want to guide users through your theme.

The Wireframe

When building wireframes for a WordPress theme, you need to sketch out the sections of the layout that are reserved for particular kinds of content. This will directly influence the first step in your design phase, so be as accurate as possible. You can be as advanced as you want, but in my experience you need at least four wireframes worked out before you can begin designing, to be used for:

■ lists of posts (for example, archive pages, search results, or category or tag pages)

In each of these four core wireframes—shown in Figure 2.7 through to Figure 2.10—take note that the core layout barely changes. Generally, the only aspect changing from one wireframe to the next is the structure of the content inside the main column.

The Header

The Navigation Menu

The Feature Box (optional)

Sidebar Widget Sidebar Widget

A Blog Post

A Blog Post

Was this article helpful?

0 0
Authority Blog Success

Authority Blog Success

Blogs With an Authoritative Voice Attract a Loyal Audience. There are Lots of Rambling Blogs on the Web Today, but Blogging as an Authority on a Particular Subject is the Best Strategy for Generating a Perpetual Income. Blogging as an Expert on Your Subject is the Key to Blogging Success.

Get My Free Ebook

Post a comment