Modern UI & UX Design Tools
With a continuous growth of the demand for UI/UX designers and their salaries overgrowing fron-end developers yet smaller competition (UI Designer Salary Research), diving into UX is very attractive. One of the essential skills to get on board is getting to know the tools. The ecosystem of design tools, used by the leading design professionals, has been undergoing significant development in order to meet this demand. The previous year could be called “interesting” when it comes to tools’ development. However, the current one… is nothing short of fascinating!
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 specialised 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 stylisation is extremely bare at this stage, seemingly non — existent, because the main function of the sketch is to logically show the frame, visualise the way the useable windows are placed in order to maximise efficient accomplishment of the user’s goals. One of my favourite 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 InVision 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 favourites 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 favourite 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 inVision and Uxpin 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 programmes 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 programme’s rumoured 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. I make use of it often during meetings and presentations, where the audience members want to move the elements on their own, or when I have to prototype quickly on the move, in a train or a plane, for example. Finished project can be directly sent to one of Adobe applications!
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.
Let us go back to the prototyping tools and take a bit of a different look this time. When I have a finished, detailed UI project, my next step should be the presentation of how it works. What I mean is creating an interactive prototype to be presented in a browser or a mobile phone. If the only thing we want to showcase is a set of transitions, Marvel and InVision seem like a good choice, because these solutions operate on page transitions (Page — Based Prototyping). However, if we want to create more complex animations of particular elements and send them to the developers as specifications, we should use different tools (Layer — Based Prototyping), included in the following selection my personal favourites (unfortunately all of them intended for Macs):
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 CoffeScript, 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 programme 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.
Efficient Handoff Tools
I have mentioned the amazing teamwork capabilities of design in Figma, or simple prototyping in inVision and Uxpin. Besides communication among the members of a project team, or with a client, the cooperation between the designer and the developer, responsible for implementation of the page or application, is also essential. A question then — can the prototyping tools generate finished application code? Not yet.. We can extract data concerning the length and easing of the animations but we have to remember that programming a readymade product always starts from scratch — which means the moment design materials have been passed from the design team to the development team. Of course, there are tools which can assist us. In my opinion, the most useful ones are Zeplin and Avocode, which allow the extraction of resources from Photoshop or Sketch. The resources have descriptions aimed at the developers, detailing the size, distance, fonts, and colours, often even accompanied by a CSS code. I will talk about them in a different article, but they get my full recommendation. In the Adobe Package you may find a function called “Extract”, and use it to share the PSD file with the developer.
Moreover, while discussing the handoff Tools, we have to consider the growing number of used tools and file formats by a project team. The design process may involve simultaneous use of many different tools (this is how I often do it), for example: Adobe Proto or UXPin > Sketch and Photoshop > Marvel > Flinto > Zeplin. It is just one possible scenario. One of the next articles will contain information about tools which help manage the files, and allow easy versioning. I usually use GIT and Dropbox, but the process will be described in detail in a separate article.
Mac vs. PC
A lot of the applications mentioned in the article are Mac OS exclusives. Whenever I am asked to cast my vote for a better platform of the two (Mac or PC) — I say that the platform itself does not amount to much without a proper level of skills, and when one is skilled the choice becomes a non — issue. However, in my opinion, if someone thinks of UI prototyping and design professionally they will not regret switching to a Mac, because there is really no need to overcomplicate matters. It is important to know that Mac applications are incredibly light and efficient, which makes them useable even on slower machines.
Comparison of tools, prices, platforms
You already know my recommendations, but remember there is a lot, a lot more UX tools on the market. Initially I had planned to show you a comparison of prices, operating systems, and pros and cons, but fortunately uxtools did it for me. Take a look at the comparison on uxtools.co.
Stay up to date!
UI/UX tools are undergoing changes as we speak. It is advisable to follow the projects I have mentioned, like Subform, but pay attention to Google projects — Stage and Gallery. Google stopped developing Pixate some time ago, and focused on creating entirely new prototyping tools. First versions of these apps are expected to launch soon. Another promising tool — ProtoPie, offers visual environment for the creation of micro interactions, and is aimed at multi — touch and the use of device sensors.
As you can see yourself — exciting times for UI/UX designers require significant investment in knowledge and new tool operating skills but I am positive this investment is about to have a substantial return in profits. Are there any other useful tools you want to recommend? Anything I might have skipped?
Training courses for most of tools mentioned in the article to be found very soon on https://learnux.io