UX Tools and Resources: An Introduction
Getting started in UX design can be a daunting task, but don’t fear: there’s plenty of help around.
Designed for anyone who wants to learn about UX, this course is best suited for people with no previous background in the field. The curriculum includes design courses, videos and resources that are organized into a logical sequence that a beginner can follow. Courses span 131+ hours of content and cover User Experience Design, what it encompasses, UX tools you can use, and how it relates to other disciplines.
An awesome email list that sends you the best UX design links every week. UXDesignWeekly certainly proves its worth by making sure you’re at the top of your game when it comes to knowing trending news in UX design, including the best and newest UX tools.
Wireframing & Prototyping
3. Invision App
A head above, and several steps ahead of everyone else – Invision is one of the most powerful prototyping tools out there. It lets you collaborate on interactive prototypes, gather feedback, and focus workflow of your entire team.
You can upload design assets and add animations, gestures, and transitions to static screens. The platform also features a clean, design driven project management system. It’s a single screen with project status columns (On Hold, In Progress, Needs Review, Approved) that you can drag-and-drop prototype screens into. Moving a prototype from On Hold to In Progress notifies your team that a change has been made.
Invision has free, unlimited user testing directly from an iPhone, and lets you seamlessly launch meetings and guided tours to present your designs to stakeholders. It puts your entire design workflow in one place, and pulls activity from just about any system you can imagine (e.g. Box, Dropbox, Slack, Github, etc.)
BONUS: Mockplus iDoc
Mockplus iDoc is a powerful product design collaboration tool for designers and engineers. It helps connect the entire product design workflow by facilitating handoffs by taking designs from Sketch, Adobe XD, PS and exporting into a format that can generate code snippets, specs, and assets.
This design platform lets you easily create wireframes, mockups, and prototypes. It features a simple drag-and-drop interface with hundreds of readymade UI elements for iPhone, Android, and the web. UXPin supports real time collaboration (something like a Google Doc but for design). You can design from scratch and customize, or import existing Sketch and Photoshop files.
Related: UI vs. UX: A Culinary Comparison
As a great prototyping tool, it can transform a static mockup into an interactive prototype, complete with animations and advanced interactions. UXPin lets you share those designs and collect feedback from teammates and clients, even if they don’t have an account. All comments are then turned into a task list, which can be checked off one by one. For real time presentations, the platform features screen sharing and click tracking – all of which can be recorded!
It’s everyone’s favorite design tool for a reason. Sketch is incredibly powerful and easy to use. The interface is intuitive and forgiving of mistakes you may make while learning it–which shouldn’t be long – this app is so well designed, it makes you want to learn how to use it well.
Balsamiq Mockups is a rapid wireframing tool that puts heavy focus on the speed of generating ideas and creating simple mockups. It’s like sketching on a whiteboard that anticipates your actions. It has a drag-and-drop UI library, which can be used by typing elements’ names in the search bar and hitting “enter.” Start typing “button” and Balsamiq recognizes what you’re looking for just two letters in, and drops that element in the workspace. It really is very fast.
Balsamiq is designed for collaboration, and is most powerful at the ideation stage. This tool is best categorized as zenware – its goal is to disappear and let you be immersed in your task. It stays out of your way, and supports you when you need it, making it a perfect inclusion on this list of valuable UX tools.
Wireframe is similar to Balsamiq in that it favours speed over pixel perfection. It’s the only tool on this list that you can play with immediately after landing on the home page. The home page is the workspace. It has the lowest barrier to entry, and puts heavy focus on fast wireframe sketches. You click and drag to draw on the canvas, double tap on the created element to bring up the context-sensitive UI.
You can choose between three templates: a browser window, a tablet, or a phone. The free version has no user accounts, and lets you save your wireframes with a unique URL, which you can bookmark or share. The tool is limited in its abilities, but it knows what it can do really well.
8. POP app
This tool has a beautifully simple premise – sketch your mobile UI on paper, take photos with your phone, and add links to them to simulate interactivity. It is best suited for those who start in a design sketchpad, and want to test their assumptions quickly. POP app favors speed of ideation over anything else.
It packs a myriad of useful features: multi-platform support, co-working mode, ability to share your progress with others, Dropbox and Adobe Creative Cloud sync, gestures, transitions, and rapid duplication of projects, mockups, and links.
Flinto strikes a balance between fast prototyping and realism. It has custom animations, gestures, and lets you import static prototypes directly from Sketch. Flinto comes in two versions: web-based and a Mac native app.
Once animations and transitions are added to your prototype – Flinto lets you test them directly on your iPhone or iPad, and share them with anyone.
This tool’s focus is on letting you test complex mobile interactions, animations and transitions. The app generates native prototypes that you can test on your phone, as if the app was actually running. You can upload static prototypes, add animations and interactions, and instantly see your design come to life on both iOS and Android. No coding is required.
Since joining Google on July 1, 2015, Pixate Studio became completely free to use, and they have recently released a better, faster, stronger Pixate Studio 2.0 that you should definitely try.
Update: Pixate has shut down. This post from FitSmallBusiness has some alternatives.
These four web-apps work without you having to sign up for anything. They’re not the most powerful, but may be worth bookmarking for when you need a fast answer to one of the following questions: site mapping and/or responsive screen testing.
Thunkable is the new kid on the block. Backed by YCombinator (winter 2016 batch) and incubated at Google and MIT, this tools lets you build a working android app (iOS support coming soon) right in your browser. No command line kits, development suites, or simulators are needed. Sign in with your Google account and use built-in templates as they are, or customize if you need to.
The tool is brand new, and lets you drag-and-drop modules that make your app idea come to life. You can make changes online, and see them instantly on your device, with the Thunkable mobile app. When you’re happy with your first actually working app – publish it directly to the Google Play Store, or send it to your friends to try and give you feedback.
Mockplus is a recent addition to this list — a recent discovery of ours. It is a rapid prototyping tool to make interactive prototypes on mobile, web as well as desktop, which would be a great help for UX/UI designers, software engineers, product managers and developers of any level to visualize their ideas much faster and easier.
This collection of free design resources made by designers of Facebook gives you a selection of useful templates. From iOS 9 UI elements, to photos of hands holding various modern smartphones. Use them to prototype, showcase your mockups, or on your landing page. All resources are free for commercial and personal use.
Macaw is sorcery. It looks and works like an image editor, but also writes semantic HTML and succinct CSS. The app is available as a free download for Mac and Windows, and they have recently joined another entry in our list of UX tools, InVision.
Webflow is in the same league as Macaw when it comes to UX tools – it lets you design and launch responsive websites without writing code. The platform also works as a CMS (content management system) and lets you design and build using pre-made components. Incredibly powerful and easy to use.
Paper is a beautiful, pleasure to use app made by the good people from FiftyThree. It is a sketchpad that you use on your iPad and iPhone. The app is free, and you can even get a great stylus called Pencil to go with it. When you need to sketch or jot something down fast, Paper lets you draw on photos, make checklists, and even create diagrams and charts.
Drag and drop layouts, design presentations, and social media graphics. Canva features millions of images that you can edit with preset photo filters, or advanced editing tools. The platform has icons, shapes, and fonts and comes in two flavours – web app and iPad native.
18. Adobe Color CC
This clever, simple to use colour wheel lets you pick a primary colour, and generate a complementary palette based on that. Have a photo with a beautiful colour scheme? Upload it to Adobe Color and it will generate a palette from it.
This web-only tool will not only generate a palette based on your primary colour, but will also let you run different variations of that palette. It can show you vision simulations for different types of colorblindness, varying degrees of saturation, as well as legacy web colours.
This fantastic marketplace is supported by the awesome community. It has a small but growing selection of free UI kits, and premium readymade mockups, wireframes, themes and icons. A Designer News account is needed to download or purchase items, which is well worth signing up for.
Free high-resolution photos for you to do whatever you want with. Unsplash is an invaluable part of this list of UX tools because it allows you to leverage great visual assets in your design work.
This tiny app optimizes and minifies high-resolution images for web use. It has two modes – lossy and lossless. The app has a one-step workflow – drop the images into it and it does the rest, making it one of the best user experiences for the UX tools we’ve listed. Simple, powerful, super fast, it does what it says it will seamlessly.
23. Google Fonts
Google currently has 708 open source font families in its library. Pick a font, grab a single line of code, and implement it in your website. All fonts can be used privately, commercially, in print or anywhere online.
The Icomoon app has the most comprehensive, easy to implement, searchable library of icon fonts. Everything from hamburger menus to social icons is at your fingertips. Icomoon gives you instant access to the web’s most popular icon fonts (Fontawsome, Entypo, etc.) all in one place.
The app lets you download assets in the form of fonts, SVGs, images and other formats.
User Tracking & Feedback
Omniconvert was built with marketers in mind. It makes running advanced website optimization experiments easy, without having to ask the development team for help. The tool has over 100 overlay templates available for running quick tests. Because sometimes you don’t need to involve designers either!
Built with the UX designer in mind, this tool’s coolest feature is “click to track.” It works exactly like it sounds – you point and click on the key elements of your site to define and track events without writing code and is perfect for UX research.
Kissmetrics lets you set up A/B tests, and funnel reports based on people’s behavior on your website. You’ll be able to read the minds of your users, and track design changes you make with the changes in behavior they cause.
This very powerful and easy to use form builder lets you create surveys, and send them to your users. Typeform puts heavy focus on the humanity of it all, using simple, beautifully designed responsive interfaces. Even with a free version of the app, you can embed created typeforms directly into your website/app and integrate Google analytics.
Typeform provides you with a way to use Zapier for extended functionality and awesome automation, allowing you to mix and match it with other UX tools.
This company makes an easy to install feedback button for you to integrate into your website, app, or even an email. Press a button – give feedback. That’s really all there is to it. Human-centric emotional rating (read: smiley faces) can be replaced with a numerical rating, and this widget’s implementation is as easy as copy and pasting.
This tiny, free to use tool lets you watch a five-minute video of a person using your website or app. All you have to do is enter a URL to your product, and within hours Peek will send you a video of someone using it, while they narrate the experience. Unique among the UX tools here, it basically gives you a free view of what somebody else thinks about your site.
30. Red Pen
This click and comment collaboration tool lets you upload a design prototype, share it with anyone you like, and get feedback. All comments are overlaid on top of the design elements people are commenting on, and everything happens in real time. Red Pen keeps track of version history, and you don’t need to sign up to try the product.
Similar functionality as Red Pen, this tool lets you review and sign off on design and video work. You and your team can communicate via notes or even sketches that are left directly on the uploaded work. Notism also lets you turn static mockups into interactive prototypes, and present projects in real-time.
Free screen sharing from your browser, with video conferencing and unlimited audio calling. The app also features a that you can share with anyone to start collaborating. Download the app, launch it, and start screen sharing immediately (as shown in the screenshot above) – no setup required.
Screen sharing, window sharing, conferencing and chat for those with a Google account. (That’s everyone, right?)
XMind is used for mapping out a project. In essence, it’s a whiteboard that lives on your computer.
RealtimeBoard allows agile teams of designers to collaborate with one another with a whiteboard that lives in their browser. Get ready to put in stickers that cross timezones and continents!
This YC backed company provides fully integrated A/B testing, push notification and analytics platform. Single line of code setup gives you access to visual tools to help you avoid common A/B testing mistakes for native mobile apps. Smart push notifications give you hyper-personalized messaging down to individual user, if you ever need to get that close and personal. Analytics data is tied directly to your A/B tests and push notifications, giving you only actionable data out-of-the-box.
A/B testing, optimization and analytics. Going a step further, Optimizely lets you personalize customer experience, by delivering targeted content in real time. It can serve contextual content, and even content relevant to current weather conditions. This makes it a worthy addition to this list of great UX tools.
Free, flexible, and visual way to organize anything with anyone. It’s sticky notes with superpowers. Trello uses cards to keep track of projects and tasks, that sync across all of your devices.
It’s the only stand-alone task management tool on this list because the increasing trend in design software is to have task management built-in to the core product.
Finding the Best in Design
Panda is a web and iOS app, or a browser extension that feeds you the best in design from around the web. By default it grabs the best posts from Dribble and Designer News, but can configured to pull from any other source. Panda weekly newsletter is also worth signing up for. It gives you a short list of what’s popular on the platform, top designs of the week, and a list of trending design and development jobs.
Awwwards is a website that highlights and showcases the talent and effort of the best designers, developers and agencies from around the world. Submitted website designs are measured by the following criteria: 40% Design, 30% UX/UI, 20% Creativity, and 10% Content. Each month, the six highest scoring websites are nominated for Site of the Month.
This daily publication showcases works and stories that exist at the intersection of design and business. Everything from technology to architecture and fashion, with focus on innovation and pushing boundaries.
A UX designer is an eternal learner who has to adapt to user feedback. The UX tools they use will determine how quickly they can turn ideas into working experiences. Make sure you’re at the peak of our productivity by considering each tool, and share with us any tool you think we might have missed in the comments below.