{"id":8443,"date":"2018-04-26T15:57:32","date_gmt":"2018-04-26T13:57:32","guid":{"rendered":"https:\/\/www.centigrade.de\/blog\/?p=8443"},"modified":"2021-01-07T14:41:37","modified_gmt":"2021-01-07T13:41:37","slug":"spoilt-for-choice-comparing-four-concept-tools","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/en\/blog\/spoilt-for-choice-comparing-four-concept-tools\/","title":{"rendered":"Spoilt for choice \u2013 comparing four concept tools"},"content":{"rendered":"

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.<\/p>\n

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.<\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

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 \u2013 and not the visual design. Our experience shows that customers often have false expectations about realistic wireframes \u2013 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.<\/p>\n

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 \u2013 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.<\/p>\n

I will show an example wire flow, a sequence of wireframes, for each tool. For comparability, I use the same user story each time:<\/p>\n

\n

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.<\/p>\n<\/blockquote>\n

 <\/p>\n

This limited “upload file” scenario is intended to not distract from the actual focus \u2013 the choice of tool. Let\u2019s get started!<\/p>\n

Pen and paper<\/h3>\n

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.<\/p>\n

The implementation of Paula’s user story with pen and paper could look like this at the beginning:<\/p>\n

\"\"<\/a>My colleague\u00a0Jonas Laux has written an article on the advantages of pen and paper<\/a>. Some of them are:<\/p>\n