Prototyping Tools on Mac: Comparative Feature
With the fact that prototyping is an obligatory stage of work on a project, everyone has already reconciled, since the market now offers a lot of solutions, in addition to pen and paper. Given that the functionality of the majority of instruments is repeated in general terms, choosing the “one” is a thankless task. However, having set the goal of upgrading the software arsenal for the development team, we forced ourselves to go through this, and today we would like to offer our readers a mini-study with pictures so that they can get an idea of ​​some popular programs and compare the results.
In total, we selected five applicants from different price categories - WireframSketcher, Flair Builder, Balsamiq Mockups, Make My App and Pencil Project. Due to the specific requirements of the workflow, we were only interested in options with the ability to work offline and an affordable version for Mac. Preference was given to old and reputable programs, but as an exception, the young project Make My App was also taken as an exception, with which we already had to work. In order to fully appreciate and compare the possibilities, we selected 4 different screens from our Mac MaCleaner 5 Mac Optimizer and tried to recreate them with the means of each of the programs.
')
Below are the results and a short squeeze of those impressions and observations that we made in the process.
Wireframing sketcher
Price: $ 99 (5849 rubles) for a one-year subscription, 14 days trial
Distribution: through the official website
Export: PDF, HTML (online), PNG
Platforms: Mac, Windows, Ubuntu
WireframeSketcher offers a very wide range of elements for its considerable price compared to other options, and bonus web frameworks and Windows Phone are on the list of available template layouts. The elements are divided into two groups: universal, which, in turn, are divided into thematic groups, and a set of specific for your chosen platform. Because of all this abundance, the interface and the work scheme itself may seem a bit confusing at first, but when you look into it, the program leaves a pleasant impression with its thoughtfulness in the details. Element settings, for example, give more freedom and flexibility than analogs - you can not only choose colors, font and icon, but also adjust the shape of the component and set the desired state of the element. The latter, in our opinion, is especially valuable against the background of common practice to make as separate elements, which limits the possibilities and overloads the library with unnecessary options. When the object is stretched or compressed, a window with dimensions is displayed on the working surface. Well, of course, the function of converting to a component is very useful, which saves time by creating mini-templates for repeated use. The output model is stylized, exaggeratedly “rough” - for an amateur, but does not interfere with perception.
Pencil
Price: Free
Distribution: through the official website
Export: PNG, PSD, SVG, ODT, HTML
Platforms: Mac, Windows, Ubuntu
Pencil, the only free solution in the collection without reservation, looks surprisingly worthy: it does not shake the imagination, but it copes with its task without any special problems. There are also three standard sets available - iOS, Android, Web - with basic elements (but without differentiation by model). Possibilities of customization are significantly reduced, but the situation is saved by the fact that many elements are presented in several variations. The Pencil can be reproached with not very convenient navigation - the grouping of objects inside the library is done by type of elements, then by platform, and the arrangement of groups cannot be called logical. Confused and the complete lack of markup on the workspace. But in terms of Pencil export formats, the definitive winner: in addition to the usual PNG and PDF, the user will be offered to draw his layout and web page, and into an SVG file, and even into a text document.
Flairbuilder
Price: $ 99 (5849 rubles), trial 15 days
Distribution: through the official website
Export: PNG, HTML
Platforms: Mobile, Tablet, Web
The interface FlairBuilder clearly lost the balance between minimalism and intuition: the existence of many opportunities have literally guess, so at first glance, the program may seem to be poor in terms of functions. The “starter” list of items is very limited, additional ones from the Bootstrap 3 and Material Design collections open in a separate window, which makes navigation and control difficult. Export formats are also presented modestly: there is not even a classic, all demanded PDF. But the user is offered an unprecedentedly wide choice of canvases for different models of devices (but without corresponding packages of customized objects). An interesting feature of the program is that the type and model of the device are not fixed within the project - they can be changed at any time to see how your design will look on the screen of a different size. Another significant plus is how convenient and transparent everything is done as regards internal interlinking of pages: making the object interactive and adjusting the transition parameters is a little more difficult than choosing a color and font.
Balsamiq mockups
Price: $ 89 (5277 p), trial 30 days
Mode of distribution: through the official website
Export: PDF, PNG, JSON
Platform support: browser version, Mac, Windows client
This is probably the only program whose interface did not cause us any complaints in the process of work - everything is clear, logical and convenient. The only thing: a little cramped in the working field, but it can be tailored to fit your needs. The number of items in the library and the variety of customizable parameters are generally comparable to what WireframeSketcher offers; interactivity is also present, although it is somewhat inferior in functionality to FlairBuilder. Platform differentiation is minimal: basic types of screens are presented (smartphone, iPhone, iPad, web-screen), a special category of elements is allocated only for iOS devices, and even that has less than a dozen objects. Mention deserve and a couple of built-in tricks that protect the developer from himself: the ability to recover deleted projects and automatically save all changes in the mockup. Finally, the list of export formats includes everything you need and JSON in addition. In general, the fact that Balsamiq Mockups is very popular in the virgin community is not at all surprising - this is an acceptable alternative to WireframeSketcher at a more affordable price and with a modified interface.
Make my app
Price: $ 29, $ 99 (2290 r) + there is a free version
Distribution: via the Mac App Store
Platform: Mac
Export: PNG
Make My App reminds Pencil, not only for its budget, but also for the general impression of simplicity and transparency. It is convenient to work with it: all functions, with rare exceptions, in plain sight, the working field is very spacious and allows you to work with several screens at the same time, the interface is not overloaded. Make My App's great advantage is the availability of templates for different types of devices in the library: in addition to the gentlemanly set of iPhone-iPad-Desktop-Android, there are also screens and elements for Apple TV and Apple Watch, in addition, Android and iPhone screens are available in several versions, corresponding to different phone models. Themselves sets of elements of medium volume - you can not find any frills, but all the most common there; editable parameters are also limited to the most basic set. It was striking that the project can only be uploaded to an image. Finally, as the final touch of loyalty to Apple, Make My App is the only solution on our list that is distributed through the official store and, accordingly, is available only for Mac. This should be borne in mind by those for whom security concerns are important, and those who value cross-platform and synchronization.
We add that the market has already appeared updated version of the product - Make My App 2 . We got acquainted with it, but for comparison we chose the first part. The updated solution is cheaper and has some significant advantages - more convenient management, the possibility of grouping elements - however, at the moment it is inferior to the source code in the number and variety of elements. Perhaps after a few updates the situation will change, but for now we would recommend the old version.
Summarizing all of the above, we must say that the unequivocal "who's better" conclusion is difficult to do: too much depends on the initial goals and priorities of the developer. For those who use a very wide range of elements in their work, it probably makes sense to invest in the purchase of WireframerSketcher or Balsamiq Mockups. Those who specialize in simpler layouts will be enough for libraries that offer Pencil or Make My App. On FlairBuilder and WireframerSketcher, attention should be paid to those for whom interactivity is important, and Make My App can be a good find for teams that make software for a wide range of devices. The interface also plays a significant role - we did not regret our decision to try each of the options “in action”: this allowed us, at a minimum, to estimate the difference in time spent on creating a layout, which results in abstract “failed UX solutions” and “good usability. We hope that despite the lack of a universal verdict, our observations will help other teams to choose. If you have experience with any of the reviewed programs or other solutions for prototyping on a Mac, listen with interest in the comments.
In total, we selected five applicants from different price categories - WireframSketcher, Flair Builder, Balsamiq Mockups, Make My App and Pencil Project. Due to the specific requirements of the workflow, we were only interested in options with the ability to work offline and an affordable version for Mac. Preference was given to old and reputable programs, but as an exception, the young project Make My App was also taken as an exception, with which we already had to work. In order to fully appreciate and compare the possibilities, we selected 4 different screens from our Mac MaCleaner 5 Mac Optimizer and tried to recreate them with the means of each of the programs.
')
Below are the results and a short squeeze of those impressions and observations that we made in the process.
Wireframing sketcher
Price: $ 99 (5849 rubles) for a one-year subscription, 14 days trial
Distribution: through the official website
Export: PDF, HTML (online), PNG
Platforms: Mac, Windows, Ubuntu
WireframeSketcher offers a very wide range of elements for its considerable price compared to other options, and bonus web frameworks and Windows Phone are on the list of available template layouts. The elements are divided into two groups: universal, which, in turn, are divided into thematic groups, and a set of specific for your chosen platform. Because of all this abundance, the interface and the work scheme itself may seem a bit confusing at first, but when you look into it, the program leaves a pleasant impression with its thoughtfulness in the details. Element settings, for example, give more freedom and flexibility than analogs - you can not only choose colors, font and icon, but also adjust the shape of the component and set the desired state of the element. The latter, in our opinion, is especially valuable against the background of common practice to make as separate elements, which limits the possibilities and overloads the library with unnecessary options. When the object is stretched or compressed, a window with dimensions is displayed on the working surface. Well, of course, the function of converting to a component is very useful, which saves time by creating mini-templates for repeated use. The output model is stylized, exaggeratedly “rough” - for an amateur, but does not interfere with perception.
Pencil
Price: Free
Distribution: through the official website
Export: PNG, PSD, SVG, ODT, HTML
Platforms: Mac, Windows, Ubuntu
Pencil, the only free solution in the collection without reservation, looks surprisingly worthy: it does not shake the imagination, but it copes with its task without any special problems. There are also three standard sets available - iOS, Android, Web - with basic elements (but without differentiation by model). Possibilities of customization are significantly reduced, but the situation is saved by the fact that many elements are presented in several variations. The Pencil can be reproached with not very convenient navigation - the grouping of objects inside the library is done by type of elements, then by platform, and the arrangement of groups cannot be called logical. Confused and the complete lack of markup on the workspace. But in terms of Pencil export formats, the definitive winner: in addition to the usual PNG and PDF, the user will be offered to draw his layout and web page, and into an SVG file, and even into a text document.
Flairbuilder
Price: $ 99 (5849 rubles), trial 15 days
Distribution: through the official website
Export: PNG, HTML
Platforms: Mobile, Tablet, Web
The interface FlairBuilder clearly lost the balance between minimalism and intuition: the existence of many opportunities have literally guess, so at first glance, the program may seem to be poor in terms of functions. The “starter” list of items is very limited, additional ones from the Bootstrap 3 and Material Design collections open in a separate window, which makes navigation and control difficult. Export formats are also presented modestly: there is not even a classic, all demanded PDF. But the user is offered an unprecedentedly wide choice of canvases for different models of devices (but without corresponding packages of customized objects). An interesting feature of the program is that the type and model of the device are not fixed within the project - they can be changed at any time to see how your design will look on the screen of a different size. Another significant plus is how convenient and transparent everything is done as regards internal interlinking of pages: making the object interactive and adjusting the transition parameters is a little more difficult than choosing a color and font.
Balsamiq mockups
Price: $ 89 (5277 p), trial 30 days
Mode of distribution: through the official website
Export: PDF, PNG, JSON
Platform support: browser version, Mac, Windows client
This is probably the only program whose interface did not cause us any complaints in the process of work - everything is clear, logical and convenient. The only thing: a little cramped in the working field, but it can be tailored to fit your needs. The number of items in the library and the variety of customizable parameters are generally comparable to what WireframeSketcher offers; interactivity is also present, although it is somewhat inferior in functionality to FlairBuilder. Platform differentiation is minimal: basic types of screens are presented (smartphone, iPhone, iPad, web-screen), a special category of elements is allocated only for iOS devices, and even that has less than a dozen objects. Mention deserve and a couple of built-in tricks that protect the developer from himself: the ability to recover deleted projects and automatically save all changes in the mockup. Finally, the list of export formats includes everything you need and JSON in addition. In general, the fact that Balsamiq Mockups is very popular in the virgin community is not at all surprising - this is an acceptable alternative to WireframeSketcher at a more affordable price and with a modified interface.
Make my app
Price: $ 29, $ 99 (2290 r) + there is a free version
Distribution: via the Mac App Store
Platform: Mac
Export: PNG
Make My App reminds Pencil, not only for its budget, but also for the general impression of simplicity and transparency. It is convenient to work with it: all functions, with rare exceptions, in plain sight, the working field is very spacious and allows you to work with several screens at the same time, the interface is not overloaded. Make My App's great advantage is the availability of templates for different types of devices in the library: in addition to the gentlemanly set of iPhone-iPad-Desktop-Android, there are also screens and elements for Apple TV and Apple Watch, in addition, Android and iPhone screens are available in several versions, corresponding to different phone models. Themselves sets of elements of medium volume - you can not find any frills, but all the most common there; editable parameters are also limited to the most basic set. It was striking that the project can only be uploaded to an image. Finally, as the final touch of loyalty to Apple, Make My App is the only solution on our list that is distributed through the official store and, accordingly, is available only for Mac. This should be borne in mind by those for whom security concerns are important, and those who value cross-platform and synchronization.
We add that the market has already appeared updated version of the product - Make My App 2 . We got acquainted with it, but for comparison we chose the first part. The updated solution is cheaper and has some significant advantages - more convenient management, the possibility of grouping elements - however, at the moment it is inferior to the source code in the number and variety of elements. Perhaps after a few updates the situation will change, but for now we would recommend the old version.
Summarizing all of the above, we must say that the unequivocal "who's better" conclusion is difficult to do: too much depends on the initial goals and priorities of the developer. For those who use a very wide range of elements in their work, it probably makes sense to invest in the purchase of WireframerSketcher or Balsamiq Mockups. Those who specialize in simpler layouts will be enough for libraries that offer Pencil or Make My App. On FlairBuilder and WireframerSketcher, attention should be paid to those for whom interactivity is important, and Make My App can be a good find for teams that make software for a wide range of devices. The interface also plays a significant role - we did not regret our decision to try each of the options “in action”: this allowed us, at a minimum, to estimate the difference in time spent on creating a layout, which results in abstract “failed UX solutions” and “good usability. We hope that despite the lack of a universal verdict, our observations will help other teams to choose. If you have experience with any of the reviewed programs or other solutions for prototyping on a Mac, listen with interest in the comments.
Source: https://habr.com/ru/post/333832/
All Articles