Guidelines, Tools and Resources For Web Wireframing

Today “Web” is very different from what it was few years ago. It is better, but far more challenging – you can no longer ignore things like usability, information architecture and design. That’s why wireframing has received so much attention lately.

Wireframing allows you to visually illustrate layout of fundamental elements in the user interface. It also acts as a way to communicate with clients and other stakeholders (content creators, designers, developers, etc). Furthermore, wireframing enables you to consider changes, user paths, and new requirements.

Wireframing is not one of those ritual that you can perform without thinking. You have to exactly identify your objectives and stay focused during the process. You can use wireframing to assist you in any or all of the following processes:

  • Planning & Analysis
  • Communication With Client and/or Team
  • Documentation

Techniques

Depending on your personal preference, work environment and most importantly scope / complexity of your project; you can use one of the following general techniques to develop wireframes:

HTML/CSS Wireframing

This technique requires you to develop wireframes for your pages in HTML and CSS. It provides added benefit of planning and communicating interactive aspect of your UI design. Furthermore, you don’t need any special tools – your favorite set of web development tools will be more than sufficient.

Following is a list of useful resources; providing more details about HTML/CSS wireframing technique:

You will feel really comfortable with this technique if you have strong background in HTML/CSS. If you are primarily a graphic designer who outsource or depend on others for developing markup, you may want to consider other wireframing techniques.

Using Graphics / Wireframing Software

Lots of designers prefer to create complete design in Photoshop (or similar software) before converting it into HTML/CSS. It is important to note that this is not wireframing; although it can provide similar benefits – at comparatively high cost in terms of time. Wireframing is a step before actual visual design.

If you are more comfortable with traditional graphics software like InDesign, Illustrator, or Photoshop; you can consider creating wireframes using your favorite graphics tool. However it is important to note that this technique will not allow you to communicate interactive aspects of your UI design.

If you are working on a large projects and/or more complex working environment, traditional graphics tools may not be able to provide ideal solution. Luckily several wireframing tools are available to assist you with such challenges.

Following is a list of useful desktop and online wireframing tools you can consider (Free desktop tools are highlighted in bold):

Desktop Tools

Online Tools

Hand Drawings / Sketching

This is probably the easiest wireframing technique. If you are not using any other method – you must try this one before anything else. This technique is ideally suited when you need to quickly convert your ideas into wireframes.

Traditionally, you will use paper and pencil to draw your wireframes. However you can also use a Graphics Tablet or Tablet PC, which will also allows you to easily share and save your work.

Following is a list of useful resources; providing further details about this wireframing technique:

Beginner’s Guide

If you are new to wireframing, you should also look at the following articles, providing general overview, guidelines and best practices:

Additional Tools & Services

Following is a small list of related tools/services that you may find useful:

  • Navflow
    Helps analyze how people navigate around your applications and websites.
  • Protonotes
    Allow project team members to discuss system functionality, design, and requirements directly on the prototype by adding sticky notes.
  • Mocklinkr
    Enable you to easily deliver static mockups as linked-up and clickable website.
  • Redmark
    Helps designers and their clients communicate visually.
  • Napkee
    Lets you to export Balsamiq Mockups to HTML/CSS/JS and Adobe Flex 3.
  • ConceptShare
    Design collaboration tool to manage feedback and review on creative content built for designers and their clients.

Free Downloads

There are numerous online resources where you can find free downloads for wireframing. This is a small list of comparatively more popular destinations:

  • Yahoo! Design Stencil Kit
    A very comprehensive collection of UI elements for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG).
  • Wireframe Magnets (DIY Kit)
    This DIY magnet template is based on the Konigi wireframe stencils and includes 3 sheets of elements that might be useful in whiteboard prototyping. These sheets are made to print on magnetic sheets. (More Downloads from Konigi)
  • Graffletopia
    Large collection of User Interface stencils for OmniGraffle.
  • EightShapes Unify
    Collection of templates, libraries, and other assets fore Adobe Creative Suite of products, primarily Adobe InDesign.
  • Mockups To Go
    A user-contributed collection of ready-to-use UI components and design patterns built using Balsamiq Mockups.

In order to keep this article short, only a limited number of resources have been provided; but feel free to search for better alternatives and share with rest of us in your comments.

Stay Updated

If you found this post useful, consider subscribing to our RSS Feed! You can also stay updated by following us on Twitter and Facebook or by subscribing to our FriendFeed.

Bookmark / Share

Bookmark and Share

Read More

SIMILAR/RELATED POSTS:

PREVIOUS POST:

NEXT POST:

Reader Comments

17 Responses to “Guidelines, Tools and Resources For Web Wireframing”
  1. Another desktop wireframing/mockup tool is WireframeSketcher. It’s a plugin for Eclipse and Eclipse-based IDEs but there is also a standalone version.

    • W3Avenue Team says:

      Thanks Peter, added WireframeSketcher in the list. Very useful, since it work with your IDE (Aptana, Eclipse, Flex Builder, MyEclipse, RadRails and Zend Studio).

  2. David says:

    I reckon with websites and apps becoming increasingly dynamic & interactive, HTML/CSS wireframing (even with hand drawn design) will slowly but surely becomes the norm. Currently using Justinmind for my “dynamic” needs, powerful and easy, does a good job!

  3. Andrea Fidel says:

    Hi Saud,
    Thanks for including ProtoShare in your informative post on why wireframing is important. Putting together a website is not as simple as it used to be as more and more company objectives are administered through the Internet. As people can see there are many ways to complete the wireframing stage so finding the method and/or tool right for you and your project is very important.

    ProtoShare is great for collaborating in the planning and requirements generation stages through interactive grey-box wireframing to full-blown RIA prototypes. Teams can also upload design comps alongside the wireframes or even display live sites within to the tool for review and comparison.

    I highly encourage users to trial several tools to determine the best fit for them.

    Cheers!
    Andrea @ProtoShare

  4. Hey,

    Thank you for adding JustProto! There is a little mistake. JustProto isn’t desktop tool but online :) You can also give link directly to demo (http://demo.justproto.com/), for users who wanna make quick test of our app :)

    Best!
    Wojciech Skowronek

  5. Ryan Cross says:

    I’m not quite sure where this might fit in your breakdown, but I would highly recommend the use of tools such as polypage for using html/css wireframes. See http://code.new-bamboo.co.uk/polypage/ and http://24ways.org/2008/easier-page-states-for-wireframes

  6. Lisa R. Tennant says:

    Been a graphic designer for more than 20 years now, and this is as basic as it gets. I have never designed ANYTHING without putting it to paper (didn’t call it wireframing then, I think we used to call it a Mock-Up.) Have they NOT been teaching this kind of BASIC stuff in design school for awhile and just now going back to it, as if it is a new thing? Take out a pad of graph paper and use it to draw up some ideas, its fast and then you can put the good ones to a program. (Why are the design firms hiring newbys that don’t even know this basic stuff.)

    So, instead of a program, first I recommend buying a pad of graph paper, a nice technical pencil with a 0.7 mm HB lead, and a plastic white eraser.

    Funny, how we go back to those (really out-of date) things that really worked way back when. I’m looking at your example picture of YouTube “wireframe” and almost looks identical to some of own hand-drawn mockups that I’ve been doing my whole career.

    • Lisa, I couldn’t agree with you more. Although there’s a clear advantage in using digital artefacts in wireframing and prototyping, a pen and a piece of paper is all you need to keep your mind free to focus on what’s important.

  7. Matt Metten says:

    Wow, great resource. Thanks for putting all these links together. I’m more on the code side of things but I find that having the visual before getting too far down the road really helps me, the customer and the overall project.

  8. Hey,

    Thanks so much for mentioning FlairBuilder. Since it’s been released almost a year a ago, it evolved quite a lot. It supports a wide range of features and comes with a rich set of pre-built widgets and components. To mention only a few: masters/templates up to an indefinite number of levels, interactive widgets (tabs, tree, navigation controls), common user events and predefined actions.

    I’m also pleased to say that in a few days we will release a new version that will include iPhone protoyping. I’m very excited about it! :-)

  9. Dave Hogue says:

    Don’t forget Adobe Fireworks as a desktop tool for wireframing and prototyping. Given the number of people who use the tool, the resources available on the web, and its ability to work closely with Dreamweaver, Flash, Illustrator, Photoshop, and Catalyst for both design and prototyping, it qualifies as a valuable tool.

  10. Abraham says:

    Hi, I’ve seen prototypes like your youtube image in many places, and I remembered a book about usability whit case studies where mentioned the CNN or NYtimes website in his earlies stages and its evolution with those kind of prototypes.

    I’d like to know if there is a program that makes specifically those kind of prototypes. I mean, in those color, shapes, etc.

    BTW. thanks for the post, awesome resources, i’ve just added it to delicious.

  11. Kate says:

    The best when you finish a wireframe? Make a realistic prototype (I use http://www.justinmind.com) and let the users play with it!

  12. Thank you,

    This is very helpful in developing my next project. I am not a designer myself but I can work with the designers very easily using some these wireframing tools.

  13. drwierdo says:

    hey how do i convert the illustrator wireframe into html/css…is there any way or do i have to design it all over again with dreamweaver??

  14. Tomek says:

    Hi,

    as a small addition to the “Microsoft Visio” option – VisDynamica.com offers full-featured rich interactions for a Visio prototype.

    Best,
    Tomek

Leave Comment

 
 

Stay Updated, Subscribe to RSS Feed

 
 
 
 

Blogroll

 

Sponsored Links