When a small concept turns into a hundred wireframes that quickly turn into a prototype, sometimes the question arises too late: Which tool would have been the right one? In our work at Centigrade, we often consider which tools we can best use to create concepts. As always, this depends on many factors and we decide on different criteria in every project. First, the context matters: Will the concept be directly implemented? Are specifications to be written? Do we do the visual design for the concept or do we hand it off directly to the customer? The decision could also hinge on whether a click prototype should be built, whether a usability test takes place or whether animated transitions between the individual wireframes/screens are prioritized for the project from the very beginning. Finally, customers also may have preferences for tools that they use themselves.
The bottom line is: there is no general recommendation for a particular tool. Still, I want to break down what advantages and disadvantages I see in some of the common tools to help other designers to decide.
In most of my projects, it is most important to me to quickly create concepts that depict a concrete usage scenario, showing the general structure of the software, the navigation and interaction concept – and not the visual design. Our experience shows that customers often have false expectations about realistic wireframes – we end up discussing the font size or the background color in reviews rather than the interaction flow through the usage scenario. In this respect, good old Balsamiq still has a big advantage: the hand-drawn style of the standard UI kit.
Some companies do not want to use services in the cloud for privacy reasons, so non-cloud tools are particularly important. That’s why, aside from classic sketching on paper or whiteboard, I want to take a look at Balsamiq Mockups, Adobe XD and PowerPoint. Among other things, I left out Sketch because it is MacOS-exclusive, but I work on Windows. In addition, I limit myself to the conception phase at the beginning of a project and initially exclude the later collaboration with visual designers – depending on the project, however, it can be appropriate to use a tool that allows results from the conception phase to be re-used as assets later.
I will show an example wire flow, a sequence of wireframes, for each tool. For comparability, I use the same user story each time:
Whenever Paula, the shift supervisor, receives a maintenance report by e-mail, she wants to provide it centrally so that her colleagues can find out about the current status in the next shift.
This limited “upload file” scenario is intended to not distract from the actual focus – the choice of tool. Let’s get started!
Pen and paper
No! For real? Yes, especially at the beginning of the conception phase, I find it really useful to limit myself by renouncing all those fancy tools out there. In workshops, nothing works better than a whiteboard, but pen and paper also work fine for a first wire flow. They help uncover logic flaws and examine the overall navigation concept and layout. But pen and paper become more difficult and inefficient when the concept gets detailed and small and large changes need to be made on entire paper stacks.
The implementation of Paula’s user story with pen and paper could look like this at the beginning:
My colleague Jonas Laux has written an article on the advantages of pen and paper. Some of them are:
- Speed: Communicating ideas quickly.
- Thinking through rough concepts immediately and checking their meaningfulness.
- Those simple tools promote collaboration through accessibility.
- Low-fi character: As a concept designer, I’m not tempted to deliver detailed screens; the customer sees no need in criticizing font or spacing and can fully concentrate on the user flow.
Disadvantages:
- Paper sketches are not suitable for detailed concepts because changes are time-consuming.
- The devil is in the details: Many problems of an interaction concept only become visible in the detailed elaboration which is usually excluded when sketching.
Balsamiq Mockups
I have used Balsamiq for most of my projects in recent years. Wire flows can be quickly built and give a good sense of size, space requirements and the interaction with the future interface. Problems arise for complex scenarios and subsequent changes – depending on how or if you have created masters, changes may be quickly incorporated or need manual effort on each wireframe, even if you use masters. The wire flow through the user story is created relatively quickly:
Advantages:
- Hand-drawn style – the wireframe is easily recognizable as such.
- Basic layouts can be created quickly and in a focused manner.
- Controls and icons library: With a bit of experience, you can add a matching UI element or a speaking (placeholder) icon within seconds by shortcut and keyword entry.
- Masters can be created and edited individually.
Disadvantages:
- With a high number of wireframes in one file, clarity and speed of work noticeably suffer.
- Specifications are hardly possible; notes always “get in the way” on the wireframe.
- Balsamiq only exports images, texts in PDFs are not searchable.
- Sooner or later, you need to use tricks to work with masters (for example, “hide” areas by covering them with white elements) because they are not very flexible.
PowerPoint
It sounds like a 90’s method, but PowerPoint actually has a lot to offer for creating concepts. I recently used the tool in two projects and I would say that there are bad disadvantages and at the same time very nice benefits. UI kits with common controls and icons are available through purchase. The normal slide masters can be used very well for the basic layout, so that changes affecting all screens can be managed quite well. Shapes and designs are simple and do not tempt to get lost in detail:
Advantages:
- Adjusting masters in a separate mode and knowing exactly where they have what impact is quite nice. If you get it right the first time, you can make changes on many screens with just a few clicks.
- Beautiful animations need little animation skills – PowerPoint does the heavy lifting, once you understand how to use the “Morph” slide transition. As a result, transitions between UI states can be clarified in an early concept phase, e.g. to guide the attention of the user.
- Everyone knows PowerPoint – customers can open the files without any problems, collaborative work is possible.
- Notes can be easily put in the notes field and later be used for the concept specification.
Disadvantages:
- The program is not primarily designed for concepting, you get to feel that for example with shortcuts and when linking pages (possible, but very cumbersome).
- Animated page transitions should rather be used exemplarily, since changes mean a lot of effort.
- Entire screen transitions can only be animated if they are not based on masters.
- Large concepts containing many wireframes lack clarity in PowerPoint, too. Still, section headings help to structure content.
Adobe XD
I have recently started using Adobe XD and only some experience so far. My colleague Roger Towae took a closer look at Adobe XD from a visual designer’s perspective. My first impression: the tool is still somewhat unfinished, especially for pure concept work. Some things are very nicely done, especially the prototyping functionality. The biggest drawback is that many functions can only be used if the data is stored/published in the cloud – this is not wanted in many of our customer projects. The appearance of the screens can be similar to those in PowerPoint, but there are many more design options that may be irrelevant for the conception phase but useful when reusing the file for the visual design:
Advantages:
- The program helps to align elements and repeat patterns so that orderly wireframes are quickly built.
- Wireframes can be quickly and conveniently linked to each other, prototypes are created in no time.
- The workspace can be arranged clearly by placing related wireframes close to each other and other concepts further away, for example in different columns:
Disadvantages:
- Important functions are still missing. Masters can be created, but not used efficiently. If a master button should be a bit smaller, it becomes smaller everywhere – not even the color can be changed independently in an instance. Hopefully, this will be fixed in future releases.
- There are no standard UI kits or icon libraries. Instead, you must download XD files containing such items and copy them to your own file – but that is tedious and time-consuming. These files cannot be searched by keywords.
- The already mentioned cloud connection means that we cannot use many functions in customer projects.
Conclusion
As already mentioned, the right tool always depends on the task. Pen and paper are ideal for brainstorming and a first rough version. If you want to create static wireframes that show a process, I would still recommend Balsamiq as a suitable tool. If it is more about screen transitions, collaborative work with the customer, and the ability to capture all design decisions, PowerPoint is reasonable. Adobe XD is promising, prototyping is really fun here. Even complex concepts can be organized relatively clearly. Hopefully, essential features for creating a “low-fi concept” will follow soon – if so, I see great potential in Adobe XD, not least because evolving from concept to visual design could be done in the same tool. So, things remain exciting in the concept tool universe.
We have caught your interest? Take a look at our services!