Github Open Source Web Design Tools

Awesome Design Tools

Awesome-Design-Tools

awesome PRs Welcome

How to Use and Contribute

Go through the Table of Contents and choose the tool.
Search for a keyword or phrase (for example, "animation", "prototyping").
Ask Lisa on Twitter.

If you found some great design tool, just send a Pull Request with respect to our Contribution Guidelines (they're very simple, please take a look). We use such labels for free , open source and Mac only tools, don't forget to add them. Now I'd love to see your suggestions!

Table of Content

Accessibility Tools
Animation Tools
Augmented Reality Tools
Collaboration Tools
Color Picker Tools
Design Feedback Tools
Design Handoff Tools
Design Pattern and Inspiration Tools
Design System Tools
Design to Code Tools
Experience Monitoring Tools
Font Tools
Free Screenshot Software
Icons Tools
Illustrations
Information Architecture Tools
Logo Design
Mockup Tools
Mouse Tracking Tools
Pixel Art Tools
Prototyping Tools
Sketching Tools
Stock Photos Tools
UI Design Tools
UI Inspiration
User Flow Tools
Version Control for Designers
Visual Debugging Tools

Awesome-Design-Tools

Accessibility Tools

Accessibility is the practice of creating websites and apps usable by all people, including individuals with visual, motor, auditory, speech, or cognitive disabilities. Here you will find web accessibility tools, accessibility testing tools, and accessibility apps both for developers and designers:

Accessibility checking feature is also available in VisBug from Visual Debugging Tools categoty.

Animation Tools

Animations guide people through the product smoothly and friendly. Live interactive UI makes users feel delighted with instant feedback and emotional touch. These free and paid tools are designed to make animation creation a bit easier. If you plan to make animated transition, micro-interaction or scroll-based animation, go through these tools:

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

Augmented Reality Tools

Augmented reality is technology that upgrades our real world adding a layer of digital information to it. The use of AR increases greatly day by day. That's why we collected here different augmented reality apps for creating, projecting and prototyping app focused on AR:

Collaboration Tools

Looking to try some tools for agile design and development collaboration? Good idea because such tools can make designers and developers life much easier. More productivity, better planning, smooth remote processes, easier designer developer collaboration and less stress for all the team. Well, you know all that in Slack-driven era. Here you'll find the best collaboration tools for product teams:

Airtable — part spreadsheet, part database, and entirely flexible, teams use Airtable to organize their work, their way.
Gallery.io — a collaborative tool for uploading design work, getting feedback, and tracking revisions.
Jira — software development tool used by agile teams.
MURAL — think and collaborate visually. Anywhere, anytime.
Notion — write, plan, collaborate, and get organized. Notion is all you need — in one tool.
RealtimeBoard (Miro) — whiteboarding platform for cross-functional team collaboration. It was recently renaimed to Miro.
Slack — a collaboration hub for work, no matter what work you do. It's a place where conversations happen, decisions are made, and information is always at your fingertips.
Trello — a web-based project management application that enables you to organize and prioritize your projects in a fun, flexible and rewarding way.
Visual Inspector — collaboration tool for website feedback and fixing design bugs.
Witeboard — simple real-time whiteboard for collaboration work.
Wrike — an online project management software that gives you full visibility and control over your tasks.

You can also have design collaboration into InVision Freehand tool.

Color Picker Tools

If you are looking for an eyedropper tool, color identifier tool or color capture tool, just check this collection. Here are design tools for creating a color combination and define really great ones. Almost all of these tools are free:

Adobe Color — create color schemes with the color wheel or browse thousands of color combinations from the Color community.
Chroma — free web app which allows you to identify the color.
Coolors.co — it is the super-fast color scheme generator.
Colourcode — online designer tool, which allows you to easily and intuitively combine colours.
Color Hexa — free color tool providing information about any color and generating matching color palettes for designs.
Colour Cafe — colours inspiration that have selected modern colour palette in Instagram.
Color Deck — a HSL driven color palette collection. It's also open-source.
Colorpicker - a complete and open-source colors manipulation tool with picking.
Instant Eyedropper — a minimalist eyedropper tool for windows, supports multiple color formats for both designers and developers.
Just Color Picker — Free portable offline colour picker and colour editor.
Khroma — AI-based tool to generate color palettes based on your preferences.
Material Colors Native — Google's material design color palette in the form of a mac app.
Paletton — a designer tool for creating color combinations that work together well.
Pikka — Color Picker — color picker & color schemes generator for macOS.
React Color — a collection of color pickers from Sketch, Photoshop, Chrome. It's free and open-source.
Sip - a better way to collect, organize and share colors. Global eyedropper tool for MacOS.
Skala Color — works with a huge variety of formats, covering everything you're likely to need for web, iOS, Android, and macOS development.
Swatches — iOS app that lets you collect, inspect and share the colors that inspire you in your daily life.
UI Gradients — handpicked collection of beautiful color gradients for designers and developers.

Design Feedback Tools

Do you get feedback during the development process? If you wish to get more structural feedback on UI issues or visual bugs take a look at this tool:

Flawless Feedback — review and annotate iOS apps then share your feedback in Jira or Trello.

Design Handoff Tools

Design handoff takes place when designers finish the work and need to deliver results to developers. So let's look at these handoff tools:

Design Pattern and Inspiration Tools

Tools which allow you to explore the design patterns and user flows of popular apps for guidance and inspiration:

Design System Tools

Here are you can find tools that can help you to build, maintain and organize your own design system. Let's dive in:

Brand.ai — automatically maintainable UI components style guide.
Design System Manager – Invision's design system manager.
Frontify — create graphical guidelines, patterns libraries, design systems.
Lingo — create a shared asset library with your entire team.
Lucid — tool for creating, managing and sharing a design system. From a simple component library through to detailed descriptions of your styles.
Zeroheight — styleguides created by designers, extended by developers, and editable by everyone.

We can also add to this in Sketch, Figma and Framer X (Framer X Team Store).

Design to Code Tools

Check out this collection of proper website builder tools. You can easily create your own landing page from scratch right in your browser:

Blocs For Mac — a fast, easy to use and powerful visual web design tool, that lets you create responsive websites without writing code.
Bootstrap Studio — a powerful web design tool for creating responsive websites using the Bootstrap framework.
Mobirise — an offline drag and drop website builder software that is based on Bootstrap 3/4 and Google AMP.
Pinegrow — a professional visual editor for CSS Grid, Bootstrap 4 and 3, Foundation, responsive design, HTML, and CSS.
px.div — Proper site build tool for developers and designers.
Readymag — a visually-pleasing tool for designing on the web from landing pages to multimedia long-reads, presentations and portfolios.
STUDIO — design from scratch, collaborate in real time and publish websites.
Tilda — create a website, landing page or online store for free with the help of Tilda modules and publish it on the same day.
Webflow — build responsive websites in your browser, then host with us or export your code to host wherever.

Experience Monitoring Tools

The analytic tools can help you to analyze data and extract relevant information that you can use to increase results or performance. Check out this list of the best tools for data analysis:

Amplitude — understand your users, rapidly release better product experiences, and grow your business.
Fathom — provides simple, useful websites stats without tracking or storing personal data of your users.
FullStory — an app that captures all your customer experience data in one powerful, easy-to-use platform.
Google Analytics — measure your advertising ROI as well as track your Flash, video, and social networking sites and applications.
Heap — automatically capture every web, mobile, and cloud interaction then retroactively analyze your data without writing code.
Hotjar — see how visitors are really using your website, collect user feedback and turn more visitors into customers.
Inspectlet — record videos of your visitors as they use your site, so you can see everything they do.
LogRocket — see what users do on your site, helping you reproduce bugs and fix issues faster.
Mixpanel — get insights across all of your user-centric data to make smarter decisions and act faster based on how customers use your product or website.
Pendo — measure and elevate the customer experience within their applications.

Font Tools

Fonts are commonly used for making the web more beautiful. Here you can find free fonts generator and font finder tools that allow you to manage and work with fonts:

Free Screenshot Software

Free and full-featured screenshot apps to capture. Here you can find some powerful screen captures for macOS and Windows screen recorder tools:

Camtasia — a screen recorder that comes with full-blown built in editor.
CloudApp — record videos, webcam, annotate screenshots, create GIFs and save them to the cloud.
Giphy Capture — capture parts of your screen and export as gif or mp4.
Greenshot — take a screenshot of a selected region, window or fullscreen. Export it in different ways. Free on Windows.
Kap — open-source screen recorder with options to export to GIF, MP4, WebM and APNG.
Lighshot — screenshot app for taking quick captures of your screen.
Monosnap — create screenshots, annotate them and upload them to the cloud.
OBS — Open Broadcaster Software for screenshots, recording a gif or even making a tutorials videos
Quicktime — a video player that you can use to record your screen.
Screenie — a screenshotting tool that works as an image manager, so you can filter and search through images, change screenshot filetypes.
ScreenToGif — open source tool to record a gif of part of the screen. Also, work as a nice editor. Only available for Windows.
Snipping Tool — Windows free screenshot tool
Snappy — a tool that takes quick shots and organizes them for you into collections.
Teampaper Snap — a modern screenshotting app that allows you to take screenshots of a selected area.

Icons Tools

Here are thousands of vector icons for everything. All icons are available in SVG, so you can easily customize them and use them for personal and commercial use:

Illustrations

A constantly updated collection of beautiful svg images that you can use completely free and without attribution:

Information Architecture Tools

Awesome information architecture tools for creating visual sitemaps and to improve your website information architecture and usability:

OptimalSort — card sorting tool that allows you to understand how people categorize content in your UI.
Treejack — upload your proposed sitemap to see how a user would move through your site.

Logo Design

Create your very own company logo online using these easy to use logo design tools:

You can also do your logo design with Adobe Photoshop, GIMP, Inkscape, Krita and Vectr which are mentioned in UI design tools.

Mockup Tools

Mockup tools that help you create and collaborate on wireframes, mockups, diagrams, and prototypes:

Mouse Tracking Tools

Mouse tracking tools help to record the movement of a mouse pointer and clicks to find out the points where the user is interested:

Mouseflow — record mouse cursor movements.

Pixel Art Tools

Pixel art is a digital art form where color is applied to individual pixels to create an image. Here are the best pixel art software for both macOS and Windows:

Prototyping Tools

Prototyping tools allow designers and clients to collaborate better while being in the same context. We collected great prototyping tools that you can use for wireframing, prototyping and collaboration:

Alva — create living prototypes with code components. It's also open source.
Axure RP — wireframing, prototyping, collaboration & specifications generation.
Balsamiq — wireframing and collaboration.
Creo — prototyping, code exporting and built-in mobile app builder.
InVision — prototyping, collaboration & workflow platform.
Flinto — a Mac app for creating interactive and animated prototypes of app designs.
Framer X — a tool to visually design realistic interactive prototypes.
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).
Marvel App — the collaborative design platform. Wireframe, prototype, design online and create design specs in one place.
Maze — a tool for designers and developers that gives analytical results with actionable KPIs for your Invision prototypes.
Principle — makes it easy to design animated and interactive user interfaces.
ProtoPie — piece hi-fi interactions together, build sensor-aided prototypes and share your amazing creations in a matter of minutes.
Proto.io — a tool to create fully-interactive high-fidelity prototypes that look and work exactly as your app should.
UXPin — build prototypes that feel real, with powers of code components, logic, states and design systems.

You can also do prototyping with Figma, Adobe XD, Sketch and InVision Studio, which are mentioned in the UI Design Tools section.

Sketching Tools

Sometimes you need just a pencil and paper to start creating your app or website. So here are you can find online sketching tools with great sketch sheet templates to speed up your creative process:

You can also do some sketching with Sketch mentioned in UI design tools.

Stock Photos Tools

Beautiful, free stock photos and royalty-free images that you can download and use for any project:

UI Design Tools

Stuck trying to craft the perfect user interface? Check here for guidance and inspiration:

Adobe Illustrator — create logos, icons, drawings, typography, and illustrations for print, web, video, and mobile.
Adobe Photoshop — imaging and graphic design software.
Adobe XD — design, prototype, and share any user experience, from websites and mobile apps to voice interactions.
Affinity Designer — a vector graphics editor for macOS, iOS, and Microsoft Windows.
CleverBrush — a browser-based online vector editor and digital publishing tool which is possible to integrate to page as JS component.
Figma — a design tool based in the browser, that allows to design and prototype with real-time collaboration.
Gravit — a free vector design app, available for macOS, Windows, Linux, ChromeOS and browser.
GIMP — a free & open source imaging and graphic design software.
Inkscape — a free and open-source vector graphics editor. It has ability to create or edit vector graphics such as illustrations, diagrams, line arts, charts, logos and complex paintings.
Invision Studio — combines design, prototyping, and collaboration into one harmonious workflow.
Krita — a free painting and graphic design software considered a good alternative to Adobe Photoshop.
Photopea — a free browser-based graphic design app alternative to Photoshop.
Sketch — a design toolkit built for Mac.
Vectr — a simple web and desktop cross-platform tool to create vector graphics easily and intuitively.

UI Inspiration

Want to create the perfect user interface? Check out the best free and open source UI design tools to upgrade your workflow:

User Flow Tools

User Flow diagrams are a fast way to plan customer journey paths and improve user experience. So if you need to make a user flow diagram, user flow map or a sitemap, take a look at these tools:

Draw.io — a free online diagram software for making flowcharts, process diagrams, org charts, UML, ER and network diagrams.
Flowmapp — an online tool for creating sitemaps and user flows that helps you to effectively design and plan user experience.
Google Drawings — create diagrams and charts, for free; all within Google Docs.
Lucidchart — online tool for creating diagrams, flow charts, sitemaps, and more.
MindNode — a mind mapping app that makes brainstorming simple and easy.
NinjaMock — wireframe and user flow online tool. Link your views and create logic flow prototype. All with freehand visual style.
OmniGraffle — a diagramming and digital illustration application for macOS and iOS.
Overflow — turn your designs into playable user flow diagrams that tell a story.
Sketch.systems — ui and flow design with interactive state machines.
Whimsical — easy to create flow charts, wireframes and sticky notes.
Wireflow — is free, online and open source tool for creating beautiful user flow prototypes.
XMind: ZEN — a brainstorming and mind mapping tool that can switch between outline and tree-chart. Link topics with other charts. Distraction free in ZEN mode.
yEd - Graph Editor — free desktop tool for making diagrams. Usable for wide variety of use cases. Auto-layout helps a lot when making flowcharts.

Version Control for Designers

Developers actively use version control tools for a long time, probably since 2005 (Git first release). Using a version control system is no brainer for dev teams, while design version control system appeared only recently. This market is rapidly developing and we expect to see even more in version control for designers:

Visual Debugging Tools

Addendum (Reference & Inspiration)

This repo was inspired by articles from the design community and Prototypr.io Toolbox made by my good friend Graeme.