An Introduction to Wireframes

Initially this post should have been titled: “An Introduction to WordPress Themes”, but I felt like I had covered the basics of WP themes in my earlier post. So this is going to be an introduction to Wireframes.

Wireframes are basically the blue print of a website; it doesn’t contain any colour or design features. It is very handy to give yourself and a client an idea of how the final website is going to be. By agreeing on a layout early on in the process, you won’t have to deal with unhappy clients and unlimited revisions later on. Wireframes also allows you to give priority to the actual content, and where to place things like logo and navigation on the page without being distracted by colours.

Wireframes can be as simple as you want them, some people draw them up on paper and leave it there. Other people like me, do them in Photoshop or Fireworks. There are a few examples on flickr that can give you an idea of what it is. The way I do it is to make a list on paper where I write down every important item that should be on the website. Then I Take a mental note of what is the most important, this is mostly the main content, navigation etc. I make some notes about how I would like the layout to be, I usually take a tour around the web to find inspiration. I like to sketch it up on paper before making the final wireframe in Photoshop. I usually just draw very simple shapes and write the dimensions down. (Click to see large version.)

What I specifically did, was to look at the Web and New Media Blog and take a note of the main points. I counted the categories which had the most posts, I did this to figure out what the overall theme for the site was, although I did know this already… Always good to be sure 😉 – I then wanted to find some inspiration, which is why I started looking for other “collaborative blogs” about the web and technology in general. Some of which I liked were Lifehacker, TechCrunch and ReadWriteWeb.

The main challenge was to find a way to make the categories easy to navigate without having to scroll down to the bottom of the page. The nature of collaborative blogs is that they cover a wide range of topics and visitors should be able to find what they are looking for as easy as possible. Which is why I have cut the posts short and provided a ‘read more’ link, to quickly navigate the latest entries?

The other thing with WP Themes is that your creativity is somewhat limited. Because it is a theme it has to be generic in any sense. This means that you can’t just have an image instead of the masthead, it has to contain text as it has to fit nearly every possible blog title.The same is true for the widgets at the bottom, you have to make it as generic as possible, because you have no idea of what kind of content is going to be used.

The final Wireframe:
I’m not entirely happy with it yet, and might make some changes as I go along. I’m especially not happy with the bottom part, but I don’t know what to do about it yet. (Click to see the large version.)

/Kasper – on Twitter and Delicious

Advertisements

1 Comment »

  1. […] columns? Well, good question! Let me just give you a few examples: If you like me are designing a layout for a WordPress blog that has a LOT of categories, you might not want that list to go way off your page. Other blogs […]


{ RSS feed for comments on this post} · { TrackBack URI }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: