How I Wireframe


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.

This entry was posted in The Website Design Process.