[Reference] Design Tools

This document is a resource that breaks down the Strategic and Experience Designers tools and actions. Marked as not completed in current state as the tools and landscape will continue to evolve.


A designers role and what is expected from them has expanded over the years. This document breaks the designers role into the strategic side vs the experience side and breaks down the actions and tooling being used.

 

Strategic Design

Organize ( information and content organization )

Actions ( interviews and scheduling )

Data Discovery ( research, contact and data )

Output ( deliver information )

  • https://flowmapp.com/ - online tool for creating interactive sitemaps and user flows.

  • https://www.smaply.com/ - Create professional personas, journey maps, stakeholder maps in minutes!

  • https://www.optimalworkshop.com/ - make design decisions with confidence.

    • Empathy Map

    • UX Career Development Worksheet

    • Interface Inventory Template

    • Feature Requirements

    • User Research

    • Mad Libs

    • Marketing

    • Persona

    • Journey Maps

    • Stakeholdermaps

Experience Designer

Research and Validation

  • User research

  • Behavioral patterns research

UX and interaction design

 Testing

Content

Prototyping

  • High Fidelity Prototypes

    • https://www.invisionapp.com/ - prototyping, collaboration & workflow platform.

    • https://www.flinto.com/ - a Mac app for creating interactive and animated prototypes of app designs.

    • https://framer.com/ - a tool for prototyping design animations.

    • https://www.apple.com/keynote/ - the built-in Mac app for creating presentations that can also be used for quick prototyping (see how Apple designers use it to verify design concepts).

    • https://marvelapp.com/ - the collaborative design platform. Wireframe, prototype, design online and create design specs in one place.

    • https://principleformac.com/ - makes it easy to design animated and interactive user interfaces.

    • https://www.protopie.io/ - piece hi-fi interactions together, build sensor-aided prototypes and share your amazing creations in a matter of minutes.

    • https://proto.io/ - a tool to create fully-interactive high-fidelity prototypes that look and work exactly like your app should.

    • https://www.uxpin.com/ - build prototypes that feel real, with powers of code components, logic, states and design systems.

    • https://www.adobe.com/products/xd - Go from concept to prototype with Adobe XD, the all-in-one UX/UI solution for designing websites, mobile apps, and more. With the new Starter plan for XD, it's fast, easy — and free.

    • https://www.figma.com/ - Design, prototype, and gather feedback all in one place with Figma.

Animation Tooling

  • https://www.adobe.com/products/aftereffects.html — a digital visual effects, motion graphics, and compositing application.

  • https://kiteapp.co/ — a powerful animation and prototyping application for Mac & iOS.

  • https://uselightbox.com/ — 2D, Hand-Drawn animation package.

  • https://airbnb.io/lottie/ — a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web.

  • https://spiritapp.io/ — animation tool that helps you to create and manage the animations real time in the browser.

  • Principle, Framer, Invision Studio, Flinto are also among UI & UX animation apps and software animations tools.

Accessibility Tools

  • https://contrasteapp.com/ — app for checking the accessibility of text against the Web Content Accessibility Guidelines (WCAG).

  • https://hexnaw.com/ — helps you to test entire color systems for contrast and accessibility.

  • http://pa11y.org/ — accessibility testing tool to find issues with your web pages. It runs HTML CodeSniffer from the command line for programmatic accessibility reporting.

  • https://michelf.ca/projects/sim-daltonism/ — a color blindness simulator for macOS and iOS that lets you visualize colors as they are perceived with various types of color blindness. It‘s free and open-source.

Design Version Control

  • https://www.goabstract.com/ — a platform for design teams to version, manage and collaborate on Sketch files.

  • https://kactus.io/ — design version control without changing your tools. Manage changes, document work and keep your team in sync.

  • https://versions.sympli.io/ — a version control tool for designers with visual diff, merge and conflict resolution.

Development Handoff

  • https://avocode.com/ - share, access and inspect design source files.

  • https://zeplin.io/ - Handoff designs and styleguides with accurate specs, assets, code snippets—automatically

  • https://webflow.com/ - Webflow gives designers and developers the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you.

Development Handoff

  • https://avocode.com/ - share, access and inspect design source files.

  • https://www.invisionapp.com/feature/inspect/ - Invision Inspect Magically better, design and development, collaboration.

  • https://zeplin.io/ - Handoff designs and styleguides with accurate specs, assets, code snippets—automatically

  • https://tilda.cc/ — create a website, landing page or online store for free with the help of Tilda modules and publish it on the same day.

  • https://webflow.com/ - Webflow gives designers and developers the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you.

Development Review