Guide to website wireframes and examples


Desktop Wireframe for a website

A website wireframe is an essential resource you should create as one of the first ports of call during the information architecture stage of building a website.  A wireframe is a document one would utilise to layout the content and functional screen elements of a website and is also an essential resource to be used when designing the mockup(s) for the look and feel.  You can also use a wireframe to create a rapid prototype, which can be created in my favourite graphics and UI design tool, Adobe Fireworks.

I am currently working on a project to redesign a company website and also to create a mobile and tablet version of the said site.  I plan to code this up using the responsive web design methodology, but before you pick up your favourite design tool or HTML text editor, in the authors humble opinion, you MUST create wireframe(s) before jumping in to the design or coding steps.

How a wireframe can help your web design project

Creating wireframes at the initial stage of the project i.e. before the design and coding stages, helps you exponentially with the other stages and will also allow your client to see how his/her website will look at the initial stage of the project.  They can chop and change to their hearts content at this stage and sign off when they are happy with the layout.  It’s much, much easier to change things around at this stage of the website design project, than at the design mockup or coding stage – trust me, I’ve been there and it can be a painful place to be!

Example wireframes

Anyway, I plan to create a screencast in the near future which will detail how to create a website wireframe, but for now I will showcase two examples I have recently completed for both [<div id="attachment_547" style="width: 195px" class="wp-caption alignright">

Desktop Wireframe for a website

</div>

A website wireframe is an essential resource you should create as one of the first ports of call during the information architecture stage of building a website.  A wireframe is a document one would utilise to layout the content and functional screen elements of a website and is also an essential resource to be used when designing the mockup(s) for the look and feel.  You can also use a wireframe to create a rapid prototype, which can be created in my favourite graphics and UI design tool, Adobe Fireworks.

I am currently working on a project to redesign a company website and also to create a mobile and tablet version of the said site.  I plan to code this up using the responsive web design methodology, but before you pick up your favourite design tool or HTML text editor, in the authors humble opinion, you MUST create wireframe(s) before jumping in to the design or coding steps.

How a wireframe can help your web design project

Creating wireframes at the initial stage of the project i.e. before the design and coding stages, helps you exponentially with the other stages and will also allow your client to see how his/her website will look at the initial stage of the project.  They can chop and change to their hearts content at this stage and sign off when they are happy with the layout.  It’s much, much easier to change things around at this stage of the website design project, than at the design mockup or coding stage – trust me, I’ve been there and it can be a painful place to be!

Example wireframes

Anyway, I plan to create a screencast in the near future which will detail how to create a website wireframe, but for now I will showcase two examples I have recently completed for both](http://johnaspinall.co.uk/wp-content/uploads/2011/06/desktop-wireframe.gif “Desktop wireframe example”) and mobile wireframe layouts for a project I am currently working on.

Wireframe tools

The best tool you have at your disposal to create a wireframe is your brain, a pencil and a piece of paper! I always initially sketch the wireframe on a piece of paper and the then use that as a guide to create a digital version which can be used to share the concept with the stakeholders in the project.

You can use a multitude of tools to create your digital wireframes. You can use any software tool that can draw boxes, arrows, lines and text, etc. I created the wireframes you see above with a fantastic wireframing tool called Balsamiq Mockups, check out the free 7 day fully functional trial.   Another tool I use to create wireframes is Adobe Fireworks, although as I said earlier, you can use any tool which creates text and boxes, such as Dreamweaver, Visio, Gimp, Mockingbird and even Microsoft Word is able to create crude wireframes!

I would recommend you try Balsamiq Mockups as it is hands down the best wireframe software tool I’ve come across in my UI design journey!

Contact Me