Guide for Theme Designers: Wireframes

“Consider the postage stamp: its usefulness consists in the ability to stick to one thing till it gets there.” Josh Billings

Premium theme designers find themselves in a rather unique position. They have the hope of getting paid for their work, without the restrictions of adhering to a demanding client who treats you like they’re the expert. It’s not all rosy, but it’s pretty cool nonetheless.

But, you can get lazy, and evidently some are.

When creating any web design, there is a certain amount of preparation that should go in at the development stage.

Sometimes, a bit like the postage stamp, the profitability of going through the early stages of development in the proper manner, goes unrecognised.

I’m going to look at a critical part of that with you, and show you its value.

1. The Purpose of Wireframes

You see, when you design for a client, they tend to want to follow you through the various stages of the design, and as such, after the initial discussion of ideas, requirements, target market, etc, you begin by fleshing out the bare-bone structure of the layout.

These bare-bone layout structures are called Wireframes.

If you start your designing based upon an image you found that you think would look cool, you become restricted. Images tend to command a certain perspective, and they will be telling you where they should go in the design. The result is, you have to design the other elements around the image.

Not good!

The purpose of wireframes is to give you freedom by removing prejudice, and allowing you to place the primary elements of the design, not merely where they look good, but where they will be most effective (dependent upon the analysis of the needs and requirements of the project).

Every design project should have goals. In web design, you’re answering questions like;

• What’s the most important element of the website? (i.e. Articles)
• Where do I want visitors to go? (i.e. Order form)
• What do I want visitors to do? (i.e. Subscribe)

Although premium theme designers have no specific client in mind, using the feedback from previous buyers, and the desires of users in the support forums, they should be able to develop a direction for their next theme based upon the needs of their users.

2. The Use of Wireframes

The first thing a theme designer must do, is break the design down into the key elements;

• Logo
• Primary navigation
• Subscription area
• Body content
• Sidebar/s
• Footer

At times, depending on the needs, there will be other key elements which you know you have to include somewhere; like a featured article section, or video box. These can be key elements too, and it’s wise to consider their placement in the early stages.

With these elements in mind, you draw (I recommend pencil and paper as it’s ‘freer’, but you can use Photoshop too) each one as a block; a wireframe.

Experimentation is key. What you’re really doing is testing for the most effective size and position for each key element, always with the goals of the site in mind.

Give every element an importance factor, and use positioning and size to create the intended impression. But remember, keep experimenting until you’ve found the most effective solution.

3. The Benefits of Wireframes

Designers who don’t brother to use wireframes, tend to end up using one anyway. The thing is, their wireframe takes hours of work.

What do I mean?

If your design stage begins in Photoshop by placing images and text on a blank canvas, you’ll almost certainly end up either a) starting all over again from scratch, or b) duplicating the canvas, and then moving what you’ve done around the canvas trying to make your elements ‘fit’.

The first design ends up being a wireframe that isn’t quite right. Only, precious time has been needlessly wasted!

Proper use of wireframes removes the frustration of discovering that your design isn’t working out, and helps you to move efficiently through each stage of the process.

Looking at some of the premium themes that are on offer, it’s clear that wireframes were never used (at least not properly).

The themes are all about the features, rather than a design that has been executed in order to achieve particular goals.

Theme designers…use wireframes. They are fast, productive, and the little effort will show in the final product.

What has been your experience with wireframes?

Get future updates sent to you for free! Join by email or RSS.