Best-practice discussion: How do you wireframe?

November 7th, 2008 by Jerome Dahdah

Hi everyone! I’m just going to throw a question at you and hope this can turn into a good discussion that everyone will benefit from. Of course, this isn’t entirely altruistic: I myself am looking for some suggestions that will help with designing a complex CMS.

How do you go about wireframing a design beforehand?

Which apps do you use? What methods do you apply? Pencil on paper? Prototyping in Fireworks/Illustrator? Old-school table-cell copy&pasting in Dreamweaver? Or do you prefer to do a quick sketch and then jump right into Photoshop? Do you create complex work flow charts and study use-cases? Share your best practices!

Any good links you may have on the topic are appreciated as well.

15 Responses to “Best-practice discussion: How do you wireframe?”

  1. Rob says:

    I used to develop my wireframes in photoshop. Allegedly it is a lot easier. But this article really opened my eyes http://www.boxesandarrows.com/view/prototyping-with

  2. dan says:

    I think it really depends on the scope of the project and how many people are involved. If its just me doing the coding I’ll usually just sketch out a quick outline of how I want it to function and the type of functions I’ll need to write.

    That gives me a quick guide on where I am going.

    If you’re working with other developers and graphic designers then you’re best off writing some use cases with detailed product requirements. I will use photoshop and omnigraffle quite often to make both of those things.

  3. Olli says:

    Hi! For big projects I prefer Axure. It´s professional!
    http://www.axure.com

  4. Marble Host says:

    Hi

    Wire frame really provides the skeleton of the project.With the help of them we can increase the accuracy of the project. So it’s a tool which most recently should be used by designers and programmers.

    http://www.marblehost.com

  5. Joel Laumans says:

    Nowadays I am using InDesign a lot – because I am using Adobe products on a daily basis and makes my workflow a lot smoother. Otherwise I would use OmniGraffle which is also a great program.

    Other reasons InDesign is great:
    -because you can work with pages & masters
    -because it is also great with text, when handing off wireframes to designers or developers you might need to add quite a lot of text sometimes.

  6. bibo says:

    omnigraffle rules.

  7. André Rocha says:

    I prefer Axure too, its very simple to use!
    ;-)

  8. Alex says:

    Axure is very easy to use.

  9. Andy Polaine says:

    It always starts with pen and paper to rough out the quick ideas. It’s so much quicker to change stuff at this stage. Then I use OmniGraffle, which I still find to be one of the most well-design applications I have come across.

    In the past have also used pretty much everything – Illustration (annoying), InDesign (pretty good), Photoshop (too laborious mostly) and, shock horror, even Word once when I had no other option. The Word case was, naturally, a teeth-pulling exercise.

    You can set up Masters and templates in OmniGraffle too and there are some excellent stencils out there for various GUI elements.

  10. Jerry says:

    Thank you everyone for your comments, these are very good suggestions. Keep ‘em coming!

  11. Profit Explorers says:

    My wife does everything in pencil and paper first then when she likes what she has she jumps onto photoshop to work out all the details.

  12. Graphic Design Conferences says:

    Axure is the best way to go about it in my opinion.

  13. Andrea says:

    A lot of our customers start some ideas down on pen and paper first, but then create their wireframes within ProtoShare. The beauty about this is that they can keep the wireframes to simple gray boxes or get more elaborate and create a full-on prototype. Whenever you are ready to share the the wireframe or prototype with team members or clients, just invite them into your project and they can click through and leave comments as they go.

    If collaborative prototyping might be a good fit for your work, we offer a free 30-day trial. Feel free to contact me with questions.

    Andrea

  14. Tim says:

    Andy has the right idea. For most projects: notecards, sketch, then detailed wireframe/spec. I have been a past proponent of InDesign. However, the fact that InDesign has no unit of pixel measurement can be very frustrating when trying to communicate pixel dimensions in layouts. I find Omnigraffle to be much faster and more accurate, especially when accompanied by one or two “high fidelity” Photoshop mocks. InDesign is a print tool, Omnigraffle was designed to diagram.

  15. Susan says:

    I ♥ HotGloo for wireframing