I’ll assume that whoever is reading this does wireframing when designing a new Website So we don’t need to go into the pros and cons of Website Wireframing!
What I’d like to know is - How do you wireframe?
There’s a multitude of options you can go with:
Pencil & Paper Sketches
Microsoft Visio
Microsoft Expression SketchFlow
Axure RP Pro
Omnigraffle
Balsamiq Mockups
HTML & CSS Wireframing
…And Many More!
And whatever way you do your wireframing - Why do you do it that way?
I personally like to do a very very quick sketch up on paper just for a few rough ideas on a few sheets of paper. Move some things around quickly and easily. After I have a rough wireframe on paper I’ll then either use (depending on my mood) HTML & CSS to wireframe it directly as a Web page or I’ll currently use Gliffy but when I’ve got some money I’d like to buy a license for Axure RP Pro!
nothing beats the good old pencil and paper for now, I use balsamiq sometimes, but mostly I go straight to css wireframe, I’m still waiting for a proper tablet and apps, I’m sure they will change many things
Viso. Don’t mean to hijack your thread Andrew.
I know I can do web diagrams but how can I do wire diagrams with viso? Would that require a full install?
For me it all depends on the complexity of the website. For smaller websites there is really no need to do it, but for the bigger one it was always a combination of pen and people at the beginning and then move on the real big white board.
After that move on to mockups in photoshop.
from a moment when an idea comes to my mind a use good old trusted ballpen and a scrap of paper. when more time vailable- a whiteboard ( unfortunately hard to be taken outside). then I use labwireframe - a good web app that comes with a variety of exports and saves my time ( take it on the pendrive and off you go)
I’ve tried Axure and want to try OmniGraffle. I like to use the 960gs templates within Photoshop or Dreamweaver as well. I’m thinking using the prebuilt templates in Dreamweaver might be helpful also.
I start off with a pencil and paper for sketches (it’s pretty much my main source of concept work), I then move to a wireframe application like Pencil (the app that runs on gecko) simply to build up something with a few less rough edges and more backbone too it, then I build something more technical and detailed if it’s required using HTML and CSS (the focus is on visuals, not the markup there) before I move onto building the finished product. Though I would love Axure if it wasn’t so expensive.
Balsamiq Mockups is all I use for wireframes nowadays.
In the past I’ve used PowerPoint and Visio but it’s very hard to get the client to understand what’s happening (not to mention it’s ugly).
Also, mocking up the site in HTML is often a waste of time in my experience. By the time you get sign off to proceed to the real development phase, things have changed so much! + making small changes becomes harder as your html/css becomes more complex.
Recently, for the development of a new B2C portal, instead of doing the usual - send a BA to gather requirements then come up with (guess) a solution - I just took along my laptop and a projector… asked “so. what’s this site look like?” and over four 1hr meetings we mocked up everything in real time as they requested it. There has been minimal requirements documentation for this project - great success!
In summary, balsamiq is quick + easy to use and everyone I’ve used it with loves the mockups - they feel like they own them. The mockups even got taken to the executive level of the company - no need to have a designer try to beautify them.
From attending UIE conferences and listening to people like Jared Spool and Luke Wroblewski they recommend sketching out a rough draft of the layout first. I generally follow those guidelines to start. That way no harm, no foul and you really haven’t invested any time in the project at this point so the possibilities are still very open.
Depending on the experience level of my clients I may have to show sample sites with the concept I am talking about.
Once they are in agreement and we have a good foundation to start, I then use a pre-coded template from my html locker with the layout they want. (2 column, 3 column, liquid, fixed, header, footer, etc.)
I have learned over the years to have ample amounts of templates to start from. (I prefer starting them from scratch so I know how things are implemented and I know the layouts work across the board.)
This allows you to save a lot of production time and in essence, make more money.
From the general design and grabbing additional info from the specs (database integration, custom scripting, etc.) I move on from there.
So we don’t need to go into the pros and cons of Website Wireframing!
)