Creating Web Design Wireframes: Tools, Resources and Best Practices

Creating Web Design Wireframes: Tools, Resources and Best Practices

Wireframes can be one extra step in the beginning of any web design project that can save a significant amount of time later on. Besides improving productivity, it also improves the final result of each single webpage, and the website as a whole. A wireframe is a “template” of simple lines, shapes, and labels that can be used to predefine a website’s layout before any of the design’s details are actually placed.

Creating Web Design Wireframes: Tools, Resources and Best Practices

Editing a simple wireframe in order to change a layout can be a lot simpler than trying to change the layout of a final coded design, or even a PSD. Of course, this is both true for personal and client projects. Showing a client a wireframe at the beginning of the design phase can allow the client and designer to collaborate more efficiently on the final content placement, and come to a set agreement to make the design process smoother, and reduce the number of major revisions.

In this article, we’ll cover some of the best practices for using wireframes in web design, and also some tools and resources that can help designers create wireframes.

By Hand, Wireframing Tool, or Graphics Program

There are usually three methods designers choose to wireframe, while some consider it a distinct and elaborate phase of the design process, or just a bit of pre-planning before sorting out the details. One method is sketching out a general layout on paper, and another is doing it screen-based, either using just Photoshop, Illustrator, or a similar graphics program, or using a program made specifically for creating wireframes and diagrams. Let’s look at the pros and cons of each of these methods.

By Hand, On Paper

Drawing sketches by hand is the easiest and fastest ways to get initial ideas and specific shapes on paper. There’s no need to worry about the capabilities of a set program, or the need to customize or “get creative” with certain tools within a program to obtain the shape or label you need in the wireframe. It’s as easy as thinking it up and drawing it out.

Wireframe Drawing
Image credit: purecaffeine

However, one major drawback of drawing directly on paper is that things aren’t as easily moved. When things need to change places, a lot of erasing or scribbling can happen, and the need to start fresh may have to happen a few times for major layout revisions. In addition to that, if presenting wireframes to a client, the sketched wireframe would have to be redone neatly, or otherwise the final wireframe transferred to a version made neatly by a graphics or diagram program.

Photoshop, Illustrator, Etc.

Many designers will not create complete wireframes within the same graphics program that the design will be built it, but many will set up a general layout ahead of time, and then work around it. Using text labels to set notes where content should go, as well as using the graphics program’s rulers can usually be sufficient for a wireframe to get started. As a bonus, the design phase can usually begin within the same document, working on top of the initial wireframe.

Photoshop
Image credit: obelix_1962

These programs are still not intended to be diagraming programs, though, and these tools can sometimes be far too complex and less efficient for creating a detailed wireframe that needs to be presented to a client. Between several layers, groups, features and more, it can also be difficult to move things around easily with more complex website wireframes containing a lot of features and content.

Wireframing Tool

Then, there are tools that are made specifically for the planning stage of a website. Some of these programs or online applications are meant only for creating website wireframes, while others can also create website flowcharts, sitemaps, database models, and more. In terms of easily creating a detailed wireframe and presenting it to a client, this is probably the best choice. It’s easy, fast, and the interface is perfect for this phase of the design process.

Wireframe App

Depending on the features one wants, though, some wireframing tools are not free, and the free versions may not be what each designer is looking for. Also, for a designer that does not wireframe extensively for many projects, a separate application or program may just be unnecessary.

Organizing Webpage Elements

The first step to creating a complete wireframe is to organize which sections are necessary. Use simple shapes instead of actual graphics, and simple boxes, circles, etc. to represent certain areas. Then, label these areas as needed. Some of the most basic and used elements needed on any web page are:

  • Logo, tagline
  • Primary navigation (about, contact, etc.)
  • Possibly secondary navigation (categories, content pages)
  • Search bar, log in form, etc.
  • Feature areas (blog, about blurb, Twitter feed)

The best part about wireframing is that one can move around these areas easily to better organize a webpage and create good hierarchy. Feel free to move the main, most important, elements around first, and then begin filling in more details or content features.

Additional features may include:

  • RSS/Email icons
  • The layout of a blog’s content
  • Navigation link titles
  • Notes on where links should lead according to a sitemap
  • Notes on how interactive features should function

Remember, though, that while more details will be filled in, this is still by no means the actual design phase, and the purpose of detailing a wireframe is to focus on the content and layout.

Keeping Design Notes

While wireframing is meant to focus on the layout and organization of a web page, or entire website, design considerations can still be a part of this stage. Especially when collaborating on wireframes, design notes on color, texture, imagery, and otherwise can help clients visualize the final results. If wireframing on paper, written side notes are an option, or sticky notes can be even more helpful as they allow you to move, remove, or alter notes.

Many online and software applications, though, also have additional features for notes. Many times these applications have a section for notes that are easily managed and visually separate from the actual wireframe for easy editing. For collaboration, many also allow clients or other designers/developers to add or edit notes as well onto the wireframe, to discuss design features further.

Adding side notes can be great for discussing or recommending design considerations before the actual implementation of these elements, which can speed up the design phase dramatically, and reduce the number of needed revisions – even minor ones.

Online Wireframing Applications

Online wireframing applications offer a benefit of convenience when it comes to accessing your project’s prototypes, wireframes, and notes. Also, many of these applications offer an easy sharing feature that allows designers to easily share with clients and let them add or edit notes and features. Beyond a wireframing tool, these can be great collaboration tools as well and speed up this portion of the design phase.

Mockingbird
Mockingbird is an advanced online application (cheapest: $9/mo) that allows you to create detailed wireframes easily, and save them online. All plans offer unlimited collaborators, so Mockingbird is a great option for design teams or for a designer that is looking for a great collaboration tool for this portion of the design phase as well.

Mocking Bird

Mockflow
Mockflow is a wireframing application that can be used offline, but also offers a desktop version for both Windows and Mac. For the desktop version, wireframes and prototypes can be stored locally on the computer, and also resynced online with an Internet connection. The application also offers real-time collaboration, and a useful Sitemap Visualizer tool.

Mockflow

Pidoco
Pidoco is a completely online wireframing application, but it also offers many more tools and services that can aid in the planning phase of a web design. This application offers collaboration tools, interactive prototypes, usability testing, and the ability to export wireframes and prototypes into working HTML templates.

Pidoco

Protoshare
Protoshare is a wireframing and prototyping tool that allows easy drag and drop access, all completely online. Content can be organized into sitemaps in grid and tree view, and wireframes can be generated from those sitemaps. Then, videos, images, content, and more can be uploaded and inserted to create a working prototype to speed up the design and development phases dramatically.

Protoshare

iPlotz
iPlotz is an online application available for any browser that supports Flash, and is also available for download on Windows and Mac systems. It offers drag and drop wireframing and interactive prototypes based on the wireframe and a corresponding sitemap. This application also allows a project management feature where other designers and developers can be assigned tasks within the application during the prototyping phase.

iPlotz

Hot Gloo
Hot Gloo offers a clean and friendly wireframing process built on a grid for planning precise design details. This completely online application is great for collaborating with clients or other professionals working on the project. The application is secure and offers backup to all wireframes and prototypes.

Hotgloo

Gliffy
Gliffy is a free option and an online application that offers a number of quality interface options when designing wireframes. There is also online collaboration features just like with many other premium applications.

Gliffy

Jumpchart
Create layouts easily with this wireframing tool, and also easily add content, images, and HTML markup. Jumpchart’s easy to use interface offers everything a designer would need for the planning phase of a website, as well as everything they would need to show a client before moving on to the design details. Wireframes can be published into interactive prototypes, helping clients see a more complete picture before moving on to the next phase of the design process.

Jump Chart

Lumzy
Lumzy is completely online, free, and with a number of visual options for creating wireframes. Lumzy also offers real-time collaboration and even a chat section so meetings can be held within the application concerning the wireframes. Everything is stored online, and there is no need to send and receive files separately.

Lumzy

MX Graph
MX Graph is a free wireframing tool that is perfect for quick wireframes and brainstorming. Wireframes can be saved to the online application, printed, or exported. A live visual preview of the wireframe is also always available throughout the wireframing process at the click of a button in image form. This free tool is fast and reliable.

MX Graph

Just Proto
This prototyping and wireframing tool is perfect for web applications that need more than just a simple design. This advanced tool helps both designers and developers plan for the user experience behind a highly functional and interactive website. Collaboration tools, master pages, directory structures and sitemaps are all features of this application.

Justproto

Wireframing Programs

While online tools may offer more convenience, there is something more secure and perhaps even easier about having files and software directly on your computer. This allows you to work easily without Internet access so you can still work if the connection goes out, or if in a location without WI-FI. As a benefit, many of these applications still offer collaboration and sharing tools easily with a connection to the Internet.

Denim
Denim is an offline application available for Windows, Mac, and Linux/Unix. This is one of the only applications that allow designers to work from a writing tablet directly in the application. Widgets and models can be saved and reused as well, speeding up the design time further.

Dub

Pencil
Pencil can be used as a standalone application as well as a Firefox addon. Basic shapes, widgets, and icons are available for wireframing, prototyping, sitemapping, and more. There are also a number of icons available for some of the most popular frameworks and applications.

Pencil

Omnigraffle
Omnigraffle is the #1 choice for all Mac users, and is available as an offline application for all Mac systems, as well as iPads. This application features all the basics needed for any wireframing application, as well as tools for organizing sitemaps and more. It also features a lot of additional design techniques for creating more beautiful wireframe mockups.

Omnigraffle

Mockup Screens
Mockup Screens is a great tool for wireframing independently as a designer, or for brainstorming in meetings with clients real-time. This application allows one to easily create web elements, drag and drop seamlessly, and populate data in an instant. Productivity is increased as brainstorming ideas can be tested instantly and effortlessly.

Mockup Screens

Axure
Axure software offers wireframing, sitemapping, and other planning tools, as well as a prototyping tool that allows wireframing to come to life in a real working HTML sample. There are also built in templates of some of the most popular layout types, and features that allow designers, or design teams, to share and communicate with clients about the wireframes or prototypes.

Axure

Unify
Unify is a set of templates, grids, and likewise that one can download to use in programs for the Adobe Creative Suite, with inDesign specifically. This is a great option for those designers who would prefer to work in the programs they’re already familiar with and just would like a set of tools, icons, and templates to make the process of wireframing easier.

Eight Shapes

Wireframe Sketcher
Wireframe Sketcher is an Eclipse IDE add-on for anyone who likes to use the Eclipse software for web development. Because it is built in with Eclipse, crafting and planning for a complex web application would be ideal for this add-on. The add-on has several useful widgets, templates, interactive prototypes, and custom content inclusion.

Wireframe Sketcher

Microsoft Visio
Microsoft Visio is a premium option that is for far more than creating wireframes. Create sitemaps, database models, data-driven visuals, wireframes, and prototypes with the advanced tools in Microsoft Visio. What makes Visio so useful is that it is really a complete package for the planning phase of creating a complex website. There are also plenty of downloadable templates and add-ons available.

Visio

Balsamiq
This application mimics real sketching when creating wireframes so clients don’t get caught up in the details, and can rather focus on the layout and structure of a website or application. There are templates available for the web and a number of mobile devices. Created by a small group of dedicated web designers, this tool is lightweight and practical for many other web designers as well.

Balsamiq

Justinmind
Justinmind is a program that allows one to create wireframes, export them to interactive and working prototypes, share them among clients, developers, or otherwise, and add in comments or attach documents as necessary for easy collaboration and quick productivity. Notes can be set for visual or interactive techniques through the application’s Events and Actions module, simulate animations, conditions, and more for a truly interactive website.

Justinmind

Flair Builder
Flair Builder offers the basic abilities for wireframing and prototyping, but with plenty of interactive widgets, templates, iPhone App components, and the ability to create master pages to ensure consistency for larger websites. Easily brainstorm, approve, or just explain to clients some of the most complex and interactive features for a website by showing them instantly via a prototype with this application.

Flairbuilder

Conclusion

Wireframes can increase productivity and better the outcome of the final website dramatically. It is nearly essential for larger websites with a lot of content, but can also be just as helpful for the smallest websites as well. Wireframing can be considered a separate phase in the website creation process overall, and this added phase can improve communication between the client and designer in order to create a website that better suits what the client needs and what they’re looking for. The wireframe stage can also create a better plan for meeting the website’s goals, whether it is to gain more customers, get more subscribers, or obtain more signups.

Do you use wireframes for all projects, or just the bigger ones? Feel free to share any tips, practices, or even your favorite tools and resources for the wireframing stage of the web design process.

Kayla Knight is a web designer and frontend web developer. She specializes in responsive web design, progressive web technologies, and also knows her way around most CMS's and PHP. You can find out more and check out her portfolio at kaylaknight.co.

Comments

  1. / Reply

    Good post, although I don’t understand why Kungfu Keynote wireframe template (http://keynotekungfu.com/) isn’t mentioned. I find this a very helpful template, and it looks nice.

    1. / Reply

      Agreed, this is an excellent product and a great way to do it.

  2. / Reply

    No love for Fireworks? Though it might be under the ‘etc’ next to illustrator and photoshop, not one wireframing tool has ever convinced us to shift. I’ll just export the pages to images and import these in an Omnigraffle document and add annotations there.

    1. / Reply

      I agree with Pieter; I mostly just sketch on paper to start, but if I’m using a program its Fireworks for wireframing.

    • Alberto Garcia,
    • March 28, 2011
    / Reply

    Very good post Kayla! you should also mention Adobe Catalyst.

    • Philippe Alves,
    • March 29, 2011
    / Reply

    You should try as well Cacoo (http://www.cacoo.com). And, like Pieter, I am using Fireworks which doesn’t seem to be a common tool to make wireframes in the design community. All go for Photoshop, why?

      • Jim,
      • March 30, 2011
      / Reply

      people will irrationally stick to what they’re used to, even when there are better tools for the job.

      most designers i know will stand by photoshop for wireframing/web design until death, simply because it’s what they’ve been using for the past decade. i’ve even seen designers adamantly refuse to even give fireworks a chance, no matter how much time and effort it would save them.

  3. / Reply

    Very nice post !

  4. / Reply

    Very good post!

    Thanks for mentioning Justinmind. I would also like to point out that Justinmind lets you add your own data to simulate database behaviour and create dynamic prototypes, and all this without coding. We also created many widget libraries for the main smartphones as well as a free online tool to share, comment and carry out usability tests online.

    http://www.justinmind.com/justinmind-usernote

  5. / Reply

    I have used alot of wireframing applications before, but always go back to sitting down with a pen and some paper. – Does the job!

  6. / Reply

    Great round up. Personally I sketch looses ideas on paper first then tidy these up in axure.

    Just thought I’d let you know of a product I’m about to launch that is designed to help when wireframing on paper. They’re stickynotes with pre-printed browser or iphone templates that let you sketch and stick your wireframes anywhere without any fuss.

    • Ryan,
    • March 29, 2011
    / Reply

    Thanks for sharing this information with us. It is also nice to get another perspective on design, and find new ways to incorporate it into your everyday work.

  7. / Reply

    Hi Kayla,

    Thanks for including ProtoShare in your round-up of wireframing tools!

    However, our name is incorrectly spelled, if you could please make an adjustment.

    ProtoShare is flexible enough to create simple gray-box wireframes as well as complex prototypes to effectively communicate what you intend to build to stakeholders. As you mentioned, the wireframing and prototyping process is about getting feedback early to ensure you are building the correct application or website that fits users’ needs.

    We are often asked by customers how far they should take their prototype’s fidelity and when they should take a wireframe past the gray-box stage. For anyone interested in this topic, we wrote a post on How much should I prototype? that you may find useful.

    Cheers,
    Andrea
    @ProtoShare

    1. / Reply

      Hi Andrea,

      Sorry for the misspelling. I have amended it.

      Thanks.

  8. / Reply

    Thanks for the article – so many options to check out! I currently use iPlotz but have never really liked it. I was super surprised to hear Fireworks name dropped – I actually didn’t know anyone was still using it..

  9. / Reply

    Thanks for the article – so many options to check out! I currently use iPlotz but have never really liked it.

    Also, I was super surprised to hear Fireworks name dropped – I actually didn’t know anyone was still using it…

  10. / Reply

    Great post, Kayla, thanks! I’d like to add another mockup/wireframing tool to the list: PowerMockup, an add-in for Microsoft PowerPoint. It’s available at http://www.powermockup.com.

    • Mariah,
    • March 30, 2011
    / Reply

    I noticed you didn’t include Protoshare in your review and I was surprised, as I’ve actually had clients mention that they’ve heard of it or used it. I use it and like it, though I would be willing to try something else.

    • Max,
    • March 31, 2011
    / Reply

    Another HTML interactive prototyping tool you might want to check out is Tiggr – http://gotiggr.com. With Tiggr you can create, share and preview Web and mobile HTML prototypes. The key is that you can create interactive HTML prototypes with navigation which you can view and test in any browser.

  11. / Reply

    No mention for: http://mocksup.com/ ? Great product for multiple collaborators.

    • Ewa,
    • March 31, 2011
    / Reply

    Hey!

    Thanks for including JustProto to your list! If you have any questions about http://justproto.com/en/ just drop us a line:)

    We have a little competition on now – free JustProto licences to win. Wanna know more? Wanna have the chance to win year-long licence? go to our blog http://blog.justproto.com/2011/03/28/free-licences-to-win/

  12. / Reply

    Being UX evangelist in Microsoft, I use expression blend. And its sketchflow is very helpful, specially when need to rapidly iterate on both the user experience and core architecture

    • John,
    • April 2, 2011
    / Reply

    This is a nice list of resources. I’ve used a few of them in the past, including Visio and Gliffy. More recently though, I’m now using LucidChart and have found it easier than Visio but more robust than Gliffy. They just released Visio import and the couple documents I’ve tested look good.

  13. / Reply

    I use ( oh no don’t say it!) Powerpoint!!

    Designers frown when I say this but it has an advantage which beats everything else:

    If you want to collaborate with clients who know zilch about desgin programs and has NO time learning a new tooll this is the one tool everyone can used for moving stuff around and making comments.

    Peers hate me for this but clients love it.

    • Bob,
    • April 6, 2011
    / Reply

    Good article. My only criticism is that it would have been helpful to indicate which applications or sites require Flash. This would help those of us working on MacBook Airs or iPads.

  14. / Reply

    I have used Mockup Builder, quite nice tool for creating web design wireframes.
    I think you may also add this prototype to this article: http://mockupbuilder.com

  15. / Reply

    Wow..amazing tools. thank for share

  16. / Reply

    Hello,

    The best software for wireframing was Axure RP Pro :
    http://www.wixiweb.fr/articles/axure-rp-6-sketching/

    • Valentine,
    • October 31, 2011
    / Reply

    I want an easy to use wireframe. Does anybody have a suggestion. I am new to this whole experience.

  17. / Reply

    Nice list! I recently created Photoshop Wireframing Kit http://www.photoshopwireframingkit.com/ for all the Photoshop users.

  18. / Reply

    I wish every webdesigner would use these tools as too many still start designing straight away without any planning and thought put into it.

    • Cynthia,
    • February 10, 2012
    / Reply

    I like to sketch on my tablet + Livejournal then transfer to Keynote. Add Apple Keynote to the list of programs! :) It’s so user friendly, simple to use/learn, and at $19.99 it’s a great catch (no I’m not an affiliate..) I use it with Keynotopia’s templates. http://keynotopia.com/

  19. / Reply

    Being an IT guy I am glad to say that after using Bootstraptoday a project management tool

    i need not to worry about daily tasks and tickets as BST brings intelligence and

    integration into the software developent lifecycle and detection of bugs becomes quicker

    saving a lot of time and project cost. Apart from cloud/online it is also available as In

    house set up.

  20. / Reply

    I think that you should update this post to the latest software details. What do you say ?

  21. / Reply

    Thank you reminding I have hand and paper with, it’s the best way do it. Thanks again :)

  22. / Reply

    Our online diagramming tool Creately ( http://creately.com/Online-UI-Mockups-and-Wireframes ) is also great for wire-frames and mock-ups. Plus you can use it to draw many more diagram types which compliments your wire-frames.

Leave a Reply

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

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.