10 Free Wireframing Tools for Designers
http://mashable.com/2010/07/15/wireframing-tools/
Mashable
Mashable Sign in Like Follow @mashable see more > Search
Search
FOLLOW MASHABLE >
Like Follow
Social Media Tech Business Entertainment US & World Lifestyle Watercooler Jobs More Channels Social Media Tech Business Entertainment US & World Lifestyle Watercooler Jobs Company About Us Licensing & Reprints Archive Contact Contact Us Submit News Submit a Bug Advertise Advertise Legal Privacy Policy Terms of Use Apps iPhone App iPad App Android App Resources Guidebooks Subscriptions Sites Jobs Events Social Good Summit Media Summit
6.6k Share on Facebook Share Tweet on Twitter
Create a Facebook Profile
www.Facebook.com Find & Share A Wide Variety Of Facebook Applications. Sign Up Now!
Social Media
10 Free Wireframing Tools for Designers
6.6k Share on Facebook Share Tweet on Twitter
BY GRACE SMITH / JUL 15, 2010
This series is supported by Ben & Jerry's Joe, Ben & Jerry's new line-up of Fair Trade and frozen iced coffee drinks. Learn more about it here. Wireframing is a crucial step in web design and development as it allows for rapid prototyping and helps to pinpoint potential problems early in the process. It can be invaluable to have a visual representation of content, hierarchy and layout. Wireframes make it easier to communicate ideas, reduce scope creep, cut down on project costs (due to fewer design revisions later), and enable greater upfront usability and functionality testing. This post highlights 10 of the best free wireframing tools available, including standalone applications, web-based tools and browser add-ons. If you're partial to a particular wireframing tool available for free download, let us know in the comments.
1. Mockingbird
1 of 19
13/11/2013 1:52 PM
10 Free Wireframing Tools for Designers
http://mashable.com/2010/07/15/wireframing-tools/
Mockingbird is a web-based beta software based on the Cappuccino framework to create, link together, preview and share wireframes of your website or application. It's a clean and user-friendly interface, with drag and drop UI, interactive page linking, smart text resizing and the ability to easily share mockups with clients or colleagues with a direct link, make Mockingbird one of the best wireframe tools available. As it's web-based, it means you can create and share mockups from anywhere. It will be interesting to see just how good Mockingbird is when it comes out of beta and the full version is released.
2. Lovely Charts
Lovely Charts is an online diagramming application, that allows you to create flowcharts, sitemaps, organization charts and wireframes. One of the key features is the application's ability to make assumptions based on the type of diagram you're drawing, and thus streamline the drawing process. The History management feature is extremely useful, keeping 20 states of your diagram in memory should you wish to go back to an earlier version or undo any changes. There is a powerful yet simple tool set provided, with an extensive library of crafted symbols to suit most requirements.
3. Cacoo
Cacoo is a user-friendly online drawing tool that allows you to create a variety of diagrams, such as sitemaps, wireframes and network charts. The drag and drop UI means creating diagrams is relatively simple; there are also a number of stencils to utilize which could make the process even more efficient. Unlimited Undo is a neat feature with the history of all modifications saved, meaning you can undo right back to the start. Numerous users can also work on and complete the same diagram simultaneously with the application supporting real-time collaboration.
4. Gliffy
Gliffy is a web-based application which allows you to create process flow diagrams, org charts, floor plans, business processes, network diagrams, technical drawings, website wireframes, and more. It uses a drag and drop UI with the ability to add boxes, buttons, and lines from the tool shape library to anywhere on the page. Then you can easily add text to create a clear, concise mockup. You have access to a complete library of shapes and can even import your own images, like logos and backgrounds, to complement your diagrams. You can share and collaborate with anyone, on any platform, in any location, while having the ability to protect and track changes. The Gliffy API (beta) also makes it possible for developers to add Gliffy diagramming features to their existing web-based applications based on a simple to use framework.
5. Lumzy
2 of 19
13/11/2013 1:52 PM
10 Free Wireframing Tools for Designers
http://mashable.com/2010/07/15/wireframing-tools/
Lumzy is a mockup and prototype creation tool for websites and applications. You can add events to controls, place controls inside other containers and emulate your project with easy page navigation triggered by user actions. Real-time collaboration is one of the key features, with tools for team editing, a chat engine for deliberating over designs and file versioning. Lumzy is also the only mockup tool with a real image editor built-in simply grab any picture from your drive and edit it, apply hue, saturation, adjust contrast, and so on, and then add it to your project. The Pro version is white label and can be integrated into an existing platform or hosted on your own server which may be of interest to companies working with confidential information.
6. Mockflow
Mockflow is a web app based on the Adobe Flash Platform. It has a clean, minimalistic, organized interface and the editing feature-set set is extensive. You drag and drop components into a mockup to create the wireframe with the ability to add pages and map out an entire site and its structure. The built-in components are extensive, from charts and ads to menus and dropdowns. The ability to upload your own images to use, as well as the option to choose from a set of stickers of common site elements, such as social networking and e-commerce images, make the process of building the mockup pretty efficient. You can talk over the real-time chat and invite others as editors or viewers, depending on the level of editorial power you'd like each member to have. Editors have the ability to make changes to the wireframes, while viewers are limited to reviewing and commenting. The MockStore is a wonderful add-on service that provides third party components and templates shared by the user community.
7. Pencil Project
The Pencil Project is an open source tool for making diagrams and GUI prototyping that everyone can use. It's available as a Firefox add-on or as a standalone application (Linux and Windows only). Pencil essentially installs an entire drawing application into your Firefox browser and gives you the ability to display, save, and load an external canvas, together with a palette of shapes. Of interest is the Stencil Generator which allows you to create your own collection of stencil shapes by pointing the generator to a folder of image files. The Clipart tool lets you search through the library at openclipart.org and directly drop the images right into your Pencil document. Pencil also supports the use of external objects; both raster and vector images can be imported using copy-paste or drag and drop. The final prototype can be exported as a PNG image, web page, OpenOffice file, PDF or DOC file. If you're a dedicated Firefox user, then Pencil could be an essential tool for visually expressing conceptual ideas on the fly. It even won the Mozilla award for 'Best New Add-On' in 2008.
8. SimpleDiagrams
SimpleDiagrams is a small desktop application that helps you express your ideas quickly and simply with just enough functionality to describe a thought or capture a process. It's built on the Adobe AIR platform, so will run smoothly on Mac, Windows and Linux. You can drag, drop and size symbols from libraries, add photos and post-notes and export your diagram to PNG. It may not be a fully-fledged diagramming tool, but because SimpleDiagrams is so basic, you will be creating wireframes or diagrams within minutes.
9. Denim
3 of 19
13/11/2013 1:52 PM
10 Free Wireframing Tools for Designers
http://mashable.com/2010/07/15/wireframing-tools/
Denim is a free multi-platform desktop app that supports sketching and allows design at various refinement levels. It's an efficient tool for early stage brainstorming and wireframing. Two main features within Denim are Components, which enable you to create widgets that can be reused and Conditionals, which allow you to create transitions between pages depending on the end-users' actions, resulting in a more interactive experience. It's a simple yet effective tool and allows for easy annotation using editing gestures.
10. Website Wireframe
Website Wireframe is a very simple web-based tool for building wireframes in a matter of minutes. A link to view the wireframe can be sent through email, instant message, or mobile phone, and then the wireframe can be easily updated based on feedback, discussion, ideas and suggestions. The key to this tool is the simplicity of usage, lending itself to speed, both in wireframe creation and sharing. It is free to register and use and works in most modern web browsers. It may not be particularly sophisticated, however it's simplicity and efficiency is perfect for those who want an alternative to tools with a higher learning curve. Are you currently using any of these tools? If so, please share your thoughts and experiences in the comments below. Series supported by Ben & Jerry's Joe
This series is supported by Ben & Jerry's Joe, Ben & Jerry's new line-up of Fair Trade and frozen iced coffee drinks. Learn more about it here.
TOPICS: CACOO, DENIM, DESIGN, DEV & DESIGN, GLIFFY, LOVELY CHARTS, LUMZY, MOCKFLOW, MOCKINGBIRD, PENCIL PROJECT, SIMPLE DIAGRAMS, WEB DESIGN, WEB DESIGN SERIES, WEB DEVELOPMENT, WEBSITE WIREFRAME, WIREFRAME, WIREFRAMING
You May Like
What the Bible Says About Money (Shocking)
Moneynews
by Taboola
5 Transfers That Could Happen This January
ftbpro
Bodies Double as Cash Machines With U.S. Inc
Bloomberg
PGA Pro Talks Swing Myths
Graves Golf
Drop Your Wireless Carrier and Go Contract
BestTechie.com
Accountants Need to Show Their Softer Side
CFO Magazine
Tour Leonardo DiCaprio's Malibu Home For Sale
HGTV FrontDoor
6 Extreme Animals Sure To Survive The Apocaly
RealClear
Celebs At New York Fashion Week Spring 2014 (24 Photos)
Holywoodlollipop
Amazing Landscapes
HGTV
Content from Sponsors
4 of 19
13/11/2013 1:52 PM
10 Free Wireframing Tools for Designers
http://mashable.com/2010/07/15/wireframing-tools/
Sign in
17 people listening
+ Follow
POST COMMENT AS...
Newest | Oldest | Top Comments
Pap Tamas
Aug 15, 2013
I also love to use pen and paper, or simply Fireworks or Photoshop for Sketching. By the way, we are working on a web app for organizing UI sketches, link them together, simulate the UI flow and get feedback from your teammates, or client. We are launching it really soon, but you can subscribe now for early access at: www.sketchsim.com. We would really love to have you on the board when we launch.
LIKE / REPLY
App Mockup Tools
Mar 27, 2013
I design iOS GUI Element Kits to easily create iPhone and iPad app wireframes and prototypes. No coding is required, just copy and paste. I also sell downloadable App Sketchpads and Production Todo Lists to help you get your ideas down. http://www.appmockuptools.com
LIKE / REPLY
Powered by Livefyre
Download 100,000+ Apps
www.Mobogenie.com All-in-One Android Phone Manager. Free Download Now! (Windows Only)
Success Starts At KLMUC Facebook Group Email Email Friends for Free Facebook Account Sign Up AXA 110 Cancer Insurance LCD Projection Window Free Gift From SINGER
What's Hot
Tech
Kinect-Driven Interface Turns 3D Shapes and Movements Into Reality
Adario Strange With the advent of touchscreens and increasingly powerful mobile computers, digital interface innovation has become one of the most exciting areas of research. Now a new project called inFORM, crafted at the MIT Media Lab, offers a peek at an even ri... 1.4k shares 6 hours ago Share Tweet Share Share
Watercooler
Russian Subways Now Accept Squats for Payment
Jessica Catcher If you live in Moscow, your morning commute can now include a brief fitness session. To promote the upcoming 2014 Sochi Winter Olympics, subway stations in Moscow have added these impressive new machines which allow passengers to do 30 squats for a t... 2.7k shares 4 hours ago Share Tweet Share Share
Create a Facebook Profile
www.Facebook.com Find & Share A Wide Variety Of Facebook Applications. Sign Up Now!
Download 100,000+ Apps Success Starts At KLMUC Find Friends On Facebook Email Friends for Free Facebook Account Sign Up AXA 110 Cancer Insurance LCD Projection Window
Entertainment
Report: Netflix and YouTube Account for Half of Internet's Traffic
Colin Daileda Netflix and YouTube dominate over half of downstream Internet traffic in North America, according to a new report released by Canadian Internet monitoring firm Sandvine. Downstream traffic is data that goes from a source to a computer, and Netflix's ... 1.7k shares 7 hours ago Share Tweet Share Share
5 of 19
13/11/2013 1:52 PM
10 Free Wireframing Tools for Designers
http://mashable.com/2010/07/15/wireframing-tools/
US & World
How Online Mapmakers Are Helping the Red Cross in the Philippines
The Atlantic It will be months before we know the true damage brought about by super typhoon Haiyan. The largest death tolls now associated with the storm are only estimates. Aid workers from across the world are now flying to the island nation, or they just rece... 1.6k shares 12 hours ago Share Tweet Share Share
Business
Real-World Star Trek Tricorder Raises $10.5 Million in Funding
Kurt Wagner The real-world device inspired by Star Trek's tricorder just took one step closer to becoming a reality. Scanadu, the startup behind a small handheld scanner that measures a patient's vital signs like heart rate and temperature, announced $10.5 milli... 2.3k shares 14 hours ago Share Tweet Share Share
US & World
Afghan Rap Group Rallies for Women's Rights
Sara Afzal An Afghan woman rapping about gender inequality alongside her fianc is far from the norm in Afghanistan. Yet, despite the inevitable backlash, one of the first female rappers in the country continues to perform under the stage name Paradise. In fact... 855 shares 9 hours ago Share Tweet Share Share
Social Media
Artist Opens His Twitter Account to the Public
PSFK Twitter went public last week, and in response, media artist Kyle McDonald decided to open his own personal Twitter account to the masses. McDonald, who is known for his People Staring at Computers project, wanted to explore the idea of what it means... 895 shares 9 hours ago Share Tweet Share Share
US & World
U.S. Unveils Plans for World's Fastest Spy Plane
Colin Daileda The SR-72 unmanned plane flies at six times the speed of sound -- about 4,200 miles per hour, 70 miles per minute. However, this plane is not designed for travel, but as a military assault weapon, one that would leave enemies with no time to hide. Eq... 1.4k shares 13 hours ago Share Tweet Share Share
Entertainment
Miley Cyrus' Vocals Shine on 'Summertime Sadness' Cover
Neha Prakash Finally, a stripped-down Miley Cyrus we don't mind seeing. The 20-year-old pop singer covered Lana Del Rey's "Summertime Sadness" for BBC Radio 1's Live Lounge, proving she's actually got impressive vocal chops. For a vocalist, Cyrus' singing abiliti... 1.2k shares 10 hours ago Share Tweet Share Share
Tech
Inside the Most High-Tech Cab in New York: Car Force One
LiveScience Sometimes you think youve seen everything in tech. Other times, everything in tech gets packed into a car for the ultimate in luxury. If you ever wanted to play on a PlayStation 4, watch cable TV, finish some work on a full-size keyboard, print phot... 1.3k shares 1 day ago Share Tweet Share Share
6 of 19
13/11/2013 1:52 PM
10 Free Wireframing Tools for Designers
http://mashable.com/2010/07/15/wireframing-tools/
Create a Facebook Profile
www.Facebook.com Find & Share A Wide Variety Of Facebook Applications. Sign Up Now!
Download 100,000+ Apps Success Starts At KLMUC Find Friends On Facebook Facebook Account Sign Up Email Friends for Free AXA 110 Cancer Insurance LCD Projection Window
US & World
iTunes Accepts Donations for Typhoon Haiyan Relief
Colin Daileda The iTunes store now lets customers donate $5 to $200 to victims of Typhoon Haiyan via the American Red Cross. The storm smashed into the Philippines over the weekend of Nov. 9, leaving at least 1,774 dead, 2,487 injured and 660,000 displaced, accord... 824 shares 11 hours ago Share Tweet Share Share
Social Media
Now Twitter Lets You Make Multiple Timelines
Chris Taylor Twitter unveiled the ability to make custom timelines Tuesday -- a move that puts the newly-public company squarely in Storify's territory. Users can create their own timelines around particular events, filled with tweets from particular users and to... 2.5k shares 10 hours ago Share Tweet Share Share
Watercooler
10 Greatest Selfie Photobombs of All Time
Annie Colbert Capturing the perfect selfie requires angling, lighting and a dash of luck from the photo gods. So when some jerk decides to photobomb your making-love-to-the-camera moment, it can ruin your day. Don't let selfie photobombs bum you out, vain photogra... 3.3k shares 12 hours ago Share Tweet Share Share
Tech
Gmail Now Lets You Save Attachments Directly to Google Drive
Christina Warren A new Gmail update will let you view and save attachments directly to Google Drive from within your message. Google announced the news on its official blog and showcased the new feature with an accompanying GIF. The new feature is twofold. First, att... 4.3k shares 11 hours ago Share Tweet Share Share
Create a Facebook Profile
www.Facebook.com Find & Share A Wide Variety Of Facebook Applications. Sign Up Now!
Download 100,000+ Apps Success Starts At KLMUC Find Friends On Facebook Email Friends for Free Facebook Account Sign Up AXA 110 Cancer Insurance LCD Projection Window
Watercooler
Jennifer Lawrence Comforts Crying Fan, Is All-Around Awesome
Neha Prakash You might think we'd reach a saturation point at which Jennifer Lawrence's sweet, candid attitude becomes run-of-the-mill. But she still gets us, every single time. At the London premiere of The Hunger Games: Catching Fire, the Oscar-winning actress ... 7.9k shares 12 hours ago Share Tweet Share Share
7 of 19
13/11/2013 1:52 PM
10 Free Wireframing Tools for Designers
http://mashable.com/2010/07/15/wireframing-tools/
Tech
Panono Ball Camera Captures 360 Photo Spheres Instantly
Pete Pachal As cool as panorama shots and photo spheres are, they have a serious limitation: They need to stitch together multiple still pics, all taken at slightly different times. But to get a true photo sphere -- a 360-degree shot of a single moment in time -... 6.6k shares 17 hours ago Share Tweet Share Share
Watercooler
Oscar the Grouch and Grumpy Cat Finally Meet in Epic Face-Off
Annie Colbert Grouch or grump? Oscar the Grouch and Grumpy Cat came fuzzface-to-fuzzface in an epic showdown to settle the debate. Repeat: OSCAR THE GROUCH and GRUMPY CAT. Sesame Street's trash-loving Muppet made fast friends with the curmudgeonly cat as the duo b... 2.7k shares 15 hours ago Share Tweet Share Share
Entertainment
Hulu's 'The Wrong Mans' Is So Right
Jean Bentley The Wrong Mans, Hulu's latest original series, switches from espionage drama to workplace comedy to art heist to buddy cop adventure and back again -- all within six episodes. The show, a co-production with the BBC, is also very British. That's eithe... 767 shares 14 hours ago Share Tweet Share Share
Create a Facebook Profile
www.Facebook.com Find & Share A Wide Variety Of Facebook Applications. Sign Up Now!
Download 100,000+ Apps Success Starts At KLMUC Find Friends On Facebook Facebook Account Sign Up Email Friends for Free AXA 110 Cancer Insurance LCD Projection Window
More in Social Media NEW
8 of 19
13/11/2013 1:52 PM
10 Free Wireframing Tools for Designers
http://mashable.com/2010/07/15/wireframing-tools/
9 of 19
13/11/2013 1:52 PM
10 Free Wireframing Tools for Designers
http://mashable.com/2010/07/15/wireframing-tools/
10 of 19
13/11/2013 1:52 PM
10 Free Wireframing Tools for Designers
http://mashable.com/2010/07/15/wireframing-tools/
11 of 19
13/11/2013 1:52 PM
10 Free Wireframing Tools for Designers
http://mashable.com/2010/07/15/wireframing-tools/
12 of 19
13/11/2013 1:52 PM
10 Free Wireframing Tools for Designers
http://mashable.com/2010/07/15/wireframing-tools/
13 of 19
13/11/2013 1:52 PM
10 Free Wireframing Tools for Designers
http://mashable.com/2010/07/15/wireframing-tools/
14 of 19
13/11/2013 1:52 PM
10 Free Wireframing Tools for Designers
http://mashable.com/2010/07/15/wireframing-tools/
15 of 19
13/11/2013 1:52 PM
10 Free Wireframing Tools for Designers
http://mashable.com/2010/07/15/wireframing-tools/
What's Hot
16 of 19
13/11/2013 1:52 PM
10 Free Wireframing Tools for Designers
http://mashable.com/2010/07/15/wireframing-tools/
17 of 19
13/11/2013 1:52 PM
10 Free Wireframing Tools for Designers
http://mashable.com/2010/07/15/wireframing-tools/
18 of 19
13/11/2013 1:52 PM
10 Free Wireframing Tools for Designers
http://mashable.com/2010/07/15/wireframing-tools/
19 of 19
13/11/2013 1:52 PM
