Pencil Project review: Website prototyping tool

Most webmasters don't take the time to plan their website and diagram all their pages. A wireframe or prototype tool is essential for getting your designs right the first time.

Many new webmasters don't know where to start when it comes to mapping out their content and design for their first website.

Most just know they want to make a lot of money and get a lot of traffic.

Other webmasters will also use free templates which is recommended to keep costs low but some pages require a better layout of the content and better planning.

If you are paying a graphic designer to make your website, you don't want to waste their time and make too many revisions.

If you take the time to make a wireframe for your website you will have done more planning than 99% of the webmasters out there have.

Having a website prototype made first will prevent you from wasting money on designs and from having to fix a bigger problem in the future.

When you start creating page layouts you will also find you need to define your sitemap.

It is important to know what content you want to have on each page and how all the pages are linked together.

If you want to read more about creating the right sitemap read our SEO article that discusses how you should implement this at the start.

Implementing SEO at the beginning

One design company Desigui.com that deals with many types of clients had this to say about planning and preparation:

There are two types of clients.

Those who know what they want and those who just want an amazing website.

Besides a comprehensive project specification which covers all technical and visual parts, some 'dream clients' have prepared wireframes and sketches that will help us to better understand their needs.

In that case, we will know exactly where each element should go and would not need to change the template many times. We pray for more of those clients.

Most graphic designers get their fair share of clients from hell and if you request too many revisions you will be left with a larger bill without your website finished.

What is a website wireframe?

It is basically a sketch or diagram of your website of how it should look. This wireframe is something you can give to your graphic designer before you get them to do any work.

The screenshot above shows one example of a website layout before it goes into production.

Your website wireframe should show where all your text, images and modules will go.

You can sketch this out on paper but you might run into scaling issues. This is where you can use a few website prototyping tools.

Although there are many prototype tools such as ProtoShare, GoMockingBird and Mockups (Balsamiq), we will focus on just one that is simple, free to use and available as a Firefox browser plugin or Windows download program: Pencil Project.

Pencil Project Prototyping Software

Pencil Project is a free open source GUI prototyping tool that lets users quickly build diagrams and website mockups.

The program can be downloaded for Windows computers or installed as a Firefox plugin.

With the program you can quickly create a page of any size and start adding images, shapes, text, links and headers.

Other elements you can add are lines, plain text, rich text, annotations like arrows, chat balloons.

You can also find basic web elements like pane, html text, hyperlinks, headings, bread crumbs and tablets.

For more advanced designs you can add in buttons, radio buttons, check boxes, drop down menus, list boxes, scale sliders and scroll bars.

Get Pencil Project

Visit their website at http://pencil.evolus.vn to download the firefox plugin or Windows download program.