I have come to buy into wire-framing as an essential part of an effective web development workflow. There are many techniques and approaches for crafting strong wireframes, I don’t think there is necessarily a single right way to do it, but I have found that good wireframes accomplished the following: Speed development, organize information, provide a foundation for design, and provide a check-in for clients and team members.
When making my wireframes I do my best to follow some good habits:
- Avoid Color – The only color I typically use is for logos, other colors can be a distraction and divert focus from content.
- Use as little filler text as possible – The first draft may have quite a bit of Latin, but by the third I push hard for representative content.
- Apply your grid – My preference is simply for a 960/1140 pixel layout, using an equally spaced PSD grid to keep things neat, but if you use a more defined columnar system apply it at this stage.
- Keep layers grouped, labeled and organized – I use Adobe Photoshop almost exclusively, but there are a vast number of valid tools. Whatever you use, keep it well organized and consistent.
- Keep it Simple – Layout, organization and design feel are going to change dramatically in the design phase. Keep things very simple and blocky for now – wireframes are just clay, avoid the temptation to start sculpting.
- Educate Clients & Team Members – It’s very easy to misunderstand what a wire frame is and what it isn’t, taking great pains to explain that looks should be disregarded in favor of content is often crucial.
- Wireframe Selectively – Wireframing an entire site is rarely a judicious use of time. Start with the home page, often add a base content draft, and choose other important and unique pages as needed.
- Reference CMS frameworks, modules or plugins – Don’t build a wireframe for an existing system without first doing your homework! Use existing frameworks to achieve an understanding of what is ready out-of-the-box, what is attainable, and what is off limits.