Creating a Wireframe for Web Design

Posted on Apr 3, 2011 by Joey to Web Design

Before hiring a web designer, it is important to have a structure in mind. Who are you going to target? What type of feel do you want your site to have? What type of features do you want? And, most importantly, what is the purpose of your site? Taking the time to create a web wireframe can help you not only choose the best designer, but get the end product you envision.

A wireframe is like a blueprint for your website. It lays out the page’s content and functionality without getting into design details. Those will come later. The benefit of creating a web wireframe is that you can get a sense of the page’s purpose and troubleshoot any potential problems. Seeing the page through this lens can help you identify weak points and make sure the site is functional. It also keeps the web designer from having to go back and make changes (which ends up saving you money as well). How do you start?

First, have a very good idea of what you need, a sitemap, and either Adobe Photoshop or an online program like Mock Flow, which helps you develop wireframes. Take a look at other sites that offer similar products or services and get a sense of their design layouts. With Mock Flow, for instance, you can quickly create your visual concept without having to draw or code. The SiteMap visualizer allows you to analyze your site so you can get a complete view of it before hiring a designer.

The benefit of taking this extra step is that you can streamline the design process and reduce confusion or missteps between you and the designer.

Tags: web design, wireframes

The Importance of Wireframing

Posted on Feb 7, 2007 by Jonathan to General

A wireframe is just that, a framework for a website – made of wire. Basically, a wireframe is a visualization tool for presenting the content of a web page. Back in the 1800′s Webwranglers used wire to do this but since the invention of the computer that technique has dried up – somehow the name has not. The best tool to create a wireframe is adobe illustrator, Indesign or anything that allows you to draw boxes, set type, and move items easily.

Wireframes are effective because they:

- Require minimal time to plan content placement.
- Make changes to the sites content painless.
- Focus on how a site actually works without distractions caused by colors, photography, or design.

Wireframes make the production of a site more efficient but the most significant advantage by far is their ability to present a page devoid of all distractions. For whatever reason colors, imagery and even words tend to take over a persons emotional side, which then causes them to overlook the more analytical aspects of development. Imagine presenting a comp with an 800 x 300 pixel enlarged bikini model in the header, do you think anyones going to consider what items are most important to include in the footer? I dont think so.

So strip it down to black and white use greek text instead of real words, and get that wireframe signed off on so the designers can get to work.

Tags: wireframes