The Thought Balloon

What is a Wireframe?

Posted by Dan Eastwell Sat, 10 May 2008 12:00:00 GMT

James: question for you

what is a wireframe?

Me: well, there, good question

a wireframe is essentially a prototype

it can take many forms

I will provide you with examples

sent at 2:55 pm on wednesday

A set of blueprints for a website made in excel will do for a wireframe

as will something jazzy like this prototype http://test2.danieleastwell.co.uk/scholastic/index.html

you will note the grey areas for unknown content etc and the fact it is mostly static.

however, you could do exactly the same thing with just layout css, rather than anything better

or you could do it all on paper

sent at 3:00 pm on wednesday

James: ah I see

so its a static html version of a dynamic site

Me: not necessarily

it could have no styling

or not be in html

James: so its quite a vague term then

Me: yeah, just like 'prototype'

it could be a set of visio or excel files

I like to prototype in html and css as I find it easy, but I find that I also need some design styleguides

the draw back to doing it that way is you get stuck in the 'how' and don't concentrate on the 'what it does'

I prefer paper.

it's a lot quicker and you don't mind making revisions

James: yeah I tend to plan stuff on paper

Me: you can also scan drawings in and plop them in html if you just need to change something on only one bit

sent at 3:06 pm on wednesday

Me: here's an example of a paper prototype

http://www.youtube.com/watch?v=ppnRQD06ggY

actually, here's a much much better one.

http://www.youtube.com/watch?v=c4-A-9hGn0U

that's genius. you can tell exaclty what the application is going to do, without having to have it built

you could say they used simple video editing instead of html to wireframe it

I suppose also, though that that's a prototype - a wireframe is more formal and static and has details of what each part of the page contains and does

although some people call that a 'functional spec'

sent at 3:10 pm on wednesday

James: its some dude wandering around an office

ah I see

Me: are you watching the second one?

the 'ciao'?

you really get a feel for what the app will do.

James: yes

yeah pretty clever

Me: also, very simple. saves a lot of time in app development to get your protoypes right.

and in a very skewed way that vid is a 'wireframe' as it tells you 'what it does'

(not 'how it works' or 'what it will look like')

sent at 3:14 pm on wednesday

Me: I might put this chat on my blog. seems like a fairly useful bit of an introduction...

(to wireframing)