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

Design Systems & Style Guides

Design systems, style guides, toolkits, docs. Some of these are design guides for top companies/websites

Website                           Description
Material DesignGoogle's Material Design
Ant DesignDesign system for enterprise-level products
Apple Design ResourcesGuides and templates for using Apple design and UI
PrimerDesign, build, and create with GitHub’s design system
Arco.designAn enterprise-level design system jointly launched by the Bytedance GIP UED team and the architecture front-end team.
Alta UIOracle's design system and toolkit
PulseDesign system, guides and React component library
BoltRobust Twig and web component powered UI components
Clarity Design SystemUX guidelines, HTML/CSS framework, and Angular components
AtlasKitAtlassian's official UI library, built according to the Atlassian Design Guidelines
Audi Design ResourcesAudi UI design system and toolkit
Carbon Design SystemsCarbon is IBM’s open-source design system for products and experiences
Yelp Style GuideYelp style guide, components and toolkit
CometScalable design system of visual language, components, and design assets
ETrade Design SystemGuides and toolkits that blend finance with simplicity and ease of use
Fundamental LibraryOpen source and community driven project for consistent user interfaces
Infor DesignGuidelines and resources to create meaningful experiences for Infor’s products
LexiconAn experience language for crafting beautiful UI
Mailchimp UI/UXStyle guide and components from Mailchimp
Marvel Style GuideSet of design principles and components
Microsoft Fluent UICollection of UX frameworks from Microsoft
Pluralsight Design SystemDesign guide with components for designing with Pluralsight
PolarisDesign system that creates great experiences for all of Shopify’s merchants
Mozilla ProtocolProtocol is a design system for Mozilla and Firefox websites
SendGrid Style GuideUI library for developing consistent UI/UX at SendGrid
VTEX StyleguideReusable patterns, components and assets related to product design in VTEX
RizzoStyle guide with UI components, JS components, widgets, etc
AtomizeUI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly
StyleGuides.ioA directory of 500+ styleguides
Done Design SystemOpen source design system, guides & components
Skoda Brand SystemDesign guideline for developing applications under the Skoda brand
SpectrumAdobe’s design system that provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive.
AsphaltGojek’s design language system. A collection of guidelines and components to create amazing user experiences.
Laws of UXA collection of the key maxims that designers must consider when building user interfaces.
Checklist DesignChecklist Design is a curated list of checklists ranging from website pages, to UI components, all the way to branding assets.
Humane By DesignA resource that provides guidance for designing ethically humane digital products through patterns focused on user well-being.
Pr1mer GuidelinesAn open source set of very general guidelines, inspired by Human Interface. Created and maintained by Pr1mer Tech
PatterflyPatternFly 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
FigmaOnline graphic design tool (Free & paid options)
VectrFree vector graphics software
TalerCreate social media banner designs in minutes from hundreds of customizable templates
CanvaCreate beautiful designs (Free & Paid)
Get WavesA free SVG wave generator to make unique SVG waves for web design
ClippyEasy CSS clip-path maker
Fancy Border RadiusEight values specifying border-radius in CSS ( border-radius generator )
Wireframe.ccWireframing tool (free & paid)
FotorPhoto editor and design maker
PixlrOnline photo editor
Animoto Video MakerMake videos online
RemoveBGRemove image backgrounds
Photo CreatorCreate your own photos instead of searching for stock
VismeCreate presentations, infographics and more
InfogramCreate infograms
ChartGoCreate charts and graphs online
Cartoon PhotoTurn photos into cartoons
WhimsicalWireframes, diagrams and more (4 free)
WhiteboardOnline drawing tool
OctopusSitemap builder
OnlineboardReal-time shareable whiteboard for brainstorming
CTA Button MakerCreate call to action buttons
BlobmakerBlobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes.
PersonasA playful avatar generator for the modern age
PhotopeaAn Online Photoshop editor
ExcalidrawVirtual whiteboard for sketching hand-drawn like diagrams
DiagramsDiagram software and Flowchart maker
Mermaidrenders Markdown-inspired text definitions to create and modify diagrams (like flowchart, sequence diagram, gantt, or user journey) dynamically. (FOSS)
MapInSecondsSimple way to visualize your data with a map
Grid MalvenA css grid cheatsheet to reference when creating a css grid
Flex MalvenA flexbox grid cheatsheet to reference when working with flexbox
Smart UpscalerUpscale images by 2-4x resolution
GetAvataaarsFun and Colorful free avatars web generator tool by Fang-Pen Lin using Pablo Stanley sketch library
Big HeadsEasily generate avatars for your projects with Big Heads by Robert Broersma.
WebflowBreak the code barrier, Build better business websites, faster. Without coding.
TraceInstantly remove the background from your photos
Neumorphism.ioGenerate Soft-UI CSS shadow code
DB DesignerDesign your database for free online
Ui BakeryCreate full-fledged web apps visually
FauxTurn real code into faux code
RiveReal-time interactive design tool that allows you to design, animate, and immediately integrate your assets into any platform.
UnscreenRemove Video Background 100% Automatically and Free
KodeshotConvert your source code into nice pictures for your articles, tweets, messages, posts...
WixCreate a Website You’re Proud Of
GTmetrixWebsite Speed and Performance Optimization
FramerIs prototyping tool for teams
Draw.ioFree online diagram editor tool
UXWing SVG EditorCreating and Edit SVG Online
CSS ArrowCreate and export CSS code for a custom box with an arrow extending out from the side. Great for tooltips, flyouts and the like.
LucidchartDiagramming and visualization tools that allows creating databases, flowcharts, boards, floor-maps, and much more. 3 multi-page documents on the free tier
CarbonCreate and share beautiful images of your source code by typing or drop a file.
PixCleanerAccurate and hassle free background removal tool
Glass UIA modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.
GlassmorphismAn incredible online tool for generating quick glassmorphic UI in CSS code snippets.
TableConvertTable 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 IpsumThe lorem ipsum of illustrations. Just customize your doodles, grab the code, and use them on your web prototypes, landing pages, or no-code tools.
FigenPost Cover & Background Generator Tool
WindframeA tool to rapidly prototype and build stunning websites using Tailwind CSS (Free & Premium)
SlickrA tool for designing cover image for your blog.
Shadow Palette GeneratorCreate a set of lush, realistic CSS shadows.
Ray.soOnline tool to create beautiful images of your code.
CodepngConvert your source code into awesome shareable images.
CSS Grid GeneratorA tool for creating CSS Grid Layouts
JSONTA 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
GimpFree & open source image editor similar to Photoshop
Gravit DesignerFree full-featured vector graphic design app that works on ALL platforms
BlenderOpen source, free animation, 3D modeling, etc.
Raw TherapeeCross-platform raw image processing program
Be FunkyOnline design program
KritaSketching and painting program designed for digital artists
Pencil ProjectGUI prototyping software
InkscapePowerful free design tool
Adobe XDFree design tool from Adobe
Shapes.soIcons that can be used as code in your projects
LunacySketch for Windows
InVision StudioFree screen designing tool from InVision
DarktableFree & Open source photography workflow application and raw developer
Inpixio photo EditorFree Photo Editor: For windows only
ColorpickerOpen Source colors software: Retrieve, manipulate and store your colors easily!
Google Web DesignerCreate 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
BehanceDesign projects featured by different creators
DribbbleDesign projects featured by different creators
LandingfolioLandingfolio features the best landing page inspiration, templates, resources and examples on the web.
CodewellPractice your HTML, CSS, and Javascript skills on real world design templates
FoxyappsDesign inspiration from the best mobile app designs
HttpsterShowcases websites made by people from all over the world
InspofindsLatest design work from designers and the design community
Design NotesFree online resource library for product designers
Land BookDisplays a large collection of websites to help find inspiration
Frontend MentorReal-world UI Challenges using HTML, CSS and Javascript
AwwwardsA website that rate and collects the best websites in the world in UI
CodropsA website that collects the best UI ideas and patterns and make tutorials of it
SaaS Landing PageDiscover the best landing page examples created by top-class SaaS companies
Saaspages.xyzA collection of the best landing pages with a focus on copywriting and design.
ScreenlaneScreenlane is a website and newsletter that features the latest web and mobile design inspiration.
lapa ninjaBest landing page inspiration
FreefrontendFree frontend design from css html and javascript. latest work some design part
WebframeDiscover and be inspired by beautiful webapp designs
Collect UIDaily inspiration collected from daily ui archive and beyond. Handpicked, and updating daily.
Graphic BurgerA 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 EmailsA site offering users a ton of company e-mails from customer service to marketing.
Free Design ResourceA site offering fonts, mockups, templates graphics and ui kits.
Site InspiresiteInspire is a showcase of the finest web and interactive design.
Web Design InspirationA site for web design inspiration, updated daily.
NavNavResponsive navigation examples
CalltoideaCollection of different web Components for inspiration.
MediaQueri.esA collection of inspirational websites using media queries and responsive web design
Mulzli SearchSearch engine for design inspiration
DeviantArtAccess to 370 million pieces of art for inspiration.
Design your wayCollection of different Web and Mobile Designs
Humans.fyiA collection of brilliant personal websites filterable by colors and web technologies used in each website.
SiteSeeA curated gallery of beautiful and modern websites.
UI GarageDaily handpicked UI inspiration & patterns.
ecomm.designeCommerce Website Design Gallery & Tech Inspiration.
Design NomineesA showcase of awarding and showcasing the best websites, apps and Games.
Design VaultA library of screenshots and patterns from real world digital products
CSS buttons84 Beautiful CSS buttons examples.
CSS box-shadow91 Beautiful CSS box-shadow examples.
Super DesignerDesign tools that give you super powers.

Image Compression

Websites that allow you to compress large images

Website                           Description
TinyPNGSmart PNG and JPEG compression
OptimizillaOnline JPEG and PNG optimizer / compressor with settings and archive download
Compressor.ioJPEG, PNG, GIF, SVG Compression
Squoosh.appImage compression from Google Chrome Labs
BulkResizePhotosBulk image resizing, compression & converting that perform all the tasks within the browser (It works offline)
iLoveIMGThe fastest free web app for easy image modification
SvgOMGOnline SVG optimizer with a lot of settings and possibility to cut and paste svg code directly in it.
CompressJPEGCompress JPEG images with size even greater than 5MB
CompressNowJPEG, GIF, PNG Compression
Promo Image ResizerFree Image and Photo Resizer
Image OptimizerImage Optimizer Free With Quality Options
SVGminifyThis tool removes superfluous information, thereby reducing the size of your SVG files
JPEG OptimizerFree online tool for resizing and compressing digital photos and images for displaying on the web
Resizing.appResize Your Images Online
EZGifAnimated GIF maker and Image editor including Image optimization and supports WebP conversion
OnlinePngtoolsResize png for without losing transparent background.
VerexifRemove meta tags in image in order to reduce image size and increase privacy security
Vecta NanoUses lossless compression to compress inefficient SVG codes by removing unnecessary data. (Free & Paid)
WatermarklyPrivate, client-side compression of JPEG images. The app does not send images to a server for processing.
Jpeg.ioConvert any major image format into a highly optimized JPEG

Chrome Extensions

Useful Chrome extensions for Designers and Web-Developers.

Website                           Description
WhatFontThe easiest way to identify fonts on web pages.
WhatRunsDiscover what runs a website. Frameworks, Analytics Tools, Wordpress Plugins, Fonts - you name it.
Web DeveloperAdds a toolbar button with various web developer tools.
Awesome Screenshot & Screen RecorderFull page screen capture and screen recorder - 2 in 1. Share screencast video instantly - News for Busy DevelopersGet programming news with zero effort. Simply open a new tab, and you’re all set. A must-have tool for busy developers!
JSONViewValidate and view JSON documents.
JSON LiteBrowser extension for viewing JSON files.
Window ResizerResize the browser window to emulate various screen resolutions.
Responsive ViewerShow multiple screens once, Responsive design tester
BrowserStackInstantly test your webpage on any desktop or mobile browser.
VisBugOpen source web design debug tool built with JavaScript
Kontrast - WCAG Contrast CheckerQuickly check and adjust contrast in real-time in your browser to meet WCAG 2.1 requirements
PerfectPixelAdds 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.
PesticideInserts the Pesticide CSS into the current page, outlining each HTML element to better see placement on the page, helpful for building layouts.
Site PaletteA must-have tool for designers and frontend developers to grab colors for any website.
ColorZillaAdvanced 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 BeautifierBeautify CSS, JavaScript and JSON code when you open a .css/.js/.json file
Imageye - Image downloaderFind 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 CaptureCapture a screenshot of your current page in entirety and reliably—without requesting any extra permissions!
StylebotChange the appearance of the web instantly.
ColorPick EyedropperA zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more.
React Developer ToolReact debugging tools to the Chrome Developer Tools. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.
WappalyzerWappalyzer is a technology profiler that shows you what websites are built with.
Fake FillerFake Filler a form filler that fills all inputs on a page with fake/dummy data.
Page Ruler ReduxA Web Developer\Designer ruler to get perfect pixel dimensions and positioning to measure elements on any web page.
Web EditorThe 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.
CSSViewerA simple CSS property viewer.
Fonts NinjaIdentify fonts from any website, bookmark, try, and buy them.
LighthouseAn open-source, automated tool for improving the performance, quality, and correctness of your web apps.
Debug CSSAdds 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 ToolAngular DevTools allows you to understand the structure of your application and preview the state of the directive and the component instances.


Uncategorized Stuff

Website                           Description
VertopalFree online platform for converting computer files to a variety of file formats
everysize.kibalabs.comCheck your awesome responsive webpage looks great in every size
Devhints.ioThis is a modest collection of cheatsheets on Internet
The Web ToolboxA collection of handy, free-to-use tools for web developers, programmers and designers.
WebDevTrickA famous blog for many amazing HTML, CSS, JQuery designs.
css-tricksFree CSS tricks and some unique ideas for beginners and advanced
Material Design ResourcesUse Material tools, downloads, and interactive projects to simplify your workflow.
Nodesign.devA collection of tools for developers who have little to no artistic talent
A11ygatorA web tool to scan websites against WCAG rules
CommitizenCommand line tool to formatted commit messages according to the standards
CleanCssTool For Code Formatter, Minifier, File Converter
Tiny helpersA collection of free single-purpose online tools for web developers
CSS Ribbon GeneratorThis generator will assist in creating a pure CSS corner ribbon.
Can I UseCheck cross-browser compatibility of frontend technologies.
kangax-js-compat-tableCheck JavaScript versions (ES5, ES6, ES2016+ etc.) compatibility across different compilers, servers/runtimes and platforms (Desktop and Mobile).
mydevice.ioMost commonly used device resolutions including phones and tablets
CodepenBuild, test and discover frontend code.
ResponsivelyA tool for designers and frontend developers to design and debug their in all platforms with ease
html2pdf.jsClient-side HTML-to-PDF rendering using pure JS.
CSS ReferenceA collection of all css properties and definitions in detail
Critical Path CSS GeneratorGenerate critical css for your web pages
SVG GobblerBrowser extension to find SVGs on a webpage and download, copy to clipboard, or export as PNG.
shortcode.devA collection of useful snippets and code examples for HTML, CSS, JavaScript, Node, Artisan, Blade and more.
PlayCodeJavascript playground.
All The TagsAll HTML tags briefly explained.
Vue TelemetryReveal the Vue plugins and technology stack powering any website or explore a database of 5500+ websites.
Grid.jsGrid.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.
GerillassGerillass 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.
SketchizeSketchize is built for UI/UX Designers to help them design lovely apps for mobile, tablet, and desktop devices.
{CSS}PortalCSSPortal is home to a large range of CSS generators, tools and resources.
DevDocsDevDocs combines multiple API documentations in a fast, organized, and searchable interface.
papersizesThe best resource for International Paper Sizes, Dimensions & Formats.
flexboxfroggyHelp Froggy and friends by writing CSS code!
Designbetter BooksEssential reading on the practices that propel the best design teams forward.
OverAPICollection Of All Cheat Sheets.
PageclipA server for your Static HTML forms
ShieldsCreate badges with your own customization.
williamsharkeyRandom SVG Graphic Generator
Bootstrap CheatSheetAn interactive list of Bootstrap classes, variables, and mixins. The only Bootstrap CheatSheet you will ever need.
QR Code GeneratorUse QR Code Generator to easily create a QR code for your project.
PapersDBThe Biggest Paper Database with Sizes, Dimensions and Formats in Metric and Imperial units.
SmallDev.toolsFree tool for developers to help with Beautify & Minify HTML/CSS/Javascript, and many other handy tools. With a delightful interface.
Angry ToolsFree web tools for speed up your development.
Rapid APIDiscover and connect to thousands of APIs.
Readme.soThe easisest way to create a README.
ShowcodeBeautiful code screenshot generator.
tldrawA tiny little drawing app.
devices.cssPure CSS phones and tablets by Marvel App.
TrooplBuild and publish a free portfolio in minutes.