PH400+ Design Tools/Sites | Part 1
Table of Contents
Part 1
- Accessibility Tools
- Animation Tools
- Augmented Reality
- Collaboration Tools
- Color Picker Tools
- Design Feedback Tools
Part 2
- Design Handoff Tools
- Design Inspiration
- Design System Tools
- Design to Code Tools
- Design Version Control
- Development Tools
Part 3
- Experience Monitoring
- Font Tools
- Gradient Tools
- Icons Tools
- Illustrations
- Information Architecture
- Logo Design
Part 4
- Mockup Tools
- No Code Tools
- Pixel Art Tools
- Prototyping Tools
- Screenshot Software
- Sketching Tools
- SMM Design Tools
Part 5
- Sound Design
- Stock Photos Tools
- Stock Videos
- Tools for Learning Design
- UI Design Tools
- User Flow Tools
- User Research Tools
- Visual Debugging Tools
- Wireframing Tools
- 3D Modeling Software
Bookmark niyo na
Accessibility Tools
Accessibility is the practice of creating websites and apps usable for 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:
- You do not have permission to view the full content of this post. Log in or register now. — a web tool to analyze websites against WCAG rules. Also available as Google Chrome browser extension and as Twitter bot.
- You do not have permission to view the full content of this post. Log in or register now. — helps developers quickly find and fix accessibility issues.
- You do not have permission to view the full content of this post. Log in or register now. — an Elm-based prototype to help designers build accessible color palettes.
- You do not have permission to view the full content of this post. Log in or register now. — accessibility testing web app used to evaluate HTML content for accessibility problems.
- You do not have permission to view the full content of this post. Log in or register now. — accessibility testing tool for web content (bookmarklet). It will automatically detect accessibility issues, give suggestions to improve online accessibility, and check 508 compliance.
- You do not have permission to view the full content of this post. Log in or register now. — accessibility engine designed to work on all modern browsers and with whatever tools, frameworks, libraries, and environments you use today. It’s an automated accessibility testing tool for developers.
- You do not have permission to view the full content of this post. Log in or register now. — a web app that algorithmically builds accessible color systems. Done by the Lyft Design team.
- You do not have permission to view the full content of this post. Log in or register now. — a free web-based contrast tool.
- You do not have permission to view the full content of this post. Log in or register now. — a free color blindness simulator.
- You do not have permission to view the full content of this post. Log in or register now. — a macOS app for designers and developers to get quick access to WCAG color contrast ratios. -
- You do not have permission to view the full content of this post. Log in or register now. — helps check the contrast between the background of an element and the page itself.
- You do not have permission to view the full content of this post. Log in or register now. — an app for checking the accessibility of text against the Web Content Accessibility Guidelines (WCAG).
- You do not have permission to view the full content of this post. Log in or register now. — a methodology and a set of tools provided by the Microsoft team.
- You do not have permission to view the full content of this post. Log in or register now. — helps you to test entire color systems for contrast and accessibility.
- You do not have permission to view the full content of this post. Log in or register now. - generate color palettes by desired WCAG contrast ratio. Open source web tool & npm module for designers and engineers. Made by Adobe.
- You do not have permission to view the full content of this post. Log in or register now. — accessibility testing tool to find issues with your web pages. It runs HTML CodeSniffer from the command line for programmatic accessibility reporting. It’s an accessibility developer tool.
- You do not have permission to view the full content of this post. Log in or register now. — a color blindness simulator for macOS and iOS that lets you visualize colors as they are perceived with various types of color blindness.
- You do not have permission to view the full content of this post. Log in or register now. — a ρáíd Sketch plugin that will let you simulate different types of color blindness. -
- You do not have permission to view the full content of this post. Log in or register now. — lets you test your website and shows you how people with different color blindness will see your pages.
- You do not have permission to view the full content of this post. Log in or register now. — 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”.
- You do not have permission to view the full content of this post. Log in or register now. — allows you to evaluate web content for accessibility issues directly within Chrome and Firefox. It’s a web accessibility checker.
- You do not have permission to view the full content of this post. Log in or register now. — a free collection of accessible color themes.
Animation Tools
Animations guide people through the product friendly and smoothly. Live interactive UI makes users feel delighted with instant feedback and emotional touch. These free and ρáíd tools are designed to make animation creation easier. If you plan to make animated transitions, micro-interactions or scroll-based animations, go through these tools:
- You do not have permission to view the full content of this post. Log in or register now. — digital visual effects, motion graphics, and compositing application developed by Adobe.
- You do not have permission to view the full content of this post. Log in or register now. — a web tool that lets you create very quickly loopy and catchy animations from your multi-layer compositions.
- You do not have permission to view the full content of this post. Log in or register now. — simplifies motion design in After Effects so any editor can tell stories that won′t be ignored.
- You do not have permission to view the full content of this post. Log in or register now. — a powerful design and animation tool, which allows designers and developers to create animations for their app or game.
- You do not have permission to view the full content of this post. Log in or register now. — a professional animation tool for Sketch designs that also exports production-ready code for iOS, Web or SVG files. -
- You do not have permission to view the full content of this post. Log in or register now. — a suite of tools for scripted, high-performance HTML5 animations in all major browsers.
- You do not have permission to view the full content of this post. Log in or register now. — keyframe-based animation connecting your UI tools to code that developers can easily use.
- You do not have permission to view the full content of this post. Log in or register now. — 2D animation tool that allows for animated SVG export. -
- You do not have permission to view the full content of this post. Log in or register now. — a powerful animation and prototyping application for Mac & iOS. -
- You do not have permission to view the full content of this post. Log in or register now.— 2D, Hand-Drawn animation package. -
- You do not have permission to view the full content of this post. Log in or register now. — 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 the web.
- You do not have permission to view the full content of this post. Log in or register now. — a web-based timeline animation tool.
- You do not have permission to view the full content of this post. Log in or register now. — animation delights library for iOS and Android. Choose from a variety of animations that suits different app styles.
- You do not have permission to view the full content of this post. Log in or register now. — integrate an interactive background for free to draw more attention to your website.
- You do not have permission to view the full content of this post. Log in or register now. — make your web content interactive to engage your visitors like never before thanks to 3D.
- You do not have permission to view the full content of this post. Log in or register now. — an online video maker for small businesses to create video ads like the Big Brands without the big budget.
- You do not have permission to view the full content of this post. Log in or register now. — create stylish animated posts for Instagram and Facebook in just a few taps, all from your mobile phone. -
- You do not have permission to view the full content of this post. Log in or register now. — the animation tool that helps you to create and manage the animations in real-time in the browser. -
- You do not have permission to view the full content of this post. Log in or register now. — a web-based graphical CSS3 animation tool.
- You do not have permission to view the full content of this post. Log in or register now. — the HTML5 animation/interactives creation app for macOS. - Drama, Principle, Framer, Invision Studio, Flinto are also among UI & UX animation apps and software animation tools.
Augmented Reality
Augmented Reality is a technology that upgrades our real world, by adding a layer of digital information to it. The use of AR increases day by day with dozens of new AR apps, development kits, and AR frameworks. So in this section is collected different augmented reality tools for creating, projecting and prototyping apps focused on AR:
- You do not have permission to view the full content of this post. Log in or register now. — delivers professional-grade augmented reality for the workforce by overlaying digital information onto the physical environment.
- You do not have permission to view the full content of this post. Log in or register now. — a mobile application and an Augmented Reality Engine, making AR easier.
- You do not have permission to view the full content of this post. Log in or register now. — adding value to printed content through visual interactivity.
- You do not have permission to view the full content of this post. Log in or register now. — find various items based upon augmented reality technology.
- You do not have permission to view the full content of this post. Log in or register now. — create, publish, and share your own AR experiences for Snapchat with or without code.
- You do not have permission to view the full content of this post. Log in or register now. — a design tool for projected AR.
- You do not have permission to view the full content of this post. Log in or register now. — сreate AR experiences for Instagram without code. -
- You do not have permission to view the full content of this post. Log in or register now. — a cloud-based 3D design and prototyping app focused on mobile AR. -
- You do not have permission to view the full content of this post. Log in or register now. — build high-quality 3D and 2D games, deploy them across mobile, desktop and VR/AR.
- You do not have permission to view the full content of this post. Log in or register now. — сreate 3D and AR for your website.
- You do not have permission to view the full content of this post. Log in or register now. — SDK for mobile devices that enables the creation of augmented reality applications.
- You do not have permission to view the full content of this post. Log in or register now. — empowers your iOS, Android & Smart Glasses apps with Image & Object Tracking, Instant tracking (SLAM), Geo AR, and more.
Collaboration Tools
Looking to try some tools for agile design and development collaboration? Good idea because such tools make the lives of designers and developers much easier, save time, and improve productivity. Well, you know all that in the Slack-driven era. Here you’ll find the best collaboration tools for product teams:
- You do not have permission to view the full content of this post. Log in or register now. — part spreadsheet, part database, and entirely flexible, teams use Airtable to organize their work, their way.
- You do not have permission to view the full content of this post. Log in or register now. — the work management platform teams use to stay focused on the goals, projects, and daily tasks that grow business.
- You do not have permission to view the full content of this post. Log in or register now. — the project management suite designed to organize employees, delegate tasks, and monitor progress right from one place.
- You do not have permission to view the full content of this post. Log in or register now. — the most innovative way to manage projects, completely free… forever.
- You do not have permission to view the full content of this post. Log in or register now. — screenshot, file sharing, and screencasts to help you capture and explain your ideas.
- You do not have permission to view the full content of this post. Log in or register now. — a whiteboard tool that lets you easily sketch diagrams with a hand-drawn feel.
- You do not have permission to view the full content of this post. Log in or register now. — an agile content approval software that helps you to review videos, designs, and documents with clients and co-workers.
- You do not have permission to view the full content of this post. Log in or register now. — a tool to plan your projects and schedule your team’s time all in one place.
- You do not have permission to view the full content of this post. Log in or register now. — a collaborative tool for uploading design work, getting feedback, and tracking revisions.
- You do not have permission to view the full content of this post. Log in or register now. — an automatic time tracking for remote employees with screenshots. It makes it easier to monitor the productivity of remote employees and manage projects.
- You do not have permission to view the full content of this post. Log in or register now. — software development tool used by agile teams.
- You do not have permission to view the full content of this post. Log in or register now. — multi-platform open-source video conferencing you can install yourself or use on their servers.
- You do not have permission to view the full content of this post. Log in or register now. — a free collaboration app with built-in end-to-end encrypted chat, file sharing, git repositories, and more
- You do not have permission to view the full content of this post. Log in or register now. - an easy visual collaborative tool to plan, organize and track anything, anywhere, anytime.
- You do not have permission to view the full content of this post. Log in or register now. — a flexible, open-source messaging platform that meets even the most demanding privacy and security standards.
- You do not have permission to view the full content of this post. Log in or register now. — an easy-to-use, collaborative tool to organize your ideas and projects into visual boards.
- You do not have permission to view the full content of this post. Log in or register now. — real-time whiteboard and collaboration tools for distributed teams.
- You do not have permission to view the full content of this post. Log in or register now. — fast online proofing for creative projects. Get feedback for images and PDFs.
- You do not have permission to view the full content of this post. Log in or register now. — think and collaborate visually. Anywhere, anytime.
- You do not have permission to view the full content of this post. Log in or register now. — open source collaboration platform for files, kanban boards, chat & calls, calendar and more.
- You do not have permission to view the full content of this post. Log in or register now. — write, plan, collaborate, and get organized. Notion is all you need — in one tool.
- You do not have permission to view the full content of this post. Log in or register now. — the one place for all your projects, teams and communications.
- You do not have permission to view the full content of this post. Log in or register now. — whiteboarding platform for cross-functional team collaboration. It was recently renamed to Miro.
- You do not have permission to view the full content of this post. Log in or register now. — 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.
- You do not have permission to view the full content of this post. Log in or register now. — a beautifully designed, team-oriented task manager that consolidates Trello/Jira/Asana tickets into a single, calendar-oriented view.
- You do not have permission to view the full content of this post. Log in or register now. — team productivity made simple, fun and designed for remote teams. Taskade is collaborative and syncs in real-time across the web, mobile, and desktop.
- You do not have permission to view the full content of this post. Log in or register now. — a web-based project management application that enables you to organize and prioritize your projects in a fun, flexible and rewarding way.
- You do not have permission to view the full content of this post. Log in or register now. — simple real-time whiteboard for collaboration work.
- You do not have permission to view the full content of this post. Log in or register now. — a simple, powerful project management software.
- You do not have permission to view the full content of this post. Log in or register now. — an online project management software that gives you full visibility and control over your tasks.
- You do not have permission to view the full content of this post. Log in or register now. — a tool to schedule meetings, track the project’s progress, and brainstorm new ideas.
- You do not have permission to view the full content of this post. Log in or register now. — an online visual bug tracking and website annotation tool
- You do not have permission to view the full content of this post. Log in or register now. — combines the immediacy of real-time chat with an email threading model, helping to focus on important conversations while ignoring irrelevant ones.
Color Picker Tools
If you are looking for an eyedropper tool, color identifier or color capture, check this section. With the color pickers mentioned here, you will be able to create new color combinations and define great ones. Almost all of these tools are free:
- You do not have permission to view the full content of this post. Log in or register now. — the biggest collection of official brand color codes around.
- You do not have permission to view the full content of this post. Log in or register now. — a web-based color palette management tool which provides a new way to interact with digital colors.
- You do not have permission to view the full content of this post. Log in or register now. — free web app which allows you to identify the color.
- You do not have permission to view the full content of this post. Log in or register now. — create color schemes with the color wheel or browse thousands of color combinations from the Color community. Made by Adobe.
- You do not have permission to view the full content of this post. Log in or register now. — a tool to preview palettes against UI elements, cycle through accessible color combos and create palettes manually, via URL import, or generatively.
- You do not have permission to view the full content of this post. Log in or register now. — an HSL driven color palette collection. It’s also open-source.
- You do not have permission to view the full content of this post. Log in or register now. — free color tool providing information about any color and generating matching color palettes for designs.
- You do not have permission to view the full content of this post. Log in or register now. - a tool for getting the name of any color from any image. You also get the HEX code and RGB value for the color.
- You do not have permission to view the full content of this post. Log in or register now. — free and open platform for color inspiration with thousands of trendy hand-picked color palettes.
- You do not have permission to view the full content of this post. Log in or register now. — a tool for blending colors and generating a color’s shades and tints.
- You do not have permission to view the full content of this post. Log in or register now. — leap through time and see the colors of history.
- You do not have permission to view the full content of this post. Log in or register now. — a complete and open-source color manipulation tool with picking.
- You do not have permission to view the full content of this post. Log in or register now. — the ultimate color productivity booster for designers and developers. -
- You do not have permission to view the full content of this post. Log in or register now. — place to store your color palettes or easy generate.
- You do not have permission to view the full content of this post. Log in or register now. — search through the color palettes of the most voted products on Product Hunt.
- You do not have permission to view the full content of this post. Log in or register now. — colors inspiration that has selected a modern color palette on Instagram.
- You do not have permission to view the full content of this post. Log in or register now. — an online designer tool, which allows you to easily and intuitively combine colors.
- You do not have permission to view the full content of this post. Log in or register now. — the super-fast color scheme generator. -
- You do not have permission to view the full content of this post. Log in or register now. — thoughtfully crafted and easy-to-use color palettes.
- You do not have permission to view the full content of this post. Log in or register now. — a tool to create harmonious color themes with code and sketch file export.
- You do not have permission to view the full content of this post. Log in or register now. — image color picker and color scheme generator.
- You do not have permission to view the full content of this post. Log in or register now. — a minimalist eyedropper tool for windows, supports multiple color formats for both designers and developers.
- You do not have permission to view the full content of this post. Log in or register now. — Free portable offline color picker and color editor.
- You do not have permission to view the full content of this post. Log in or register now. — AI-based tool to generate color palettes based on your preferences.
- You do not have permission to view the full content of this post. Log in or register now. — Google’s material design color palette in the form of a mac app. -
- You do not have permission to view the full content of this post. Log in or register now. — get perfect Material Design color palettes from any hex color.
- You do not have permission to view the full content of this post. Log in or register now. — a designer tool for creating color combinations that work together well.
- You do not have permission to view the full content of this post. Log in or register now. — a rocket fast primary color generator using Google’s image search.
- You do not have permission to view the full content of this post. Log in or register now. — a color palette generator with innumerable color configurations suggested by the app.
- You do not have permission to view the full content of this post. Log in or register now. — color picker & color schemes generator for macOS. -
- You do not have permission to view the full content of this post. Log in or register now. — a collection of color pickers from Sketch, Photoshop, Chrome. It‘s free and open-source.
- You do not have permission to view the full content of this post. Log in or register now. — a better way to collect, organize and share colors. Global eyedropper tool for macOS. -
- You do not have permission to view the full content of this post. Log in or register now. — works with a huge variety of formats, covering everything you’re likely to need for web, iOS, Android, and macOS development. -
- You do not have permission to view the full content of this post. Log in or register now. — iOS app that lets you collect, inspect and share the colors that inspire you in your daily life. -
- You do not have permission to view the full content of this post. Log in or register now. — display tints and shades of a given hex color in 10% increments.
- You do not have permission to view the full content of this post. Log in or register now. — color picker for data visualizations.
Design Feedback Tools
How do you provide and get feedback during the development process? This process is usually pretty messy for many product teams, which caused product delays and time waste on back-and-forth communication. So if you wish to get fast and structural feedback on UI issues or visual bugs — take a look at this tool:
- You do not have permission to view the full content of this post. Log in or register now. — review and annotate iOS apps then share your feedback in Jira or Trello. -
- You do not have permission to view the full content of this post. Log in or register now. — online proofing, design review & approval software.