In this UX series, I write about trusty UX tools I have used, or I’ve heard good things about or you folks have suggested.
In my previous articles, I focused on the categories: automated UX analysis, analytics, A/B testing, accessibility, animation, annotation, audio transcription and automation.
In this article, I will focus on: diagramming, data repository, card sorting and code editor (not your usual) tools.
Let's start 😎.
Card sorting
1. Optimal Sort
It can also be used for: Information Architecture, Card Sorting, Surveying Users
Cost: Free+
What does it do best: Online card sorting for information architectures, workflows, menu structures or website navigation paths. Send a link to your users and ask them to organize information in existing categories or create new ones.
Find out how people think your content should be organized and categorized. Card sorting gives you insight into how people conceptualize, group and label ideas, enabling you to make confident, informed information architecture decisions. By optimalworkshop.com
2. Trello
It can also be used for: Project Management, Card Sorting
Cost: Free+
What does it do best: Project management for agile development and the cool kids. Dive into the details by adding comments, attachments, due dates, and more directly to cards.
Trello helps teams move work forward. Collaborate, manage projects, and reach new productivity peaks. From high rises to the home office, the way your team works is unique—accomplish it all with Trello. By trello.com
3. usabiliTEST
It can also be used for: Card Sorting, Information Architecture
Cost: $24.95+
What does it do best: A card sorting tool with open, closed or hybrid test types, and built-in data analytics. For improving the information architecture of your project. Cards can have images, text or both.
Improve information architecture (IA) of your project. Get instant results with built-in data analytics. Our Card Sorting tool supports open, closed or hybrid test types and cards can have images, text or both. Try this online tool today and enjoy unlimited tests.. By usabilitest.com
4. xSort
It can also be used for: Information Architecture, Card Sorting, Surveying Users
Cost: Free
What does it do best: A visual card-sorting app that simulates a table with cards (and an outline view). Open, semi-open and closed sorts, sub-grouping, criteria-based data selection, create/print/report. Statistical results updated in realtime.
Visual environment simulating a table with cards (and outline view). Supports open, semi-open and closed exercises. Supports sub-groups (participants can put groups inside groups). Control every aspect of the exercise (sorting type, cards placement, etc.). Statistical results (cluster tree, distance table, etc.) updated in real time. By xsortapp.com
Note: Only for Mac users.
Code editor
5. Framer
It can also be used for: Interface Design, Prototyping, Interaction Design, Code Editor
Cost: Free+
What does it do best: A unified tool for creation of interaction design, responsive layouts, rapid prototypes. 'Design' tab and 'code' tab. Used for coding with React and HTML, which is the biggest change between Framer X and the original, legacy Framer. This new version is more powerful, but makes it harder for non-coders to jump in and write simple stuff.
Framer is an all-in-one tool that helps teams design every part of the product experience. Start in Framer and get to a functional output faster than ever—no code required. By framer.com
6. infragistics - Indigo Design
It can also be used for: Interface Design, Design Prototyping, Wireframing, Diagramming, Code Editor
Cost: Free+
What does it do best: A UI design/prototyping/coding tool that provides a library of components and UI patterns. You can design in Sketch and have components map using the Ignite UI for Angular, and create HTML, CSS and Angular code.
Speed up innovation and time to market with a complete design-to-code system. Indigo. Design is a digital product design platform that integrates UI prototyping, design systems, user testing, app building and code generation to eliminate design hand offs and reduce costly iterations — enabling true UX design-development collaboration. By infragistics.com/products/indigo-design
Data Repository
7. Dovetail
It can also be used for: Research Notetaking, Data Repository, Research Analysis & Synthesis
Cost: $20+, but there is a 7-day free trial.
What does it do best: Collate and store user research notes, transcripts, images, videos, audio recordings, and more in a single repository. Discover patterns across research data collected from interviews, usability testing, and more.
Where customer research lives. Make sense of all your customer research data in one intuitive, collaborative, and searchable research repository. By dovetailapp.com
*Note: I'd highly suggest it for video-audio recording and transcripts! It does an amazing job.
8. enjoyHQ
It can also be used for: Process Aids, Data Repository, Collaboration, Research Analysis & Synthesis, Automation
Cost: Free+
What does it do best: An automatically synchronising, fully searchable repository of customer feedback and research findings. Collaboratively accessible. Native integrations available.
Note: We have previously talked about EnjoyHQ, check more info here .
9. Reframer
It can also be used for: Process Aids, Research Notetaking, Data Repository, Research Analysis & Synthesis
Cost: Free+
What does it do best: From user interviews to usability tests, qualitative research can get messy, especially when you rely solely on notepads and Post-it notes. Reframer is a qualitative research tool that makes the process quicker and easier.
Capture observations clearly — and fast. It’s easy for you and your notetakers to capture qualitative research observations straight into Reframer during usability testing or interviews (no Post-its or notebooks needed). With a distraction-free environment, you can focus on what’s important — your participants. By optimalworkshop.com
Diagramming
10. Axure
It can also be used for: Design Prototyping, Wireframing, Diagramming, Interaction Design
Cost: $29+, but there is a 30days free trial.
What does it do best: A rapid prototyping tool that has become an enterprise-level workhorse. Build diagrams, journeys, or add complex interactions into wireframes to create working prototypes.
Axure RP is the only UX tool that gives UX professionals the power to build realistic, functional prototypes. Create UX prototypes with unlimited combinations of event triggers, conditions, and actions to truly explore digital experiences. Dynamic Content for realistic UX prototypes. Leverage powerful Axure RP widgets to create working forms, sortable grids, and dynamic interfaces. By axure.com
11. balsamiq
It can also be used for: Design Prototyping, Wireframing, Diagramming
Cost: Free+
What does it do best: Known for its innovation and simplicity, it offers the same look and feel as sketching mockups with a pencil. Large UI library lets you create designs quickly.
Life's too short for bad software! With Balsamiq Wireframes, anyone can design great web apps. Since 2008, our mission is to help rid the world of bad user interfaces. By balsamiq.com
Note: If you are an OG fan of Balsamiq, yeah it did change its logo :)
13. creately
It can also be used for: Collaboration, Diagramming
Cost: Free+
What does it do best: Collaborative diagramming software with a large range of diagram types. Useful for working with clients and colleagues.
Plan, brainstorm, analyze or design anything. The Simplest way to work visually and collaborate with your team. From sketching out concepts, analysing processes to brainstorming plans, use Creately Diagrams to think and collaborate visually. By creately.com
Personally, I really like this tool. It's easy to create, see and share stuff.
14. Diagrams
It can also be used for: Diagramming
Cost: Free
What does it do best: You can use it to create flowcharts, network diagrams, UML logic, etc
Works with Google Drive and Google Workplace (G Suite). Use add-ons for Docs, Sheets and Slides. Highest-rated Confluence app, delivered by us as draw.io. Also for Jira. Works with GitHub, GitLab and Dropbox for visual documentation in distributed teams. By app.diagrams.net
15. Flair Builder
It can also be used for: Wireframing, Diagramming, Mockups
Cost: No Info
What does it do best: Design clean and beautiful wireframes for up to three breakpoints. Built-in components for creating mockups. Powerful and easy to use.
Meet the All New UI Builder for Building Responsive Websites! FlairBuilder is a lightweight and simple wireframing tool that lets you create interactive wireframes for websites. It's clean and easy to use, and comes with a lot of features. By fantastech.co/flair-builder
16. fluid UI
It can also be used for: Wireframing, Diagramming, Design Prototyping, Interaction Design
Cost: Free+
What does it do best: Create Android, iOS or Windows8 wireframes or interactive prototypes. Sharing, feedback and collaboration are all built in.
Designer, developer, product owner or product visionary? If you want to build a successful product, you need to start by successfully communicating your vision. With Fluid UI, ideas can be prototyped in minutes and shared instantly. Sharing, feedback and collaboration are all built-in. Start with a free account and unlock your creativity. By fluidui.com
17. gliffy
It can also be used for: Wireframing, Diagramming
Cost: $8+
What does it do best: Drag and drop to create flowcharts, diagrams, wireframes and technical drawings. Comes with hundreds of industry standard shapes and symbols.
Help Your Team Communicate and Collaborate. Gliffy’s enterprise-grade diagramming software allows any team to visually share ideas. By gliffy.com
18. HotGloo
It can also be used for: Prototyping, Wireframing, Diagramming
Cost: $12+
What does it do best: A wireframing and prototyping tool for web, mobile and wearables. Helps to visualize planning processes, and build and test drive interactions.
HotGloo is a UX, wireframe and prototyping tool designed to build wireframes for web, mobile and wearables. HotGloo helps to visualize planning processes, build and test drive interactions very easily. Create and share fully interactive prototypes with your team and clients and gather feedback on the process. By hotgloo.com
19 iPlotz
It can also be used for: Design Prototyping, Wireframing, Diagramming
Cost: Free+
What does it do best: Create clickable, navigable mockups and wireframes for prototyping websites and software applications.
Create a project, add wireframe pages with design components and discuss your creations with others. By iplotz.com
20. irise
It can also be used for: Design Prototyping, Wireframing, Diagramming, Collaboration
Cost: $19+
What does it do best: Simple and integrated platform for responsive wireframes and prototypes, and inline requirements management. Real-time collaboration for teams.
iRise combines collaborative prototyping software with simple Agile and requirements management tools so teams can communicate clearly and iterate quickly. By irise.com
21. Justinmind
It can also be used for: Design Prototyping, Interface Design, Handoff, Wireframing, Diagramming, Mockups
Cost: Free+
What does it do best: Build high fidelity wireframes and mockups quickly to simulate prototypes for mobile apps.
You can design the style, size and layout distribution of any UI element to fit the look and feel of your screens. Responsive wireframes and prototypes. Inline agile requirements management. Design web experiences with a full range of interactions, animations and transitions. Create anything from simple links to advanced interactions. Choose from a ton of gestures that allow you to rotate, tap, swipe, scroll and pinch your way through your mobile app prototype. All in one simple, secure, integrated platform. By irise.com
22. Keynote
It can also be used for: Design Prototyping, Presentations, Diagramming, Animation
Cost: Free
What does it do best: Presentation software popular with Mac users, with an emphasis on themes, dual monitors, QuickTime video formats. Includes direct support for Apple Pencil for creating diagrams or illustrations on slides.
Note: We discussed more about this tool here.
23. Lucidchart
It can also be used for: Mockups, Prototyping, Wireframing, Diagramming
Cost: Free+
What does it do best: Allows more than one person at a time to collaborate on a document and comes with widgets for UI components, icons and diagram shapes. Free for less than 60 elements and maximum 2 collaborators.
Where seeing becomes doing. Lucidchart is the intelligent diagramming application that brings teams together to make better decisions and build the future. By lucidchart.com
24. MockFlow
It can also be used for: Design Prototyping, Wireframing, Diagramming, Interface Design
Cost: Free+
What does it do best: Plan, build and share user interfaces, create user flows, document styles and approve designs. Simple and easy.
MockFlow is a powerful tool for drawing UI wireframes that also extends as a full planning suite for product design. By mockflow.com
25. Mockingbird
It can also be used for: Wireframing, Diagramming, Design Prototyping
Cost: Free+
What does it do best: Drag and drop UI elements to the page, then rearrange and resize. Link multiple mockups together and preview them interactively to get a feel for the flow of your application
Mock up an application and show what's important: the idea, the information, the interaction. By gomockingbird.com
26. Mockplus
It can also be used for: Prototyping, Wireframing, Diagramming, Interface Design
Cost: Free+
What does it do best: A design tool for quick protoyping without coding or technical experience necessary.
Quickly turn ideas into functional prototypes with components, icons, and interactions. Streamline design and validation process without a single line of code. Create a more connected product design workflow. Bring designers, product managers, and front-end developers to work better and together. Build available, dynamic and reusable design systems. Establish consistency and predictability across the team. Easy to manage, maintain, share and iterate.. By mockplus.com
27. moqups
It can also be used for: Wireframing, Diagramming, Design Prototyping
Cost: Free+
What does it do best: A nifty HTML5 web app that helps you create and collaborate in real-time on wireframes, mockups, diagrams and prototypes. Explore and iterate seamlessly from lo-fi to hi-fi as your project evolves.
Shape Your Ideas. Prove Your Concept. A streamlined web app that helps you create and collaborate in real-time on wireframes, mockups, diagrams and prototypes. By moqups.com
28. NinjaMock
It can also be used for: Wireframing, Diagramming
Cost: Free+
What does it do best: A simple, collaborative and sketchy wireframing tool with built-in support for vector editing and collecting feedback on designs. Cloud-based file system makes sharing wireframes easy.
Start designing your wireframe project. Collaborate with colleagues in real-time. Test on your own device. We help you to bring your ideas to market - fast. By ninjamock.com
29. OmniGraffle
It can also be used for: Wireframing, Diagramming
Cost: $60+, but there is a 14-days free trial.
What does it do best: Create diagrams and designs with ease. Lines stay connected to shapes even when moved. Explain anything from a simple family tree to a complex systems theory with a diagram.
Powerful visual communication. With the power to diagram, rapid-prototype, and design, OmniGraffle was made for professionals who need to organize or communicate visually—beautifully. By omnigroup.com
Note: It is only for Mac users
30. Pencil
It can also be used for: Design Prototyping, Mockups, Wireframing, Diagramming
Cost: Free
What does it do best: Free A nice little open source GUI prototyping tool with a good set of built-in widgets covering web, windows and sketchy UI components. Can export to HTML, PDF, image or Doc.
Pencil is built for the purpose of providing a free and open-source GUI prototyping tool that people can easily install and use to create mockups in popular desktop platforms. By pencil.evolus.vn
31 Photoshop Wireframing Kit
It can also be used for: Wireframing, Diagramming
Cost: $29
What does it do best: This tool uses the Photoshop Custom Shapes extension to generates vector wireframing shapes. It can be useful for all designers that use Photoshop as a primary graphic tool.
This tool uses Photoshop Custom Shapes extension that generates vector wireframing shapes. It can be useful for all designers that use Photoshop as a primary graphic tool. If you use Photoshop to design web sites, apps and other projects why not use Photoshop for wireframing and prototyping. With this tool now you can easily mix vector custom shapes with the Photoshop native functionality to produce great mockups. By photoshopwireframingkit.com
32. Pidoco
It can also be used for: Design Prototyping, Wireframing, Diagramming
Cost: Free+
What does it do best: Create clickable wireframes and UI prototypes for web and mobile quickly. Easy sharing and collaboration.
Pidoco is software that lets you quickly create click-through wireframes and fully interactive UX prototypes. Small and large companies in over 50 countries trust us. By pidoco.com
33. Power Mockup
It can also be used for: Wireframing, Diagramming, Design Prototyping
Cost: $60+, but there is a free trial.
What does it do best: A large collection of user interface elements and icons made entirely out of PowerPoint shapes, useful for creating screen prototypes for mobile, web, and desktop applications using PowerPoint.
PowerMockup is an add-on that integrates a library pane into the PowerPoint window, giving you easy access to the included wireframe and mockup shapes. Once you have found a shape that you want to use for a wireframe or mockup, simply drag it from the library pane to the desired location on your PowerPoint slide. It’s quick and easy! By powermockup.com
34. protoio
It can also be used for: Interface Design, Design Prototyping, Wireframing, Diagramming, Animation
Cost: Free+
What does it do best: Design and test fully interactive, high-fidelity mobile app prototypes using rich media, animation and touch events without doing any programming.
Bring your idea to life in no time. The prototyping solution for all your needs. For UX designers, entrepreneurs, product managers, marketers, and anyone with a great idea. By proto.io
35. Protoshare
It can also be used for: Design Prototyping, Wireframing, Diagramming
Cost: $29+, but there is a 30-day free trial.
What does it do best: A collaborative prototyping tool that helps teams visualize requirements with website wireframes and interactive software and mobile prototypes.
ProtoShare is an easy-to-use, collaborative prototyping tool that helps teams visualize requirements with website wireframes and interactive software and mobile prototypes while working together in real-time. Start your trial right now, no credit card required. By protoshare.com
36. Sketch
It can also be used for: Prototyping, Wireframing, Diagramming, Interface Design, Handoff.
Cost: $99, but there is a free trial.
What does it do best: Fills the gap left by the obsolescence of Adobe Fireworks, but takes the support for UI design to a whole new level of integration and customization.
Sketch is the home for your entire collaborative design process. From early ideas to pixel-perfect artwork, playable prototypes and developer handoff. It all starts here. By sketch.com
37. UXPin
It can also be used for: Interface Design, Wireframing, Diagramming, Prototyping, Handoff, Collaboration
Cost: Free+
What does it do best: Collaborative tool for creating everything from well-planned wireframes to UI designs.
Design powered with code. Meet UXPin Merge. The innovative tech powering code-based design. By uxpin.com
38. Visio - Microsoft
It can also be used for: Wireframing, Diagramming
Cost: $5+
What does it do best: A collaborative tool for creating flowcharts, diagrams, org charts, floor plans, engineering designs, and more, using modern shapes and templates with the familiar Office experience.
39. WireframeSketcher
It can also be used for: Wireframing, Diagramming, Design Prototyping
Cost: $99+
What does it do best: A vector-based,wireframing, mockup, and prototyping tool for desktop, web and mobile applications. Runs as a desktop app and a plug-in for any Eclipse IDE (a Java IDE, other languages supported by plugins). Create templates, widgets and icons.
WireframeSketcher is a wireframing tool that helps designers, developers and product managers quickly create wireframes, mockups and prototypes for desktop, web and mobile applications. It’s a desktop app and a plug-in for any Eclipse IDE.. By wireframesketcher.com
40. Wirify
It can also be used for: Wireframing, Diagramming
Cost: Free+
What does it do best: Good for seeing page structure and the big picture. Pro version allows editing and exporting to Visio, OmniGraffle, Balsamiq and Sketch.
Wirify is free, easy and fun to use. Step back and see the big picture of a web page. Focus on page structure by hiding the content. Analyse page layout to aid learning and teaching. Wireframes look cool. Wirify is free and available above for you to use right now. By wirify.com
Conclusion
In this article, we checked different tools you can use for: diagramming, data repository, card sorting and code editor. Usually, the tools can be used for more than 1 thing (for example convention, heat maps, user testing, etc.). Some tools are free and others are paid. The paid tools, most often, will provide a free trial or a demo!
More categories are coming soon! Make sure to sign in to my newsletter so you won't miss any updates on this or upcoming articles.
I’d love to hear from you. Which one are you most looking forward to using?
👋Hello, I'm Eleftheria, Community Manager at Hashnode, developer, public speaker, and chocolate lover.
🥰If you liked this post please share.
🍩Would you care about buying me a coffee? You can do it here but If you can't that's ok too!
🙏It would be nice to subscribe to my Youtube channel. It’s free and it helps to create more content.
Top comments (1)
Leverage diagramming tools for clear workflows, data repositories for centralized storage, and card sorting for intuitive navigation. outsource real estate image stitching services Code editors streamline development with advanced features, while UX tools optimize user experiences. Together, these resources improve collaboration, design clarity, and productivity, ensuring efficient project management and user-centric solutions in tech and design processes.