Search This Blog

I do not know whether you know it, but there are more than one real good wireframe tool in the software orbit - and there aren't a best for every one.

As freelancer I have to gear myself and my work up for my individual clients, their business and their development procedures.

And I am forced to work with different tools. And I have owned several licenses for various wireframe tools to support my client as good as I can. But currently I just work with four tools.

Concept-Draw

Visio

Axure

Pencil and Paper (A tool that you should never forget or is not to be underestimated – by the way … “Do you know the stencil kits by UIstencils?” visit: http://www.uistencils.com/ )

In recent years the number of tools available to help us document our development process by wireframes has steady risen. And I will offer you a brief overview of a few wireframe tools.

Concept-Draw

Visio

Axure

Omnigraffle

Balsamiq

iRise

Lovely Charts

ProtoShare

Pencil Project

MockFlow

Gliffy

Wireframing is a crucial step in web design and development. It builds a groundwork which is easy and quick to understand – it builds the base for discussions, consideration and review and testing. It allows rapid prototyping either as paper prototyping or by the tool itself as clickable deliverable. And these sketches or designed drawings help to determine and discuss potential problems early in the process.

It can be invaluable and vital to have a visual representation of content, functions and hierarchy. If you have a small microsite or an other tiny web presentation it might or looks like negligible – but it will be helpful also in this cases.

Wireframes make it easier to communicate ideas, reduce scope problems and misinterpretations, cut down on project costs (due to fewer concept modifications and design revisions during later project steps), and enable greater upfront utility analysis, usability reviews and functionality survey.

Wireframes can be created in many ways with several tools depending upon one’s communication needs and budget. Most simply, pen and paper are key tools for creating web wireframes. No matter whether you use to draw fast-scribbled sketches on notebook paper, detailed ink drawing with stencils on graph paper, lineart or greybox drawings or on a napkin during the lunch break.

In addition some designers and developers are using Illustrator, Fireworks or PowerPoint to create wireframes. That’s also fine if you like it and it support you and your work – but as I mentioned there are so many different tools and diagram software apps available to support your best or as good as currently possible – I also haven’t still not found the “holy grail” :-)

1. Concept-Draw(http://www.conceptdraw.com/products.php)Concept-Draw is a software that runs on Mac and PC. And you can switch without any problem from one platform to the other. Concept-Draw is a diagramming software that lets you develop, communicate, and dynamically present your flowcharts, sitemaps and wireframes.

Don't let your first glance fool you. Concept-Draw is a lot easier to use than it looks. To get started, all you need to know are a few basic steps and terms.

ConceptDraw PRO has an extensive library that are ready to be used, but as so often these libraries are OK but not really that what you need for your daily work, but it’s very easy to create your own library with stencils and or patterns or masters.

You can use Concept-Draw as single software or within the Concept-Draw Office suite. And I’d suggest you to by the suite – Concept-Draw Office suite consists of the diagramming software, a mind mapping tool (ConceptDraw MindMap), and a project management tool (Concept-Draw PROJECT ).

ConceptDraw MindMap has a couple of options. You can start from a blank document or you can choose from one of the pre-loaded templates or you can select ‘Brainstorm’. A feature I really love.

The Brainstorm option is quite cool and would be a good tool to use within a project team meeting. You can determine the time limit by a stopwatch - this is a useful addition and saves someone having to be timekeeper.

Concept-Draw PROJECT offers the full set of features you need to plan, organize and manage a project, including task and resource management, reporting, and change control – this is not only interesting for project managers (to be in time and in budget is a team responsibility).

Visio is the only one of the three tools I use which is available just on the Windows platform. It is one of the most popular and comprehensive prototyping tools. Visio is a lot easier to use than it looks, especially when you are already familiar with Microsoft Office. It’s pretty much the same like I’ve already wrote about Concept-Draw - to get started, all you need to know are a few basic steps and terms. I still think Visio is a great tool for quick mockups, much quicker than Axure and as quick as Concept-Draw, but it has limitations as the other too. I can’t count the number of wireframes and sitemaps I have develop with Visio – so I am very familiar with it – but it has its pros and cons.

Fortunately, there's a broad community around Visio with useful shapes.

My experience is it’s the most used diagram tool. It's an advanced software that enables you to create a wide range of diagrams.

There are a lot of compelling features in Visio especially in the latest version Visio 2010 that make it an excellent and versatile diagramming tool.

Compared to previous versions of Visio, the 2010 version just makes it easier to lay out a diagram with simpler drag and drop, automatic alignment and spacing, containers and a more powerful "preview" feature. Visio has been part of the Office suite for quite some time. The simple fact of Visio 2010 is that it works as seamlessly as ever with the other Office tools, and more easily integrates with an enterprise's data, information and tools than ever before. And that's good, because there's more enterprise data and information than ever before -- and visualizing it all can be a key role in the decision-making process. However when Office 2007 was released, Visio didn't get the new Ribbon bar interface. That has now been corrected in the 2010 release, giving Microsoft Office Visio 2010 the familiar Office look.

Axure works on PC and Mac. Axure allows you to construct wireframe models, document functional specifications, and generate prototypes. Axure is an excellent tool to create high-fidelity, complex mockups that require a lot of interaction. In a drag and drop environment, annotated wireframes are quickly and easily created. You should be prepared for two things if your site is very big or complex Axure might be confusing. But let us be honest that’s always the case regardless of whether you work with Axure or another diagram software – you should be / you have to work clearly and distinctly. And be prepared for a learning curve though, especially when implementing complex interactions. Fortunately, the program and the accompanying web site have a large number of walkthroughs and other tutorials.

The number of widgets that ships with Axure is surprisingly small or in other words it’s all too often too small. Fortunately, there's a strong community around Axure.

One thing I really like about Axure is that it supports me with the paper work. I am a person who thinks in pictures and structures not in words – so I am very thankful that Axure is on my side to do this work much easier and well structured. During the prototyping process, you can add notes and annotations to almost everything - pages, widgets, masters etc. - and generate a Word document with all the screenshots and specifications included – with just one click. Axure keeps your wireframe and prototype work well attuned to your paper work / documentation. The word document is of course highly configurable - that’s great on the one hand but on the other it’s all too often very tricky to get the result you are looking for.

Additionally, on Axure’s website you can find a number of videos that show how to use Axure. If you need to create high-fidelity, complex and programmable prototypes, Axure RP Pro is definitely worth checking out.

Comments

Thanks for including ProtoShare in your list of wireframing applications!

ProtoShare does a great job of facilitating discussions between stakeholders during the wireframing stages to help flesh out requirements. You can even export your work to a web page for user testing. And if your team needs to go beyond wireframing, ProtoShare is flexible enough to evolve gray-box wireframes to more advanced prototypes.

WireframeSketcher is a desktop wireframing tool that can also integrate with your IDE. It works with Aptana, Flash Builder, Zend Studio and the like. It lets you draw simple wireframes, more complex mockups and even have some interactivity. You can show off your work using a built-in viewer or export to high-quality, interactive, vector PDF.

Very nice summary of different tools. One I´ve tried recently is Just in Mind http://justinmind.com/ which seems to be slightly better then Axure. But the Mac version is using most of the time 90% CPU which is just not acceptable. Otherwise the PC version is certainly worth a try.

App Sketcher (http://www.appsketcher.com) is a new tool for creating interactive HTML prototypes. Unlike most other tools, it uses real web controls (HTML elements, jQuery components, Google Maps etc.) as building blocks (no coding involved). It produces HTML/CSS/JS based prototypes that can run in any browser.

Nice summary of prototyping/wirefraiming tools. Here's Mockplus, a rapid and simple prototyping tool. It is a desktop based software tool supports for software prototyping on multiple major platforms, such as mobile-based, website-based and desktop-based applications. Mac version and Windows versions are available.

Popular Posts

Most of our
projects are complex and multifaceted or they change emphasis during their
‘life-time’ or both. These products and services are overwhelmed with
expectations, needs, must-haves and nice-to-haves. They also have to cover,
serve, support and take into account many supply channels, communication
channels and communication chains. There are so many users and these users most
often have more than just one responsibility (users often have more than just
one responsibility or role – most people have different roles. For each
individual there will be many roles and each person adopts a different role
depending on the circumstances, see http://boxesandarrows.com/view/ux-design-planning for more). There are many
tools out there used to target and bring light into the ”unknown”. With this
article I’d like to introduce you to one of my favorite tools – the swim…

ART asks and inspires - DESIGN answers and motivates
Asking and inspiring vs answering and motivating is for my point of view the difference of art and design.
And it’s again and again the thing I have to tell upcoming designers or often experienced one. Yes as designer we have the freedom to do many things – to go various ways – but we have a clear aim: “helping people”.

To help someone you have to be understandable and meaningful. Understandability and meaningfulness is possibly the most important issue to be considered while judging the goodness of a design. And if we talk about design I am talking about visual appearance and content.

On the one hand beauty is subjective, and that makes our world so diverse. On the other hand it follows rules which we all learned as we grow up. To design something there are some rules and guidance we have to have in mind and should stick to. Yes for sure you can break rules and often it’s good and useful to do it but you should know what you bre…

I am pretty sure almost everybody had already thought about how cool it might be to walk into a store, taking all the goods you need, and then just leaving the store and making the checkout without having to do any transactions and standing in the line – well Amazon is calling it “just walk out technology” – or better to remember Amazon Go
Amazon Go is coming early 2017 – the location of the first store will be at 2131 7th Ave, Seattle, Washington.

Test users have already testing the store. Amazon is outlining currently the basic details, but I don’t have the full picture and process yet.

Amazon tells it will be fairly simple for the customer. The customer only walk into the store, scans and get recognized by his mobile device. A cart will be created automatically and the customer can collect his goods – that easy.

We all know the ideas of Walmart in the US and Globus and Metro in Germany – they used an actual cart and a scanner. They used either a bar code scanner or RFID scanner. …