Skip to content

padamshrestha/Awesome-Design-Tools

 
 

Repository files navigation

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 free.svg, open source open-source.svg and Mac only mac.svg tools, don't forget to add them. Now I'd love to see your suggestions!

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:

  • ANDI — accessibility testing tool for web content (bookmarklet). It will automatically detect accessibility issues, give suggestions to improve online accessibility and check 508 compliance. free.svg open-source.svg
  • Axe — accessibility engine designed to work on all modern browsers and with whatever tools, frameworks, libraries and environments you use today. It's automated accessibility testing tool for developers. free.svg open-source.svg
  • ColorBox by Lyft Design — a web app that algorithmically builds accessible color systems. free.svg
  • Contraste — an app for checking the accessibility of text against the Web Content Accessibility Guidelines (WCAG). free.svg
  • Contrast — a macOS app for designers and developers to get quick access to WCAG color contrast ratios. mac.svg
  • Hex Naw — helps you to test entire color systems for contrast and accessibility. free.svg
  • PA11Y — accessibility testing tool to find issues with your web pages. It runs HTML CodeSniffer from the command line for programmatic accessibility reporting. It's accessibility developer tool. free.svg open-source.svg
  • 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. free.svg open-source.svg
  • tota11y — an accessibility visualization toolkit. Interesting fact: inside the tool name you can see "a11y". It's an abbreviation of accessibility as "a" followed by 11 more letters, followed by "y". free.svg
  • WAVE — allows you to evaluate web content for accessibility issues directly within Chrome and Firefox. It's a web accessibility checker. free.svg

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:

  • After Effects — a digital visual effects, motion graphics, and compositing application developed by Adobe.
  • BeatFlyer — a web tool that lets you create very quickly loopy and catchy animations from your multi-layer compositions.
  • Flare — a powerful design and animation tool, which allows designers and developers to create animations for their app or game. free.svg
  • Flow — a professional animation tool for Sketch designs that also exports production ready code for iOS, Web or SVG files. mac.svg
  • Haiku Animator — keyframe-based animation connecting your UI tools to code that developers can easily use.
  • Keyshape — 2D animation tool that allows for animated SVG export. mac.svg
  • Kite Compositor — a powerful animation and prototyping application for Mac & iOS. mac.svg
  • LightBox — 2D, Hand-Drawn animation package. mac.svg free.svg
  • 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. free.svg
  • Mantra — A web-based timeline animation tool. open-source.svg
  • Spirit — the animation tool that helps you to create and manage the animations real time in the browser. mac.svg
  • Stylie — A web-based graphical CSS3 animation tool. open-source.svg
  • Tumult Hype — the HTML5 animation/interactives creation app for macOS. mac.svg

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:

  • Lens Studio — create, publish, and share your own AR experiences for Snapchat with or without code. free.svg
  • Lightform — a design tool for projected AR.
  • Spark AR Studio — сreate AR experiences for Instagram without code. free.svg mac.svg
  • Torch — a cloud-based 3D design and prototyping app focused on mobile AR. free.svg mac.svg
  • Vectary — сreate 3D and AR for your website.

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.
  • appear.in — a simple video collaboration tool.
  • Asana — the work management platform teams use to stay focused on the goals, projects, and daily tasks that grow business.
  • Basecamp — the project management suite designed to organize employees, delegate tasks, and monitor progress right from one place.
  • Filestage — an agile content approval software that helps you to review videos, designs and documents with clients and co-workers.
  • Gallery.io — a collaborative tool for uploading design work, getting feedback, and tracking revisions. free.svg open-source.svg
  • GoToMeeting — a simple, extraordinarily powerful web conferencing service.
  • HiveDesk — an automatic time tracking for remote employees with screenshots. It makes it easier to monitor productivity of remote employees and manage projects.
  • Jira — software development tool used by agile teams.
  • Milanote — an easy-to-use, collaborative tool to organize your ideas and projects into visual boards.
  • MURAL — think and collaborate visually. Anywhere, anytime.
  • Notion — write, plan, collaborate, and get organized. Notion is all you need — in one tool.
  • ProofHub — the one place for all your projects, teams and communications.
  • RealtimeBoard (Miro) — whiteboarding platform for cross-functional team collaboration. It was recently renaimed to Miro.
  • Skype — a tool for staying in touch with people all over the world for free with voice and video calls, text messages and screen sharing between multiple devices.
  • 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. free.svg
  • Workzone — a simple, powerful project management software.
  • Wrike — an online project management software that gives you full visibility and control over your tasks. It tool allows to edit, assign, schedule and mark tasks by colors indicating their status, make activity reports, create user groups.
  • Zenkit — a tool to schedule meetings, track project’s progress and brainstorm new ideas.

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:

  • Chroma — free web app which allows you to identify the color. free.svg
  • Color — create color schemes with the color wheel or browse thousands of color combinations from the Color community. Made by Adobe. free.svg
  • Colourcode — online designer tool, which allows you to easily and intuitively combine colours. free.svg
  • Color Deck — a HSL driven color palette collection. It's also open-source. free.svg open-source.svg
  • Color Hexa — free color tool providing information about any color and generating matching color palettes for designs.
  • Colorpicker — a complete and open-source colors manipulation tool with picking. free.svg open-source.svg
  • Colour Cafe — colours inspiration that have selected modern colour palette in Instagram. free.svg
  • Coolors.co — it is the super-fast color scheme generator. free.svg mac.svg
  • Culrs — thoughtfully crafted and easy-to-use color palettes. free.svg
  • Instant Eyedropper — a minimalist eyedropper tool for windows, supports multiple color formats for both designers and developers. free.svg
  • Just Color Picker — Free portable offline colour picker and colour editor. free.svg
  • 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. free.svg open-source.svg mac.svg
  • Paletton — a designer tool for creating color combinations that work together well. free.svg
  • Pikka - Color Picker — color picker & color schemes generator for macOS. mac.svg
  • React Color — a collection of color pickers from Sketch, Photoshop, Chrome. It‘s free and open-source. free.svg open-source.svg
  • Sip — a better way to collect, organize and share colors. Global eyedropper tool for MacOS. mac.svg
  • Skala Color — works with a huge variety of formats, covering everything you’re likely to need for web, iOS, Android, and macOS development. free.svg mac.svg
  • Swatches — iOS app that lets you collect, inspect and share the colors that inspire you in your daily life. free.svg mac.svg

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. mac.svg

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:

  • Avocode — open designs without design tools. Export images without preparing layers. Click on layers to get code.
  • Inspect — prepare designs for development. Made by Invision.
  • Sketch Measure — Sketch redline plugin. Annotate distance and size of elements. free.svg open-source.svg
  • Specctr — in the unfortunate event you're designing UI in PS, AI, or ID this tool creates redline annotations.
  • Sympli — automated specs and assets handoff from Sketch, Photoshop and Adobe XD. Integrated with Jira, Xcode and Android Studio.
  • Zeplin — handoff designs and styleguides with accurate specs, assets, code snippets automatically.

Design Pattern and Inspiration Tools

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

  • Collect UI — a platform for your daily inspiration collected from daily ui & beyond. Based on Dribbble shots, 14419 hand picked designs. free.svg
  • Creative Portfolios — a curation of the most creative portfolios made by designers & developers.
  • Dribbble — an online community for showcasing user-made artwork. Great resource to get inspired from others work.
  • Hover States — showcase great work from the bleeding edge of digital culture for, and with, the creative community.
  • Httpster — an inspiration resource showcasing totally rocking websites made by people from all over the world. free.svg
  • H69.Design — landing page colletions & Free resources for designers.
  • Lapa Ninja — the best landing page design inspiration from around the web. 1800+ landing page examples and updated daily.
  • Microcopy Inspirations — curated examples of good microcopy on websites and apps.
  • Mobile Patterns — a design inspirational library featuring finest UI UX Patterns (iOS and Android).
  • Mobbin — browse mobile design patterns for popular apps. Explore common user flows such as onboarding, account sign up and log in, core functionality, and more. free.svg
  • Owwly — home for digital products crafted with passion to design.
  • Page Flows — user flow videos and screenshots to inspire you when you're stuck. Discover mobile and web design patterns for over 160 different tasks. free.svg
  • pttrns — design patterns for popular mobile apps.
  • Really Good Emails — 4,150+ handpicked email design. free.svg
  • ReallyGoodUX — screenshots and examples of great UX from real mobile and web products. Discover the best UX examples—including onboarding tours and walkthroughs. free.svg
  • The Design Team — comics about a design team for a tech startup in Silicon Valley.
  • Typewolf — helps designers choose the perfect font combination for their next design project.
  • UI Garage — the one stop shop for designers, developers and marketer to find inspiration, tools and the best resources.
  • UI Sources — over 500+ interactions from the best designed and top grossing apps on the App Store today. free.svg
  • UI Recipes — weekly 15 min lessons on UI design from the hottest apps.
  • UX Archive — browse more than 400 user flows across 120 mobile apps. Examine tasks such as booking, logging in, onboarding, purchasing, seaching, and more. free.svg
  • Web Design Museum — over 1,200 carefully selected web sites that show web design trends between the years 1994 and 2006.

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. mac.svg
  • Lucid — tool for creating, managing and sharing a design system. From a simple component library through to detailed descriptions of your styles.
  • Symbol Design System — design System for Sketch based on atomic elements.
  • Zeroheight — styleguides created by designers, extended by developers, and editable by everyone.

We can also add to this in Sketch, Figma, UXPin 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. mac.svg
  • Bootstrap Studio — a powerful web design tool for creating responsive websites using the Bootstrap framework.
  • Grapedrop — design your components, web projects and publish them instantly online, with an easy to use editor.
  • Mason — is a feature-building platform where modern product teams design, build, and deploy front-end features together.
  • Mobirise — an offline drag and drop website builder software that is based on Bootstrap 3/4 and Google AMP. free.svg
  • 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.
  • Chalkmark — increase your customer conversion and task oriented success rates by getting quick feedback on designs before you implemen.
  • 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. free.svg
  • 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.
  • Mouseflow — record mouse cursor movements.
  • 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:

  • Fontbase — font management made easy. free.svg
  • FontPair — a simple tool that helps you pair Google Fonts together. free.svg
  • Fontface Ninja — browser extension to discover what fonts are being used on any website.
  • Fonts — thousands of beautiful fonts by Adobe. free.svg
  • FontSpark — a simple tool to help designers quickly find the best fonts for their projects. free.svg
  • Font Squirrel — download free fonts with wide collections.free.svg
  • Google Fonts — making the web more beautiful, fast, and open through great typography. free.svg
  • Google Webfonts Helper — a hassle way to self-host Google Fonts. It‘s free and open-source. free.svg open-source.svg
  • RightFont — font managing app, helps preview, sync, install and organize fonts over iCloud, Dropbox, OneDrive or Google Drive. mac.svg
  • Sans Forgetica — a downloadable font that is scientifically designed to help you remember your study notes. free.svg
  • Typeface — font manager that improves your design workflow with live font previews and flexible tagging. mac.svg
  • Wakamai Fondue — the tool that answers the question "what can my font do?". free.svg
  • Webfont — create and maintain custom SVG icon fonts, made a shared library of icons. free.svg mac.svg

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. free.svg mac.svg
  • Greenshot — take a screenshot of a selected region, window or fullscreen. Export it in different ways. free.svg
  • Kapopen-source screen recorder with options to export to GIF, MP4, WebM and APNG. free.svg open-source.svg mac.svg
  • Lighshot — screenshot app for taking quick captures of your screen.free.svg mac.svg
  • Monosnap — create screenshots, annotate them and upload them to the cloud. free.svg mac.svg
  • OBS — Open Broadcaster Software for screenshots, recording a gif or even making a tutorials videos free.svg
  • Quicktime — a video player that you can use to record your screen. free.svg mac.svg
  • Screenie — a screenshotting tool that works as an image manager, so you can filter and search through images, change screenshot filetypes. mac.svg
  • ScreenToGifopen source tool to record a gif of part of the screen. Also, work as a nice editor. Only available for Windows. free.svg open-source.svg
  • ShareX — screen capture, file sharing and productivity tool. free.svg open-source.svg
  • Snipping Tool — Windows free screenshot tool free.svg
  • Snappy — a tool that takes quick shots and organizes them for you into collections. free.svg mac.svg
  • Teampaper Snap — a modern screenshotting app that allows you to take screenshots of a selected area. free.svg mac.svg

Gradient Tools

  • Blend — create and customize beautiful CSS3 gradients. free.svg
  • ColorSpace — the perfect matching color scheme for your next project! Generate nice color palettes. free.svg
  • Cool Backgrounds — explore a beautifully curated selection of cool backgrounds that you can add to blogs, websites.
  • CSS Gradient — a free css gradient generator tool, this website lets you create a colorful gradient background. free.svg
  • Grabient — beautiful and simple UI for generating web gradients. free.svg
  • UI Gradients — handpicked collection of beautiful color gradients for designers and developers. free.svg
  • Web Gradients — a free collection of 180 linear gradients that you can use as content backdrops in any part of your website. free.svg

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:

  • Animaticons — animaticons are a growing set of beautiful, high-resolution, animated GIF icons that you can customize.
  • Digital Nomad Icons — lifestyle icon & emoji pack for your next project. 25 high resolution flat icons. free.svg
  • Essential Glyphs — created to cover your needs in perfect-shaped icons. Adapted for small and large sizes. free.svg
  • Feather Icons — each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability. free.svg
  • Font Awesome — the web's most popular icon set and toolkit, also it's open source. open-source.svg
  • Fontello — tool to build custom fonts with icons, also open source. free.svg open-source.svg
  • Iconscout — get high-quality Icons, Illustrations and Stock photos at one place.
  • Iconfinder — a marketplace for vector icons (SVG). Icon sets available in IconJar format.
  • IconJar — store all your icons in one icon manager. mac.svg
  • Iconmonstr — discover 4412+ free icons in 305 collections. Monstrously big and continuously growing source of simple icons. free.svg
  • Icon Store — a library of free vector icons for personal and commercial projects, designed by first-class designers. free.svg
  • ICONSVG — a tool to simplify the process of finding and generating common icons for your project. free.svg
  • Icons8 — free iOS, Android and Windows styled icons. free.svg
  • Ikonate — customise, adjust and download free vector icons. free.svg
  • illustrio — a smarter icon library. Build something great with 100% customizable icons. free.svg
  • Ionicons — beautifully crafted open source icons. free.svg
  • Material Design Icons — free material design icons made possible by open source contributons. free.svg open-source.svg
  • Material Icons Library — free collection of 1000+ icons for popular graphics tools. free.svg
  • Noun Project — icons for everything. mac.svg
  • Nucleo — a Mac and Windows app to collect, customize and export all your icons. free.svg
  • Simple Icons — free SVG icons for popular brands. Simply click the icon you want, and the download should start automatically. free.svg
  • Streamline Emoji — a free collection of 850 + vector emoji. The style is inspired by the japanese “Kawaii” (cute) style. free.svg
  • Svgsus — SVG icon management tool. mac.svg
  • Tilda Icons — download free icons for landing pages. More than 700 vector icons, collected in 43 sets for business. free.svg
  • Unicons — 1000+ pixel-perfect vector icons and Iconfont for your next project. free.svg
  • VisualPharm — free SVG Icons with super-fast search and free Coke. Built for fun by Icons8. free.svg
  • Xicons — free (do whatever you want) vector icons. A new icon pack every 10 days. free.svg
  • Zwicon — handcrafted iconset for your next project. free.svg

Illustrations

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

  • Absurd Design — free surrealist illustrations for your projects. free.svg
  • DrawKit — a collection of fully customisable SVG illustrations, in two styles, available to use on your next project, app, or website. free.svg
  • LUKASZADAM — free vector art illustrations and icons. They are available for personal and commercial use. free.svg
  • OUCH — vector illustrations to class up your project. Free for both personal and commercial use. free.svg
  • unDraw — collection of beautiful SVG images. free.svg

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:

  • Logo Lab — put your logo to the test with automated visual experiments. free.svg
  • Logo Package Express — export and package dozens of logo variations and file types for your clients automatically in under 5 minutes.
  • Logo Rank — upload your logo to see how it rates on a number of objective measures. free.svg

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:

  • Artboard Studio — is world's the first online graphic design application mainly focused on product mockups.
  • Cleanmock — create stunning mockups using latest device frames like iPhone & custom backgrounds.
  • Craftwork Design — free and premium high quality digital products which make your work faster and easier.
  • Devices by Facebook — images and Sketch files of popular devices. free.svg
  • Dimmy.club — device mockup generator for your website and app screenshots.
  • Frrames — Frrames mockups is perfectly crafted responsive windows mockups for your ideal presentation.
  • Lstore Graphics — free and premium mockups, UI/UX tools, scene creators for busy designers. free.svg
  • Mockflow — the quickest way to brainstorm user interface ideas.
  • Mockup World — tons of free and legal, fully layered, easily customizable photo realistic PSDs. free.svg
  • Mockups For Free — free design resources, PSD files for graphic and web designers. free.svg
  • Mockuuups — drag-and-drop tool for creating beautiful app previews or any marketing materials.
  • Mock Video — instantly create mockups by adding a device frame to your videos.
  • Moqups — helps you create and collaborate in real-time on wireframes, mockups, diagrams and prototypes.
  • Overframe for Mac — record your prototype & app with device frame overlay. mac.svg
  • PixelBuddha — free and premium high quality resources for web designers and developers.
  • Ramotion Store — carefully crafted Apple and Android mockups for Sketch and Photoshop.
  • Rotato — animated 3D mockups for your app designs. mac.svg
  • Screely — quickly frame web page designs into a minimalist browser window. free.svg
  • ScreenSpace — 3D devices videos for motion designer.
  • Smartmockups — create stunning product mockups with just a few clicks.
  • shotsnapp — create beautiful device mockup presentation for your digital app and website design.
  • The Mockup Club — a directory of the best free design mockups for Photoshop, Sketch, Figma and InVision Studio. free.svg
  • Threed — generate custom 3D Device Mockups in your Browser.
  • UI Store Design — 200+ free handpicked design resources for Sketch, Figma, Adobe XD, InVision Studio, Photoshop, Illustrator CC. free.svg
  • UI8 - Design Freebies — epic design freebies to get you started. free.svg
  • Vector Mockups Library — free collection of presentation Mockups for Sketch, Figma & Photoshop. free.svg

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:

  • Aseprite — animated sprite editor & pixel art tool.
  • Piskel — online editor for animated sprites & pixel art. free.svg open-source.svg

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. free.svg open-source.svg
  • Axure RP — wireframing, prototyping, collaboration & specifications generation.
  • Balsamiq — wireframing and collaboration.
  • Creo — prototyping, code exporting and built-in mobile app builder. mac.svg
  • InVision — prototyping, collaboration & workflow platform. free.svg
  • Flinto — a Mac app for creating interactive and animated prototypes of app designs.
  • Framer X — a tool to visually design realistic interactive prototypes. mac.svg
  • 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). free.svg mac.svg
  • 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. mac.svg
  • 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. free.svg

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:

  • Sketchsheets — an open source project dedicated to providing free printable templates of the latest devices and platforms for wireframing designs. free.svg open-source.svg
  • Sneakpeekit — print note taking grids and devices frames. free.svg
  • Sketchize — just choose any of the sketch sheets that fits your project, print it out and start to sketch your dream. free.svg

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

Sound Design

  • AudioJungle — 836,206 tracks and sounds from the community of musicians and sound engineers.
  • Bensound — download creative commons music, royalty free music for free and use it in your project. free.svg
  • Fugue Music — download free background music for your videos. free.svg
  • SoundKit — a UI sound library designed for all of your interface needs.
  • UI Sounds — learn sound design for user interfaces by example.
  • Wistia Music — download some free background tracks to add energy and emotion to your videos. free.svg
  • WOWA — download royalty free music for YouTube videos, Podcasts and Apps. No copyright CC0. Music inspired by Unsplash. free.svg
  • YouTube Audio Library — browse and download free music for your project. free.svg

Stock Photos Tools

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

  • Burst — free stock photos for websites and commercial use. free.svg
  • Duotone — find beautiful free duotone images to use in any project, or make custom duotone images. free.svg
  • FoodiesFeed — FoodiesFeed offers thousands of beautiful realistic free food pictures in high resolution. It’s the perfect stock photo site for food bloggers. free.svg
  • FreePhotos.cc — free stock photos for commercial use. free.svg
  • Freestocks.org — Freestock offers a wide range of high quality photos all released under Creative Commons CC0. free.svg
  • Gratisography — the world's quirkiest collection of free high-resolution pictures. free.svg
  • Jay Mantri — 7 new photos released every Thursday under the Creative Commons CC0 license. Jay Mantri posts some really nice photos with a variety of different themes. free.svg
  • Kaboom Pics — Kaboom Pics offers a wide variety of high quality free stock photos including abstract, city/architecture, fashion, food, landscapes and more. free.svg
  • LandingStock — a collection of free images for your landing page. free.svg
  • Life of Pix — a resource created by the LEEROY creative agency offering free high-resolution photos with no copyright restrictions. free.svg
  • Magdeleine — free high-quality stock photos for your inspiration. free.svg
  • Moose — don't search for stock photos, create them. free.svg
  • MMT STock — a collection of high resolution photos provided by Jeffrey Betts. All photos are released under Creative Commons CC0. free.svg
  • New Old Stock — a vintage photos from the public archives free of known copyright restrictions. free.svg
  • Pexels — an aggregate of many free stock photo resources. free.svg
  • Photo Creator — a free tool for creating realistic stock photos on your demand. Thousands of models, objects, and backgrounds. Perfect to tell any story. free.svg
  • Picography — it contains beautiful free stock photos submitted by Dave Meier and various other photographers. All photos are released under Creative Commons CC0. free.svg
  • Pixabay — website for sharing photos, illustrations, vector graphics, and film footage under a proprietary license. free.svg
  • Picjumbo — a collection of totally free photos for your commercial & personal works. New photos are added daily from a wide variety of categories including abstract, fashion, nature, technology and much more. free.svg
  • Pngtree — millions of PNG images, backgrounds and vectors for free download. free.svg
  • pxhere — free image stock. free.svg
  • Reshot — a massive library of handpicked free stock photos you won’t find elsewhere. Built for startups, freelancers & makers who are sick of tacky stock photos. free.svg
  • ShotStash — thousands of free high-resolution CC0 photos and videos. free.svg
  • SkitterPhoto — SkitterPhoto offers a wide variety of free stock photos and are released under Creative Commons CC0. free.svg
  • Startup Stock Photos — free photos for startups, bloggers and publishers. free.svg
  • StockSnap.io — StockSnap has a large selection of beautiful free stock photos and high resolution images. free.svg
  • StyledStock — StyleStock offers free feminine stock photography for every woman entrepreneur. The collection is totally free for your commercial & personal works. free.svg
  • UI Faces — aggregator that indexes various free avatar sources that you can use in your design mockups. free.svg
  • Unsplash — stock photos free to use. free.svg
  • #WOCinTech Chat Photos — free stock photos of women technologists of diverse backgrounds. free.svg
  • Zoommy — helps you find awesome free stock photos for your creative product or inspiration. free.svg

Stock Videos

  • Coverr — beautiful, free stock video footage for your homepage. free.svg
  • Mazwai — great collection of free creative commons HD video clips & footages. free.svg
  • Mixkit — extraordinary Free HD videos. For you to use, completely free of charge. free.svg
  • Motion Places — a curated collection of beautiful footage you can use for your projects. free.svg
  • Pexels Videos — pexels Videos makes it easy to find free stock footage for your website, promo video or anything else. free.svg
  • Videezy — download millions of free and premium stock footage and motion graphics instantly.
  • Videvo — videvo offers a large selection of HD video clips, motion graphics and free stock footage. free.svg
  • 123RF — over 100,000 daily new content & 24/7 online support.

UI Design Tools

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

  • Adobe XD — design, prototype, and share any user experience, from websites and mobile apps to voice interactions. free.svg
  • 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. free.svg
  • GIMP — a free & open source imaging and graphic design software. free.svg open-source.svg
  • Illustrator — create logos, icons, drawings, typography, and illustrations for print, web, video, and mobile. Made by Adobe.
  • 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. free.svg
  • Krita — a free painting and graphic design software considered a good alternative to Adobe Photoshop. free.svg open-source.svg
  • Lunacy — a free native windows app that works offline and supports .sketch files. Flexible and light weighed. Intuitive and easy to use. Speedups and empowers UI and UX designers. The must have to produce stunning designs. free.svg
  • Pencil — prototyping tool with many built-in components that people can easily install and use to create mockups in popular desktop platforms. open-source.svg
  • Photopea — a free browser-based graphic design app alternative to Photoshop. free.svg
  • Photoshop — imaging and graphic design software developed by Adobe.
  • Sketch — a design toolkit built for Mac. mac.svg
  • Studio — combines design, prototyping, and collaboration into one harmonious workflow. Made by Invision.
  • Vectr — a simple web and desktop cross-platform tool to create vector graphics easily and intuitively. free.svg

UI Inspiration

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

  • CodeMyUI — handpicked collection of web design & UI inspiration with code snippets. free.svg
  • Inspiration UI — community that aims to provide the best design resources for those who create for the web. free.svg

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. free.svg
  • 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. free.svg
  • Lucidchart — online tool for creating diagrams, flow charts, sitemaps, and more.
  • MindNode — a mind mapping app that makes brainstorming simple and easy. free.svg mac.svg
  • 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. mac.svg
  • Overflow — turn your designs into playable user flow diagrams that tell a story.
  • Sketch.systems — ui and flow design with interactive state machines. free.svg
  • Whimsical — easy to create flow charts, wireframes and sticky notes.
  • Wireflow — is free, online and open source tool for creating beautiful user flow prototypes. open-source.svg
  • 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. free.svg

User Research Tools

  • Calendly — Calendly helps you schedule meetings without the back-and-forth emails.
  • Crowd Signal — Collect, organize and analyze data from a variety of sources, including social media and mobile.
  • Feedback Lite — Collect high quality customer feedback using Voice of Customer solutions designed to improve your website performance and boost customer engagement.
  • Reflector — Reflector is a basic screen-mirroring and recording tool so you can conduct user tests remotely, using any existing wireframes or prototypes and standard observation and note-taking techniques.
  • Survey Monkey — Use SurveyMonkey to drive your business forward by using our free online survey tool to capture the voices and opinions of the people who matter most to you.
  • Wufoo — Create forms, collect data and payments, and automate your workflows.
  • YesInsights — Simple one question and NPS surveys to improve your business.
  • Reframer — a research tool that helps your team to capture, tag (code) and identify patterns in qualitative data across multiple research participants.
  • UserBit — a platform of real-time research Tools for your team. Tag/code interviews and feedback, capture insights, create personas, visual sitemaps and more.

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:

  • Abstract — a platform for design teams to version, manage and collaborate on Sketch files.
  • Folio — a simple version control system for design teams based on Git. mac.svg
  • Kactus — design version control without changing your tools. Manage changes, document work and keep your team in sync. open-source.svgmac.svg
  • Plant — Mac app and Sketch plugin offering complete version control for designers and teams. mac.svg
  • Relay for Figma — relay pushes your latest assets from Figma directly to your codebase (not released yet but you can subscribe to early access).
  • Versions — a version control tool for designers with visual diff, merge and conflict resolution. Works with GitHub, Bitbucket, GitLab and Azure Devops.

Visual Debugging Tools

  • LogRocket — a tool to record what users do on your site so you can reproduce bugs and fix issues faster.
  • VisBug — on any webpage: visually debug, quick inspect style and a11y, change CSS visually, click and drag elements around, and much more. open-source.svg free.svg

Wireframing Tools

  • Balsamiq Cloud — effortless UI sketching. Capture your ideas, collaborate on your designs, get everyone on board.
  • CSS Grid Builder — with this tool there is no HTML part to the grid. The grid only becomes apparent when content (elements) are added and positioned according to the grid rules. free.svg
  • Gridzzly — the easiest way to create custom grid paper printable. free.svg
  • Layoutit — a interface builder for CSS Grid & Bootstrap that wants to be the kick-off for your front-end developments. free.svg
  • Wireframe.cc — a simple wireframing tool that doesn't get in your way. free.svg
  • Whimsical Wireframes — instant wireframing at your fingertips. Rich library of configurable elements like buttons, inputs, checkboxes.
  • 1200px Grid System — helps you build a grid system for much wider website designs than the 960-pixel style.

3D Modeling Software

  • Autodesk — integrated CAD, CAM, and CAE software. Eliminate your disconnected product development process. Unify design, engineering, and manufacturing into a single platform.
  • Blender — free and Open 3D Creation Software.
  • SketchUp — premier 3D design software that truly makes 3D modeling for everyone, with a simple to learn yet robust toolset that empowers you to create whatever you can imagine.
  • Maya — make animations, environments, motion graphics, virtual reality, and character creation, all in one powerful toolset.
  • 3D Slash — the easiest 3D modeling tool on the market. Available on all devices and all OS, online and offline.

Addendum (Reference & Inspiration)

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

About

The best design tools for everything.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%