Um, yes they are. But it’s not the actual wire frame that is important to the design process, it the act of wire framing and reviewing wire frames with the clients that is so vital to any web design project. Now, not all web design projects require a wire framing process, only the ones where users will interact with the design… so I guess pretty much all web sites – never mind.
Wire framing is truly beneficial to all parties involved with the project; the client, the user and the designer. The main reason is that it allows you to conceptualize your project’s purpose before all the visual distractions set in. It is also a really great tool for discovering or resolving user interaction problems before the visual elements are created.
Benefits for the Designer
Before you jump into the complicated world of a PSD file where tools, filter, layers and color palettes will surely distract you, pull out your sharpy and sketchbook. It is very difficult to flesh out ideas in Photoshop where there are to many things to grab your attention. A simple piece of paper and white board will allow you to focus on the design and flesh it out.
When staring at simple wiggly lines instead of multiple colors, drop shadows and gradients you will be able to examine the frame of the design. You will be able to focus and conceptualize how it will function, how each element reacts with other elements and how the design’s structure will actually be built. Often times I am puzzled as to how I might code up a design idea, but then when I draw out the wire frame I can easily see how HTML tags will be structured.
With a wire frame you can also quickly make adjustments and be able to immediately see the impact to the over product. A successful design, website or application must have a solid foundation to build upon, the structure needs to support the beauty of the site, even a really beautiful site will fail if the layout or usability is flawed. Wire frames strip away all the other design non-sense that you can get lost in and allow you to problem solve and refine the structure – developing a strong footing to build from.
Visualize the User Experience
Wire frames are essentially blueprints to your website, app or design. They layout elements from an aerial point of view so that you can examine them and quickly reposition them. The beauty of blueprints is that you can see size structural size relationships and user interactions very clearly and quickly. This allows you to see user problem areas and solve them before they even become problems later in the design process.
For example; when an architect is sketching out a layout of a small bathroom where there might be two entrance doors and a shower door he will be able to determine really fast which way all the doors must open in order to avoid a problem. This way, when the builder comes in to hand the door he never has to question the direction each door is opening (so long as he follows the plans).
Web wire frames accomplish the same thing. When you wire frame – or plan – the layout in simple lines from an “aerial” point of view you will be able to solve user problems before they occur. You will able to see traps that the user may run into and resolve them. After all, that is why it’s called “Information Architecture” to begin with.
Saves You Time and Sanity
If you don’t feel that these benefits are good enough for you to start wire framing your projects; why not do it to save time and hassle? You may feel like wire frames take a lot of time and reviewing them with clients is just a hassle, but, putting yourself through a long, frustrating revisions battle with the client in the middle of the project can be a very painful experience.
Wire frames are super easy to revise and clients won’t offend you in your image or color selections. You are less personally involved in the wire framing process because it is naturally a less personal process, so reviewing wire frames with client may sound like a hassle at first, but you’ll be pleasantly surprised at the genuine feedback you’ll receive from the clients in return – not to mention you won’t have nearly as many revisions to do later.
Benefits for the Client
Besides the obvious benefit of receiving a better, higher quality product from the designer, when the client is a part of the wire framing process they will also become a part of the design process. The client will be able to give or receive better feedback and also save time through the revision process.
Allows Them to Concentrate
By involving the client early on in the wire framing process, the client will be able to focus on the project and not get distracted or stuck on the visual elements of the design. The client will be able to see the layout easier and be able to conceptualize the user experience better when not focused on the “decoration” of the site.
They Will Provide Better Feedback
How many times have you reviewed mockups with a client only to receive feedback about the drop shadow distance, the corner radius of a button or the even the phrasing of the headline text? As a designer, you know those things are all easy to tweak, but what you are really looking for is feedback about the position of the sidebar or the alignment of the slideshow – real issues that will be harder to adjust once coded.
Feedback goes both ways too. When you client is focused on small visual issues it will be harder to focus their attention on important elements and give them better feedback on layout. Getting the client involved in the wire framing process will solve most of these issues. When the client only sees the layout of the wire frame they will be able to focus on important issues and resolve problems before they are to difficult to fix – and you will also be able to quickly make the revisions and changes.
Save Them the Hassle of Revisions
If you ask either party how they feel about a project after the third or fourth revision you’ll mostly receive grumbling, frustrated answers. The revision process can be a very painful process, mainly because your trying to solve to many problems all at once – some harder to fix once you’ve gone down the mockup road or even programming road.
Wire frames can solve all most every revision issue before you even get there. Why? Because you can solve big issues before the little ones demand the attention. It’s harder to fix a cracked foundation when the house is on it. A quick wire frame discussion can save the client a ton of time when reviewing mockups and make them feel warm and fuzzy about your process – especially if there is no revisions later on!
We can’t spend all this time talking about wire framing and not talk about a few tools of the wire framing trade. We designers love our tools. Personally, the best wire framing tools I have are my Moleskine notebook (gridded of course) and my vast collection of colored sharpies. Just a quick plug for colored sharpies – probably the best invention since the the personal computer. But if you’re not the sketching type, there are a lot of digital tools available, some free, but most are premium apps.
Now, to be transparent, I haven’t used a ton of wire framing tools (although I have heard great things about a lot of them) I will only recommend the ones that I use; Balsamiq and iPlotz.
Balsamiq offers a variety of products, their main one being ‘Mockups’ for $79. But it is well worth it if you are serious. It offers a huge library of visual elements from web to mobile templates and you or your team can iterate with them real time.
iPlotz is very a pretty simple and powerful tool to use. They offer a huge library of ‘snippets’ for you to work with and a large variety of sharing and printing options to choose from. They also offer different pricing plans from individual to team to the full desktop version. I personally like the monthly service option, that way I can use it when I need and cancel when I don’t.
Both tools are great and I highly recommend either of them. But if you have any great tools that you use on a regular basis, please feel free to leave a comment and spread the love.