Three Monkeys Typing

A million of them may be able to compose Shakespeare, but these three mostly know about websites.

5 Reasons to Use a Website Wireframe

Kelli Mensen, Account Manager

A website wireframe is a skeleton of what will be included on a website. It outlines the content, the organization and any functionality that will be needed. At Production Monkeys, a wireframe is an integral step for each of the websites we develop. While there are many reasons to use a wireframe, these are our top 5:

1. It gets everyone on the same page, early in the process
While a wireframe isn’t the prettiest stage of website development, it serves an important role. It’s the arena for everyone – client, designer, and programmer – to get aligned with what the website will have on it and how it will work. Before a page is designed or the HTML is written iss the best time to have the tough conversations about any limits of technology or user interface. A wireframe helps ensure there will be no surprises once the site is built.

2. It saves time (and money) for website designers
Without a wireframe, if your designer is lucky, they’ll receive a list of what to include on the homepage. Consider how much homepage design is impacted by copy – 2 sentences are handled much differently than 2 paragraphs.  Functionality is also important for a designer to understand while designing. Having the details ironed out means you’re less likely to have to redesign a page.

3. Your programmer will love you
With the site design and wireframe in hand, a programmer knows not only how the site should look but also what kind of functionality needs to be built into the site. Understanding the functionality requirements for visitors and administrators before the site is built makes the task much more efficient.

4.  Your site won’t have empty pages of content when it launches
While having a wireframe isn’t a guarantee your site will have content where it needs it; a wireframe identifies missing content upfront, so that there’s no last minute scurrying to dig up missing information.

5.  There are lots of great software options available.
Wireframe software makes the development of a wireframe easier. Balsamiq and Jumpchart are two, of many, that are worth checking out. Both allow for collaborative development and Jumpchart even allows exporting content in a WordPress format for any WordPress users. If you’re not building wireframes regularly and a free option is more appealing you can use software you’ve probably already got or even just a notebook and a pencil. The point is to get it documented, it doesn’t matter how pretty it looks.

Make sure your next website project starts with a wireframe. It’s easy and free to make major changes to a wireframe; to make them to a nearly finished website is expensive.