‘The great’ UX design toolbox

A pool of 900 tools to choose from in an end-to-end UX design process from problem to the presentation of a high fidelity prototype and product concept.

István Sebestyén
UX Collective

--

(Source: author)

If you scroll through this article with due attention, you will find your reward.
Let us assume that as a member of a team, as a UX designer, you go through an entire product development process from problem definition to the presentation of the product concept including a tested hi-fi prototype.

You need different tools. Option # 1: Paper and pen and that is the end of this article. Option2 #: digital tools. You can see a lot of ‘The best x tool’ type articles on the internet, but for specific purposes or features, typically. My goal was to collect some of these in one place according to the phases and important elements of the double diamond methodology.

Although I intended to list the most frequently mentioned tools in each category in 2021 by public sources, this is a pool and not a quality ranking. Predominantly, these are standalone web-based tools. The 900 is a gross figure, including overlaps.

You might ask what good is all this? You use Figma with plugins and you’re done. Or Adobe Creative Cloud and you’re done etc. Many believe in ‘the ultimate tool’, which integrates everything through the continuous development of its features and plugins. It seems also that the industry is gravitating towards a couple of plugins fuelled ecosystems, growing communities built around specific integrated prototyping, whiteboard, or research tools. At the same time, the tools became more and more integrated, such as UX research and testing, vector graphic editor software covering a lot of UI, video editors including from screen recording to publishing, etc., and the boundaries of the tools are also blurred.

To use a few of these integrated ecosystems is reasonable for practical work organization and financial reasons. It is also in the business model of software companies to chain designers to themselves in their own ecosystem. However, as a principle, openness and flexibility could be at least as much a value as efficiency for a designer. Integrated tools can save time, but the correlation is not automatic, that if one feature is good, each one is the best in its field.

Depending on the working context the prototyping, collaboration, communication, and project management tools are likely to be tied. But even so, your hand is not tied for the rest. If this is not the case, or you are an external contractor/freelancer, you are completely free to choose the tool that fits. It is obvious that your background and experience will determine what you create yourself and when to use eg. stock. With a graphic background, you create your icons, illustrations most likely and hand-draw the lo-fidelity prototype. With an attraction to photography, you’ll use your own images and not stock photos, and so on.

I made no distinction between free and paid tools. The reason for this is twofold. On the one hand, a lot of paid tools also offer a free plan for example for one live project, or with limited functionalities, or for a limited time to try out. On the other hand, it is an individual financial decision as to who chooses and which paid tool (with costs varied), respectively, and who stays with the freebies. You are sure to find several free tool options for each element of the double diamond. I also didn’t specify an operating system. A lot of tools could be used for both desktop and mobile designs, so I didn’t differentiate that either.

I listed the integrated tools typically under several elements of the four stages of the double diamond. It could happen that I did not mention some tools in the most appropriate place. It is also possible that I did not put certain methods to the adequate stage of the double diamond. There are quite numerous tools that you can use at the various parts of the various stages.

Where the tool is not relevant, I am talking about a method or template, just to make the double diamond process complete. Some tools are more specifically UI tools. Since I am talking about an end-to-end digital product development process, I consider these as part of the UX design process here.

The parameters of rankings published widely on tools do not necessarily match your aspects and practical experience either. Thus, nothing saves your own laborious discovery.

As a disclaimer, the number of UX-like tools is endless, and designer communities’ abundant and rapidly evolving contribution to tools and this way to the UX universe is quintessential as of today, thus, my pool of standalone tools is only a tiny part of the wonderful Milky Way.

I hope this article is helpful in the process of consciously developing your own toolbox. Treat it as an appetizer, in other words, be inspired to inspire.

Before you dive into the problem you might need tools for teamwork.

Project management (14)

These are used by agile project management teams.

(Source: Startup Stock Photos, Pexels)

Asana, Trello, UpWave, Workzone, Jira, Rally, Pivotal Tracker, Basecamp, Bugzilla, Redmine, Azure DevOps, ClickUp, Notion, SessionLab

Collaboration (10)

Covid19 speeded up remote work and even cross-border collaboration to give a boost to these kinds of tools.

(Source: Dio Hasbi Saniskoro, Pexels)

Miro, Mural, Conceptboard, Fresco, Figjam (Figma), InvisonAppFreehand, Whiteboard Plugin for Adobe XD Whimsical, Confluence, SessionLab

Communication (15)

(Source: Andrea Piacquadio, Pexels)

Slack, Google Chat, Chanty, Microsoft Teams, RocketChat, Discord, Mattermost, Flock, Ryver, Glip, Flowdock, Fleep, Twist, HighSide, Troop Messenger

Daily stand up (23)

(Source: Mart Production, Pexels)

Geekbot, Friday App, Standuply, Jell, Polly, ScrumGenius, Krisp, Range, Yac, Status Hero, Envoy, Ricotta, DailyBot, Flowist, Olaph, Cadence, Neo, WhatGotDone, Complish, Standups, I Done This, StandupBuddy, Tatsu

Time Zone (8)

Remote collaborative teams may need to take into account multiple time zones. Typical features: world clock, map-based time zones or converter, online meeting scheduler, emails scheduler, local time tracker of teams visually.

(Source: Andrey Grushnikov, Pexels)

World Time Buddy, Boomerang, Time Zone Converter, World Clock Meeting Planner, Timezone.io, Timefinder, Klok (iOS), iPhone World Clock Settings

Icebreaker (16)

It seems ridiculous to put this in this line, but there can be a number of situations where you have to work with unknown stakeholders throughout a project. It can also be useful in the warm-up phase of certain research processes.

(Source: Jopwell, Pexels)

Ice Shaker, Icebreaker Box, Coworker Feud, QuizBreaker, Water Cooler Trivia, Pictionary, Virtual Games, Werewolf, Would You Rather Generator, Skribbl, Two Truths And a Lie, Sporcle, Classic Trivia, Water Cooler, Virtual Pub, Invision Freehand Icebreaker template

And now let’s look at the double diamond.

There are slightly different definitions for the names, boundaries, and content of each phase of a Double Diamond design process. That’s not the point.
What is that the process should include all relevant content elements.
More importantly, although my description in this article is linear, in reality, the process is always full of iterative loops, more desk research, more testing, more ideation and so on. This is the key to the double diamond methodology and to the design process.

If you get this far in reading, you deserve a reward. From this link, you can download ‘The Great’ UX Design Toolbox XLS. With a linked table of contents, the toolbox consisting of 900 tools (gross, with overlaps) is broken down into 4 + 1 elements of the double diamond including 56 separate ‘chapters’. It is customizable flexibly. But I encourage you to keep scrolling.

Problem (6)

You need to identify the problem with methods and tools, and you need to formulate a problem statement. Why? You give a straightforward description of the problem in the problem statement in order to ensure the focus of the project, to make clear what needs to be done in the discovery phase and what is out of scope. In terms of tools, these are mostly templates, diagrams, charts, collaboration or workshop tools.

(Source: Andrea Piacquadio, Pexels)

In problem framing, you explain and describe the context of the problem to gain the most support from the stakeholders of the project. You could follow the logic of defining the ideal situation first and describing the gaps. This leads to the consequences of the problem. Finally, you can propose how to address the problem.

Techniques and tools supporting to understand problems and help this process are Five Whys, Fishbone Diagrams (Miro, Conceptboard, Figma, Mural)and problem visualization exercises, flowcharts, pseudocode, and Nassi-Shneiderman diagrams, which are used specifically with structured programs.

You should give a memorable, even funny name to the problem as a common reference that is easy to remember.

Some tools helping remote visual collaboration: Bluescape, Capsule, Pixelic, Slidebean, Gleek.io.

UX Research (14)

I indicate whether the method is qualitative or quantitative. Within UX research, the role of the qualitative methods is strengthening recently.

I would like to highlight some tools that can be used in several parts of the research phase. Without exclusivity of course, just as an example.

(Source: Fauxels, Pexels)

Usersnap.com, Optimalworkshop, Hotjar, Mouseflow, Kissmetrics, Mixpanel, Lookback, Maze, Miro, Reduct.Video, Typeform, Qualtrics, UserTesting, UserZoom

Primary Research

Is about researching the users directly.

Recruiting for UX Research (11)

There are always two types of cases depending on the context.

(Source: Tima Miroschnichenko)

1) Unknowns should be recruited. The easiest is to post on social media platforms: Facebook, Linkedin, Reddit, Craigslist, Ethnio. If you have a separate, substantial budget for this, or it is justified by any professional or other consideration, you can work with a recruitment agency (eg. Respondent.io) or panel company. Some tools developed for user testing may also be considered.
2) Recruitment from a familiar set of users is sufficient. You need access to a user database of existing products or participants must be recruited within the company. You can also involve friends and family.

User Interview (18)

(Source: Alex Green, Pexels)

It is a qualitative method.
User Interviews, PingPong, Lookback, Userzoom, dscout, Calendly, Airtable, Microsoft Teams, Google Meet, Zoom, U Meeting, BigBlueButton, BlueJeans Meetings, Lifesize, Skype, GoToMeeting, Cisco Webex Meetings, Livestorm

You can find user interview templates at eg. whiteboard tools and other sources.

Focus Groups (8)

It is a qualitative method. Here, tools appear for group recruitment, audio/video capture and transcript, and templates used for alternative methods to Q&A. But the focus is much more on good methodology, good moderator and good observers.

The observer(s)’ notes should include interesting quotes; key points and themes from any exercise or question; follow up questions, ideas and insights “light bulb moments”; anything else significant (body language, passion/anger etc.).

(Source: Fauxels, Pexels)

The end result of the analysis is a report containing key findings. To help you write, process the reactions based on the following keywords: words, context, consistency, frequency of participation, intensity, specificity.

Q and A is the most common format for focus groups. Variety could require alternatives, however, eg.: making choices from lists of alternatives; list-making; fill in the blank exercises; fantasy/daydream exercises; picture drawing; role-playing; card sorting. These could be supported by templates/tools.

Usability Testing (16+5+10)

(Source: this is engineering, Pexels)

It is a qualitative method. Maze, Loop11, Userlytics, PingPong, What users do, Usertest.io, MechanicalTurk, UsabilityHUB, Koncept, FitNesse, Bugwolf, Zoom, Google Meet, Google Hangouts, Morae, Hotjar Session Recording

A/B testing (5):

It is a quantitative method. Optimizely, VWO, Google Analytics Experiments, Google Optimize, Omnicovert

Tree test (10)

(Source: Treetesting, Optimal Workshop)

It is a quantitative method. Physical (pen, paper), UXtweak, Treejack (Optimal Workshop), UserZoom, Userlytics, uxarmy, Helio, Proven by Users tree testing

The most affordable digital version is folder clicking. In a File manager (e.g. Windows Explorer), you create the tree of folders and observe the users on which path they click through it.

Another alternative is that some web editors allow the creation of interactive site maps, while some HTML prototypes use tree widgets.

Screen recorder (10+11)

(Source: Cottonbro, Pexels)

Free screen recorders:
Free Cam, Free Screen Video Recorder, ShareX, CamStudio, Ezvid, TinyTake, OBS Studio, Zappy (macOS), Quicktime (iOS), AZ Screen recorder

Paid screen recorders:
iSpring Suite, Camtasia, Filmora, Movavi Screen Recorder, My Screen Recorder Pro, FlashBack, Loom, Screencast-O-Matic, Reflector, Snagit, Hotjar Session Recording

Diary Studies (10)

(Source: Vlada Karpovich, Pexels)

It is a qualitative method.
dscout, Indeemo, SurveySignal, LifeData (health care), MetricWire, iFormBuilder by Zerion Software, Teamscope, WhatsApp, OneNote, Google Sheets

Social listening (24)

(Source: Pixabay, Pexels)

It is a qualitative method. Awario, Brand24, Brandwatch Consumer Research, BrandMentions, Zignal, Sprout Social, Talkwalker, Sprinklr, Keyhole, Socialbakers, Falcon, Agora Pulse, YouScan, Digimind, Buzzsumo, Hootsuite Insights, Meltwater, NetBase, Synthesio, Cyfe, Mention, Reputology, ReviewInc, 76Insights

Surveys (20)

(Source:Pixabay, Pexels)

It is a quantitative method. SurveyMonkey, Typeform, Usabilla, Google Forms, Hotjar Incoming Feedback, Hotjar Surveys, HubSpot, Jotform, ProProfs Survey Maker, Qualtrics, Question Pro, Refiner, SoGoSurwey, SurveyLegend, SurveySparrow, Zoho Survey, SurveyAnyplace, QuestionPro, Teamscope. Click for more.

Secondary or Desk Research

It can be both, qualitative and quantitative.

Desk research (8)

The desk research covers the best practices, the competitor analysis, and the trend study. The source of secondary information could be various: company’s internal data, public data from the internet, statistics, market research, reports, app stores etc.

The qualitative part. In desk research, you analyze the existing products: competitors or even very different ones but with relevant solutions. Products can vary from very specific to generic depending on the scope. You acquire the internal knowledge of the company. Most likely you find product proposals, controlling data on clients, customer centre reports, data on previous A/B tests, design iterations, flow diagrams, presentations supporting your understanding.

You look at previous research to check whether your topic was already considered in a still relevant way: eg. old studies made in a different culture are useless.

(Source: Pixabay, Pexels)

Focus on the context of the product: the users, their goals and the environment where the action occurs. You can go for findings or test your hypothesis, at this stage you are not focusing on the solution yet, but you should take notes of your ideas for the later stage.

Not speaking about statistical tools now, the main question here is how to process, synthesize, and present the findings. For example, screenshots can be collected in all collaborative whiteboard tools (Miro, Mural, Conceptboard, Figjam (Figma), InvisonAppFreehand), and the well-known Office applications are perfect for spreadsheets and graphs, if not, you can move forward to dataviz. On-the-fly ideas can be put on sticky notes again on a whiteboard, etc.

Analytics (4)

The quantitative part of that. Technically, I just put it here, but analytical tools come into play both in the UX research phase and when testing the finished hi-fi prototype.

(Source: Lukas, Pexels)

A significant proportion of analytical tools integrate the support for multiple analytical methods. Examples for some of the generally known ones: Google Analytics, Hotjar, Kissmetrics, Mixpanel

Heatmaps (15)

Each type of heatmap helps you investigate a slightly different aspect of your website performance: scroll heatmaps, click/touch heatmaps, move heatmaps. There are industry-specific heatmap tools, but these are general ones.

(Source: Chris Iarson, Pexels)

Mouseflow, Plerdy, Attention Insight, Visitor Analytics, Hotjar, Clicky, Lucky Orange, Crazy Egg, Contentsquare (Clicktale), Inspectlet, Google Analytics, FullStory, Smartlook, Ptengine, VWO

Eye tracker (16)

(Source: Victor Freitas, Pexels)

Element Human, Tobii, EyeSee Research, Cool Tool, Uniphore (Emotion Research Lab), Eye Square, Eyetracker, eyezag, Lumen, EyeSee Research, Gazepoint, Hawkeye, Loceye, RealEye, Sticky, EyeQuant,

Research Documentation (6+8+4)

(Source: Cottonbro, Pexels)

Note: Dovetail, Notion, Google Docs, Evernote, Airtable, Reframer

For audio and video transcriptions: Otter.ai, Rev, Reduct, Audiate, Otter.ai Zoom integration, Temi, Descript

Insights: Spreadsheet, EnjoyHQ, Dovetail, Handrail or Aurelius

Word Cloud Generators (8)

On top of classical charts, a small visual solution for a possible display of results.

(Source:word-cloud-min)

Jason Davies’ Word Cloud Generator, Monkey Learn World Cloud Generator, TagCrowd, WordArt.com, WordClouds.com, WordItOut, Abcya
Click for more.

The final form of research synthesis can be accomplished with the well-known presentation tools.

Empathy map (8)

An empathy map is a template, and accessible as an integrated feature of a digital whiteboard or even in the community section of integrated prototyping tools. Some examples:

(Source: Anastasia Shuraeva, Pexels))

Miro Empathy Map Template, Mural Empathy Map Canvas Template, Invision Empathy Map Canvas, Conceptboard, Moqups Empathy Map Template, Creately Empathy Map Templates, Figma Empathy Map Templates, Dribble.

Affinity diagram (11)

(Source: Sam Lion, Pexels)

Smartdraw, Lucidchart, Miro, Lucidspark, Praxie, Invision Freehand, Creately, Online Visual Paradigm, Mural, Figma, Canva

Persona creation (15)

(Source: Artem Podrez, Pexels)

Xtensio, Make My Persona by Hubspot, Up Close and Persona, User Forge, Smaply, Live Persona by Delve AI, Mnemonic AI, Uxpressia, Personapp, Userbit-User Personas, Bootstrapped Customer Persona Template (Content Harmony), McorpCX Persona, Akoonu, Buyer Persona Templates (Buyer Persona Institute), Reframer

Jobs to be done (7)

Without elaborating on the theoretical background, two defining approaches are most commonly used: Switch (Bob Moesta and Chris Spiek, working with Clayton Christensen), or ODI: Outcome-Driven Innovation® (Anthony Ulwick, Strategyn LLC).

(Source: Anthony Shkraba, Pexels)

For the Switch, the template is the Switch timeline and the 4 Forces matrix, in which 2 forces block change, 2 promotes a new choice.

When using ODI, which is perhaps more commonly known you can use a job story canvas or a job map to sort your observation on activities. Breaking down an action into its elements supports you to find improvement opportunities. In the job story, your product covers the job to be done to reach the desired outcome. You most likely find JTBD templates as a part of integrated research or whiteboard tools, examples: Miro, JTBD, Conceptboard, Attest, Mural, Infolio, Figma.

Storyboard (14)

(Source: Matt Popovich, Unsplash)

FrameForge, Storyboarder, Boords, Plot, MakeStoryboard, StudioBinder, Visme, PowerProduction Software, Canva, PanelForge, StoryboardThat, Toon Boom, Miro Storyboard Template, Mural Storyboarding Template

User journey (16)

The tendency is that UX research tools integrate various templates to support all UX research methodologies, in fact, prototyping tools also include user journey features usually linked to or as a feature of their whiteboard solution.

Obviously, the same tool/template supports the ‘AS-IS’ and the ‘TO-BE’ Journey. While the AS-IS Journey belongs to the Define part of the double diamond, the TO BE Journey is to the Ideation part.

(Source: Yuri Yuhara and Matt Hardy, Pexels)

Crazy8 (9)

Practically all tools that provide whiteboard with sticky notes could be used for Crazy8.

(Source: Bruno Bueno, Pexels)

Card sorting (15)

(Source: Cottonbro, Pexels)

OptimalSort by Optimal Workshop, Maze, UserZoom, Userlytics, UXTweak, UserTesting, UserBit, UXArmy, Proven By Users, Miro, MURAL, Trello, Whimsical, xSort, kardSort

Feature prioritization/selection (11)

What supports future prioritization/selection are methodology frameworks and not technical tools really since all can be made on spreadsheets or using sticky notes etc. All methodologies have pros and cons. Some are used in agile development projects. Probably the most widely used frameworks are as follows with examples and templates:

(Source: Digital Buggu, Pexels)

Flowchart (10)

The trend is that the prototyping tools, whiteboards, also integrate the flowchart drawing into their features.

(Source: Christina Morillo, Pexels)

IA (25)

(Source: Berk Ozdemir, Pexels)

Pen and paper, Dyno mapper, Powermapper, Omnigraffle, Microsoft Visio, MindManager, LovelyCharts, Miro, Lucidchart, Xmind, Coggle.it, Flowmapp, Xtreeme Sitexpert, Smartdraw, MindMeister, Powerpoint, Excel, Google Adwords Suggestion Tool, Own Search Results, Treejack, Jesse James Garrett, Visio Stencils, Nick Finck Stencils, UI8, Sharepoint

Low-Fidelity Wireframing

Sketching (2)

(Source: Ray Piedra, Pexels)

There is a lot of digital drawing software, but these are typically used by graphic artists. I have not yet experienced UX designers using these.

The easiest way is to put the first ideas on paper or on the whiteboards of familiar collaboration or prototyping applications eg. as a sticky note.

Lo-Fi Wireframes (8)

Typically, tools capable of hi-fi prototyping have a lo-fi wireframing solution. Balsamiq is an exception, it is dedicated to lo-fi.

(Source: Picjumbo, Pexels)

High-Fidelity Prototyping and UI

Design inspiration (30)

For a designer, literally, anything can be an inspiration anytime. Perhaps most prominent is nature. But also sectors and areas other than your own domain knowledge. In terms of UI, it can be art. Some design agencies or designers whose work you follow. Last but not least, design-related sites. Examples:

(Source: Una Laurencic, Pexels)

Behance, Instagram, Pinterest, Dribble, Awwwards, Logoinspirations, Designinspiration, CollectUI, Abduzeedo, Best Website Gallery, CSS Nectar, siteInspire, Product Pages, Land-book, Commerce Cream, The Great Discontent, A List Apart, Brutalist Websites, Admire the Web, Template Monster, Pttrns, Webflow showcase, Mobile patterns, Mobile mozaic, InspiredUI, Calltoidea, WebdesignDev, Mockplus, Muzli, Figma Community

Design system (17)

There are basically two possible cases. One is when you need to use the company’s / customer’s own design system or one of the most widespread design systems. It is also possible that the focus of your project is not your own UI and therefore you rely on an existing system. In the other case, you get a free hand to design and assemble the elements yourself.

It is quite generally accepted that the most important features are of the design systems are: colour palette, typography, form components, navigation components, CSS code, HTML code, usage guidelines. Here are the most commonly known, probably:

(Source: Pixabay, Pexels)

Google Material Design System, Apple Human Interface, Guidelines, Microsoft Fluent Design System, IBM Carbon Design System, Shopify Polaris Design System, Mailchimp Design System, Atlassian Design System, Salesforce Lightning Design System, Airbnb Design, Uber Design System, Audi Design System, BuzzFeed Solid, Akveo Eva Design System, Liquid, Adobe Spectrum, Clarity, Ant

UX Writing (37)

UX writing (UX copy) is a universe in itself, with tentacles towards microcopy and SEO etc. I will not go into these in detail here. The use of AI has also appeared in UX writing. UX writers must keep their copy organized, thus, maintaining an adequate file management system. UX writers are more and more involved in the end-to-end design process, they also comment and give feedback to product versions. Prototyping tools also provide at least guidance and tips but even tools for UX writing.

(Source: Suzy Hazelwood, Pexels)

Grammar: Grammarly, Copywritely, Wordcounter, Google Trends, Grammar Girl, Subject line checker on Litmus, AMI Headline Analyzer, Verbix

Thesaurus, wording: Thesaurus.com, Words To Use, Cliché Finder, Unsuck It

Readability: Readable, Hemingway Editor, The Writer Readability Checker, Readability Formulas, Natural Reader

Translation: Smartling

Managing UX copy in design workflow: Frontitude, Ditto, Strings

Feedback handling in the design process: MarkUp, Pastel

Store for UX copy: Google Docs, Asana, Dropbox, Airtable

UX Writing in prototyping tools, examples: Figma — Strings plugin for Figma , InVision Write, Adobe XD — UX Writing Guidelines

Content generators or content operation platforms: Contentfly, GatherContent, Copy.ai, INK

Inspiration: The Most Dangerous Writing App, reallygoodemails.com, Written? Kitten!

Fonts (9+17+9)

Once you saw a nice looking font physically somewhere and now would like to identify it to use in your design. You just want to quickly see some random fonts, how they look like. Prototyping tools do not provide eg. hoover over previews or other simple and quick previews. Your focus is not to create a font, thus, you want to download quickly a missing font. There are four potential activities: font recognition, a visual quick check of a font type, selection of font from stock, making custom fonts.

(Source: Lumn, Pexels)

Image-based font recognition: What Font Is, What the Font-My Fonts, Font Macherator,

Web-based font recognition: Fonts Ninja, WhatFont, Fount, Fontanello, Type Sample (Typewolf)

Questionnaire-based font recognition: Identifont

Free font stock: FontM,
FontSpace, MyFonts, DaFont, Creative Market, Fontasy, FontStruct, 1001 Free Fonts, Abstract fonts, Neogrey, Artill, Glukfonts, Fontfabric, Lost Type, Font Squirrel, Google Fonts, The League of Movable Type

Free font viewers are: CPS Font Viewer, AMP Font Viewer, TypeFacer, Dp4 Font Viewer, FontViewOK, Font Viewer, Free & Easy Font Viewer, Font Manager, Fontster

Icons (9+14)

You may need icon stock and/or icon generator.

(Source: Pixabay, Pexels)

Icon stock: Flaticon, Iconfinder, Icons8, Freepik, Iconshock, Pngtree, Iconstore, Material Icons, Human Interface Guidelines (iOS)

Icon generators: Junior Icon Editor, SimplyIcon, IconsFlow, Greenfish Icon Editor Pro, Iconion, Venngage’s Icon Maker, Adobe Illustrator, ICO convert, Graphicsprings, Brand Crowd, Softorbits, Favicon Generator, App Icon Generator, Vivid.js

Colours (1+20)

Multiple tools or multiple features of each tool can be useful. Ready-made, thematic colour palettes, colours search by keywords, mood, industry trends, custom colour generation with a colours wheel or one colour. The tools produce all variations out of the primary colour. They can also sample colours from an image and import a gradient, some of which have an accessibility checker as well.

Pantone, known perhaps to some in relation to the construction industry, also provides support for digital designers, as a paid service. You can come across a lot of ‘colour trends in a specific year’ type writings. Most of them come from the world of fashion, or home decoration. They are inspiring, but I recommend using them in digital products depending on the context.

(Source: Sharon Mccutcheon, Pexels)

Adobe Color, Muzli Colors, Coolors, Color Hunt, Colorsinspo, Happy Hues, Color Designer, Palettte App, Khroma,Sip Color For Mac, Color Leap, Web Gradients, Grabient, ColorSpace, Scale, Gradienta, Calcolor.Co, Colorkit, Color By Cloudflare Design, Mycolorpanda

Photo (15)

You might need general or business-like photos. The largest or most known stock photo sites are iStock (by Getty Images) and Shutterstock. Their choice is immense covering everything in a paid scheme.

(Source: Cottonbro, Pexels)

There are remarkable alternatives for free:

Unsplash, Gratisography, Morguefile, Pixabay, Stockvault, Pexels, Picjumbo, Pikwizard, Rawpixel, Reshot, Adobe Stock Free Collection

Background removers (9+5)

(Source: befunky One Click A.I. Background Remover)

It happens that you just want to one-click remove the background from a picture.

Free desktop photo removers: Fococlipping, Picture Cutout, Fotomix, Adobe Photoshop (paid), GIMP, Adobe Spark, Photoscissors, piZap, ClippingMagic

Mobile photo background removers: Background Eraser, Photo Background changer-Backgrounds Remover Editor, Ultimate Background Eraser, Auto Background Changer & Background Eraser, Remove BG — Background Eraser & Background Editor.

Illustrations (22)

(Source: Meruyert Gonullu, Pexels)

Storyset, Freepik, Control Illustrations, Artify Illustrations, Oh My Startup Illustrations, Illustrations. design, Amigos, Illustrations by Icons8, Minty, Flow Lava, Custom Illustrations by Design Pickle, illustation, unDraw, Ira Design, DrawKit, Absurd Illustrations, ManyPixels, Freebie Supply, Ouch!, Humaaans, Interfacer, Blush

Animation (22)

(Source: Monstera, Pexels)

Animaker, Renderforest Video Maker, 3ds Max Design, KeyShot, Cinema 4D, Moovly, Modo, Harmony, Autodesk Maya, Cartoon Animator 4, Adobe Character Animator, Clip Studio Paint, Adobe Animate, Blender, Synfig Studio, Open Toonz, Photoshop, Moho,
Autodesk motion builder, Vyond (Goanimate), After Effects, Animiz.

Graphics editor (27)

(Source: Anthony Shkraba)

Adobe Photoshop, Adobe InDesign, CorelDraw Graphics Suite, Inkscape (free), Sketch, Adobe Illustrator, Affinity Designer, GIMP (GNU Image Manipulation Program), Vectr, FixThePhoto, Visme, Gravit Designer (free), Canva, Designhill Studio, Easelly, SVG Edit, Daz 3D, Blender, DesignWizard, Setka Editor, Adobe Spark, Krita, SketchUp, Vecteezy, Klex, Infogram, Picmaker

High-Fidelity Prototyping (12)

(Source: Tima Miroschnichenko, Pexels)

Testing (32)

We can rely on the analytical tools presented in the UX Research chapter for testing. That’s why I’m only talking about the accessibility checker here.

Accessibility checker (35)

(Source: Eric Mclean, Pexels)

Web accessibility evaluation tools: WAVE, Accessible Name & Description Inspector, ARC Toolkit, Accessibility Insight, Intent Based — Accessibility Checker, MAGENTA — Multi-Analysis of Guidelines by an ENhanced Tool for Accessibility, TAW — Test de Accesibilidad Web, Sa11y, JAWS, Dynomapper, SortSite, Accessibility Checker by CKSource, Accessibility Valet, EvalAccess 2.0, AChecker — Accessibility Checker, Cynthia Says, aDesigner, aViewer (Accessibility Viewer), Colour Contrast Analyser, Functional Accessibility Evaluator (FAE)2.0, Tenon, Web Accessibility Toolbar (WAT) for IE, aXe, Inspector Sidebar (Firefox Accessibility Extension), Accessibility Developers Tools by Google, DevTools, Lighthouse Dev Tools, Web accessibility by Level Access, Crownpeak Digital Quality Management, Siteimprove, LT Browser, accessiBe, Monsido, Silktide, UsableNet AQA Testing Platform

Design Handoff (11)

(Source: Yan Krukov, Pexels)

Zeplin, Mockplus Cloud, Avocode, Sympli, InVision Inspect, Marvel Handoff, Figma, Adobe Creative Cloud, Sketch, Abstract, UXPin Handoff

Presentation (14)

For example, if you show a team the results of a project in a corporate environment, you need collaborative presentation software.

(Source: Monica Silvestre, Pexels)

Pitch,Beautiful.AI, SlidesPPT, Presentations by Canva, Slidev, Templatesby24slides, SlidesCarnival, FlowVella, PitchPages, Keynote, Prezi,
DocSend, Quip, Google Workspace.

Video editor (8)

You already recorded the raw video of clicking through your prototype. Then you want to polish it with editing, effects, text, sound, animation, etc. before publishing it.

(Source: Ron Iach, Pexels)

DaVinci Resolve, Movie Maker Online, Lightworks, Shotcut, VSDC, VideoPad (free, beginners), Openshot (free, beginners), Hitfilm Express (free, advanced)

Sound & Music (28)

(Source: Matthias Groeneveld, Pexels))

Audio Jungle, Pond5, SoundStripe, Audiio, Ben Sound, YouTube Audio Library, Epidemic Sound, Artlist, Free Music Archive, Incompetech, Envato Market, SoundCloud, Musopen, Audioblocks, ccMixter, Musicbed, Music Vine, PremiumBeat, Marmoset, FyrFly (SongFreedom), Jamendo, 909 Music, Audio Network, Ricall Express, Tunefruit, Addictive Tracks, The Music Case, Moby Gratis

Mockups (16)

No matter on what platform, channel, or in what format you publish your work, you can’t imagine a product design presentation without mockups.

Placeit, Smart Mockups, Renderforest, Media Modifier, Artboard Studio, Vexels, Mockuper, Printful, Mockup.Photos, MockupBro, MockupsJar, Magic Mockups, MockuPhone, Dimmy.club, Threed.io, WoFox

Portfolio (7+6)

Companies that hire designers are to a lesser extent asking for a portfolio in PDF, but link to your work instead. However, it is resource-demanding to be up to date everywhere, it is advised to limit your presence.

(Source: the author)

Your option:
Behance, Dribble, Medium, Youtube, personal website, LinkedIn.

Instagram is an interesting question. At first, you might not think because its user base and target audience are different and maybe not considered as ‘serious’. Yet there are ~63k UX and ~52k UI design hashtags. It cannot be considered negligible.

For a personal website, you need a website builder. I see two options here. 1) You want to express yourself, design in detail, even the nuances on your website because that is your main channel. Then eg. WordPress, Duda is for you. 2) You are present on other channels and intentionally you do not want to deal too much with the website, which is a kind of umbrella site anyway. You need simple, prepacked templates eg. Wix, Squarespace, Weebly, GoDaddy.

Thanks for reading this article. From this link, you can download ‘The Great’ UX Design Toolbox XLS. With a linked table of contents, the toolbox consisting of 900 tools (gross, with overlaps) is broken down into
4+1 elements of the double diamond including 56 separate ‘chapters’. It is customizable flexibly.

It is my pleasure to recommend my other writings here on Medium and you can reach me here.

--

--

UX | Digital Product & Service Design | Economist | Banking | Strategy | Advisory | Corporate Finance