What I Learned at Skool – Using Wireframes

How to Use Wireframes to Keep Your New Website On Track


For a small business owner, who is new to web publishing, the whole process of website design and development can seem rather confusing and frustrating.

In part this is because they are diving head first into a technical field that is unfamiliar to them but also because too often the web designer they are working with hasn’t taken the time to educate them on how the site building process works.

A client who is uncertain about what a developer is working on and who is worried about project costs will often micro-manage in an attempt to “get a handle on” of what they perceive to be an out-of-control situation.

This is why I have often found that using a website wireframes as a quick and easy “teaching tool” is a great way to show the client the entire project, page by page.

When you tell them, you are going to create a “contact us” page, a wireframe allows they to see it and understand BEFORE you begin. This in turn helps eliminates a lot of problems in the long term.

A wireframe is basically a visual aid or mockup, which is meant to help both the web developer and the client “see” how a particular web page will function and what web content and links need to be on it.

Definition: “A wireframe is a visual illustration of one Web page. It’s simply meant to illustrate the features, content and links that need to appear on a page so that your design team can mock up a visual interface and your programmers understand the page features and how they are supposed to work.”

By sitting down and sketching out the basic page layouts, features and notes for content, a client will quickly get an idea of what the whole project entails, as well as better timeframe.

Not to mention, a detailed wireframe assures the developer that they are on the right track and that they aren’t missing any critical elements, their clients might have forgotten to include in a verbal conversation.

The easiest wireframe is a hand-drawn sketch. For most small websites of 1-5 pages, a simple wireframe can be created using an ink pen and a couple sheet of paper (the original iPad).

I also use Microsoft Word’s drawing tools if I want to make my “line” wireframe slightly better looking. I seldom have had to create a wireframe more complex than this.

But for big, old-hairy website or one with a in-house marketing staff, you probably should use wireframe software. With software you will be able to create diagrams that are easy to fix, adjust and share via email with clients and their staff.

I downloaded and installed a Firefox Add-on called “Pencil Project”. It was a bit confusing at first, but since it is a free open-source application, that is to be expected.

But it works like a charm and should be a great edition to any web developer’s toolbox.

Another one I checked out was Lumzy which is a free online wireframe tool. It was very easy to use and all you have to do to use is click to enter.

Now you do have to register to save, but you can easily grab a screenshot of a page if you need to do something quick and dirty in a client’s office.

Previous Post

What I Learned at Skool – CSS Floats – “Slip Sliding Away…”

Next Post

Open Letter to Congress About SOPA