Web design using wireframes

Pencil wireframe plugin for FirefoxBefore getting onto the technical coding of a website, a much often overlooked process of the initial design phase is creating wireframes to mock up how each page might look.

Creating wireframes is a quick and easy way of working through the initial creative process by simply copying or dragging elements onto a page to see what works and what doesn’t. It can be very quick and much more intuitive to work this way and doesn’t end up stifling the creative process – something which the subsequent coding and browser testing of a website can very easily do!

If you can map out the various key elements of a website before getting down to the nitty gritty of developing it, then you have something you can present to the client without having invested too much time. And this preplanning can ultimately save time in the long run when you get down to coding the website.

I used to Go Mockingbird until they started charging for the privilege and have recently come across a fantastic Firefox plugin called Pencil that does the same job, if not better. And for free.

With this plugin, you can quickly drag on buttons, drop down menus, video paceholders, map placeholders and all the usual elements of a normal website. However, you can also copy/paste screen shots and images and lay them out on the wireframe too (something I could never do in Go Mockingbird).

So very quickly you can mock up a whole web page with minimum effort and maximum impact.

Check out Pencil if you use the Firefox web browser.

© 2019 Duncan Arrow Limited
  Website by duncanarrow.com