A wireframe is a paper-and-pencil layout of what you want your site to be. It is an “information design” for the page (see oneextrapixel.com for the reference). As web designers we are first and foremost information architects, and our goal is maximum content absorption by the viewer.
The process involves making at least three or four sketches of the homepage, and as many of an inside page layout. These sketches include all the elements on a page – the boxes for branding, sidebars, navigation menus, footer, content, the widgets, etc. – while they do not yet focus on colors or fonts. That comes later.
There are several compelling reasons not to skip this initial part of the design process:
What could be cheaper than sketching your design 5, 10, 200 times with paper and pencil? This saves your client money. Having to redesign a comp or even an entire site is very costly, and it is more cost-effective for them to spend more money up front getting it right the first time. Be a good businessperson and do quality work from the beginning.
2. Clarifies the Vision.
You’re going to make mistakes and miss the mark many times before you get it right. Success comes from patience and the willingness to make mistakes. Being the type of person who wants it all to be perfect, right now, I can personally testify to the need to slow down and take the time to visualize the design. In the end I find myself pulling ideas from several sketches to put into one final version.
3. Communication Tool/Time-saver.
Good communication always saves time. Wireframing allows you to share your design ideas with the client on paper so you can get on the same page (no pun intended). This saves you the time of spending hours on the most beautiful comp you’ve ever made, that your client rejects. So, take the time, make the wireframe, step into the flow.
Great, so where do we begin? The good news is you don’t have to reinvent the wheel. There are tools out there that help you frame your wireframe (no pun intended, again). One of my favorites is the 960 grid system: http://960.gs/. This system uses subdivisions of 12, 16, and I believe even 24 equal columns to layout your page. They offer sketch sheets in the form of 4-per-page and one-per-page, allowing you to sketch several smaller versions before making one larger one. This is a very handy tool and I highly recommend it.