Posted by Dan Eastwell
Here's a short presentation on User Centered Design with examples of user experience and information architecture I've worked on.
It's not definitive, but reflects the process I've used in the past - hopefully it might be of some use!
Posted by Dan Eastwell
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)
