Using Wireframes for Web Design

The use of wireframes is a great way to create a mockup of the website you are designing or as you add new functionality to your existing site. The mockup can then be used to give your users a way to envision what the site might look like in order to give you feedback. Does it meet their needs? Does it do more than they need? Do they find it over complicated? All good questions to use in getting it right.

One of the more recent articles I could find, Mashable’s July 15, 2010 10 Free Wireframing Tools for Designers lists, you guessed it, free tools. I must say first that I haven’t used any of these tools.  I include the article as it provides both background to wireframing and examples of tools to use without spending money.

My wireframing tool of choice is Balsamiq Mockups. Built on the Adobe Air platform, Balsamiq does have a cost of $79 for a single user and $379 for 5 users (both desktop installations). A cloud based version is also available for team design as well as other apps for integration with 3rd party web apps.  The basic version I use includes mockup components for creating iPhone apps.

The following screen shots should give you an idea of how Balsamiq works:

The first screen shot is of the mockup viewed within the tool.  This is edit mode.  You can see some of the various components that can be used to mockup a web page across the top of the page.  I like the ease of use – a drag and drop feature that allows for the addition of any component as I work.  I also like the notes feature that allows me to provide information to team members or users I can’t meet with.

Balsamiq mockup tool

Click on image for larger view

The second screen shot is the same mockup but viewed in full screen – great for showing the mockup to users.  It includes a pointer (the blue) arrow that can be used to draw attention to a feature.

Balsamiq mockup full screen

Click on image for larger view

As the author of the article mentioned above states:

Wireframing is a crucial step in web design and development as it allows for rapid prototyping and helps to pinpoint potential problems early in the process. It can be invaluable to have a visual representation of content, hierarchy and layout.

Sounds like a process worth its weight in gold.  See 18 Wireframing, Mockup, and Prototyping Tools to Plan Design for more suggestions of these web site tools and/or Free Wireframing or UI Design Kits for mocking up mobile applications.

Do you use a wireframe tool that you find useful and would recommend?


  1. I’m a huge fan of Balsamiq, and also recommend it to anyone looking for a wireframing tool. It’s not only easy to use, but the look is very user-friendly — most wireframing tools create images that still look techie, but Balsamiq conveys the experience of the system (not just a documented drawing of features) very well.

  2. John

    Overall, Balsamiq is a good tool if you like that style of wireframing. For an online alternative that provides a much crisper look for clients, I tend to use LucidChart.

  3. You could also use SketchFlow – which is a feature of Expression Blend

  • kiiac
  • Purchase Creating a Successful Law Firm Intranet

%d bloggers like this: