Design Resources
Design Systems & Style Guides
Design systems, style guides, toolkits, docs. Some of these are design guides for top companies/websites
Google's Material Design
Design system for enterprise-level products
Guides and templates for using Apple design and UI
Design, build, and create with GitHub’s design system
Oracle's design system and toolkit
Design system, guides and React component library
Robust Twig and web component powered UI components
UX guidelines, HTML/CSS framework, and Angular components
Atlassian's official UI library, built according to the Atlassian Design Guidelines
Audi UI design system and toolkit
Carbon is IBM’s open-source design system for products and experiences
Yelp style guide, components and toolkit
Scalable design system of visual language, components, and design assets
Guides and toolkits that blend finance with simplicity and ease of use
Open source and community driven project for consistent user interfaces
Guidelines and resources to create meaningful experiences for Infor’s products
An experience language for crafting beautiful UI
Style guide and components from Mailchimp
Set of design principles and components
Collection of UX frameworks from Microsoft
Design guide with components for designing with Pluralsight
Design system that creates great experiences for all of Shopify’s merchants
Protocol is a design system for Mozilla and Firefox websites
UI library for developing consistent UI/UX at SendGrid
Reusable patterns, components and assets related to product design in VTEX
Style guide with UI components, JS components, widgets, etc
UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly
A directory of 500+ styleguides
Open source design system, guides & components
Design guideline for developing applications under the Skoda brand
Adobe’s design system that provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive.
Gojek’s design language system. A collection of guidelines and components to create amazing user experiences.
A collection of the key maxims that designers must consider when building user interfaces.
Checklist Design is a curated list of checklists ranging from website pages, to UI components, all the way to branding assets.
A resource that provides guidance for designing ethically humane digital products through patterns focused on user well-being.
An open source set of very general guidelines, inspired by Human Interface. Created and maintained by Pr1mer Tech
Online Design Tools
All kinds of online tools for design, from photo editors to wireframing, and more
Online graphic design tool (Free & paid options)
Free vector graphics software
Create social media banner designs in minutes from hundreds of customizable templates
Create beautiful designs (Free & Paid)
A free SVG wave generator to make unique SVG waves for web design
Easy CSS clip-path maker
Eight values specifying border-radius in CSS ( border-radius generator )
Wireframing tool (free & paid)
Photo editor and design maker
Online photo editor
Make videos online in the simplest way possible. Cheap and all-in-one editor.
Remove image backgrounds
Create your own photos instead of searching for stock
Create presentations, infographics and more
Create infograms
Create charts and graphs online
Turn photos into cartoons
Wireframes, diagrams and more (4 free)
Online drawing tool
Sitemap builder
Create call to action buttons
Blobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes.
A playful avatar generator for the modern age
A Soft UI (neumorphism) CSS generator
An Online Photoshop editor
Virtual whiteboard for sketching hand-drawn like diagrams
Diagram software and Flowchart maker
Simple way to visualize your data with a map
A css grid cheatsheet to reference when creating a css grid
A flexbox grid cheatsheet to reference when working with flexbox
Upscale images by 2-4x resolution
Fun and Colorful free avatars web generator tool by Fang-Pen Lin using Pablo Stanley sketch library
Easily generate avatars for your projects with Big Heads by Robert Broersma.
Break the code barrier, Build better business websites, faster. Without coding.
Instantly remove the background from your photos
Generate Soft-UI CSS shadow code
Design your database for free online
Create full-fledged web apps visually
Turn real code into faux code
Real-time interactive design tool that allows you to design, animate, and immediately integrate your assets into any platform.
Remove Video Background 100% Automatically and Free
Convert your source code into nice pictures for your articles, tweets, messages, posts...
Create a Website You’re Proud Of
Website Speed and Performance Optimization
Is prototyping tool for teams
Free online diagram editor tool
Creating and Edit SVG Online
Create and export CSS code for a custom box with an arrow extending out from the side. Great for tooltips, flyouts and the like.
Diagramming and visualization tools that allows creating databases, flowcharts, boards, floor-maps, and much more. 3 multi-page documents on the free tier
Create and share beautiful images of your source code by typing or drop a file.
Accurate and hassle free background removal tool
A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.
An incredible online tool for generating quick glassmorphic UI in CSS code snippets.
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.
Downloadable Design Software
Free software for UI, photo, 3d modeling, etc. Alternatives to paid software like Photoshop
Free & open source image editor similar to Photoshop
Free full-featured vector graphic design app that works on ALL platforms
Open source, free animation, 3D modeling, etc.
Cross-platform raw image processing program
Online design program
Sketching and painting program designed for digital artists
GUI prototyping software
Powerful free design tool
Free design tool from Adobe
Icons that can be used as code in your projects
Sketch for Windows
Free screen designing tool from InVision
Free & Open source photography workflow application and raw developer
Free Photo Editor: For windows only
Open Source colors software: Retrieve, manipulate and store your colors easily!
Design Inspiration
Here are some websites to get inspiration for design and UI
Design projects featured by different creators
Design projects featured by different creators
Landingfolio features the best landing page inspiration, templates, resources and examples on the web.
Practice your HTML, CSS, and Javascript skills on real world design templates
Design inspiration from the best mobile app designs
Showcases websites made by people from all over the world
Latest design work from designers and the design community
Free online resource library for product designers
Displays a large collection of websites to help find inspiration
Real-world UI Challenges using HTML, CSS and Javascript
A website that rate and collects the best websites in the world in UI
A website that collects the best UI ideas and patterns and make tutorials of it
Discover the best landing page examples created by top-class SaaS companies
A collection of the best landing pages with a focus on copywriting and design.
Screenlane is a website and newsletter that features the latest web and mobile design inspiration.
Best landing page inspiration
Free frontend design from css html and javascript. latest work some design part
Discover and be inspired by beautiful webapp designs
Daily inspiration collected from daily ui archive and beyond. Handpicked, and updating daily.
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.
A site offering users a ton of company e-mails from customer service to marketing.
A site offering fonts, mockups, templates graphics and ui kits.
siteInspire is a showcase of the finest web and interactive design.
A site for web design inspiration, updated daily.
Responsive navigation examples
Collection of different web Components for inspiration.
A collection of inspirational websites using media queries and responsive web design
Search engine for design inspiration
Access to 370 million pieces of art for inspiration.
Collection of different Web and Mobile Designs
A collection of brilliant personal websites filterable by colors and web technologies used in each website.
A curated gallery of beautiful and modern websites.
Daily handpicked UI inspiration & patterns.
eCommerce Website Design Gallery & Tech Inspiration.
A showcase of awarding and showcasing the best websites, apps and Games.
A library of screenshots and patterns from real world digital products
84 Beautiful CSS buttons examples.
91 Beautiful CSS box-shadow examples.
Image Compression
Websites that allow you to compress large images
Smart PNG and JPEG compression
Online JPEG and PNG optimizer / compressor with settings and archive download
JPEG, PNG, GIF, SVG Compression
Image compression from Google Chrome Labs
Bulk image resizing, compression & converting that perform all the tasks within the browser (It works offline)
The fastest free web app for easy image modification
Online SVG optimizer with a lot of settings and possibility to cut and paste svg code directly in it.
Compress JPEG images with size even greater than 5MB
JPEG, GIF, PNG Compression
Free Image and Photo Resizer
Image Optimizer Free With Quality Options
This tool removes superfluous information, thereby reducing the size of your SVG files
Free online tool for resizing and compressing digital photos and images for displaying on the web
Resize Your Images Online
Animated GIF maker and Image editor including Image optimization and supports WebP conversion
Resize png for without losing transparent background.
Remove meta tags in image in order to reduce image size and increase privacy security
Uses lossless compression to compress inefficient SVG codes by removing unnecessary data. (Free & Paid)
Last updated