Wireframe Tools and Tutorials To Speed Up Your Web Design Process

November 8, 2010 · 15 comments

by Dustin Betonio

Wireframe Tools and Tutorials To Speed Up Your Web Design Process

Wireframing is an important part of the design process, one that shouldn’t be overlooked by even the most experienced designers. Wireframes can save development time by outlining exactly how a site should look and function, in a manner that can be shown to and approved by your clients.

And that is exactly what the wireframing process offers: a quick and simple method to plan the layout and a cost-effective, time-saving tool to easily communicate your ideas to others. A wireframe typically has the basic elements of a Web page: header, footer, sidebar, maybe even some generated content. This way it gives you, your clients and colleagues a simple visually oriented layout that illustrates what the structure of the website will be by the end of the project. Also it serves as the foundation for any future alterations and is a key tool for communicating to developers.

In this article I will be focusing on resources for creating better wireframes, including tools and tutorials that will help you in the near future. Also consider our previous article about wireframe tools.


ElegantThemes
ThemeForest

Advertisement

Wireframe Articles

1. Wire Frame Your Site

sitepointwireframeyoursite

A great introduction to the benefits of wireframing from Sitepoint. It offers a three-step approach to wireframing in addition to expounding on the benefits of using wireframes, including their ability to let you foresee potential problems before you get into the nitty-gritty of designing.

2. Wireframes for the Wicked

wireframesforthewicked

A slideshow that talks about the purpose of wireframes and the different types of wireframes.

3. Wireframes Magazine

Wireframe Magazine

This site offers tons of resources and articles about wireframing. They include wireframe samples, UI tools, and job listings, as well as a place for designers to share their wireframes and wireframing tips. Popular articles have covered prototyping with the 960.gs grid system, graph paper sketch layouts, and wireframe moodboards.

4. My Five Commandments for Wireframing

fivecommandments

A podcast and article from Boagworld on good practices for wireframing, including why you should wireframe and the benefits of paper wireframing.

5. Sometimes, the Best Wireframing Tool is a Pencil

wireframingpencil

A brief post on why wireframing with paper and a pencil sometimes works better than using computer-based tools.

6. Ajax Wireframing Approaches

ajaxwireframingapproaches

A post in a series from Particletree about prototyping Ajax, this covers wireframing techniques. This article covers three excellent methods of wireframing dynamic content: Keyframing, stacking and TOP (Turn On Possibilities), as well as outlining the benefits and drawbacks of each.

7. Wireframing is Not a Religion

wireframingnotreligion

A short but impactful piece from 52 Weeks of UX on the different types of wireframes and why there’s no “right” way to wireframe.

8. Why Sketching and Wireframing Ideas Strengthens Designs

wireframingstrengthensdesigns

This post from SpyreStudios covers why sketching and wireframing your ideas leads to the evolution of good designs.

9. The Future of Wireframes?

futureofwireframes

A post on the evolution of wireframes from functional to visual from Made by Many.

10. The Wireframe: All You Need to Know

allyouneedtoknow

This is a very basic guide to wireframing, perfect for beginners.

11. UX 101: The Wireframe

ux101

A beginner’s guide to wireframing from Viget Advance.

12. Guidelines, Tools and Resources for Web Wireframing

webwireframingresources

W3Avenue has put together this great resource roundup for wireframing.

13. Storyboards vs. Wireframes

storyboardsvswireframes

This post talks about the benefits and drawbacks of using storyboards vs wireframes.

14. The Right Way to Wireframe

rightwaytowireframe

This is a fun video from Will Evans that shows the “right” way to wireframe (using OmniGraffle and stencils), as well as some commentary about wireframing. The background music is NSFW.

15. The Value of Wireframing

valueofwireframing

A post talking about the importance of wireframing and why it makes the design and development process go more smoothly.

16. The Importance of Wireframing

theimportanceofwireframing

A great article on why you should wireframe, along with resources to get your started. It’s a great rundown of the benefits of wireframing, including its ability to help clients focus and what they can teach you about your clients.

17. Pwireframing: Paper Wireframing

pwireframe

It’s a paper-based method, but goes way beyond just making some rough sketches. The photos included really help solidify the technique in your mind.

18. Concerning Fidelity in Design

fidelityindesign

Here’s a post on UX Booth that talks about using the proper level of fidelity in different design deliverables.

19. Wireframes vs. Prototypes

wireframesvsprototypes

Another longer article on the differences between wireframes and prototypes.

20. Wireframing is Not Prototyping

notprototyping

A very short article on the differences between wireframing and prototyping.

Complete Wireframing and Mock Up Tools

1. FlairBuilder

flairbuilder

FlairBuilder is a downloadable wireframing program that lets you build wireframes you can then share with clients (there are free online and desktop viewer clients that let them see the files). They offer a free fifteen-day trial, and then can bill monthly ($24/month) or yearly ($99/year). The program includes tools for prototyping websites as well as iPhone apps.

2. Quommunnication Stencil Kit

wireframing01

A PSD file with common design elements for sketching and wireframing: form elements, RSS feed icons, colors, Advertising units, browser windows and grids.

3. Facebook Applications Stencil Kit

facebook

Sizable collection of Facebook related elements to use in creating wireframes for Facebook applications.

4. Mockingbird

mockingbird

Mockingbird is a simple but powerful wireframing tool for Firefox, Safari and Chrome. There are a variety of paid plans available depending on your usage needs, and they don’t charge you for months where you don’t have any active projects.

5. ProtoShare

protoshare

ProtoShare lets you create interactive prototypes that can include CSS, JavaScript and HTML, and you can add Flash, images, and other files. It also offers real-time collaboration tools with browser-based access.

6. Flex Stencil Kit

flex

Includes all Flex components from Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tool tip, errors.

7. Eclipse Stencil Kit

eclipse

This stencil enables you to easily prototype Eclipse (wizard) dialogs with OmniGraffle(TM).

8. MockFlow

mockflow

MockFlow lets you wireframe both online and offline, and offers a design library addon service with components and templates you can use. You can link pages using a sitemap, creating a clickable prototype.

9. Lovely Charts

lovelycharts

Lovely Charts is free a wireframing and diagramming tool that lets you create all sorts of professional-looking wireframes, flowcharts, and other diagrams.

10. Massive Web UI & Button Set

web-ui-set-preview1

This set contains UI elements in three distinct styles: glossy, satin/light gradient, and one-color. The satin/light gradient set is available in 7 different colors (which you’ll find all of in the PSD file). Available are control buttons including arrows and basic symbols, info and text boxes, breadcrubs, buttons, and other navigation elements, drop-down and collapsible box styles, speech bubbles, search forms and loading elements.

11. Free Sketching & Wireframing Kit

wireframeresource52

The Sketching & Wireframing Kit is a free set of elements for sketching and wireframing. It consists of form elements, icons, indicators, feedback messages, tool tips, navigation elements, image placeholders, embedded videos, sliders and common ad banners. The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG, which can be easily modified. It can also be downloaded in PDF and EPS formats.

12. Cacoo

cacoo

Cacoo is a free online drawing tool that can be used for creating wireframes or other diagrams. You can export images in PNG format.

13. EightShapes Unify

wireframeresource57

EightShapes Unify is a collection of templates, libraries and other assets that enable user experience designers to create more consistent and effective deliverables faster. The system uses the Adobe Creative Suite of products; Adobe InDesign is the primary authoring tool

14. Wireframe Symbols

wireframeresource49

This download contains a wireframe symbol library and a full Adobe Illustrator file with all of the elements spread out on a board. To install the library just drag and drop the file named Wireframe Symbols.ai into your Adobe Illustrator “Symbols” directory. Once you open Illustrator, go to your Symbols Palette and load the library.

15. Lumzy

lumzy

Lumzy is a free app that lets you quickly create interactive mockups. It includes live chat and real-time collaboration, as well as a built-in image editor.

16. SimpleDiagrams

simplediagrams

SimpleDiagrams is an Adobe Air app that lets you build sketchy diagrams in minutes, and includes pre-made design elements. There are free and paid ($19) versions.

17. Web Page Elements

webpage

18. Gliffy

gliffy

Gliffy is a free wireframing tool that requires no signup and lets you share and collaborate on the wireframes you create. You can also use it to create diagrams and flowcharts.

19. Keynote Wireframe Toolkit

keynotetoolkit

This toolkit gives you various elements you need to create wireframes using Apple’s Keynote software. Included are things like form inputs, scroll bars, tabs, breadcrumbs, progress bars, iOS elements, modal windows, and more. The website also offers some tips and tricks for creating wireframes using Keynote. Price $12.

20. Keynotopia Wireframing Set

keynotopia

Another free wireframing template set for Keynote. It includes controls, breadcrumbs, containers, dialogs, galleries, social elements, and more.

21. PowerPoint Wireframe Template for UI Design

powerpointtemplate

PowerPoint templates for PC users out there. These include sample screens with various design elements included.

22. 10 Free Printable Web Design Wireframing Templates

printablewireframes

If drawing wireframes by hand is more your style, then the printable wireframing templates in this collection are for you. There’s everything from printable browser frames to iPhone mockups.

Author : Dustin Betonio

Dustin Betonio is a Translation Management graduate at University of Mindanao. His earlier career was devoted on customer service outside the information highway. Currently studying Law in the same University.

{ 12 comments… read them below or add one }

Etienne February 8, 2011 at 11:29 am

Great set of resources! Well documented & spot-on! You’re certainly right about the communication and foundation side of wireframes but i think that with RIA and highly interactive app, it’s also necesary to include a prototype in the process.

I’d like to include Justinmind in your set of wireframe tool, great tool to wireframe and prototype interactive apps without any coding.

etienne
@just_in_mind

Reply

Peter Severin December 4, 2010 at 5:24 am

Also take a look at WireframeSketcher wireframing tool. It’s a plugin for Eclipse based IDEs like Aptana, Zend Studio and the like, but it also comes as a standalone version for all major platforms. WireframeSketcher supports interactive prototypes via links, storyboarding, reusable components (aka masters), export to clickable PDF and much more. It also has user-contributed library of stencils for Android, iPhone, iPad and more. Give it a try.

Reply

Marcin November 29, 2010 at 8:55 am

Great article and very nice resources. We have though an addition to the pack:-). 2 weeks ago we’ve launched UXPin – paper prototyping kit. You can see it in action on our video: http://vimeo.com/17261765

Reply

Andrea at ProtoShare November 19, 2010 at 10:45 pm

Dustin,
Thanks for including ProtoShare in your list! We appreciate the mention.

You provided a lot of valuable resources for peers. The key, as you mentioned, is using wireframing as a communication tool with others before the expensive part of the process begins. And if complex interactions are to be conveyed, then evolving the wireframes into a prototype is likely necessary.

Best,
Andrea
@ProtoShare

Reply

Andrea at ProtoShare March 3, 2011 at 10:28 pm

I just wanted to give a quick update. On Monday, we launched a brand new prototyping app: ProtoShare 5.

It’s fast, easy to use, let’s you import assets from other ProtoShare projects, and new trials even get a few pre-built state-based components to speed up your process. We still offer a free, 30-day trial as well.

Reply

Jussi Pasanen November 16, 2010 at 11:28 pm

Thanks Dustin, now that’s a comprehensive look into the wireframing resources out there.

Most of the wireframing tools and discussion seem to focus on designing screen-level detail. This is fine, however it’s a good idea to draft out what the overall site structure will look like first. The SitePoint article touches on this.

Shameless plug I know but I’d like to mention our Naview service here. Naview lets you work out the sitemap and prototype & test the navigation for your site. It can also help you refine the labeling and terminology that are especially important for larger websites. Once you have the sitemap sorted you can then move onto screen-level detail using any of the other wireframing tools.

Thanks again for your useful post!

Reply

Web Design Company USA November 9, 2010 at 10:44 am

These tools and tutorials really helpful. Thanks for sharing with us.

Reply

Amir khella November 9, 2010 at 5:23 am

Great collection, Dustin. Thanks for sharing ( and for the keynotopia mention)

Reply

cheapwebdesign November 8, 2010 at 4:56 pm

awesome share, thank you so much

Reply

Web Design Nottingham November 8, 2010 at 3:11 pm

Great post Dustin, I think still today a lot of people overlook wire frames, When I was freelance I used to over look this, since starting the agency it’s standard practice, I try to be apart of creating the wire frames when possible as I enjoy it.

Reply

ForzaRP December 16, 2010 at 9:42 am

Agreed, excellent post. Designers should always use wireframes whenever possible. So much easier to convince clients. I still can’t believe people go thru the whole rigamarole of using Photoshop. Used to use Cacoo, but CREATELY does it for me now – http://creately.com/diagtype/wireframe

Reply

Lars December 16, 2010 at 3:31 pm

Thanks for sharing your experience and thoughts on this topic!

Reply

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 3 trackbacks }

Previous post:

Next post:


Web Analytics