Web Design Methods: How Do You Wireframe?

I’ll assume that whoever is reading this does wireframing when designing a new Website :slight_smile: 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! :smiley:

Andrew Cooper

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?

From paper sketching to HTML prototyping. Get it right—don’t move on to HTML until all major changes are done—and it will save some time.

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.


first of all good morning ( i’m new in here)

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.

Nice one, Alex.

Writemaps is not a wireframe app per se, but it is useful in laying out the architecture of a site.

Just because it runs on Gecko doesn’t mean it requires Firefox:

There’s a standalone version - http://pencil.evolus.vn/en-US/Downloads/Application.aspx :slight_smile:

Alex, any similar add-ons for Chrome or Opera?

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. :slight_smile:

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.

(hmm… balsamiq should pay me for advertising! :stuck_out_tongue: )

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.

I have tried a lot of the programs you mentioned, Andrew, and I have found that Axure is the best for me (though it is the most expensive).

The main reasons I like it so much are:

  1. Ability to easily annotate wireframes
  2. Ability to easily generate a functional specs document, that includes all annotations and general notes.