Before you even think about cracking open a graphics program, save yourself a lot of headache and wasted time by roughing out a concept of the site or page you want to create. Articulating your concepts this way will give your project a basic visual form. As your idea begins to take shape, you’ll come to have a greater understanding of how a user will interact with it, how a person will see your site differently than you do, and how all pages match up together (or don’t) to create a cohesive experience for your users. Working through all of this before you start laying down pixels or code can avoid many hours wasted and keep your frustration levels low.
What exactly is a wire-frame?
A wire-frame is a visual description of page architecture, with implied functionality, completely devoid of aesthetic or interactivity. It is literally, the skeletal frame upon which you will hang a skin of color and style. A wire-frame is not a description of layout, it is not a process map, nor is it a document that defines visual style.
Five distinct and tangible benefits
You might be wondering why I’m advocating adding an extra step. Perhaps you get a project and simply sit down in front of the computer and start brainstorming in Photoshop or Illustrator. That’s fine, it’s what I did for many years, and it works fine. Still, as I look backwards at a string of personal and professional projects, I can honestly say that adding this step of process produces better results and does it much faster. I can pinpoint situations in every project where I went through a series of quick-turnaround wire-frames before hitting photoshop. In once case, the final deck of wire-frames was 50 pages that went through 12 iterations each – in one month. Can you imagine doing that in Photoshop? It would break even the most masochistic workaholic web geek.
- Smooth out errors in the process and flow of your project. Often times, I’ve found that even a rough articulation of a page or process will expose some kind of logical or usability challenge.
- Refine the concept before designing and developing it. A Photoshop file could contain hundreds of layers and styles, requiring complex interactions to make what appears to be a simple edit.
- Get agreement on what to build from project stakeholders. Even non-technical and non-creatives can view a wire-frame and understand what they’re looking at. Getting approval on a deck of wire-frames leaves no surprises for business owners.
- Reduce the design process to a question of pure aesthetics. If you’ve already got a page concepted, you’re not slowing down to ask yourself “OK what are all the elements that belong on this registration form?” … because you have already designed it.
- Easily communicate conceptual details about what is being built. Once completed, a wire-frame can be shared with anyone on the project, preserving and communicating important details. Any project manager or developer can grab the deck of wire-frames and page through to see a concept of what is being built.
Who should make a wire-frame?
The short answer is that anyone on the project can and should be encouraged to contribute at the conceptual level. In fact, a great idea is to kick off the project by having different participants create wire-frames on their own, and then come together to compare the results. You’ll see how everyone’s conceptualization is brings different ideas and value. The business leader, the architect, the UI expert, the designer and the developer will all naturally create a concept with a unique feel.
After doing this, it’s a good idea to hand the wire-frames off to a single owner who is responsible for their further development. Most people are consumers web content – especially those of us who make our living on from the web – and therefore can rough out an idea just fine. But this does not mean that you take a design-by-committee approach.
Can I see some examples?
Sure thing, below is an example image of Apple’s website broken down into its basic elements. Remember, a wire-frame can illustrate a single page architecture or many pages in a process. If possible, I like to create a wire-frame for every single page (and as many permutations of process as time allows).
Apple's Home Page
What do I use to make a wire-frame?
The list below is ranked by my preference. I admit to being heavily biased towards a simple tool that helps me make many fast iterations to a concept before any pixels are pushed or code is written.
- Balsamiq Mockups – it’s literally faster than sketching, and it’s really cheap. This is what I use for all my wire-frames. It’s one of the few innovative programs that has come out in the last five years – something that actually changed (improved) my workflow. Best of all, it’s an Air application.
- Pencil and Paper – Which is what I would use if Balsamiq did not exist. The biggest drawback is that some clients and business partners have a mental block that prevents them from accepting something that wasn’t spit out of a program.
- Adobe Illustrator – which is totally overkill for this, but if you’re familiar with the program you should be able to create some boxes and arrows in no time flat.
- Adobe InDesign – some people enjoy this route because of the third party templates and integration with the rest of Adobe CS.
- OmniGraffle – Simple and elegant and completely useful … available only for Mac. Boo!
- Protoshare – great if you need to share your wireframes online
- Sketchflow (MS Expression) – this looks really neat and integrated … and totally overkill. I haven’t tried it.
- Microsoft Visio – just kidding! I wouldn’t lead you astray like that.
- Axure – It reminds me of MS Word or Visio. I haven’t tried it.
A few tips for creating wire-frames
- Don’t add any gloss or style. It’s OK if some things don’t line up. I’ve found that if it looks too close to being done, some people may think it actually is. A rough look conveys the “work in progress” nature of a wire-frame.
- Don’t sweat the details. Is “Sign In” or “Log In” the most appropriate label for this button? Who cares! The button just makes the form go. Your team doesn’t need to hash out every detail at this stage.
- Work through a few iterations of your wire-frame(s), soliciting feedback between each revolution. You should end up with a basic, but refined concept of what you’re going to design and build.
- Don’t get attached to any particular concept or layout yet – it’s too early for that. In fact, it helps if you put off discussing specifics unless absolutely necessary.
Do more with your wireframes
Sometimes a flat sheet of paper can’t convey user process to a business user or interaction to a developer. When I read this tutorial on Abduzeedo about creating a deck of clickable PDFs, I immediately wondered why i wasn’t doing it yet. A mere month later and this has become the standard at work. The basic idea is to create a clickable PDF that very roughly simulates a user’s path through a task.
More Info About This Topic
- Download EightShapes Unify, for creating wire-frames in Adobe InDesign.
- Flickr group: I Love Wireframes
- Wireframes Magazine
- Using Wireframes to Streamline Your Development Process @ WebDesignerDepot
