Michael Gearon

UX and UI Tools 2018

Michael Gearon

Last updated on

The HTML5 logo

With a plethora of UX tools on the market it can be overwhelming what to use. From an idea through to build there is plenty of tools available for any UX or UI job. In this article I will open up what I use on a daily basis that works for me. Tools will include wireframing, design and prototyping as well as sharing the concepts and ideas.

Design

Balsamiq Mockups


Balsamiq should be used right at the start of the project, in the ideation phase. You can create desktop and mobile views and with simple drag and drop elements it is straight forward to use. It doesn’t focus on the styling of the UI but instead it is way to roughly work out how your application or website could be laid out. This is the digital equivalent of pen and paper

Cost: $89

Available on: Mac and Windows

Sketch


Sketch, also known as the Adobe Photoshop and Illustrator killer is a vector-based design tool. This is when you start to add the look and feel of your website or application. There are plenty of free and pay plugins, mockups and UI’s you can get for Sketch.

There are plenty of things you can do with Sketch such as iOS Mirroring, vector editing, create your own UI kit, code export and much more. This tool is used pretty much used on a daily basis and there isn’t much of a learning curve to start with.

Cost: $99 with special prices for education, adding additional users and renewing expired licences

Available on: Mac only

Zeplin


Once your design is done then it is time to build it, sometimes handing it over to a developer. It can be tricky turning a static design into a finished built project but Zeplin aims to help improve the hand-off by generating styleguides and resources for you. There is also Slack integration so you can notify other designers and developers when a design or resource is updated. Zeplin also allow extensions from third-party sources so there is a good few additional plugins that might suit your setup.

Cost: $0 for one project (then $17 for 3 active projects, $26 for 12 active projects)

Available on: Mac only

Photoshop and Illustrator


Still worth the mention, Adobe Photoshop and Illustrator are still relevant regardless of Sketch. Photoshop is useful for creating and manipulating photos, illustrations and 3D artwork. Whilst Illustrator is useful for creating icons and vector based graphics.

Cost: Lots of options available depending on your needs

Available on: Mac and Windows

Prototyping and Communicating

Adobe XD

Fairly new to the lineup is Adobe XD. It aims to replace a few tools and gives UX/UI designers the ability to go from concept to prototype faster and easier. This tool is fairly new to me and it has a long way to go compared to say Sketch but it is promising the developments they are making.

Cost: Lots of options available depending on your needs

Available on: Mac and Windows

Principle


Once you have designed how your application will look, what about the interactions and animations, how will they feel? Principle offers a way to link your designs together with multiple screens, add animations and interactions within your designs.

With principle mirror you can preview your application on your iOS device to get a true look and feel of your app. This also gives engineers a good idea of what the final application should be once built improving the communication between designer and developer.

Cost: $129

Available on: Mac only

Invision


One of the most popular ways to share your designs is Invision. You can add basic animations, gestures and transitions to your designs turning static designs into interactive prototypes. The most powerful feature of Invision is the ability to easily add and respond to comments and receive notifications when someone leaves a comment. Another powerful aspect of Invision is how it is connected to many other applications such as Slack, Trello and GitHub.

Cost: Free to start with

Available on: Mac and Windows

Michael Gearon

Written by

Michael Gearon

Senior Interaction Designer and Co-Author to Tiny CSS Projects