Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kudapara/curated-design-tools

A curated list of the tools we use to enhance our design wokflow.
https://github.com/kudapara/curated-design-tools

Last synced: about 2 months ago
JSON representation

A curated list of the tools we use to enhance our design wokflow.

Awesome Lists containing this project

README 

        
# Curated Design Tools [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)



> A curated list of the tools we use to enhance our design wokflow



## Contents



- [Curated Design Tools ![Awesome](https://awesome.re)](#curated-design-tools-)

  - [Contents](#contents)

  - [Design Applications](#design-applications)

  - [Design tools](#design-tools)

  - [Patterns & backgrounds](#patterns--backgrounds)

  - [Design Inspiration](#design-inspiration)

  - [Illustrations](#illustrations)

  - [Animations](#animations)

  - [Emojis](#emojis)

  - [Svg Icons](#svg-icons)

  - [Typography](#typography)

  - [Fonts](#fonts)

  - [Font Icons](#font-icons)

  - [Stock Video](#stock-video)

  - [Stock Photos](#stock-photos)

  - [Design Systems](#design-systems)

  - [Contribute](#contribute)



## Design Applications



- [ExcaliDraw](https://excalidraw.com/) - ([⭐ Open Source ⭐](https://github.com/excalidraw/excalidraw)) Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.

- [Adobe XD](https://www.adobe.com/products/xd.html) - Wireframe, design, prototype, present, and share amazing experiences for web, mobile, voice, and more.

- [Figma](https://www.figma.com/) - Figma helps teams create, test, and ship better designs from start to finish.

- [Sketch](https://www.sketch.com/) -  A digital design toolkit that helps you work and collaborate faster in design, wireframing and prototyping projects.

- [Lunacy](https://icons8.com/lunacy) - Free of charge Windows graphic design app that works offline and offers all the power of Sketch (inlcuding reading sketch files).

- [Visily](https://www.visily.ai/) - Similar to Figma and Sketch, but vastly easier to use. Enable non-designers such as founders, product managers, buiness analysts, and developers to create beautiful wireframes and mockups with little effort.



## Design tools



- [Grabient](https://grabient.com) - Beautiful and simple UI for generating web gradients.

- [Blob Maker](https://www.blobmaker.app) - Make organic svg shapes for your next design.

- [Coolors](https://coolors.co) - Generate perfect color combinations for your designs.

- [Metatags](https://metatags.io) - Edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!

- [Css filters](https://www.cssfilters.co) - Visual playground for generating CSS for custom and Instagram like photo filters.

- [CSS Gradient Editor](https://www.cssgradienteditor.com) - You may only need this tool for creating CSS gradient backgrounds and patterns.

- [Pigment](https://pigment.shapefactory.co) - A unique way to generate fresh and vibrant colors based on lighting and pigment, instead of math.



## Patterns & backgrounds



- [Cool Backgrounds](https://coolbackgrounds.io) - Explore a beautifully curated selection of cool backgrounds that you can add to blogs, websites, or as desktop and phone wallpapers.

- [Toptal subtle patterns](https://www.toptal.com/designers/subtlepatterns) - Free high quality patterns for your next web project.

- [Trianglify.io](https://trianglify.io) - A tool for generating low poly triangle patterns that can be used as wallpapers and website assets.

- [Flaticon Patterns](https://pattern.flaticon.com) - Mesh up flaticon's icons to form colorful background patterns.

- [Heropatters](https://www.heropatterns.com) - A collection of repeatable SVG background patterns for you to use on your digital projects.

- [Css Gradient](https://cssgradient.io) - As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

- [Patterninja](https://patterninja.com) - Combine images to create patterns that can be downloaded in high resolution and used for printing and the web.

- [uiGradient](https://uigradients.com) - This website has a bunch of gradient suggestions. You can get the CSS code or get inspiration of various colour combinations for gradients.

- [Colordesigner](https://colordesigner.io/) - the main purpose of this tool is to help with building a color palette and generate tints and shades based on it. Just pick a color, and the app does the rest.

- [Adobe Color](https://color.adobe.com/) - Adobe Color is a web app and creative community where you can create and share color themes and inspiration. You can also create new colour palettes and themes, extract a colour theme from an image, normalize colour contrasts as well as convert colours to different colour models, maintaining brightness and colour accuracy.



## Design Inspiration



- [Dribbble](https://dribbble.com) - Where designers gain inspiration, feedback and is your best resource to discover and connect with designers worldwide.

- [Mobbin Design](https://mobbin.design) - Check out the hand-picked collection of latest mobile design patterns from apps that reflect the best in design.

- [Evernote Design 🔥](https://evernote.design) - All in One Bookmark Links for Designer.

- [Page Flows](https://pageflows.com) - User flow videos & screenshots to inspire you when you're stuck.

- [Designspiration](https://www.designspiration.net/) - Cool designs and hd pictures.

- [Codepen](https://codepen.io/pens) - CodePen is a social development environment for front-end designers and developers.

- [Landing Folio](https://www.landingfolio.com) - Landingfolio features the best landing page designs on the web, updated weekly.

- [Behance](https://behance.net) - Showcase and discover the latest work from top online portfolios by creative professionals across industries.

- [Lapa Ninja](https://www.lapa.ninja) - The best landing page design inspiration from around the web. The contents are selected from the best designs, and daily updated.

- [Codrops](https://tympanus.net/codrops/) - Resource and Inspiration for creative minds, ranging from tutorials on new and experimental concepts, source, icons and tutorials.

- [Land Book](https://land-book.com/) - Design gallery with the best and most carefully collected websites. We help creatives find inspiration & motivation to do rad stuff.

- [Nicelydone](https://nicelydone.club/) - Nicely done is a place for User interface inspiration. A tool made by a designer for designers.

- [Awwwards](https://awwwards.com) - The awards of design, creativity and innovation on the internet.

- [Landings](https://landings.dev) - A curated directory of hundreds of great looking landing page examples that you can filter by different categories like theme and color.



## Illustrations



- [Absurd Design](https://absurd.design) - Download Surrealist illustrations with sense. Use free for your landing pages and apps. These illustrations combines the absurdity and a deep sense of childishness and naivety.

- [Undraw](http://undraw.co/) - Open-source illustrations for every project you can imagine and create.

- [Humaaans](https://www.humaaans.com) - Mix-&-match illustrations of people with a design library for InVIsion Studio and Sketch.

- [IRA Design](https://www.creative-tim.com/ira-design) - Build your own amazing illustrations.

- [DrawKit](https://www.drawkit.io) - MIT licensed SVG illustrations for you to use on your next project, in two different styles, for free!

- [Mixkit](https://mixkit.co/art) - Mixkit Art is a curated gallery of beautiful art and illustration, made by some of the world’s most talented creators, it’s all completely free to use commercially.



## Animations



- [Lotties Files](https://lottiefiles.com/) - LottieFiles is a library for Adobe After Effects animations that can be used with [AirBnB's Lottie Library](http://airbnb.io/lottie/#/). There is a selection of free animations and then a marketplace for animations on sale.



## Emojis



- [Emojipedia 😊](https://emojipedia.org/) - If you need some emojis to add to your UI. You can search them from here and copy paste them that easy 👍🏽.



## Svg Icons



- [Zondicons](https://www.zondicons.com) - A set of free premium SVG icons for you to use on your digital products.

- [Icomoon](https://icomoon.io) - WebApp that lets you create your own package of icons from different sources there are both paid and free sources.

- [Material icons](https://material.io/tools/icons) - Material icons are delightful, beautifully crafted symbols for common actions and items.

- [Flaticon](https://www.flaticon.com/home) - A repostitory of scalable vector icons and icon packs. The site gives you the ability to search for related icons to a selected icon/asset.

- [Basicons](https://basicons.xyz/) - Basic icons for product design & development. Designed with care & precision. Updated & refined weekly.

- [Heroicons](https://heroicons.dev) - Free, open source icons from the creators of Tailwind CSS.



## Typography



- [Fontpair](https://fontpair.co) - Font Pair helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.

- [Fontpairingsbypeople](https://fontpairings.bypeople.com/) - Check typefaces and font pairings with this interactive tool.

- [Type-scale](https://type-scale.com) - Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts.

- [Archetype](https://archetypeapp.com) - Archetype lets designers like you very quickly and easily create consistent typography styling and spacing live, in the browser.



## Fonts



- [Google Fonts](https://fonts.google.com/) - Making the web more beautiful, fast, and open through great typography.

- [Open Foundry](https://open-foundry.com/fonts) - A new platform for open-source fonts in a noise-free environment, to highlight their beauty, extend functionality and encourage further exploration.

- [Open-Source Types](https://www.are.na/frederic-brodbeck/open-source-typefaces) - Various sources for open license fonts, which means free for personal and commercial use.



## Font Icons



- [Font Awesome](https://fontawesome.com) -  Get vector icons and social logos on your website with Font Awesome.



## Stock Video



- [Mixkit](https://mixkit.co/videos) - HD videos for you to use, completely free of charge.

- [Pexel Videos](https://www.pexels.com/videos) - The best free stock videos shared by the Pexels community.



## Stock Photos



- [Pexels](https://www.pexels.com/) - Collections of High Definiton stock images an some videos shared by talented creators.

- [Pixabay](https://pixabay.com/) - Stunning free images & royalty free stock images and videos shared by our talented community.

- [Unsplash](https://unsplash.com) - Beautiful Free Images & Pictures; royalty free - oh, you just have to credit the creator.

- [Burst by Shopify](https://burst.shopify.com/) - Browse thousands of beautiful copyright-free images. All our pictures are free to download for personal and commercial use, no attribution required.



## Design Systems



- [Material Design](https://material.io/) -  A design language that Google developed in 2014.

- [Fluent Design System](https://www.microsoft.com/design/fluent/) -  A design system developed in 2017 by Microsoft as a revamp of Microsoft Design Language 2.

- [Design Systems Repo](https://designsystemsrepo.com/) - Design Systems Gallery; A comprehensive and curated list of design systems, style guides and pattern libraries that you can use for inspiration.



## Contribute



Contributions welcome! Read the [contribution guidelines](contributing.md) first.