> For the complete documentation index, see [llms.txt](https://devresources.gitbook.io/devresources/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://devresources.gitbook.io/devresources/contents/design-resources.md). # Design Resources ### Design Systems & Style Guides > Design systems, style guides, toolkits, docs. Some of these are design guides for top companies/websites | Website | Description | | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | [Material Design](https://material.io/) | Google's Material Design | | [Ant Design](https://ant.design/) | Design system for enterprise-level products | | [Apple Design Resources](https://developer.apple.com/design/resources/) | Guides and templates for using Apple design and UI | | [Primer](https://primer.style/) | Design, build, and create with GitHub’s design system | | [Alta UI](https://www.oracle.com/webfolder/ux/middleware/alta/index.html) | Oracle's design system and toolkit | | [Pulse](https://pulse.heartbeat.ua/) | Design system, guides and React component library | | [Bolt](https://boltdesignsystem.com/) | Robust Twig and web component powered UI components | | [Clarity Design System](https://clarity.design/) | UX guidelines, HTML/CSS framework, and Angular components | | [AtlasKit](https://atlaskit.atlassian.com/) | Atlassian's official UI library, built according to the Atlassian Design Guidelines | | [Audi Design Resources](https://www.audi.com/ci/en/guides/user-interface/introduction.html) | Audi UI design system and toolkit | | [Carbon Design Systems](https://www.carbondesignsystem.com/) | Carbon is IBM’s open-source design system for products and experiences | | [Yelp Style Guide](https://www.yelp.com/styleguide) | Yelp style guide, components and toolkit | | [Comet](https://comet.discoveryeducation.com/) | Scalable design system of visual language, components, and design assets | | [ETrade Design System](https://etrade.design/) | Guides and toolkits that blend finance with simplicity and ease of use | | [Fundamental Library](https://sap.github.io/fundamental-styles/) | Open source and community driven project for consistent user interfaces | | [Infor Design](https://design.infor.com/) | Guidelines and resources to create meaningful experiences for Infor’s products | | [Lexicon](https://liferay.design/lexicon/) | An experience language for crafting beautiful UI | | [Mailchimp UI/UX](https://ux.mailchimp.com/patterns/color) | Style guide and components from Mailchimp | | [Marvel Style Guide](https://marvelapp.com/styleguide/overview/introduction) | Set of design principles and components | | [Microsoft Fluent UI](https://developer.microsoft.com/en-us/fluentui#/) | Collection of UX frameworks from Microsoft | | [Pluralsight Design System](https://design-system.pluralsight.com/) | Design guide with components for designing with Pluralsight | | [Polaris](https://polaris.shopify.com/) | Design system that creates great experiences for all of Shopify’s merchants | | [Mozilla Protocol](https://protocol.mozilla.org/) | Protocol is a design system for Mozilla and Firefox websites | | [SendGrid Style Guide](http://styleguide.sendgrid.com/) | UI library for developing consistent UI/UX at SendGrid | | [VTEX Styleguide](https://styleguide.vtex.com/) | Reusable patterns, components and assets related to product design in VTEX | | [Rizzo](https://rizzo.lonelyplanet.com/styleguide/design-elements) | Style guide with UI components, JS components, widgets, etc | | [Atomize](https://atomizecode.com/) | UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly | | [StyleGuides.io](http://styleguides.io/) | A directory of 500+ styleguides | | [Done Design System](https://uilibrary.github.io/done-design-system/) | Open source design system, guides & components | | [Skoda Brand System](https://skoda-brand.com/explore-our-brand) | Design guideline for developing applications under the Skoda brand | | [Spectrum](https://spectrum.adobe.com/) | 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](https://asphalt.gojek.io/) | Gojek’s design language system. A collection of guidelines and components to create amazing user experiences. | | [Laws of UX](https://lawsofux.com/) | A collection of the key maxims that designers must consider when building user interfaces. | | [Checklist Design](https://www.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](https://humanebydesign.com/) | A resource that provides guidance for designing ethically humane digital products through patterns focused on user well-being. | | [Pr1mer Guidelines](https://guidelines.pr1mer.tech) | 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 | Website | Description | | ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Figma](https://www.figma.com/graphic-design-tool/) | Online graphic design tool (Free & paid options) | | [Vectr](https://vectr.com/) | Free vector graphics software | | [Taler](https://www.taler.app/) | Create social media banner designs in minutes from hundreds of customizable templates | | [Canva](https://www.canva.com/) | Create beautiful designs (Free & Paid) | | [Get Waves](https://getwaves.io/) | A free SVG wave generator to make unique SVG waves for web design | | [Clippy](https://bennettfeely.com/clippy/) | Easy CSS clip-path maker | | [Fancy Border Radius](https://9elements.github.io/fancy-border-radius/full-control.html) | Eight values specifying border-radius in CSS ( border-radius generator ) | | [Wireframe.cc](https://wireframe.cc/) | Wireframing tool (free & paid) | | [Fotor](https://www.fotor.com/) | Photo editor and design maker | | [Pixlr](https://www.pixlr.com/) | Online photo editor | | Veed - | Make videos online in the simplest way possible. Cheap and all-in-one editor. | | [RemoveBG](https://www.remove.bg/) | Remove image backgrounds | | [Photo Creator](https://photos.icons8.com/creator) | Create your own photos instead of searching for stock | | [Visme](https://www.visme.co/) | Create presentations, infographics and more | | [Infogram](https://infogram.com/) | Create infograms | | [ChartGo](https://www.chartgo.com/) | Create charts and graphs online | | [Cartoon Photo](https://cartoon.pho.to/) | Turn photos into cartoons | | [Whimsical](https://whimsical.com/) | Wireframes, diagrams and more (4 free) | | [Whiteboard](https://witeboard.com/) | Online drawing tool | | [Octopus](https://octopus.do/) | Sitemap builder | | [CTA Button Maker](https://www.clickminded.com/button-generator/) | Create call to action buttons | | [Blobmaker](https://www.blobmaker.app/) | Blobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes. | | [Personas](https://personas.draftbit.com/) | A playful avatar generator for the modern age | | [SoftUI](https://www.softui.io) | A Soft UI (neumorphism) CSS generator | | [Photopea](https://www.photopea.com) | An Online Photoshop editor | | [Excalidraw](https://excalidraw.com/) | Virtual whiteboard for sketching hand-drawn like diagrams | | [Diagrams](https://www.diagrams.net/) | Diagram software and Flowchart maker | | [MapInSeconds](http://mapinseconds.com/) | Simple way to visualize your data with a map | | [Grid Malven](http://grid.malven.co/) | A css grid cheatsheet to reference when creating a css grid | | [Flex Malven](http://flexbox.malven.co/) | A flexbox grid cheatsheet to reference when working with flexbox | | [Smart Upscaler](https://icons8.com/upscaler) | Upscale images by 2-4x resolution | | [GetAvataaars](https://getavataaars.com/) | Fun and Colorful free avatars web generator tool by Fang-Pen Lin using Pablo Stanley sketch library | | [Big Heads](https://github.com/RobertBroersma/bigheads) | Easily generate avatars for your projects with Big Heads by Robert Broersma. | | [Webflow](https://webflow.com/) | Break the code barrier, Build better business websites, faster. Without coding. | | [Trace](https://stickermule.com/trace) | Instantly remove the background from your photos | | [Neumorphism.io](https://neumorphism.io/#55b9f3) | Generate Soft-UI CSS shadow code | | [DB Designer](https://app.dbdesigner.net/) | Design your database for free online | | [Ui Bakery](https://uibakery.io/) | Create full-fledged web apps visually | | [Faux](http://knutsynstad.com/fauxcode/) | Turn real code into faux code | | [Rive](https://rive.app/) | Real-time interactive design tool that allows you to design, animate, and immediately integrate your assets into any platform. | | [Unscreen](https://www.unscreen.com/) | Remove Video Background 100% Automatically and Free | | [Kodeshot](https://www.kodeshot.net/) | Convert your source code into nice pictures for your articles, tweets, messages, posts... | | [Wix](https://www.wix.com/) | Create a Website You’re Proud Of | | [GTmetrix](https://gtmetrix.com/) | Website Speed and Performance Optimization | | [Framer](https://www.framer.com/) | Is prototyping tool for teams | | [Draw.io](https://www.draw.io/) | Free online diagram editor tool | | [UXWing SVG Editor](https://uxwing.com/svg-icon-editor) | Creating and Edit SVG Online | | [CSS Arrow](http://www.cssarrowplease.com/) | 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](https://www.lucidchart.com/pages/) | Diagramming and visualization tools that allows creating databases, flowcharts, boards, floor-maps, and much more. 3 multi-page documents on the free tier | | [Carbon](https://carbon.now.sh) | Create and share beautiful images of your source code by typing or drop a file. | | [PixCleaner](https://www.pixcleaner.com/) | Accurate and hassle free background removal tool | | [Glass UI](https://ui.glass/generator) | A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications. | | [Glassmorphism](https://glassmorphism.com/) | An incredible online tool for generating quick glassmorphic UI in CSS code snippets. | | [TableConvert](https://tableconvert.com/) | 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 | Website | Description | | ----------------------------------------------------------------- | ------------------------------------------------------------------------------- | | [Gimp](https://www.gimp.org/) | Free & open source image editor similar to Photoshop | | [Gravit Designer](https://www.designer.io/en/) | Free full-featured vector graphic design app that works on ALL platforms | | [Blender](https://www.blender.org/download/) | Open source, free animation, 3D modeling, etc. | | [Raw Therapee](https://rawtherapee.com/) | Cross-platform raw image processing program | | [Be Funky](https://www.befunky.com/features/graphic-designer/) | Online design program | | [Krita](https://krita.org/en/download/krita-desktop/) | Sketching and painting program designed for digital artists | | [Pencil Project](https://pencil.evolus.vn/) | GUI prototyping software | | [Inkscape](https://inkscape.org/) | Powerful free design tool | | [Adobe XD](https://www.adobe.com/products/xd.html) | Free design tool from Adobe | | [Shapes.so](https://shape.so/pricing) | Icons that can be used as code in your projects | | [Lunacy](https://icons8.com/lunacy) | Sketch for Windows | | [InVision Studio](https://www.invisionapp.com/studio) | Free screen designing tool from InVision | | [Darktable](https://www.darktable.org/) | Free & Open source photography workflow application and raw developer | | [Inpixio photo Editor](https://www.inpixio.com/free-photo-editor) | Free Photo Editor: For windows only | | [Colorpicker](https://colorpicker.fr) | Open Source colors software: Retrieve, manipulate and store your colors easily! | ### Design Inspiration > Here are some websites to get inspiration for design and UI | Website | Description | | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Behance](https://www.behance.net/) | Design projects featured by different creators | | [Dribbble](https://dribbble.com/) | Design projects featured by different creators | | [Landingfolio](https://landingfolio.com/) | Landingfolio features the best landing page inspiration, templates, resources and examples on the web. | | [Codewell](https://www.codewell.cc/) | Practice your HTML, CSS, and Javascript skills on real world design templates | | [Foxyapps](https://foxyapps.co/) | Design inspiration from the best mobile app designs | | [Httpster](https://httpster.net/2020/apr/) | Showcases websites made by people from all over the world | | [Inspofinds](https://inspofinds.com/) | Latest design work from designers and the design community | | [Design Notes](https://www.designnotes.co/) | Free online resource library for product designers | | [Land Book](https://land-book.com/) | Displays a large collection of websites to help find inspiration | | [Frontend Mentor](https://www.frontendmentor.io/) | Real-world UI Challenges using HTML, CSS and Javascript | | [Awwwards](https://www.awwwards.com/) | A website that rate and collects the best websites in the world in UI | | [Codrops](https://tympanus.net/codrops/) | A website that collects the best UI ideas and patterns and make tutorials of it | | [SaaS Landing Page](https://saaslandingpage.com/) | Discover the best landing page examples created by top-class SaaS companies | | [Saaspages.xyz](https://saaspages.xyz) | A collection of the best landing pages with a focus on copywriting and design. | | [Screenlane](https://screenlane.com) | Screenlane is a website and newsletter that features the latest web and mobile design inspiration. | | [lapa ninja](https://www.lapa.ninja/) | Best landing page inspiration | | [Freefrontend](https://freefrontend.com/) | Free frontend design from css html and javascript. latest work some design part | | [Webframe](https://webframe.xyz) | Discover and be inspired by beautiful webapp designs | | [Collect UI](http://collectui.com/) | Daily inspiration collected from daily ui archive and beyond. Handpicked, and updating daily. | | [Graphic Burger](https://graphicburger.com/) | 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](https://reallygoodemails.com/) | A site offering users a ton of company e-mails from customer service to marketing. | | [Free Design Resource](https://freedesignresources.net/) | A site offering fonts, mockups, templates graphics and ui kits. | | [Site Inspire](https://www.siteinspire.com/) | siteInspire is a showcase of the finest web and interactive design. | | [Web Design Inspiration](https://www.webdesign-inspiration.com/) | A site for web design inspiration, updated daily. | | [NavNav](https://navnav.co/) | Responsive navigation examples | | [Calltoidea](https://www.calltoidea.com/) | Collection of different web Components for inspiration. | | [MediaQueri.es](https://mediaqueri.es/) | A collection of inspirational websites using media queries and responsive web design | | [Mulzli Search](https://search.muz.li) | Search engine for design inspiration | | [DeviantArt](https://www.deviantart.com/) | Access to 370 million pieces of art for inspiration. | | [Design your way](https://www.designyourway.net/blog/web-and-mobile-design/) | Collection of different Web and Mobile Designs | | [Humans.fyi](https://humans.fyi/) | A collection of brilliant personal websites filterable by colors and web technologies used in each website. | | [SiteSee](https://sitesee.co/) | A curated gallery of beautiful and modern websites. | | [UI Garage](https://uigarage.net/) | Daily handpicked UI inspiration & patterns. | | [ecomm.design](https://ecomm.design/) | eCommerce Website Design Gallery & Tech Inspiration. | | [Design Nominees](https://www.designnominees.com/) | A showcase of awarding and showcasing the best websites, apps and Games. | | [Design Vault](https://designvault.io/) | A library of screenshots and patterns from real world digital products | | [CSS buttons](https://getcssscan.com/css-buttons-examples) | 84 Beautiful CSS buttons examples. | | [CSS box-shadow](https://getcssscan.com/css-box-shadow-examples) | 91 Beautiful CSS box-shadow examples. | ### Image Compression > Websites that allow you to compress large images | Website | Description | | ------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | [TinyPNG](https://tinypng.com/) | Smart PNG and JPEG compression | | [Optimizilla](https://imagecompressor.com/) | Online JPEG and PNG optimizer / compressor with settings and archive download | | [Compressor.io](https://compressor.io/) | JPEG, PNG, GIF, SVG Compression | | [Squoosh.app](https://squoosh.app/) | Image compression from Google Chrome Labs | | [BulkResizePhotos](https://bulkresizephotos.com/) | Bulk image resizing, compression & converting that perform all the tasks within the browser (It works offline) | | [iLoveIMG](https://www.iloveimg.com/) | The fastest free web app for easy image modification | | [SvgOMG](https://jakearchibald.github.io/svgomg/) | Online SVG optimizer with a lot of settings and possibility to cut and paste svg code directly in it. | | [CompressJPEG](https://compressjpeg.com/) | Compress JPEG images with size even greater than 5MB | | [CompressNow](https://compressnow.com/) | JPEG, GIF, PNG Compression | | [Promo Image Resizer](https://promo.com/tools/image-resizer/) | Free Image and Photo Resizer | | [Image Optimizer](http://www.imageoptimizer.net/) | Image Optimizer Free With Quality Options | | [SVGminify](https://www.svgminify.com/) | This tool removes superfluous information, thereby reducing the size of your SVG files | | [JPEG Optimizer](http://jpeg-optimizer.com/) | Free online tool for resizing and compressing digital photos and images for displaying on the web | | [Resizing.app](https://resizing.app/) | Resize Your Images Online | | [EZGif](https://ezgif.com/) | Animated GIF maker and Image editor including Image optimization and supports WebP conversion | | [OnlinePngtools](https://onlinepngtools.com/resize-png) | Resize png for without losing transparent background. | | [Verexif](https://www.verexif.com/en/) | Remove meta tags in image in order to reduce image size and increase privacy security | | [Vecta Nano](https://vecta.io/nano) | Uses lossless compression to compress inefficient SVG codes by removing unnecessary data. (Free & Paid) |