Wireframing for (hopefully) Better Websites
For people new to the web design game, the process can seem kind of overwhelming. After all, at various points when designing and developing a website, you need:
- aesthetic skills (to make things look good)
- information architecture skills (organizing the content in a way so that users can find what they need)
- interaction design skills (making sure that the paths within a website makes sense and are pleasurable for the user)
- technical skills (XHTML, CSS, knowing how to turn on a computer)
Many web design shops have pros who are experts in each of these areas. How can you, a smart but inexperienced person, compete with that? You're just trying to put together a little web site for yourself, your aunt the locally famous banjo player, or a volunteer organization...
divide et impera, or, Divide and Conquer
It is quite likely that you will go crazy if you attempt to figure out the page content at the same time you're trying to figure out whether the color scheme should be pink with purple or tan with brown. It is my opinion that the most amazing design sense cannot overcome bad planning, so, it is my recommendation that you focus on the stuff in the site first, then worry how it looks. Decide what stuff is going where, in roughly what order, and then you can experiment with graphics, colors and typography.
Wireframes to the rescue
Wireframes in the design world are very plain sketches or diagrams that show where the content, navigation, and buttons on a webpage go. Wireframes are usually in black and white, and use placeholders like
to represent images that will go onto the page later. To use an analogy, wireframes are to an Amish person what a finished website is to Lady Gaga.
The nice thing about doing wireframes as part of your planning process is:
- they're much easier to change and modify than an actual web page
- you don't have to invest any time on the technical side (figuring out how to make the XHTML and CSS work together to accomplish your vision)
So, what are some tools you can use to create wireframes?
Pen and Paper
If you have some artistic skills and are working on a site by yourself, hand-drawn sketches can be a great way to go. They get you away from the computer and can be fun to do; just grab pencil and paper.
A sketch by T. Scott Strandberg
Gliffy.com
A cross-platform, online-based tool, Gliffy is definitely not all-powerful, but it is pretty easy to use, free, and allows you to share your sketches with others. Running your ideas and sketches past other people is always a good idea, and its a lot easier to change aspects of your design at this phase than it is later on.
There are actually quite a few tools for wireframing, but the important thing is to wireframe first, then add the design bells and whistles later. You really don't have to learn a whole new tool just to do a wireframe.
Good luck!
November 7th, 2009 at 9:02 am
Good article – well, I guess this distinguishes real wizzes from “normal” webdesigners. I cannot state often enough that webdesign is more than clicking together a nice looking page in a wysiwyg editor. The in-depth knowledge need and the skills required to make a up-to-date page are very demanding. So either there’s a whole team behind a web project or a senior designer who knows what he has to deal with, starting from the design layout over the validitiy of the page, JS frameworks, CSS etc. Noone said, being a designer is an easy job