User experience (UX) design has become a huge part of working in the design sector. Working at a creative agency, graphic designers, or any creative at that matter, are most likely expected to have or learn coding and UX/UI design knowledge as well.
Just look at Audi’s recent rebrand for example – that was purely UI and UX based. A new website now gives anyone access to the design systems of 44 brands with highly regarded identities, including Audi and the BBC.
UX design is all about providing the user with the information they’re looking for in the easiest, cleanest, and most intuitive way possible – whether that be a website or mobile app.
In this feature we provide you with a list of the main UX design tools available at the moment to help get you started – and for some, we’ve created a list of helpful classes so you can get learning straight away.
If you’ve been a UX designer for a while – or you’re looking to start for the first time – it’s important to know what tools are available to you, and to get the best tips and advice.
We’ve also spoken to UX designer at Sigma, Francis Rowland, about how to design for people struggling with mental health. Earlier we spoke to a number of people to create guidelines on how to design a website for people with disabilities.
Adobe XD (which stands for experience design) was released only a few years ago, but it’s transformed from beta stages to a fully-fledged UX design tool pretty quickly. As Adobe’s offering to UI and UX designers, you can design websites and mobile apps, prototype and see your finished product in preview in XD.
You can control and customise your experience, get live feedback to iterate faster and preview on mobile devices.
Adobe has recently released the latest update to XD too, so now designers can work with third party tools, and preview XD files in Dropbox.
If you want to learn how use Adobe XD, check out our list of best online tutorials.
You can access the Adobe XD Preview as part of Adobe Creative Cloud.
Framer is an Amsterdam startup company and rival to the likes of Adobe XD and InVision for UX designers.
You can design, draw, animate and share work with Framer – a tool for screen design and interactive prototyping.
Similar to Adobe XD, you can bring designs into life with pre-made interactions and animations, and share your ideas with live project previews with the Framer mobile apps.
You can start a free trial for 14 days, or plans start at US$12 a month.
InVision offers some powerful prototyping tools, allowing you to quickly and easily create interactive mock-ups of our designs in a way that actually reflects a real web experience. It also offers mobile prototyping with gestures, and you can also launch user testing from an iPhone, including screen recordings, videos and audio of users testing your prototypes.
InVision announced in November that its new digital design and UX application will be free for all users. InVision has released Studio – a rival to XD, Photoshop, Illustrator and Sketch, whatever tool you use to design apps, sites and other digital products.
You can work on layouts for one screen size or type, and see that design adapted automatically for other devices and orientations. Libraries of assets can be shared across teams, and updated elements can be rolled out across designs. And designs can be quickly uploaded to the InVision platform to share with others in an organisation (or clients).
You can see InVision Studio in action in the video below.
Simple, efficient and well loved, Sketch is a very big player in the design world, with some even weaning themselves off Photoshop completely for it.
As it’s tailored to design gorgeous UX interfaces through quick and easy-to-learn wire-framing tools, some people believe Sketch is superior to Photoshop when it comes to UX design. Its ability to create different layers for every new object means you can be more creative with navigation and combinations.
If you want to learn Sketch exclusively, check out the best paid and free online Sketch courses.
Sketch comes as a year’s license for £72.30/US$99 per year
Gliffy allows you to create flowcharts, wireframes, UML diagrams, sitemaps and more – and at a low cost, with no download necessary. It really lets you create any kind of diagram, which can be a great way to organise your thoughts and ideas, whether you want to share them with developers or just with yourself.
Stop reading if you own nothing from Apple, as OmniGraffle is specifically for Mac and iOS users – and you have to buy both versions of the app separately, which ups the cost of the already expensive OmniGraffle if you want it on two devices.
For this extra cost comes a great, feature-rich way to visually represent ideas, tasks and activities. It is a powerful diagramming and wireframing tool, but still easy to use.
Microsoft’s Visio Online creates diagrams quickly and easily – and can be linked to many other Microsoft services, such as Excel. You don’t need to install anything. This is a quick, cheap option.
Visio’s simple, easy-to-navigate layout offers plenty of shapes, graphics and lines with pre-crafted starter diagrams and contextual tips and tricks.
With a steeper price comes a more comprehensive wireframing and prototyping service laid out on a simple drag-and-drop canvas.
Create simple click-through diagrams or highly prototypes with animations, data-driven interactions without having to write a single line of code. It’s also easy to collaborate with a team and share your ideas.
For a web app,is surprisingly powerful. It has many functions to build mobile apps, but can therefore be a bit overwhelming to use as everything (everything) works by dragging and dropping. You can also design in or import designs from Sketch or Photoshop, which is pretty handy.
It is easy to share projects with clients, quickly create previews as there is a library of UI elements, and use multiple screens for a single project, as well as connect between those screens (in other words, it is not just layer-based, but page-based).
Of course, as a web application, you can only use it with an internet connection (which is not great stuck in an airport with expensive, or no, wifi). Butalso offers a Player app, for both iOS and Android, to test your prototypes on the actual device they’ll be used on.
The great thing about Photoshop for UX is that, well, you probably already have it. You probably know it well. You probably have a long, rich – and possibly tumultuous – history with it. But is it that suited to UX design? After all, it was made as a photo editor, not a UX design tool, and many digital design agencies are making the switch to the likes of Sketch or InVision.
But the good people at Photoshop are looking to the future – and that future is UX – by releasing plenty of extensions aimed at UX. Adobe’s also focussing a lot on XD, so we may suggest looking at that first for UX design if you still want to stick within Adobe products.
But, with details such as animation, fonts and colour all included, Photoshop is better for the later stages of UX design – the high quality mock-ups, which is what it’s made for and what it’s good at.
You can create responsive, clickable prototypes on your browser, as well as quick-to-create wireframes and some great options for usability testing with a Pro+ account. You can share prototypes easily with others and teams can work easily together to create iterations and wireframes in real time.
Marvel is web-based app (no need to do any downloading) that has a very shallow learning curve. With an upgraded account, you can make your project a collaborative one. Choose from lots of different prototype frames, from an Apple Watch to an iPhone 6.
You can create screens directly in Marvel or add images from Sketch or Photoshop for example, and sync designs from your cloud storage.
All Marvel’s features are simple and easy to use – such as gestures, layering images and user testing. It also offers a Sketch plugin, which is great if you do lots of app design work in Sketch and want to nick some of the cool features from Marvel, such as the range of gestures and image layering.
It makes some people tick – and others’ eyes roll – but user research really is crucial to the UX design process (‘user’ is in the name of the thing, after all). And with UserTesting, you get to really see and hear what users think – and fast, with results promised within an hour.
UserTesting offers videos and metrics of your target audience actually using your website or app – as UserTesting has access to over a million people.
With its Individual plan, you can create your own tests; its Enterprise plan offers the luxury of UserTesting handling the tests for you, as well as help from UserTesting’s user research experts.
Helio (used to be Verify) offers tests and raw data, so you can find out key user behaviours. Solve design problems and avoid costly mistakes by honing in your target audience to see how age, gender, income, location and education shapes responses to your products.
A/B testing tells you what users prefer by testing two options on a pool of users. But it is surprisingly hard to get right, thanks to interfering factors such as the type of user and time of day.
Across apps and websites, Optimizely handles those fiddly details for you with its comprehensive, well-reviewed service. For example, you can discover the weather where users are, and then tailor your service.
It is also easy to implement and its code-free visual editor means it is accessible to those less fluent in coding. Nor does it assume a deep understanding of statistics, with a great results page where you can track goals.
Visual Website Optimizer offers A/B testing, multivariate testing and conversion optimisation, as well as analytics, easy-to-access reports and personalisation.
It’s slightly more suited to beginner A/B testers than Optimizely, which has a slight edge when it comes to pros as it offers multi-page testing and has more options for running behavioural tests in its Enterprise plan.