Brian Cray ··· Home > Blog > Design > How wireframing makes your website designs better

How wireframing makes your website designs better

Wireframing in terms of website design means to create a basic "sketch" of your website's user interface. While many web designers jump straight from client meeting to Adobe Photoshop, or even to creating CSS and HTML prototypes, they are missing important opportunities in the website design process. Wireframing addresses extremely important issues in strategic design, client adoption, and user-centered design.

The value of wireframing comes down to a simple idea: Wireframing forces you to think about your user interface design decisions in terms of user needs first, instead of in terms of what looks good.

Ideal website design deliverables from start to finish

Stages of website design

Removing the wireframe from the website design process

Stages of website design without wireframing is bad

Without wireframing your website designs, you're vulnerable to these design pitfalls:

How to start wireframing

Starting to wireframe websites can range from something as simple as sketching layout ideas on a napkin to using more advanced wireframing software, such as OmniGraffle for OS X users or MS Visio for Windows users. Other options include graphing paper, which helps make straight and measured lines, or web-based options such as Mockingbird or Balsamiq Mockups.

The important thing is to focus on the strategic why while you sketch things out, and not on what shade of blue you'll use or what technology you'll use. Usually website designs that have been "wireframed" turn out simpler to design and easier to use.


Taking time to wireframe your website can save time and headaches further along in the website design process for both you and your clients. On your next website, put a wireframe in front of your client and work together on strategic design decisions before jumping in front of Photoshop. You may be happy with the results.