Dezinerfolio

14 Prototyping and Wireframing Tools for Designers

Your rating: None Average: 4.4 (22 votes)

A website wireframe is a basic design draft done before any artwork and used in web design to show the structure of a website, custom user paths, most important user interface elements, their position and relationships between website pages. Wireframes lay out in black and white schematically most important elements in the interface such as header, footer, contact form, navigation.

Wireframing is a process that can significantly decrease the amount of time required in design and development by removing potential visual distractions and focusing the attention of project stakeholders on vital functionality and strategic marketing factors. 

Here are a few key reasons you should always wireframe:

  • Allows you get a clear picture of what information will be needed on each page before design
  • Allows you to spend time and really focus on what each page’s purpose is. Careful plannings is paramount.
  • Allows you a fail-safe for uneducated clients who tend to change their minds during the design phase of the project. If the site is planned out properly in the wireframe stage the functionality of the individual pages shouldn’t change much.
  • Allows you to set a fallback point. When a client signs off on a wireframe that means they agree to what’s on that page. Education of the client also plays an important role here as well as they need to know that changing items already signed off on the wireframe can and probably will bloat the budget.
  • Allows you to have a clear look at how the site will react to various visitors without the clutter of color or design elements.
  • Allows you to remove any clutter that may be added to to the site that may be unnecessary and detrimental to the site goal.
  • They’re easily adjustable (pre-signoff) and easy to produce allowing the planning process to move along smoothly and efficiently.
  • Reduces the chance of scope creep.
  • Gives the designer a clear view of what needs to be designed
  • Gets the client deeply involved in the planning process early and opens communication between both parties

[source]

In this article we'll look at a few neat Wireframing & Prototyping solutions available out there.

1. Omnigraffle

Type: OSX App

OmniGraffle can help you make eye-popping graphic documents quickly by keeping lines connected to shapes even when they're moved, providing powerful styling tools, importing and exporting Microsoft Visio files, and magically organizing diagrams with just one click.

2. ConceptDraw Pro

Type: Windows App

ConceptDraw PRO is a full-featured diagramming platform that lets you display, communicate, and dynamically present.

3. Pidoco

Type: Online

Pidoco is a real time collaborative online wireframing and GUI prototyping tool that used to enhance software projects as it saves time and lowers the options of rework. Picodo also helps to increase the profit margin of firms as it reduces the cost and augments usability.

4. Balsamiq Mockups

Type: AIR App

Balsamiq Mockups is a wireframing tool that is designed specifically to mimic hand drawn designs whilst giving you the quick easy to update properties of programs like Microsoft Word.

5. Mockingbird

Type: Online

Mockingbird is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.

6. Pencil

Type: Firefox Addon

The Pencil Project's unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use.

7. iPlotz

Type: Online / Flash-Flex

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 then manage the tasks for developers and designers to build the project.

8. ProtoShare

Type: Online

ProtoShare is a collaborative online tool to build website wireframes and dynamic, navigable website prototypes that team members can then review and comment on in real-time.

9. HotGloo

Type: Online

Hot Gloo is the online wireframe application currently in free beta. You can drag and drop elements, scale, link, name and rename them. You can also edit, comment & share any moment of the developing process with colleagues and clients.

10. MockFlow

Type: Online

Design, collaborate (in real-time) user interface mockups for your software and websites. 

11. Gliffy

Type: Online

Gliffy free wireframe software makes it easy to create website wireframes and to share web mockups with anyone. You can export your wireframe for future use in other applications as well.

12. Cacoo

Type: Online

Cacoo is a user-friendly online drawing tool that allows you to create a variety of diagrams, such as sitemaps, wireframes and network charts.

13. Creately

Type: Online / Flash-Flex

A powerful and easy to use online diagramming tool that runs right in your web browser. With an intuitive UI and built in collaboration features, Creately makes working with teams easy.

14. Lovely Charts

Type: Online

Lovely Charts is a diagramming application that allows you to create professional looking diagrams of all kinds, such as flowcharts, sitemaps, business processes, organisation charts, wireframes and many more...

*15. Mockup Builder

Type: Online / Silverlight

MockupBuilder is a new look to solve old problem with prototyping and sharing sketches with customers.

*16. Lucid Chart

Type: Online

Create diagrams and drawings such as a flowchart, mind map, network diagram, UML diagram, wireframe, user interface design and other drawings online with free flowchart software.

Please feel free to post your suggestions, reviews or new tools as comments.

Trackback URL for this post:

http://www.dezinerfolio.com/trackback/2018

Comments

Anonymous's picture

Truly said! I would say these tool are quite awesome. In addition to that, you can also try Design'N'Buy all-in-one online product design software at : http://www.designnbuy.com/all-in-one-product-designer-software.html

Amy Watson (not verified)
Fri, 05/10/2013 - 12:22
Anonymous's picture

You have given more than visitors expectancy. This post is very helpful, edifying and in addition cool thoughts on the topic. Must appreciate the great posts you have written here, I was wondering how you could write down in details Howdy, first I must say that the articles in this blog are very interesting to read. The second one, I must say this blog loads a lot quicker then most, make it more reasonable to visit here again jok mobil

Julia Paige (not verified)
Mon, 05/06/2013 - 13:54
Anonymous's picture

You should check out www.notism.io - its good for prototyping, visual feedback and design workflow

Pete Torres (not verified)
Sun, 04/14/2013 - 03:55
Anonymous's picture

Forty is the old age of youth; fifty is the youth of old age

play for free here (not verified)
Thu, 03/28/2013 - 12:38
Anonymous's picture

Very nice post. I just stumbled upon your weblog and wanted to say that I have truly
enjoyed browsing your blog posts. In any case I will be subscribing to your rss
feed and I hope you write again very soon!

build a website (not verified)
Sun, 03/31/2013 - 03:30
Anonymous's picture

Forty is the old age of youth; fifty is the youth of old age.

play for free here (not verified)
Thu, 03/28/2013 - 12:36
Anonymous's picture

This is really something that is very effective from you. Thanks for sharing.

Spielautomaten (not verified)
Tue, 03/26/2013 - 09:12
Anonymous's picture

Nice roudup. You might be interested in an in-depth comparison I made focusing on specific features (like dynamic widgets : popup, drop-down, menu ... not all have them). Feel free to take a look: http://francoishill.fr/web-ui-prototyping-tools-a-comparison/

FH (not verified)
Fri, 03/08/2013 - 22:03
Anonymous's picture

Hi, Neat post. There is an issue along with your website in web explorer,
could test this? IE still is the market leader and a huge portion of folks
will miss your great writing because of this problem.

a network (not verified)
Tue, 03/19/2013 - 23:22
Anonymous's picture

I pay a quick visit daily a few web pages and information sites to read content, except this webpage provides quality
based posts.

This Site (not verified)
Tue, 03/12/2013 - 12:31