The Importance Of Wireframes In Web Design And 9 Tools To Create Wireframes

The Importance Of Wireframes In Web Design And 9 Tools To Create Wireframes

“Good design must necessarily, in my opinion, have an impact on people’s lives, no matter how seemingly small. Good design changes things.”
Garr Reynolds

Designing wireframes the right way the first time costs no more than doing it the wrong way. Creating a paper prototype adds no cost either; simply print out the wireframe diagrams for the pages a visitor will use to complete the tasks most closely related to achieving his goals and meeting the site’s business objectives.

Web Prototyping saves costs of any marketing communication that may be necessary to undo brand damage resulting from a poorly functioning web site and a frustrating user experience. Expensive site redesigns are often undertaken to correct those kinds of problems. Adding a few days to create a wireframe and testing a prototype ensures that the redesigned site won’t introduce any new causes for user frustration or further erosion of brand equity.

Importance Of Wireframes And Tools To Create Wireframes

Of course, a designer doesn’t have to reinvent the wheel with each new wire frame diagram. Every page in a site will share some elements, even when the pages don’t follow the same template.

These common elements are the must-have items, which, if absent, can cause visitors to experience frustration and resentment that may linger long after they’ve moved on to other sites. Alienating visitors and creating a negative brand impression will not help the site-owning organisation achieve its business goals, nor will it save money. For example, every page needs clearly labelled navigation so the visitor can easily move from one page to the next and from one section of the site to another without having to go back to the home page.

The Wireframe

Wireframe Example

Understanding how to work with wireframes is the key to creating a success site prototype.

The wireframe diagram illustrates the layout of a web page. Using different shapes (such as boxes, ovals, and diamonds) to represent content, functional, and navigational elements, these shapes displays their placement on the page. HTML coders use the diagrams to “wire” each page, connecting links, attaching content, and so on.

Wireframe Webstyleguide

Visual designers use the wireframe as the basis for renderings that show the hierarchical importance and location of the elements (with each general section of the page labelled); free of any potentially distracting design treatments.

Shapes used in wireframes

The use of simple shapes lets you focus on the information design first, to make sure it meets users needs, before moving on to the pretty pictures. For an existing site, wireframes are abstracted from screen shots, with new content, functional, and navigational elements sketched in.

Wireframe vs. Visual Design

Usually, decision-makers in the site-owning organisation will want to see visual designs by this time. I encourage you to be brave and stall if necessary, but in any event, resist temptation to yield to this request.

Why?

One very important reason is to save money. Why spend time on graphics before the underlying information design is complete?

Equally important, colours, fonts and stylistic treatments of logos and other graphical elements can invoke emotional responses (“I hate this pink”; “I love that blue”; “That version of the logo makes me ill”) that distract from the task of determining the best information design for the page.

Example of wireframe to mockup

A wireframe diagram lets everybody focus on what’s important at this step: clearly understanding what goes on each page, where it goes, and why it goes there, so you can achieve the best overall balance and structure for each page. A wireframe is a sketch of a page-layout idea. The sketch may be rendered in the computer using an illustration application or hand-drawn on paper. Either method is fine, as long as it clearly communicates your ideas.

The information design will evolve as wireframe diagrams change, incorporating results from the usability test at the end of this step, to reflect placement of page elements in ways that better meet user needs. Keeping the information design flexible at this stage will help you create a more positive brand experience over the long term, so you don’t want anyone to develop partisan attachments to a particular look this early in the game.

Note for Visual Designers

At this point in the process, visual designers should conduct exploratory meetings to understand the client’s visual preferences and the visual elements of the client’s brand. Wait until wireframes are set before showing any visual-design treatments of the pages to the client.

Note for Clients

For clients who insist on seeing visuals earlier rather than later, ask visual designers to design page mock-ups representing possible colours, imagery, its look and feel, as well as possible styles of what is being considered at this stage. However, you should do this only if absolutely necessary – that is, if they won’t take no for an answer – and be sure to emphasize that these mock-ups, in no way, reflects the final designs (repeat this warning early and often).

Uwe Thimel’s version of a wireframe

Municipal wireframe by Uwe Thimel

Caution the people in the site-owning organisation against developing any attachments to these mock-ups, because such attachments will make it difficult to change the visual design later on. Chances are these people will not be happy when they see the final design with text, links and information added to it. Focusing only on wireframes at this stage helps you avoid building unrealistic expectations about the site’s final look and feel, because having maximum flexibility to evolve the site’s information design is necessary.

9 Application Tools To Create Wireframes Digitally

Traditionally, interactive web designers use pencil and paper or Photoshop to do a mock-up. However, in recent years, there has been a handful of websites that allow designers to create prototypes, wireframes or sitemaps digitally. Here are 9 tools that you can consider using.

1. Balsamiq
Balsamiq Mockups Tool

Using BALSAMIQ mockups gives you the feeling like you are drawing, but it’s digital, so you can tweak and rearrange the controls easily, and the end result is much cleaner. Teams can come up with a design and iterate over it in real-time in the course of a meeting.

2. iPlotz
iPlotz Wireframe Maker

With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application. You can also invite others to comment on the designs, and once ready, you can manage the tasks for developers and designers to build the project.

3. Pencil Project
Pencil Project GUI Wireframe

The PENCIL PROJECT‘s unique mission is to build a free and open source tool for making diagrams and GUI prototyping that everyone can use.
4. templatr
Templatr Mockup Creator

templatr is a Template Generator, with which you can create an individual design for your Blog online. You need no knowledge of HTML or any special Software. All you need is a Browser, maybe a little creativity and a small idea of how the finished design should look. You can download the finished Template with a simple click.
5. Flair Builder
Flair Builder Interactive Mockup Creator

FlairBuilder is a cross-platform tool for rapid authoring of interactive wireframes and user interface prototypes. It comes with a palette of common fully functional components. Your prototypes will have interaction built-in from the first moment.
6. GUI Design Studio
Caretta Prototype Tool

GUI Design Studio is a fully featured application user interface design and rapid prototyping tool that requires absolutely no coding. It is equally suitable for creating desktop, mobile and Website application designs.
7. Proto Share
Protoshare Wire frame tool

PROTOSHARE makes it easy to create and then reuse templates, giving you full creative control and efficiency.

8. Serena
Serena Web Application Development Company

PROTOTYPE COMPOSER is a completely new way of gathering requirements. Prototype Composer makes it possible to see how an application will look and function before any code is even written. Instead of endless text documents, Prototype Composer makes it easy for business users and analysts to collaborate on requirements by building simple, high-fidelity prototypes that simulate a working application.
9. DUB
Denim Wireframe Tool

DENIM is a system that helps web site designers in the early stages of design. DENIM supports sketching input, allows design at different refinement levels, and unifies the levels through zooming.

Wireframing diagrams use simple shapes to represent the content functions and navigation on a page. Use them to design the best relationships among page elements for efficient information design that will meet user needs and achieve the site’s business goals. I hope this post gives you a better understanding of the importance of wireframing, please stay tune for part 2!

Charlotte’s interest is in web interface and design as well as motion graphics. Her absorption with her work is mostly due to her attention to detail and passion for the world of design. Winding down after work, which consumes much of her time; she enjoys traveling, exploring new places, gastronomy, and fashion.

Comments

    • Peter Severin,
    • July 15, 2009
    / Reply

    Nice article. I would also like to mention WireframeSketcher. It’s a wireframing plugin for Eclipse that can be used with most of the Eclipse-based web-development tools like Aptana Studio, MyEclipse and Zend Studio. More details here:
    http://wireframesketcher.com

  1. / Reply

    Surprised to see that Omni Group’s Omnigraffle was left off this list. I swear by Omnigraffle for wireframes — the editing tools are top notch for conceptualizing and moving around pieces of wireframe UI.

      • Ellips,
      • September 2, 2009
      / Reply

      I assume Omnigraffle only works on Macintosh computers.

      • damian,
      • February 3, 2011
      / Reply

      is omnigraffle interactive?

  2. / Reply

    +1 for Graffle, I Have only recently switched to it from Illustrator, makes wireframing a breeze!

  3. / Reply

    OmniGraffle is a brilliant tool. Highly recommended.

  4. / Reply

    I’ve used Balsamiq, Protoshare and Serena to create wireframes – and my favourite by a million miles is Balsamiq!

    It feels less stuffy and corporate than the other two I’ve used, and seems to provide a good starting point for discussions with both creatives and clients.

  5. / Reply

    Am a long time Illustrator user, and it used to be my weapon of choice, but over the last couple years I’ve taken to using Indesign for wireframing needs.

    My reasoning? Basically, it had everything I required. Drawing tools, type styles, object styles, reusable objects, master pages, multiple pages, easy export to PDF… plus I already knew how to use it. Depending on how detailed we get, the wireframes file can even be a good start for the visual design, utilizing existing styles, grids etc.

    Typically our method of presenting wireframes is in the form of working sessions with the client. A simple process of walking through the concepts of annotated wireframes, soliciting feedback along the way. In most cases that’s sufficient to get at what we need.

    So I never really had cause to use any interactivity features in Indesign, but it does have the potential to turn a PDF into a prototype if need be. Likely would be a pretty manual process however, a shortfall for some in using Indesign over other more specialized tools.

    @jeffswartz

    • Matt,
    • July 15, 2009
    / Reply

    Oh no! You forgot OmniGraffle. Nice article, but OmniGraffle should be at the top of the list. Amazing software.

  6. / Reply

    Omnigraffle is the best !

    A lot of great points where made here and will prove to be a valuable resource for developing your next project.

    i created a short tour/demo of how I do this using omni graffle hope it helps…

    http://www.nopun.com/team/webprocess_01_schemtaic_or_ScketchPad/webprocess_%200Sm_700x800001.swf

      • Calla,
      • July 15, 2009
      / Reply

      Noel,
      Thanks so much for that demo–I was just thinking, “wouldn’t it be great if someone would do a video of the process…” and voila, there it was!

    1. / Reply

      @Noel – that is super helpful. I’m with @Calla, this is exactly what I was looking for. I’ve tinkered with OmniGraffle before, but didn’t understand its use.

      Thanks for the link!

    • Marc,
    • July 15, 2009
    / Reply

    Can’t you people get it that OmniGraffle is a MAC only software?
    There’s a world outside Apple you know..even for designers.

    1. / Reply

      just relax… it’s gonna be alright

        • Lynne,
        • July 15, 2009
        / Reply

        @Duncan Thanks, I actually Lol’d at that :)

    2. / Reply

      You’re not serious, are you? Designers who don’t use Mac?

      I don’t believe it.

        • Marc,
        • July 15, 2009
        / Reply

        Of course not.
        I just wanted to amuse Duncan and provide a Lol opportunity for Lynne.
        Mission accomplished.

    3. / Reply

      I agree,
      mac used to be better for design about 13 years ago.

      But now I would say that mac and pc are about on the same level power wise but you pay well over the odds for a slicker looking mac.

      I use both Mac for work Pc for home…
      I definitely prefer the PC.

  7. / Reply

    I love to do wire framing in web design using Adobe Illustrator, even on designing a logo.

    • Charlotte,
    • July 15, 2009
    / Reply

    It’s great to see all these input and valuable comments from everyone. I’ve seen many designers still using Photoshop or Illustrator to create their wireframes or mockups. Some still use pencil and paper because their thoughts follow better using traditional mediums.

    At the end of the day, it really depends which medium suits you best and allows you to produce the most creative idea for your client.

    1. / Reply

      Charlotte is apparently actually incapable of saying “Omnigraffle”.

  8. / Reply

    I have used lovelycharts.com for both wireframing and flowcharting.

    • Chaz,
    • July 15, 2009
    / Reply

    Great article. I think Balsamiq is a great tool. I have also recently discovered Creately – a browser based tool for wireframing and just about any other type of diagrams that you can collaborate on.

    http://creately.com

  9. / Reply

    IMHO there is a need to show interaction. It’s online, it’s interactive! Exporting the prototype as HTML is key. Neither Illustrator nor Omni Graffle are really appropriate. They might illustrate one webpage, but the clients need to experience the whole site with lots of pages, states, rights. Therefore: OverSite or Axure.

    1. / Reply

      OmniGraffle allows you to create links to other pages within the document. You can then export the wireframe as a PDF that people can click around as if it were a web site.
      You can also share layers across canvases, so you can make site-wide and secondary navigation systems. You can then simply email a PDF to clients and team members.

      1. / Reply

        Oh! Sorry about that. Obviously I’m an Omni-Beginner. Sounds good!

        • Robert,
        • September 25, 2009
        / Reply

        I use OmniGraffle for wireframing. I have not found how to export pdfs that can be clicked to function as a prototype using the Action Inspector. What am I missing?

        1. / Reply

          here’s a nice walk-through for Clickable PDFs in OmniGraffle
          http://urlgreyhot.com/personal/weblog/creating_prototypes_with_omnigraffle

          Google is also your friend:
          http://www.google.com/search?rls=en&q=omnigraffle+clickable+pdf

      2. / Reply

        Not the same as the interactive options in Axure Pro or other prototyping software. For instance, if I want to show a client the function of a drag/drop, carousel, or tabbing, then I’m going to use Axure Pro which is also PC/MAC compatible.

        Omnigraffle is great, but it’s limited in that regard. Axure Pro offers stencil libraries, too.

        On top of prototyping widgets and interactive functions, I can annotate them. Great if you have a client who likes to forward things to people who need explanation.

        I like Omnigraffle, but there are a lot of interaction designers on PCs (not the same as a visual designer) and collaborating with them, demonstrating just interaction without having to get the development team involved, and all the things I like in Omnigraffle (sitemap generator, stencil libraries, drag and drop elements, magnetized shapes, et al) are there.

        http://vimeo.com/23253027

    • Dan,
    • July 15, 2009
    / Reply

    We use to work with http://www.axure.com .
    Part of the colleagues from creative use Xara and Indesign .

    • Robert Mundell,
    • July 15, 2009
    / Reply

    I’m using ForeUI (www.foreui.com). It can create skinnable and interactive wireframes, then run them in web browser.

      • Norwell,
      • July 15, 2009
      / Reply

      I tried ForeUI two days ago, it’s really awesome!

      Here are some interactive wireframe samples from their site:

      http://www.foreui.com/demos/demo4/

      http://www.foreui.com/demos/demo3/

      http://www.foreui.com/demos/demo2/

      http://www.foreui.com/demos/demo7/

      • Norwell,
      • July 15, 2009
      / Reply

      I tried this tool two days ago, it’s really awesome :-)

  10. / Reply

    What a Great article! You guys commented of using Photoshop or Illustrator and other online tools to create wireframes or mockups, what about Fireworks? I have used Fireworks since it’s first version back in 1997, 98… For me it’s the best of all, now I am using CS4 with is the easiest version in my opinion.

    • Jamille Dazzi,
    • July 15, 2009
    / Reply

    How about AXURE!?
    http://www.axure.com

    This is the best prototyping tool available!

  11. / Reply

    Have use Balsamiq, IPlotz, Pencil and Omnigraffle Pro
    All are good product…
    I favor Balsamiq for use of use and for their “excellent” customer service,,,

    • Anthony,
    • July 15, 2009
    / Reply

    +1 to ForeUI, very good prototyping tool.

    • Chuck,
    • July 15, 2009
    / Reply

    Am I crazy to still be using HTML as a wireframing tool?

      • Charlotte,
      • July 15, 2009
      / Reply

      How do you do that? CSS?

        • Chuck,
        • July 15, 2009
        / Reply

        Yes, with Plain Jane HTML. It can be interactive (to show to clients) and then reused right away by the UI developer(s). Does anyone else do this? Or if you used to do it and moved onto one of the tools here, please speak up. Thanks.

      • jerryork,
      • September 8, 2009
      / Reply

      Chuck
      no, you are not the only one using HTML as a wireframing tool. I find it more flexible and efficient than any other tool.

      kudos!

    • Dan,
    • July 15, 2009
    / Reply

    Am I the only person using Visio?

      • Sid,
      • February 20, 2010
      / Reply

      Yes :P

  12. / Reply

    Hi Charlotte,
    Thanks for including ProtoShare on your list! We created the product from working with our own clients and collaborating with them on wireframes in the early stages of developing new websites. To help them better understand the process of how the final website would work, we then made the wireframes clickable. This resulted in better websites that fit their needs in less time. As you mentioned, they don’t even have to be that detailed. A couple extra days on planning/wireframing can save several days in the latter part of the process.

    For clients who try to skip ahead to design: I think one can use your words to explain the reason for this step:

    “A wireframe diagrams lets everybody focus on what’s important at this step: clearly understanding what goes on each page, where it goes, and why it goes there, so you can achieve the best overall balance and structure for each page. A wireframe is a sketch of a page-layout idea.”

    Great post,
    Andrea

    • Bob B.,
    • July 16, 2009
    / Reply

    Will everyone laugh if I say PowerPoint can be used to make good wireframes?

      • Lynne,
      • July 16, 2009
      / Reply

      No laughing here Bob! I have a friend doing UI for touch screen kiosks and I was shocked when he told me the gorgeous wireframes he was showing me were made using PPT for Office 2007. They looked great. Honestly it’s all about the skill and vision of the person creating the wireframes. I’ve seen some pretty sexy ones that were made using graph paper and a Sharpie :)

      • Sid,
      • February 20, 2010
      / Reply

      Bwahahahahahahahahahaha

  13. / Reply

    I also use PowerPoint, but rarely (only when it needs to fancy). Otherwise, paper & markers :)

    • Sanni,
    • July 16, 2009
    / Reply

    ForeUI ++, it can create wireframe with any fidelity.

  14. / Reply

    i think iplotz is the best

    1. / Reply

      This looks GREAT! http://iplotz.com/whatisiPlotz.php

      • ApacheTiger,
      • March 6, 2010
      / Reply

      I have started using iPlotz. I am a Linux laptop user and a XP desktop user. iPlotz runs on both so it allows me to move from one platform to the other. I also use Aptana Studio on both systems, so I have to admit after reading this article I want to look at wireframesketcher as an eclipse plugin as well. But iPlotz offers a lot for a FREE application. Along with wireframes, it allows you to create projects, project tasks and tracks percentage complete for each task for a more project based approach to wireframing. And best of all, iPlotz is FREE!

  15. / Reply

    Yes, I’ve also used Iplotz and it is great tool.

    1. / Reply

      Yes, Iplotz is great tool…

    • Abby Rule,
    • July 16, 2009
    / Reply

    What about Axure? Has anyone used this and how does it compare to the others?

  16. / Reply

    Nice post, great insight about the usage of wire frames,
    i some times do a balancing act. Do it manually with a pencil or just go for illustrator.

  17. / Reply

    Here’s a comprehensive list of desktop and AIR apps for wireframing that might help complete the picture for those comparing their options: http://konigi.com/wiki/wireframes

    • Charlotte,
    • July 16, 2009
    / Reply

    Thanks Michael, you’ve got a pretty broad list there!

    • Wendy,
    • July 17, 2009
    / Reply

    Here is another list of wireframing tools, which has summary description for each tool:
    http://c2.com/cgi/wiki?GuiPrototypingTools

    Our company has bought Balsamiq, Axure and ForeUI, here is how we think about them:

    * Balsamiq is very good for creating low fidelity and static wireframes, since it has so many predefined templates.

    * Axure is good at creating hi fi and interactive wireframes, and generate document as well. But it is a little complex to use, people need to be trianed before really working on it.

    * ForeUI can create skinnable wireframes. We can switch the fidelity of wireframe by changing its UI theme. It also supports interactive wireframing, so it becomes our favorite tool.

  18. / Reply

    Wireframes are the basic of efficient web designing. Thank for this article.

  19. / Reply

    The best app is the one you like.

    • Constantine,
    • July 22, 2009
    / Reply

    OmniGraffle ohhhh, totals awesome tool.

    Great Post. !!

    Constantine

  20. / Reply

    I’m currently working in Axure, as it allows both MS Word specs and wireframe prototype demos to be output from the same effort. In my experience, thumbs down on PDFs; simply can’t do very much in a clear way. Need to convey concepts clearly to:

    Internal Business Team
    Internal Tech Resources
    Designers
    External Clients

    Clicking is believing…

    • Flavio,
    • July 23, 2009
    / Reply

    Hi,

    We use Axure, it’s a good tools.

    I honestly think it’s should be on that list.

    []’s

    • Sandeep,
    • July 23, 2009
    / Reply

    very nice!

    • victor,
    • July 23, 2009
    / Reply

    hi,

    You missed the granddaddy http://www.irise.com. Large learning curve and $$$ but cool.

    Another tool I like very much is http://www.simulify.com which is also pretty good in sharing.

      • Matic,
      • July 27, 2009
      / Reply

      Simulify has a very bad interface. Protoshare looks better.

  21. / Reply

    +1 for InDesign – *Especially* if your documentation has detailed annotations, or additional text (as it’s formatting is obviously it’s strength) – and it can integrate nicely with other deliverables done in InDesign (user flows, stories, interaction models, or even personas or competitive analyses).

    And like another post said, it can do all the vector stuff you could want, with libraries, templates and components.

    If I just needed a simple wireframe tool, then I really like Balsamiq. But I like InDesign for an ‘integrated’ solution for a variety of deliverables I produce – user flows, interaction modeling and even personas and competitive analyses.

    Chris
    @livebysatellite

  22. / Reply

    +1 for Graffle, this one’s perfect for our needs.

  23. / Reply

    Oh, well, I feel already like drowning. Very creative websites, beautiful colors.

    • Leslie Marks,
    • July 30, 2009
    / Reply

    We just completed an exhaustive analysis of wireframes and prototype solutions. We learned a lot:

    1) Simple mockups are only one piece of the pie. These tools are valuable, but are hard to integrate into formal requirements specs at large company IT shops.

    2) Axure (http://www.axure.com) is a really good solution for prototyping, at a low cost.

    3) Blueprint (http://www.blueprintsys.com) offers the best solution, by far, for integrating prototypes with complete requirements.

    This article should talk about integration of prototypes with requirements…

    • Kara,
    • July 30, 2009
    / Reply

    Thank you for mentioning Garr Reynolds in your post. I work for Peachpit Press and thought you and your readers might be interested in knowing that he just released his first online streaming video, Presentation Zen: The Video, where he expands on the ideas presented in his book and blog.

    • Matic,
    • August 8, 2009
    / Reply

    Just in beta but the interface looks nice http://hello.hotgloo.com

    1. / Reply

      Glad you mentioned hotgloo.com. I found that it was an excelent product, really pro.

    • Jarod,
    • August 13, 2009
    / Reply

    Do any of these apps “remember” data a user has entered? I.e. I’m working a user sign-up process, and I want the prototype to “remember” the Name that the user has entered on page 1. That way, when they’re done signing up, and they reach their profile page, they’ll see their Name filled in the appropriate places. Anyone know of any app that can do this?

    1. / Reply

      Axure RP does that with its persistent variables. It’s probably the best tool for high interactive fidelity prototyping amongst all those mentioned here.

      On another note, how can an article on wireframing omit iRise, Omnigraffle and Axure?

        • Andy Walker,
        • September 2, 2009
        / Reply

        Indeed Axure does incorporate global variables, however there is a finite number that it can handle.

        I found this to be a big problem when creating a prototype for a large e-commerce site.

        Short of coding a bespoke prototype, I haven’t yet found an app which has sufficient support for variables.

        1. / Reply

          Actually, the 25 variables limit was removed in the latest 5.6 update. They now only “recommend” you use 25 or less and only for IE’s sake:

          http://www.axure.com/releaseHistory.aspx

      • vikas,
      • September 2, 2009
      / Reply

      hi,
      try http://simulify.com. It has full support for variables, which you can add in the clipboard and can be used from one page to another.

  24. / Reply

    Very advanced and complete article about Wireframes. I agree that those frames are the most important when it comes to projecting own website. It is just like in a newspaper where we have some space that need to be filled with something that will match there. Without frames there would be complete chaos and no specific design would be possible (that is my opinion).I like projecting the frames first because there is always time to fill them with specific content and the whole site design is something earlier. I understand this process like building concrete under high building.

  25. / Reply

    Nice list, Thanks for sharing.

  26. / Reply

    GREAT overview! Very clear post!

    I would have to add that paper prototyping is being replaced by http://www.MagneticPrototyping.com very fast.

    Balsamiq is my fav software tool for wireframes!

    -E

  27. / Reply

    Great post and some really fantastic links here — special thanks: @onextrapixel @wendy @Efraim, etc.

  28. / Reply

    Another tool for digital wireframes is WireframeSketcher: http://wireframesketcher.com . It’s a plugin for Eclipse but it also works in Aptana, Zend Studio and even FlexBuilder.

    Apart from wireframes, WireframeSketcher also lets you create storyboards to model user interface interactivity. Some other interesting features include master components and widget styling with a wiki-like syntax.

    Being an Eclipse plugin, this tool works equally well on Mac OS X, Linux and Windows. And you get for free source version control and projects.

    • Ryan Sims,
    • August 28, 2009
    / Reply

    Omnigraffle is one of the best tools to do this work on the Mac. There’s an amazing list of stencils (from Mac to Yahoo to iPhone) that you can plug in here. I can’t believe it didn’t make your list.

  29. / Reply

    I’m amazed Axure wasn’t mentioned in the article.

  30. / Reply

    very interesting and very usefull. thanks

    • Tommi Luhtanen,
    • September 2, 2009
    / Reply

    Excellent article, people!

    I would like add something: Adobe FireWorks does a great job of wireframing and you can even export a working prototype with rollovers.

    http://adobe.com/products/fireworks/

    And it’s been around since Macromedia days. Its CSS Export also got a lot better with the CS4 upgrade.

    -Tommi

    • Rebecca,
    • September 5, 2009
    / Reply

    Balsamiq and Fireworks work for me….
    nice post.

  31. / Reply

    As soon as I stumbled upon this article I felt I must mention Microsoft Expression Blend. It comes with a new storyboarding feature called SketchFlow where you can create interactive wireframes. The user interface controls (textboxes, buttons) in this mode even come in “wireframe flavor” where they look exactly like what’s in that picture in this article under the heading “The Wireframe”, except that these controls are fully-functional. There was a great demonstration of this at MIX 09 at http://videos.visitmix.com/MIX09/C01F

    1. / Reply

      I was looking at MS Expression Blend. One of other interesting features is it supports WCF(?) that appears to feed into .net based desktop applications.

  32. / Reply

    Have seen Axure, too. Definitely the high-end professional standard for some.

    • robb,
    • September 27, 2009
    / Reply

    definitely a good read.
    great tips for beginner web designer.

  33. / Reply

    I just did a wireframe with InDesign, but need to make drop down menus… Do any of the suggested programs do that? I avoided Fireworks because you can’t make pdfs of the wireframe… and I thought that’d be useful. Thoughts?

    1. / Reply

      @Todd Dawson

      Actually, Fireworks has been able to export directly to PDF since version CS2 I believe. CS3 and CS4 can certainly do it in any case.

      Also, if you have any of the Adobe Suites that has Acrobat Pro in it, you can print directly to the PDF printer driver from any app that can print including the one I use which is Axure.

      Both Fireworks and Axure can create drop down menus easily as can many of the other apps discussed here. Even in InDesign you could probably fake it with buttons that show and hide different elements. Google “InDesign interactive PDF” and you will probably find articles and tutorials about it. The process will certainly be far more tedious than with any dedicated prototyping applications which have menu widgets or functionality built-in. The upside is that the interactivity will work natively in Adobe Reader. By printing from the other apps that don’t export to PDF directly, you’ll be lucky if even basic links work in the “printed” PDF.

  34. / Reply

    Hi guys!

    We offer a similar an completely web based tool for creating wireframes and screen mockups: http://www.pidoco.com – by the way, it’s real-time collaborative!

    One question: On what basis did you select your 9 suggestions? There are bigger (and more) players on the field. Did you test them anyhow?

    Thanks, Michael

  35. / Reply

    Fanctastic post, we will be directing our students to this post as well as featuring it in our Web Site Design Course material. THanks!

  36. / Reply

    I too started a discussion for “Which is the best tool to create Prototype/Mockups in Mac”, I got some feedback & recommendation for the following tools.
    1. Omnigrafelle (Mac)
    2. Balsamiq (Mac & Windows)
    3. WFP (Windows)
    4. Axure (Windows)

    I see here lot of people have voted for Balsamiq & Omnigrafelle, now am really confused to pick up the best one :)

    Anyways thanks for helping me out.

    1. / Reply

      Axure Pro is both Mac and PC.

  37. / Reply

    Thanks and thumbs up from me!

  38. / Reply

    i use wix. easy to use, no need to reinvent the wheel. just drag and drop, copy and paste, then publish. flash, multi-media and mini-pages, don’t need to know code or lose sleep over how to link. wix dot com definitely recommended.

    • David,
    • February 16, 2010
    / Reply

    Personnally, I use Justinmind, didn´t see it in the list… i do my design on Ilustrator & Photoshop then D&D in Justinmind. It´s easy & powerful enough to build RIA and dynamic wireframes with conditional navigation. It´s all D&D, no coding whatsoever, plus you can use templates, navigation flows and it´s on Mac. you should really look into it…

    • graflicks,
    • February 19, 2010
    / Reply

    should I send wireframes to my client if I’m re-designing an existing website (will have same content and menus)?

    1. / Reply

      Yes I always do.

      Personally I feel that it is important to keep them updated especially when doing a re-design. The new design may affect the way content is presented.

    • Eetu,
    • February 22, 2010
    / Reply

    No-one mentions the Mockflow? It’s quite good. I just bought a premium account and now I found out that there are free ones to use.

    Well, this one has collaboration -mode so it works well with a client. I just made a site with the structure, and he typed in the content. Then he found out (in a right time) that they need more content. And the navigation has to be changed.

    Finally it happends before AD work and coding.

  39. / Reply

    In case you missed to test the beta of http://www.hotgloo.com, now the offical version is online and with the promotion code pier14 you get the first month for free. I don’t know if it works for new user.

    1. / Reply

      Thank you Volker, it actually works when I signed up.

    • Blake,
    • March 1, 2010
    / Reply

    OmniGraffle is by far the best. Yes, it’s Mac only. If you are a designer you should be on a mac anyway.

    1. / Reply

      It’s not 1997; Windows and Linux systems are perfectly viable machines for graphic design. Yes, I am a Mac user.

    2. / Reply

      I agree. I have already installed it in Mac & am comfortable with the tools now.

    3. / Reply

      Interaction designers and visual designers aren’t one in the same. They often use programs that aren’t available on Mac.

      Interaction design isn’t limited to websites and wireframing/prototyping can encompass anything from a car’s dashboard, a gadget’s interface (IE, GPS unit, kiosk, ATM, et al), product design, or an application for Windows (crazy!).

      It’s silly to ask them to switch machines just for one program, particularly when there are amazing cross-platform programs or cloud programs.

      Besides, if you’re a web designer, Mac snobbery is tiresome and arguably excludes you from understanding the needs of your end-users.

  40. / Reply

    Your image tags are pointing to the wrong location so all the images show up as an X. You need to update them to www from net…

    1. / Reply

      Hi Ricky,

      The images are pointing to the right location, it is our CDN. Currently, there is some upgrade going on. You might want to try to clear your browser cache.

      Sorry for the inconvenience cause.

    • James Paul,
    • March 9, 2010
    / Reply

    Nice article on importance of wire frames in web design, also I like to thank Charlotte for sharing several tools to create wireframes.

    As such now I use http://www.pidoco.com for creating wireframes. Some key features of Pidoco.com (I like most) are as follows:

    1. Several people can work on wireframes at the same time.
    2. Clickable wireframes
    3. Easy remote usability testing
    4. Fast and easy Prototyping
    5. No Software Installation

    Makes it one of the best wireframing tool I like most. Highly recommended stuff for wireframe creation.

    • Etienne,
    • March 15, 2010
    / Reply

    Insightful article, really spot on on why we should always wireframe! More than just wireframe, I think at the era of web 2.0, & dyanmic websites, we also should be prototyping, along with wireframing!

    I use Justinmind http://wwwjustinmind.com to wireframe and prototype completely functional dynamic & interactive wireframes without coding!

    It´s really powerful as you can create a sketchy wireframe and then add interaction and data to put some dynamism in. the prototype is so close from the final product you can even carry out remote user tests without a single line of code.

  41. / Reply

    wow thank you for putting up this article.

  42. / Reply

    I use Axure, it’s a good tools.

  43. / Reply

    Axure is another great wireframe/documentation program. A little more expensive but very impressive! Check it out :)

    http://www.axure.com/

  44. / Reply

    thanks for sharing this tools.

    Mike

  45. / Reply

    A nifty little web app called Mockingbird could be a choice for some folks. :)

  46. / Reply

    +1 Omnigraffle – excellent resource there. Nice article.

  47. / Reply

    Wow, this is actually pretty cool stuff, thanks for posting the info!

    • Coedie,
    • June 11, 2010
    / Reply

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

  48. / Reply

    Excellent information about wireframes, thanks for posting!

  49. / Reply

    I never use fireframe before , thank you for the tips.

    Mike

  50. / Reply

    The best one is Justinmind Prototyper (http://www.justinmind.com), a lot of features (like data simulation and automatic conditions) and really easy to use.

    • Garden,
    • July 13, 2010
    / Reply

    Wow, i like your post. i never use wireframe before to mock-up design. i really like prototype composer from serena.

  51. / Reply

    I use Axure, too. It’s a good tools. But i have som problems.(

  52. / Reply

    Thanks for this! It’s really handy to find new tools for wireframes.

  53. / Reply

    As i had my evolution as webmaster and wanted to get my websites up and running in less time i started to create wireframes so i could see what template design would be better suited to my audience, without having to code the full website and in the end changing all the code, making me lose precious time.

    I tried Balsamiq in the past and they’re really good for website and iphone mockup. Adobe Photoshop is also a great tool to use for wireframes.

    Regards

  54. / Reply

    Hey Charlotte, thanks for sharing this. Wireframes is the way to start and is very helpful when dealing with clients in making them get a clear understanding of how the website will be setup. I’ve been using the online Mockingbird tool from http://gomockingbird.com for quite some time now and I’m very happy with what their free wireframes on the fly can do for me and my clients. Very nice tool. Highly recommend them.

  55. / Reply

    Hey Haavard, thanks for the link. I’m definitely going to check it out and try it myself!

  56. / Reply

    Thanks Haarvard. I will also check Mockingbird out. Maybe I find a tool that really helps me to create wireframes the way wireframes are meant to be.

  57. / Reply

    Awesome tools. These are good references for all designers. I will ask my designers to visit this site regularly.

  58. / Reply

    Muito bacana o artigo. Sites com planejamento se tornam ferramentas de gerar novos negócios

  59. / Reply

    hanks so much for that demo

  60. / Reply

    We use Balsamiq. It’s easy to handle, you’ve fast results and it’s cheap.
    Some Tools I d’ont even know, so thanks for your tips.

  61. / Reply

    Good blog – I use Mockingbird Web Wireframing tool for wireframes. It’s quick, simple, intuitive, and reasonable in price. There’s also a free version. Check the prior link for my review (third party) and more details!

  62. / Reply

    I kinda like that tools. Really handy if you make a a website with alot of information.
    Checking the freeware edition first :)

  63. / Reply

    Thanks for sharing great info! I’m going to try these tools!

  64. / Reply

    Nice. Thanks for information.

  65. / Reply

    Maybe, thanks for sharing anyway

    • SREE,
    • March 3, 2011
    / Reply

    GREAT THIS IS VERY INFORMATIVE.

  66. Great tools, for this post I’m using 3 ed one, that was very nice.. each developer & designer about this tool.

  67. / Reply

    Thanks for sharing, DUB and CARENA are the good match for this,

  68. / Reply

    Much impressed tutorials. Great one. wireframes one more meaning of free hand sketching. whatever you going to draw with neat sketch you can get a quality work report..

  69. / Reply

    Great one. wireframes one more meaning of free hand sketching. whatever you going to draw with neat wesitery you nourter again min in the remperty you plsder

  70. / Reply

    http://framebox.org/ is easy and free.

      • Lawrence,
      • June 6, 2011
      / Reply

      concur with Terri,.. Framebox is easy and free

  71. / Reply

    Foreui it’s a great tool.

    • Josh,
    • June 14, 2011
    / Reply

    http://www.invisionapp.com/ – use this for all my projects and my clients love it. . . sometimes its difficult for non designers to understand the concept of wireframes. If you can get their trust and understand their needs without having to show them wireframes and go directly to hi resolution visual mockups, you client will become your best friend.

    Outside of invision, I use fireworks to create the mockups. I find Fireworks to be an amazing tool when creating web pages as it automatically “configures” spacial relativity, centering, etc.

  72. / Reply

    I could tell how great you are in your field of interest. You could relate in each detail very well. Thank you for spending a time on sharing such informative writings to us. I will bookmark your page and looking forward to read some more of your writings soon.

    • brinda,
    • July 8, 2011
    / Reply

    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

    • brinda,
    • July 8, 2011
    / Reply

    In case you want link to mockuptiger here it is wireframe

    • Tim,
    • July 13, 2011
    / Reply

    Great article! Goes straight to my bookmarks and I’ll be back to read your posts. This is indeed basic and useful resource for any of us, beginner or not into web design!

  73. / Reply

    This is very useful for all web designers. Thanks

    • John,
    • August 7, 2011
    / Reply

    well this is good source of information I like it

  74. / Reply

    Really nice. Thanks for the good works.

    • ebricca,
    • August 19, 2011
    / Reply

    another way would be to use a plain drawings tool
    like openoffice/libreoffice draw though there are offline limitations

    — to give it a twist one in the cloud like google draw

    for google draw someone made stencils for direct use

    http://mortenjust.com/2010/04/19/a-wireframe-kit-for-google-drawings/

  75. / Reply

    Many thanks for this useful article.

  76. / Reply

    Good read, enjoyed it alot.

  77. / Reply

    {…} good {…} Thanks for the good works

  78. / Reply

    Equally important, colours, fonts and stylistic treatments of logos and other graphical tahnk

  79. / Reply

    This is a great one..nice article, thanks for share with us… I learn a lot with your words.. thank for the post.

  80. / Reply

    Great posting dear, Really thanks. I’m now following your blog & I ‘ll follow your all blogs for that kind of interesting blogs.

  81. / Reply

    Thanks for all info.

  82. / Reply

    Thanks for this good article!

  83. / Reply

    It is good for all web desginers. Thank you!

    • Ali,
    • December 7, 2011
    / Reply

    Quite possibly the most succinct and current info I came across about this subject. Sure pleased that I discovered that site by accident. I’ll probably be subscribing for your feed so that I will get the most current updates. Like the information here.

    • Ali,
    • December 7, 2011
    / Reply

    Your post informative.It really be a growing area to see this year. As you say, the comments to keep the conversation always so interesting to visit his site.What great information thanks for sharing this will help me greatly in my learning.

  84. / Reply

    Wow! Obviously I’m an Power P{Oint. But anyway sounds good!

  85. / Reply

    Thanks for the awe3some set of tools

  86. / Reply

    Thanks for sharing all that tools – i’ve used a trial version from balsamiq in the past – but there are a ton of other cool tools out there to generate wireframes, so i have to check them out before i can make a decision.

  87. / Reply

    I still tend to do my initial work with a notepad and pens, I find I can use this anywhere as I find time and can also incorporate other design elements that I see from things around me, industrial elements from design that catch my eye, I’ll then transfer this to Fireworks when I want to show it to somebody :-)

    Great article – Thanks

    • Rochelle,
    • January 19, 2012
    / Reply

    wireframes research

  88. / Reply

    Hello i find the FlairBuilder the best Mockup Tool!

    I have some description in German :http://goo.gl/9cDxx
    or translated in english here:http://goo.gl/blblE

    —stooni

    • Paul,
    • February 5, 2012
    / Reply

    Nice collection only used balsamiq from this list. Have to try the others.

  89. / Reply

    This concept appeals to the dangerous tendency of mainstream capital markets to subtract everything to the point that it is no longer anchored in real value.

  90. / Reply

    I think this still is very difficult to use for newbies.
    I knew so much people asking for this kind of tools
    but they never could make them own site with this
    tools.
    For me, I have 8 years working with Adobe Suite,
    obviously is easy, but not for everybody.

    • San,
    • March 7, 2012
    / Reply

    I personally recommend inteGREAT (http://www.edevtech.com/) to all for wireframing

  91. / Reply

    what you have said in this article has deeply impressed me and i wish you can write more about this subject.

  92. / Reply

    I’ve never knew how important this one, until I read your tutorials. Thanks, your the man.

  93. / Reply

    This is a fabulous article.A lot to learn from this post.I want to thank you for sharing all this information.

  94. / Reply

    The use of wireframes in web design is something I’ve actually tried my hands on. They make the work easier especially for people who process visuals very well. I often design my pages to scale on paper first before creating the actual thing. That way, you reduce the amout of time you spend starring into your computer (helps your eyes). Great post.

  95. / Reply

    I’d love to learn to use CSS. My website designing skills are very limited without it, I can tell.

  96. Thanks for the good works
    {…} good {…}

  97. / Reply

    Awesome article. Wireframes, mockups and prototypes are important part of the UX design process and you explained them well. Nice list of tools, though there’s significant lack, due to age of this text :).

    I currently run UXPin (http://uxpin.com) – first dedicated UX Design tool on the market. Let say with you UXPin you stop wasting time on inefficient communication in the design process. You’ll be able not only to create wireframes, prototypes, mockups and even convert paper prototypes into digital wireframes, you’ll be able to put all of that into the context of your design story.

    You’re all welcome on board!

  98. / Reply

    Thank you for the suggestions. I will definitely look into these. Google Drawing is also a cheap option that I have enjoyed. One thing that is important is being sure that whatever you use is something it is easy for your client to review and understand as you will need to show them your work multiple times through the process.

    • Mina,
    • January 7, 2016
    / Reply

    Hi, thank you for this great article.

    I found another wonderful tool, Mockplus.com, I’d like to suggest including it in this list.

    Mockplus is a rapid and simple prototyping tool allows to creat apps based on mutipul platforms. It has nice built-in widgets and components. With a very low learning curve (no coding or programming requirements), you can prototype easily and efficiently.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Elegant Themes Coupon Code: 20% discount

While most other WordPress theme sites charge per theme, Elegant Themes is an amazing deal as you pay just once for access to 87 premium WordPress themes and a…

WrapPixel Coupon – 25% Discount

If you’re looking for an HTML or PSD template for your next website, checkout the selection of templates at WrapPixel made for web developers, designers, and agencies. You can…