Papermashup

Subscribe


Tweets


"RT @MagnificHQ: Dude miraculously saves his #drone from crashing into ocean in weird futuristic Baywatch scene http://t.co/FspY4TKES5 http:…"

@ashleyford 1 day ago

"Thanks @KBedders @bethgordon @twitteruk for #BrandingMe! http://t.co/NNA2ke8NHc"

@ashleyford 2 days ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

A Guide to Wireframing

AshleyAshley

Planning a project thoroughly is often more important than the design, app or site. If a project is badly planned and organised then your heading for a disaster.

Wireframing is usually one of the first steps to really mapping out your user flows, and is a place where all the ideas can be brought together to build a better picture of what the final project will be like. Its important to understand the purpose of a wireframe and communicate this to either your client or colleagues.

You wouldn’t build a house without an architect and plans. So why build a site without a wireframe and planning?

wire

Project Scope

As a designer and developer who often works on personal projects in my spare time all be it limited its hard sometimes to skip the planning stage and rush straight into building something, a wireframe helps to give you project scope. It’s a flexible layout that you can easily make changes to.

Who needs to see it?

As you’d expect, a wireframe is important from a design perspective. So any designer that’s brought into a project can easily get straight up to speed understanding each element in a simplified way. But it doesn’t stop there. from a developer or architects perspective, wireframes are key for mapping out processes and getting to grips with any complex interactions.

Save money

Wireframes can help to uncover any underlying problems at an early stage in a project. Its far more cost effective to make tweeks to a wireframe than a site design or worst still site architectural changes which could also impact on site design.

Simplicity is key

You’r wireframe is in no way a basic site design. Don’t be tempted to over design your wireframe, keep it clean and simple. If anything it should help from a user interface perspective, don’t overcomplicate it with notes about AJAX elements, this can come at a later stage. If for example your wireframing a contact page that requires just three text fields and a button then thats all you need to include in your wireframe.

Don’t cut corners

Its often easy to want to skip simple pages like legal or contact pages, pages that are not regarded as high traffic. Don’t do it. wireframe each page, it’s so important to build up a complete structure of your project.

wire1

Select the right tools

When setting out its much easier to grab a sheet of paper and a pen and scribble some boxes and buttons down than dive straight into a more structured computer approach. A tool I like to use to build wireframes is Balsamiq an Adobe air application for both Max and PC that has a set of almost pre-defined stencils that you can manipulate, it even has an array of iphone development tools. If you don’t want to invest in specific software like Microsoft Viseo you can always use Adobe Illustrator, Photoshop or even Powerpoint.

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 20
  • brinda
    Posted on

    brinda brinda

    Reply Author

    In case you want link to mockuptiger here it is wireframe


  • brinda
    Posted on

    brinda brinda

    Reply Author

    MockupTiger is a good html5 wireframe, you can host it on your domain, desktop, switch between hand drawn look, change fonts and prototype dashboard mockups with data


  • brian mcdermott
    Posted on

    brian mcdermott brian mcdermott

    Reply Author

    Wow, great post guys!

    As a newbie to web design, and with a few new web projects on the horizon, this article alleviates a lot of the anxiety I was having about “where do I start?”

    I wonder though, 1) is it necessary to wireframe every single page that will exist throughout the site? — and 2) do you present a few various wireframe options to illustrate possible layouts—along with all subsequent wireframe pages? OR would you present, say, 2 or 3 home page wireframe layouts to the client, and then based on their feedback, flesh out the remaining wireframe pages of the chosen direction? I hope this makes sense.

    Thanks!


  • Dan
    Posted on

    Dan Dan

    Reply Author

    I love the pen and paper suggestion. It’s so tempting to simply open up a browser, or photoshop, and go to work, but I’ve found that stepping away from the laptop can offer new design perspectives.


  • George
    Posted on

    George George

    Reply Author

    Nice post. I completely agree – #2 pencil first, then once the underlying structure and some sense of the navigation is drawn out – move to a functional mockup system. The one that I’ve really fallen in love with is FlairBuilder – which just keeps getting better (and even imports Balsamiq files!).. Mockingbird looks very interesting as well.
    The whole process really helps solidifying the navigation, content needs at each stage, and the overall look and feel – prior to really writing a lot of code.

    One thing that would make the system complete is a way to move directly from functional mockup to a CMS… maybe the folks at Joomla or Drupal could figure this transition out.


  • Kevin Mist
    Posted on

    Kevin Mist Kevin Mist

    Reply Author

    I have never had much luck with the computer versions of the wireframe. I guess I am an old guy (relative to this business) but I still like using the number 2 pencil on a piece of notepaper for mine. I typically do each unique page although I will admit to having skipped this (and regretted it later)

    Nice post. Keep up the good work

    K


  • John Rockefeller
    Posted on

    John Rockefeller John Rockefeller

    Reply Author

    Wireframing makes a lot of sense on large-scale projects. But if you’re coding something small, it’s typically better to do it Agile. BTW: There is a grammar mistake in this article. The “your” in the first paragraph should be “you’re.”


  • Andre
    Posted on

    Andre Andre

    Reply Author

    Another wireframing tool I find very useful (used it on my last project) is http://gomockingbird.com/ . No flash required, pretty nifty.


  • Matt Zillhardt
    Posted on

    Matt Zillhardt Matt Zillhardt

    Reply Author

    Excellent article. Its nice to see a clear defined reason behind wireframing that you can easily communicate with management. Most of the time management / clients want to see something right away and don’t understand the necessity of wireframes.


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Matt, thanks. that’s exactly what i wanted to communicate 😉


  • Samoo
    Posted on

    Samoo Samoo

    Reply Author

    Nice article!
    Maybe some visual reference of wireframing examples will be useful: e.g. http://www.flickr.com/photos/tags/wireframe/


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Samoo, yeah thanks for the link: looks perfect!


  • Gjergji Kokushta
    Posted on

    Gjergji Kokushta Gjergji Kokushta

    Reply Author

    Nice article! Usually I just sketch the main page and any page with specific features but it seems it’s good thing to go and wire frame each pages. It gives you heads up of what you need to do and plan all you got to do. A few days ago I was introduced to http://cacoo.com/ – Create diagrams online Real time collaboration.

    Cacoo is a user friendly online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts.
    Cacoo can be used free of charge.


  • Learn Web Code
    Posted on

    Learn Web Code Learn Web Code

    Reply Author

    Great post. I earn my keep as more of a coder, less as a designer. But the last few times I’ve designed a site, I told myself “this needs to be the last time you do this without turning to a paper/pen wireframing session first.” I especially liked the bit about even wireframing simple contact pages, etc… Wireframing is now my 2010 afterthought resolution.


  • Gjergji Kokushta
    Posted on

    Gjergji Kokushta Gjergji Kokushta

    Reply Author

    Nice article. I usually go and sketch the main page but I never thought to go through each page. Thanks for the advice. I also recently was introduced to http://cacoo.com/ – free online tool for site maps, wire frames, network charts.


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Gjergji, thanks for sharing that site, looks great!