Modern UI & UX Design Tools

New Design Process

Rapid growth of the market is closely tied to the increase of the demand for all IT services in general, as well as the need for efficient web interface designs and mobile applications, which have to be tested before final release.

Hence, there is a noticeable boom in popularity of prototyping tools, which allow the user to experience some of the finished product’s features even before the programmers have had a chance to fully flesh everything out. Because of the constantly rising costs of engineering services, this proves to be a very economical solution.

The prototyping tools are extremely versatile they may be used to form an initial draft, design the UI, and create animations and micro interactions. That is why it is sometimes difficult to plan the process around them. In my opinion they serve their purpose best in the initial and final phases of the design process, and specialized UI applications should be used for the main processes of visual design.

Design Process and the Tools

It might be a good idea to discuss modern tools in the context of the UI design process itself. UI design professionals have recently become capable of interacting with the process through the use of not only their basic skills and professional knowledge, but also UX design, prototyping, as well as general professional versatility, and soft skills. Leading designers have to deal with a lot of expectations. Taking a look at the process, we may differentiate research and study (skipped, as they are irrelevant from the point of view of tool use), creating less complex prototypes (lo — fidelity, wireframes), detailed UI design, and prototyping. Additional categories include designer teamwork and cooperation with the developers. All the aforementioned stages are essential, but they are not the only ones involved in the shaping of the user’s experience.

Tools for Initial Design Stages

The early stages of design are called prototyping and wireframe design, meaning the creation of sketches of little detail, which visually communicate the main purpose of the project, the idea behind it, and clarify the flow — to, the way the user will interact with it. The stylization is extremely bare at this stage, seemingly non — existent, because the main function of the sketch is to logically show the frame, visualize the way the useable windows are placed in order to maximize efficient accomplishment of the user’s goals. One of my favorite tools at this stage has always been a classic paper and a pencil but there are also web and native applications you can use, which serve this purpose well. Unfortunately, most of the applications in this category, such as In-Vision and Proto.io, have since evolved into complex multi tools with more and more functions added with each new iterations: hi fidelity prototyping, versioning, teamwork management, and million other functions. Maybe it’s for the better, but in my experience design process stages should be separated and sometimes fewer functions mean more, in the end. That is why one of my favorites here is Marvel and its design mode, which is very intuitive and easy to learn, but includes all the necessary functions.

InVision — The line between initial design tools and detailed interface ones is becoming more and more blurred. In my opinion however, inVision is still one of the tools which has not lost its quick prototyping character when a solid base of readymade components is available.

UXpin — Just like inVision, the software offers a feature of quick prototyping by making use of readymade libraries. Both inVision and Uxpin offer a range of collaborative possibilities and are intended for project teams which need easy to use communication channels. Uxpin is a bit harder to learn for newcomers, though.

Mockplus  a rapid prototyping tool to make interactive prototypes on mobile, web as well as desktop, with plenty of readymade icons and components that resemble Android, iOS and PC software. Simple drag-and-drop to make interactions and there are several ways to test out your prototypes. The collaboration features are dedicated for effective teamwork.

Marvel One of my favorite apps. I use it mainly in two cases — to create prototypes quickly, using simple shapes and component libraries (in my opinion, looking better than the ones provided in the apps by default), and later — after the UI has been designed, to load up screens and create transition images. Marvel offers a great feature, where you can send a link to the prototype via SMS, and the client may see it as if they were using a mobile application. In comparison with In-Vision and Ux-pin the team working features are not as well developed.

Proto.io A tool with a plethora of features and functions. Besides everything the previously mentioned programmers offer, Proto.io has an upper hand when it comes to creating extremely precise iOS and Android prototypes. It also boasts feedback collecting feature and prototype testing capabilities.

Axure Contrary to the aforementioned competitors Axure is not a web application, but a native one. Among professionals who deal with UX on a regular basis it has pretty much become a standard to use. Axure respects its roots and it serves mainly as a tool for lo-fidelity prototyping. It has never managed to win my heart, but one cannot deny how big of a player it is, especially in large companies — because of the programmer’s rumored algorithm generating complex documentation. Not convinced honestly, as I have never been a fan of documentation, but… this is a story for another time

Justinmind — Similarly to Axure, Justinmind is a native application with a broad range of functions and a friendly interface. Worthy of attention and you should check it out. Again, in my opinion, there is a bit of an issue with accessibility for beginners. If we do not take into account the full process of design, but only the initial phase, the application may prove overly complex.

Bonus: Prototyping directly on a device with Adobe Comp CC  in my opinion one of the great choices for single screen work.

All the apps mentioned so far represent just a fragment of a growing list of applications of this kind. They gain in popularity daily, but there are a few others worth mentioning, such as: Mockflow, Pidoco, Balsamiq Mockups, Mockplus, and OmniGraffle. Although the full extent of their functions is much greater, I have decided to use them mainly for lo-fidelity prototyping in the beginning stages of the design process, and sometimes later, when I want to showcase transitions and animations on finished screens. Why? Because detailed UI design requires significantly better tools:

UI Design Tools

Sketch Unfortunately it is a Mac exclusive, but that is the only fault of the application. In my opinion this is currently the best interface designing tool out there. Numerous customisable plug-ins, when properly configured, make Sketch an amazing, versatile application which can be made to fulfil even very specific needs.

Figma  The fact that Sketch is such an outstanding tool does not mean it is utterly without competition. Figma is a native/web application, although the latter will definitely convince you of its quality easier. You can use it everywhere, on every platform, even on slower devices, and all the extra options including a real time project cooperation make Figma a possible contender for the crown wielded by Sketch.

Photoshop & Illustrator — Still used by many UI designers, still great applications. Unfortunately they were not created for the specific task of interface creation. They possess numerous other tools and options, are heavier and significantly slower than the previously mentioned apps.

Affinity Designer — A very promising application, maybe a future PC alternative for Sketch. Additionally, the switch from Adobe to Affinity is rather smooth, which can be an asset. Another plus for low price and significantly faster UI design workflow when compared to the PS.

Subform — A tool worth following. Just like Figma it works in a browser and even though it’s a new player on the market it can already compete with the best UI designing tools. It is still not quite there yet, but the developers are heading in the right direction.

Adobe XD — It does work better on a Mac than on a PC, however Macs have Sketch. Maybe it could be a worthy alternative in the PC market? I will point at Affinity as a better solution, but Adobe XD is closing the gap, and boasts great integration with other applications included in the package, and transitions prototyping capabilities.

Prototyping and micro-interaction Tools

Principle The feature of importing projects from Sketch makes both tools a great working combo. Principle can be used to animate imported layers and groups. Additionally you might want to make use of the drawers, which form connections between animations, and allow the creation of detailed micro interactions. Sometimes the application works in an overly complicated way, though. Especially when compared to the next position on the list.

Flinto Another excellent application, also equipped with the function of importing files from Sketch. More intuitive than Principle at times, also having creative capabilities for transitions, as well as reusable components and own animations. As a bonus, there is a Lite web version available. Most definitely recommended, and easily comparable with Principle.

Framer One of the most interesting and popular applications of 2017. It is also one of the most difficult to use, as it requires the knowledge of Coffee-Script, programming. If you manage to not get intimidated and learn some of it, you will discover a whole another level of designing interactions, without limitations set by program functions which have to be found and clicked on in the interface. Framer does have a Design mode, so not everything has to be coded. It can also import Photoshop, Figma, and Sketch files. Framer is used by the best UI designers and the market giants, such as Facebook, Google, Uber.

Again, it is not an exhaustive list of applications which help creating animated transmissions and micro interactions. Some others, worth mentioning, are for example Atomic.io and Origami. Which one to learn? From my point of view, it is definitely worth it to be familiar with all of them. For simple tasks I often use Marvel, for more complicated ones Flinto, and the most demanding tasks require the use of Framer. There is no one universal rule here, but knowledge of the tools separates good UI/UX designers from the best ones.