2011.02.08 15:35
Share |

10 Free Wireframing Tools for Designers










[아래 자료출처] 35 Excellent Wireframing Resources


Wireframing Articles

The articles featured here discuss wireframing and prototyping both from a theoretical and a practical point of view. If you have questions about how to wireframe or why you should, one of the links below will likely answer your questions.


My Five Commandments for Wireframing

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

Fivecommandments in 35 Excellent Wireframing Resources


Wireframes for the Wicked

Here’s a slideshow that talks about the purpose of wireframes and the different types of wireframes.

Wireframesforthewicked in 35 Excellent Wireframing Resources


Sometimes, the Best Wireframing Tool is a Pencil

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

Wireframingpencil in 35 Excellent Wireframing Resources


Why Sketching and Wireframing Ideas Strengthens Designs

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

Wireframingstrengthensdesigns in 35 Excellent Wireframing Resources


The Future of Wireframes?

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

Futureofwireframes in 35 Excellent Wireframing Resources


Wireframing is Not a Religion

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.

Wireframingnotreligion in 35 Excellent Wireframing Resources


UX 101: The Wireframe

A beginner’s guide to wireframing from Viget Advance.

Ux101 in 35 Excellent Wireframing Resources


The Wireframe: All You Need to Know

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

Allyouneedtoknow in 35 Excellent Wireframing Resources


Storyboards vs. Wireframes

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

Storyboardsvswireframes in 35 Excellent Wireframing Resources


The Right Way to Wireframe

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 (nothing is lost if you just mute the video, though).

Rightwaytowireframe in 35 Excellent Wireframing Resources


Guidelines, Tools and Resources for Web Wireframing

W3Avenue has put together this great resource roundup for wireframing.

Webwireframingresources in 35 Excellent Wireframing Resources


The Power of Wireframes and Mockups

A short piece on the benefits of using wireframes and mockups in your design process. It also briefly discusses the differences between wireframes and mockups.

Powerofwireframes in 35 Excellent Wireframing Resources


The Future of Wireframes

Here’s a great post from MIX that talks about how the web has changed and how wireframes will need to change with it.

Thefutureofwireframes in 35 Excellent Wireframing Resources


Concerning Fidelity in Design

Here’s a post on UX Booth that talks about using the proper level of fidelity in different design deliverables (sketches, wireframes, mockups, and prototypes).

Fidelityindesign in 35 Excellent Wireframing Resources


Where Wireframes Are Concerned

This post from UX Magazine talks about the pros and cons of wireframes, particularly focusing on the drawbakcs.

Wherewireframesareconcerned in 35 Excellent Wireframing Resources


The Value of Wireframing

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

Valueofwireframing in 35 Excellent Wireframing Resources


Wireframing is Not Prototyping

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

Notprototyping in 35 Excellent Wireframing Resources


Wireframes vs. Prototypes

Another longer article on the differences between wireframes and prototypes.

Wireframesvsprototypes in 35 Excellent Wireframing Resources


Wireframing and Mockup Tools

Once you have an idea of how you want to wireframe or prototype your designs, it’s time to decide which tools you want to use. The links below feature both software and analog tools for wireframing and prototyping.

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.

Mockingbird in 35 Excellent Wireframing Resources


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.

Flairbuilder in 35 Excellent Wireframing Resources


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.

Protoshare in 35 Excellent Wireframing Resources


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.

Mockflow in 35 Excellent Wireframing Resources


Lovely Charts

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

Lovelycharts in 35 Excellent Wireframing Resources


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, though in the FAQs they say they’re planning on allowing export to PDF and SVG in future versions.

Cacoo in 35 Excellent Wireframing Resources


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.

Simplediagrams in 35 Excellent Wireframing Resources


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.

Lumzy in 35 Excellent Wireframing Resources


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.

Gliffy in 35 Excellent Wireframing Resources


Keynote Wireframe Toolkit

This $12 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.

Keynotetoolkit in 35 Excellent Wireframing Resources


A Wireframe Kit for Google Drawings

Google Drawings is a great tool for creating wireframes, in some ways superior to paid programs like Omnigraffle and Visio. But it was lacking stencils. Not anymore. Here’s a stencil kit that includes a variety of website elements you can include in your mockups.

Googledrawingskit in 35 Excellent Wireframing Resources


Keynotopia Wireframing Set

Here’s another wireframing template set for Keynote, though this one is available for free. It includes controls, breadcrumbs, containers, dialogs, galleries, social elements, and more.

Keynotopia in 35 Excellent Wireframing Resources


10 Free Printable Web Design Wireframing Templates

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.

Printablewireframes in 35 Excellent Wireframing Resources


A Collection of Printable Web Browser Sketching and Wireframe Templates

Here’s another collection of printable wireframing tools, this time including UI stencils.

Printabletemplates in 35 Excellent Wireframing Resources


PowerPoint Wireframe Template for UI Design

We’ve already covered a couple of Keynote wireframing templates for Mac users out there, but there are also PowerPoint templates for PC users out there. These include sample screens with various design elements included.

Powerpointtemplate in 35 Excellent Wireframing Resources


Five Killer Wireframe Resources

Here’s a great little roundup from Fuel Your Interface that offers some fantastic wireframing resources, including UI stencils and other toolboxes.

Fivekillerresources in 35 Excellent Wireframing Resources


Wireframe Showcase

Here’s an excellent source if you’re looking for wireframing examples and ideas. It shows not only the wireframe, but also the completed site.

Wireframeshowcase in 35 Excellent Wireframing Resources


저작자 표시 비영리 변경 금지
신고
Posted by 쪼맨이

댓글을 달아 주세요


티스토리 툴바