As a designer, people also wondered what new tools and utilities were used by other designers? Well, we have compiled a list of all the designers’ resources and utilities recognized worldwide. These free design resources are recommended by the expert designers to assist you in this mission. Check out the list and you can finally pick the ones that suit your requirements correctly.
This is a GitHub repo bradtraversy/design-resources-for-developers: Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more started by Brad Traversy, a popular online instructor and full-stack web developer.
To identify different types of design resources, this article will be divided into 31 categories as below:
2022-Top-1000-Best-Free-Design-Resources-For-Startups-And-Side-Project-Part1 2022-Top-1000-Best-Free-Design-Resources-For-Startups-And-Side-Project-Part2 2022-Top-1000-Best-Free-Design-Resources-For-Startups-And-Side-Project-Part3
- UI Graphics
- Fonts
- Colors
- Icons
- Logos
- Favicons
- Icon Fonts
- Stock Photos
- Stock Videos
- Stock Music & Sound Effects
- Vectors & Clip Art
- Product & Image Mockups
- HTML & CSS Templates
- CSS Frameworks
- CSS Methodologies
- CSS Animations
- Javascript Animation Libraries
- Javascript Chart Libraries
- UI Components & Kits
- React UI Libraries
- Vue UI Libraries
- Angular UI Libraries
- Svelte UI Libraries
- React Native UI Libraries
- Design Systems & Style Guides
- Online Design Tools
- Downloadable Design Software
- Design Inspiration
- Image Compression
- Chrome Extensions
- Others
Design Systems & Style Guides
Design systems, style guides, toolkits, docs. Some of these are design guides for top companies/websites
| Website | Description |
|---|---|
| Material Design | Google's Material Design |
| Ant Design | Design system for enterprise-level products |
| Apple Design Resources | Guides and templates for using Apple design and UI |
| Primer | Design, build, and create with GitHub’s design system |
| Arco.design | An enterprise-level design system jointly launched by the Bytedance GIP UED team and the architecture front-end team. |
| Alta UI | Oracle's design system and toolkit |
| Pulse | Design system, guides and React component library |
| Bolt | Robust Twig and web component powered UI components |
| Clarity Design System | UX guidelines, HTML/CSS framework, and Angular components |
| AtlasKit | Atlassian's official UI library, built according to the Atlassian Design Guidelines |
| Audi Design Resources | Audi UI design system and toolkit |
| Carbon Design Systems | Carbon is IBM’s open-source design system for products and experiences |
| Yelp Style Guide | Yelp style guide, components and toolkit |
| Comet | Scalable design system of visual language, components, and design assets |
| ETrade Design System | Guides and toolkits that blend finance with simplicity and ease of use |
| Fundamental Library | Open source and community driven project for consistent user interfaces |
| Infor Design | Guidelines and resources to create meaningful experiences for Infor’s products |
| Lexicon | An experience language for crafting beautiful UI |
| Mailchimp UI/UX | Style guide and components from Mailchimp |
| Marvel Style Guide | Set of design principles and components |
| Microsoft Fluent UI | Collection of UX frameworks from Microsoft |
| Pluralsight Design System | Design guide with components for designing with Pluralsight |
| Polaris | Design system that creates great experiences for all of Shopify’s merchants |
| Mozilla Protocol | Protocol is a design system for Mozilla and Firefox websites |
| SendGrid Style Guide | UI library for developing consistent UI/UX at SendGrid |
| VTEX Styleguide | Reusable patterns, components and assets related to product design in VTEX |
| Rizzo | Style guide with UI components, JS components, widgets, etc |
| Atomize | UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly |
| StyleGuides.io | A directory of 500+ styleguides |
| Done Design System | Open source design system, guides & components |
| Skoda Brand System | Design guideline for developing applications under the Skoda brand |
| Spectrum | Adobe’s design system that provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive. |
| Asphalt | Gojek’s design language system. A collection of guidelines and components to create amazing user experiences. |
| Laws of UX | A collection of the key maxims that designers must consider when building user interfaces. |
| Checklist Design | Checklist Design is a curated list of checklists ranging from website pages, to UI components, all the way to branding assets. |
| Humane By Design | A resource that provides guidance for designing ethically humane digital products through patterns focused on user well-being. |
| Pr1mer Guidelines | An open source set of very general guidelines, inspired by Human Interface. Created and maintained by Pr1mer Tech |
| Patterfly | PatternFly is an open source design system from Red Hat, Inc. |
Online Design Tools
All kinds of online tools for design, from photo editors to wireframing, and more
| Website | Description |
|---|---|
| Figma | Online graphic design tool (Free & paid options) |
| Vectr | Free vector graphics software |
| Taler | Create social media banner designs in minutes from hundreds of customizable templates |
| Canva | Create beautiful designs (Free & Paid) |
| Get Waves | A free SVG wave generator to make unique SVG waves for web design |
| Clippy | Easy CSS clip-path maker |
| Fancy Border Radius | Eight values specifying border-radius in CSS ( border-radius generator ) |
| Wireframe.cc | Wireframing tool (free & paid) |
| Fotor | Photo editor and design maker |
| Pixlr | Online photo editor |
| Animoto Video Maker | Make videos online |
| RemoveBG | Remove image backgrounds |
| Photo Creator | Create your own photos instead of searching for stock |
| Visme | Create presentations, infographics and more |
| Infogram | Create infograms |
| ChartGo | Create charts and graphs online |
| Cartoon Photo | Turn photos into cartoons |
| Whimsical | Wireframes, diagrams and more (4 free) |
| Whiteboard | Online drawing tool |
| Octopus | Sitemap builder |
| Onlineboard | Real-time shareable whiteboard for brainstorming |
| CTA Button Maker | Create call to action buttons |
| Blobmaker | Blobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes. |
| Personas | A playful avatar generator for the modern age |
| Photopea | An Online Photoshop editor |
| Excalidraw | Virtual whiteboard for sketching hand-drawn like diagrams |
| Diagrams | Diagram software and Flowchart maker |
| Mermaid | renders Markdown-inspired text definitions to create and modify diagrams (like flowchart, sequence diagram, gantt, or user journey) dynamically. (FOSS) |
| MapInSeconds | Simple way to visualize your data with a map |
| Grid Malven | A css grid cheatsheet to reference when creating a css grid |
| Flex Malven | A flexbox grid cheatsheet to reference when working with flexbox |
| Smart Upscaler | Upscale images by 2-4x resolution |
| GetAvataaars | Fun and Colorful free avatars web generator tool by Fang-Pen Lin using Pablo Stanley sketch library |
| Big Heads | Easily generate avatars for your projects with Big Heads by Robert Broersma. |
| Webflow | Break the code barrier, Build better business websites, faster. Without coding. |
| Trace | Instantly remove the background from your photos |
| Neumorphism.io | Generate Soft-UI CSS shadow code |
| DB Designer | Design your database for free online |
| Ui Bakery | Create full-fledged web apps visually |
| Faux | Turn real code into faux code |
| Rive | Real-time interactive design tool that allows you to design, animate, and immediately integrate your assets into any platform. |
| Unscreen | Remove Video Background 100% Automatically and Free |
| Kodeshot | Convert your source code into nice pictures for your articles, tweets, messages, posts... |
| Wix | Create a Website You’re Proud Of |
| GTmetrix | Website Speed and Performance Optimization |
| Framer | Is prototyping tool for teams |
| Draw.io | Free online diagram editor tool |
| UXWing SVG Editor | Creating and Edit SVG Online |
| CSS Arrow | Create and export CSS code for a custom box with an arrow extending out from the side. Great for tooltips, flyouts and the like. |
| Lucidchart | Diagramming and visualization tools that allows creating databases, flowcharts, boards, floor-maps, and much more. 3 multi-page documents on the free tier |
| Carbon | Create and share beautiful images of your source code by typing or drop a file. |
| PixCleaner | Accurate and hassle free background removal tool |
| Glass UI | A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications. |
| Glassmorphism | An incredible online tool for generating quick glassmorphic UI in CSS code snippets. |
| TableConvert | Table Convert Online is a web-based tool to converts Excel, URL, HTML, Markdown table and CSV to Markdown table, CSV/TSV, JSON, XML, YAML, insert SQL, HTML, Excel and LaTeX table. |
| Doodle Ipsum | The lorem ipsum of illustrations. Just customize your doodles, grab the code, and use them on your web prototypes, landing pages, or no-code tools. |
| Figen | Post Cover & Background Generator Tool |
| Windframe | A tool to rapidly prototype and build stunning websites using Tailwind CSS (Free & Premium) |
| Slickr | A tool for designing cover image for your blog. |
| Shadow Palette Generator | Create a set of lush, realistic CSS shadows. |
| Ray.so | Online tool to create beautiful images of your code. |
| Codepng | Convert your source code into awesome shareable images. |
| CSS Grid Generator | A tool for creating CSS Grid Layouts |
| JSONT | A simple and powerful online JSON formatting tool |
Downloadable Design Software
Free software for UI, photo, 3d modeling, etc. Alternatives to paid software like Photoshop
| Website | Description |
|---|---|
| Gimp | Free & open source image editor similar to Photoshop |
| Gravit Designer | Free full-featured vector graphic design app that works on ALL platforms |
| Blender | Open source, free animation, 3D modeling, etc. |
| Raw Therapee | Cross-platform raw image processing program |
| Be Funky | Online design program |
| Krita | Sketching and painting program designed for digital artists |
| Pencil Project | GUI prototyping software |
| Inkscape | Powerful free design tool |
| Adobe XD | Free design tool from Adobe |
| Shapes.so | Icons that can be used as code in your projects |
| Lunacy | Sketch for Windows |
| InVision Studio | Free screen designing tool from InVision |
| Darktable | Free & Open source photography workflow application and raw developer |
| Inpixio photo Editor | Free Photo Editor: For windows only |
| Colorpicker | Open Source colors software: Retrieve, manipulate and store your colors easily! |
| Google Web Designer | Create engaging, interactive HTML5-based designs and motion graphics that can run on any device. |
Design Inspiration
Here are some websites to get inspiration for design and UI
| Website | Description |
|---|---|
| Behance | Design projects featured by different creators |
| Dribbble | Design projects featured by different creators |
| Landingfolio | Landingfolio features the best landing page inspiration, templates, resources and examples on the web. |
| Codewell | Practice your HTML, CSS, and Javascript skills on real world design templates |
| Foxyapps | Design inspiration from the best mobile app designs |
| Httpster | Showcases websites made by people from all over the world |
| Inspofinds | Latest design work from designers and the design community |
| Design Notes | Free online resource library for product designers |
| Land Book | Displays a large collection of websites to help find inspiration |
| Frontend Mentor | Real-world UI Challenges using HTML, CSS and Javascript |
| Awwwards | A website that rate and collects the best websites in the world in UI |
| Codrops | A website that collects the best UI ideas and patterns and make tutorials of it |
| SaaS Landing Page | Discover the best landing page examples created by top-class SaaS companies |
| Saaspages.xyz | A collection of the best landing pages with a focus on copywriting and design. |
| Screenlane | Screenlane is a website and newsletter that features the latest web and mobile design inspiration. |
| lapa ninja | Best landing page inspiration |
| Freefrontend | Free frontend design from css html and javascript. latest work some design part |
| Webframe | Discover and be inspired by beautiful webapp designs |
| Collect UI | Daily inspiration collected from daily ui archive and beyond. Handpicked, and updating daily. |
| Graphic Burger | A site offering a free and pain icons, mock-ups, Ui-Kits, text effect and backgrounds. This site's resource are a mix of free and paid resources. Icons is on a mix of PNG, SVG, EPS and Sketch Format. Some resources are confusing as there are sponsored content in the middle of the free sets. |
| Really Good Emails | A site offering users a ton of company e-mails from customer service to marketing. |
| Free Design Resource | A site offering fonts, mockups, templates graphics and ui kits. |
| Site Inspire | siteInspire is a showcase of the finest web and interactive design. |
| Web Design Inspiration | A site for web design inspiration, updated daily. |
| NavNav | Responsive navigation examples |
| Calltoidea | Collection of different web Components for inspiration. |
| MediaQueri.es | A collection of inspirational websites using media queries and responsive web design |
| Mulzli Search | Search engine for design inspiration |
| DeviantArt | Access to 370 million pieces of art for inspiration. |
| Design your way | Collection of different Web and Mobile Designs |
| Humans.fyi | A collection of brilliant personal websites filterable by colors and web technologies used in each website. |
| SiteSee | A curated gallery of beautiful and modern websites. |
| UI Garage | Daily handpicked UI inspiration & patterns. |
| ecomm.design | eCommerce Website Design Gallery & Tech Inspiration. |
| Design Nominees | A showcase of awarding and showcasing the best websites, apps and Games. |
| Design Vault | A library of screenshots and patterns from real world digital products |
| CSS buttons | 84 Beautiful CSS buttons examples. |
| CSS box-shadow | 91 Beautiful CSS box-shadow examples. |
| Super Designer | Design tools that give you super powers. |
Image Compression
Websites that allow you to compress large images
| Website | Description |
|---|---|
| TinyPNG | Smart PNG and JPEG compression |
| Optimizilla | Online JPEG and PNG optimizer / compressor with settings and archive download |
| Compressor.io | JPEG, PNG, GIF, SVG Compression |
| Squoosh.app | Image compression from Google Chrome Labs |
| BulkResizePhotos | Bulk image resizing, compression & converting that perform all the tasks within the browser (It works offline) |
| iLoveIMG | The fastest free web app for easy image modification |
| SvgOMG | Online SVG optimizer with a lot of settings and possibility to cut and paste svg code directly in it. |
| CompressJPEG | Compress JPEG images with size even greater than 5MB |
| CompressNow | JPEG, GIF, PNG Compression |
| Promo Image Resizer | Free Image and Photo Resizer |
| Image Optimizer | Image Optimizer Free With Quality Options |
| SVGminify | This tool removes superfluous information, thereby reducing the size of your SVG files |
| JPEG Optimizer | Free online tool for resizing and compressing digital photos and images for displaying on the web |
| Resizing.app | Resize Your Images Online |
| EZGif | Animated GIF maker and Image editor including Image optimization and supports WebP conversion |
| OnlinePngtools | Resize png for without losing transparent background. |
| Verexif | Remove meta tags in image in order to reduce image size and increase privacy security |
| Vecta Nano | Uses lossless compression to compress inefficient SVG codes by removing unnecessary data. (Free & Paid) |
| Watermarkly | Private, client-side compression of JPEG images. The app does not send images to a server for processing. |
| Jpeg.io | Convert any major image format into a highly optimized JPEG |
Chrome Extensions
Useful Chrome extensions for Designers and Web-Developers.
| Website | Description |
|---|---|
| WhatFont | The easiest way to identify fonts on web pages. |
| WhatRuns | Discover what runs a website. Frameworks, Analytics Tools, Wordpress Plugins, Fonts - you name it. |
| Web Developer | Adds a toolbar button with various web developer tools. |
| Awesome Screenshot & Screen Recorder | Full page screen capture and screen recorder - 2 in 1. Share screencast video instantly |
| daily.dev - News for Busy Developers | Get programming news with zero effort. Simply open a new tab, and you’re all set. A must-have tool for busy developers! |
| JSONView | Validate and view JSON documents. |
| JSON Lite | Browser extension for viewing JSON files. |
| Window Resizer | Resize the browser window to emulate various screen resolutions. |
| Responsive Viewer | Show multiple screens once, Responsive design tester |
| BrowserStack | Instantly test your webpage on any desktop or mobile browser. |
| VisBug | Open source web design debug tool built with JavaScript |
| Kontrast - WCAG Contrast Checker | Quickly check and adjust contrast in real-time in your browser to meet WCAG 2.1 requirements |
| PerfectPixel | Adds a semi-transparent image overlay over the top of the developed HTML to easily perform pixel perfect comparison between them, useful for replicating UI designs. |
| Pesticide | Inserts the Pesticide CSS into the current page, outlining each HTML element to better see placement on the page, helpful for building layouts. |
| Site Palette | A must-have tool for designers and frontend developers to grab colors for any website. |
| ColorZilla | Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies |
| Lorem Ipsum Generator (Default Text) | Provides an elegant and quick way to create default text or generate Lorem Ipsum. Optimized for quick usage, but it can be customized. |
| JavaScript and CSS Code Beautifier | Beautify CSS, JavaScript and JSON code when you open a .css/.js/.json file |
| Imageye - Image downloader | Find and download all images on a web page. With Imageye you can find, browse and download all the images present in a web page. |
| GoFullPage - Full Page Screen Capture | Capture a screenshot of your current page in entirety and reliably—without requesting any extra permissions! |
| Stylebot | Change the appearance of the web instantly. |
| ColorPick Eyedropper | A zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more. |
| React Developer Tool | React debugging tools to the Chrome Developer Tools. It allows you to inspect the React component hierarchies in the Chrome Developer Tools. |
| Wappalyzer | Wappalyzer is a technology profiler that shows you what websites are built with. |
| Fake Filler | Fake Filler a form filler that fills all inputs on a page with fake/dummy data. |
| Page Ruler Redux | A Web Developer\Designer ruler to get perfect pixel dimensions and positioning to measure elements on any web page. |
| Web Editor | The web editor is the tool that provides you with an enhanced way to inspect any website elements, alter their properties, insert contents, design, and visualize the way you want to see them. |
| CSSViewer | A simple CSS property viewer. |
| Fonts Ninja | Identify fonts from any website, bookmark, try, and buy them. |
| Lighthouse | An open-source, automated tool for improving the performance, quality, and correctness of your web apps. |
| Debug CSS | Adds outline to all elements on the page to show the culprit element which is changing desired layout. Helps in debugging CSS of the page |
| Angular Developer Tool | Angular DevTools allows you to understand the structure of your application and preview the state of the directive and the component instances. |
Others
Uncategorized Stuff
| Website | Description |
|---|---|
| Vertopal | Free online platform for converting computer files to a variety of file formats |
| everysize.kibalabs.com | Check your awesome responsive webpage looks great in every size |
| Devhints.io | This is a modest collection of cheatsheets on Internet |
| The Web Toolbox | A collection of handy, free-to-use tools for web developers, programmers and designers. |
| WebDevTrick | A famous blog for many amazing HTML, CSS, JQuery designs. |
| css-tricks | Free CSS tricks and some unique ideas for beginners and advanced |
| Material Design Resources | Use Material tools, downloads, and interactive projects to simplify your workflow. |
| Nodesign.dev | A collection of tools for developers who have little to no artistic talent |
| A11ygator | A web tool to scan websites against WCAG rules |
| Commitizen | Command line tool to formatted commit messages according to the standards |
| CleanCss | Tool For Code Formatter, Minifier, File Converter |
| Tiny helpers | A collection of free single-purpose online tools for web developers |
| CSS Ribbon Generator | This generator will assist in creating a pure CSS corner ribbon. |
| Can I Use | Check cross-browser compatibility of frontend technologies. |
| kangax-js-compat-table | Check JavaScript versions (ES5, ES6, ES2016+ etc.) compatibility across different compilers, servers/runtimes and platforms (Desktop and Mobile). |
| mydevice.io | Most commonly used device resolutions including phones and tablets |
| Codepen | Build, test and discover frontend code. |
| Responsively | A tool for designers and frontend developers to design and debug their in all platforms with ease |
| html2pdf.js | Client-side HTML-to-PDF rendering using pure JS. |
| CSS Reference | A collection of all css properties and definitions in detail |
| Critical Path CSS Generator | Generate critical css for your web pages |
| SVG Gobbler | Browser extension to find SVGs on a webpage and download, copy to clipboard, or export as PNG. |
| shortcode.dev | A collection of useful snippets and code examples for HTML, CSS, JavaScript, Node, Artisan, Blade and more. |
| PlayCode | Javascript playground. |
| All The Tags | All HTML tags briefly explained. |
| Vue Telemetry | Reveal the Vue plugins and technology stack powering any website or explore a database of 5500+ websites. |
| Grid.js | Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks, including React, Angular, Vue and VanillaJs. |
| Gerillass | Gerillass is a website development tool built on top of Sass with a set of Sass mixins and functions for frontend developers to generate scalable CSS outputs. |
| Sketchize | Sketchize is built for UI/UX Designers to help them design lovely apps for mobile, tablet, and desktop devices. |
| {CSS}Portal | CSSPortal is home to a large range of CSS generators, tools and resources. |
| DevDocs | DevDocs combines multiple API documentations in a fast, organized, and searchable interface. |
| papersizes | The best resource for International Paper Sizes, Dimensions & Formats. |
| flexboxfroggy | Help Froggy and friends by writing CSS code! |
| Designbetter Books | Essential reading on the practices that propel the best design teams forward. |
| OverAPI | Collection Of All Cheat Sheets. |
| Pageclip | A server for your Static HTML forms |
| Shields | Create badges with your own customization. |
| williamsharkey | Random SVG Graphic Generator |
| Bootstrap CheatSheet | An interactive list of Bootstrap classes, variables, and mixins. The only Bootstrap CheatSheet you will ever need. |
| QR Code Generator | Use QR Code Generator to easily create a QR code for your project. |
| PapersDB | The Biggest Paper Database with Sizes, Dimensions and Formats in Metric and Imperial units. |
| SmallDev.tools | Free tool for developers to help with Beautify & Minify HTML/CSS/Javascript, and many other handy tools. With a delightful interface. |
| Angry Tools | Free web tools for speed up your development. |
| Rapid API | Discover and connect to thousands of APIs. |
| Readme.so | The easisest way to create a README. |
| Showcode | Beautiful code screenshot generator. |
| tldraw | A tiny little drawing app. |
| devices.css | Pure CSS phones and tablets by Marvel App. |
| Troopl | Build and publish a free portfolio in minutes. |
