Data

Tools

Indexes

Applications

Experiments

Awesome

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

https://github.com/SARAH-HADDAD/Design-Resources

This repository is a collection of design resources that includes templates, stock photos, icons, fonts, color palettes...
https://github.com/SARAH-HADDAD/Design-Resources

List: Design-Resources

adobe assets awesome colors design figma fonts graphics icons illustration photos photoshop resources sketch svg template theme ui ux

Last synced: about 2 months ago
JSON representation

This repository is a collection of design resources that includes templates, stock photos, icons, fonts, color palettes...

Awesome Lists containing this project

README 

        
# Design Resources



This repository is a collection of design resources that includes templates, stock photos, icons, fonts, color palettes...



## Table of Contents



- [General](#general)

- [Colors](#colors)

- [Illustrations](#illustrations)

- [Stock Photos](#stock-photos)

- [Icons](#icons)

- [Fronts](#fronts)

- [Inspiration](#inspiration)

- [Mockups](#Mockups)

- [Design For Developers](#Design-for-developers)



### General



Website | Description

--------|------------

[Freepik](https://www.freepik.com) | All the assets you need, in one place.

[Freebiesbug](https://freebiesbug.com/) | Hand-picked resources for web designer and developers, constantly updated.

[Sketch App Sources](https://www.sketchappsources.com/) | Icons, UI Kits, Wireframes, iOS, Android Templates for Sketch

[Figma Community](https://www.figma.com/community) | Explore, install, use, and remix thousands of files and plugins

[Uplabs](https://www.uplabs.com/) | Unlimited UI Kits, Icons, Templates, Themes and More (free & premium )

[GrapicBurger](https://graphicburger.com/) | Design resources.

[InvisionApp](https://www.invisionapp.com/inside-design/design-resources/) | Browse our library of free, high-quality UI kits, icon packs, and mockups

[Freebiesketch](https://freebiesketch.com/) | Free resources for UX / UI Designer and Developers.

[100 Daily UI](https://100dailyui.webflow.io/) | Free Figma library of products, elements, and screens

[Figma Resources](https://www.figmabox.com/) | A curated Figma resources, UI kits, templates & freebies to save you time and speed up your workflow

[UI Space](https://uispace.net/) | Free PSD, AI, Fonts and more

[Textures](https://www.textures.com) |provides a large collection of high-quality textures, materials, and 3D models for use in various digital projects such as video games, animations, and visual effects. 

[Hero Patterns](https://www.heropatterns.com/) | A collection of repeatable SVG background patterns for you to use on your web projects.

[Free Photoshop Templates](https://gitu.net/en/) | Free PSD and Adobe Xd templates.

[Free Sketch App Resources](https://sketchfav.com/en/) | Free high quality icons, mockups and UI kits for Sketch App.

[Themeselection](https://themeselection.com/) | Selected high quality, modern design, professional and easy-to-use Free Bootstrap Admin Dashboard Template, HTML Themes and UI Kits to create your applications faster!

[GetWaves](https://getwaves.io/) | SVG random waves generator (available as Figma plugin).

[BlobMaker](https://www.blobmaker.app/) | SVG random blob generator (available as Figma plugin).

[Envato Element](https://elements.envato.com) | Digital assets marketplace that offers a variety of creative resources for designers, developers, and content creators. These resources include templates, graphics, audio, video, photography, and other digital assets. 

[Super designer](https://superdesigner.co) | Collection of free design tools to create unique backgrounds, patterns, shapes, images, and more with just a few clicks.

[Fffuel](https://fffuel.co) | Collection of color tools and free SVG generators for gradients, patterns, textures, shapes, backgrounds & decorative graphics.

[Compressor](https://compressor.io) | Fast & efficient image compression.

[Mesh](https://meshgradient.com) | Mesh is a simple way to create beautiful, unique gradients using shadersGet started.

[Photopea](https://www.photopea.com) | Free version of Photoshop.

[Iconfinder](https://www.iconfinder.com/) | Millions of graphics for your design projects. Created by independent designers.

[Designercize](https://designercize.com) | Fun game for ui/ux designe it gives you challenges with time set up.

[Checklist Design](https://www.checklist.design) | A collection of the best design practices.

[IconScout](https://iconscout.com) | Over 5.8 Million+ Design Assets.

[Blugraphic](https://www.blugraphic.com) | Includes graphics, templates, mockups, icons, fonts and other ...

[PSDDD](https://psddd.co) | Free Photoshop & Sketch UI Templates.

[removebg](https://www.remove.bg) | Remove Image Background.

[Icons8](https://icons8.com) | Icons8 provides design resources: icons, UI illustrations, photos and software to class up your projects(with GitHub Student Developer Pack you will have 3-month All Access subscription with icons, photos, illustrations, and music).

[paaatterns](https://products.ls.graphics/paaatterns/) | Free collection of beautiful patterns for all vector formats.

[VistaCreate](https://create.vista.com/?otm_trial_button) |  Free graphic design tool with thousands of free templates for you to choose from. 

[Microcopy](https://www.microcopy.me) | Search micro UX copy text: slogans, headlines, notifications, CTA, error messages, and more(free).

[Ingradients](https://ingradients.net) | A brand-new collection of hand-picked mesh gradients perfect for your next design project.

[Devices by Meta](https://design.facebook.com) | More than 100+ clean mockups of different types of devices used around the world.

[Interview Warmup](https://grow.google/certificates/interview-warmup) | A free Al tool that helps you practice for your next interview and improve your technique with insights.

[Pitch](https://pitch.com/)| This tool allows you to create impressive presentations in a colaborative way.

[PicWish](https://picwish.com/)| Al tools to easily remove backgrounds of any of your images.

[Hemingway Editor](https://hemingwayapp.com/) | Hemingway App makes your writing bold and clear. The app highlights lengthy, complex sentences and common errors.

[UsabilityHub](https://usabilityhub.com/) | UsabilityHub is a remote user research platform that takes the guesswork out of design decisions by validating them with real users.

[Attention insight](https://app.attentioninsight.com/) | Attention Insight's AI automatically predicts changes in visual attention based on 70,000 images from eye-tracking studies.

[UX Design Challenges](https://uxtools.co/challenges/)| Practice with real-world exercises. Train yourself in crucial skills and tools. Take away portfolio-worthy deliverables. Useful for beginners and experts alike.

[UX Challenge](https://www.uxchallenge.co/)| Practice solving problems with UX design challenges.





    ↥ Back To Top




### Colors



Website | Description

--------|------------

[Adobe Color](https://color.adobe.com/) | A color palette generator.

[Coolors](https://coolors.co/) | Generate or browse beautiful color combinations for your designs.

[ColorsWall](https://colorswall.com/) | Place to store your Colors Palettes.

[Color Hunt](https://colorhunt.co/) | a free and open platform for color inspiration with thousands of trendy hand-picked color palettes.

[Google Material Color Tool](https://material.io/resources/color/) | Create and share color palettes for your UI, and measure the accessibility of any color combination.

[ColorSpace](https://mycolor.space/) | Generate nice color palettes from one color.

[Colors.lol](https://colors.lol/) | Overtly descriptive color palettes.

[Colors and Fonts](https://www.colorsandfonts.com/) | A collection of color and typography resources for Web Developers and Digital Designers to find inspiration.

[0to255](https://www.0to255.com/) | 0to255 is a color tool that makes it easy to lighten and darken colors. It’s perfect for hover states, borders, gradients, and more

[Flat UI Colors](https://flatuicolors.com/) | Features a total set of 14 color palettes and 280 colors for your designs, projects, presentations and other needs.

[Hexcolorpedia](https://hexcolorpedia.com/) | Hex color information, Color conversion, Shades, tints, tones, Pantone match, color blending and huge Color palettes collection.

[iColorpalette](https://icolorpalette.com) | Create, browse or export (aco, ase, svg, png, pdf) color palettes by color or themes.

[Chroma](https://chroma.dev) | A free browser extension that makes it easy to pick colors off the page and build amazing and shareable color palettes.

[Mockupworld](https://www.mockupworld.co) | Free Mockups from the Web.

[COLOR SUPPLY](https://colorsupplyyy.com) | A color picker for designers & illustrators.

[rgb2cmyk](https://www.rgb2cmyk.org) | Convert images from RGB to the CMYK color space.

[Khroma](https://www.khroma.co/)| Khroma uses AI to learn which colors you like and creates limitless palettes.

[Colorable](https://colorable.jxnblk.com/) | Take a set color palette and get contrast values for every possible combination.

[Paletton](https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF) | It allows you to do is build up a palette based on some proportion.





    ↥ Back To Top




### Illustrations



Website | Description 

--------|------------

[unDraw](https://undraw.co/illustrations) | Open-source illustrations for any idea you can imagine and create (my fav <3). 

[DrawKit](https://www.drawkit.io/) | Hand-drawn vector illustration and icon resources, perfect for your next project. 

[Blush](https://blush.design/) | Free customizable illustrations with Figma Plugin. 

[404 illustrations](https://error404.fun/) | Free illustrations for 404 pages. 

[Open Peeps](https://www.openpeeps.com/) | Hand drawn illustration library. 

[Absurd Design](https://absurd.design/) | Free surrealist illustrations and vector art. 

[Manypixels](https://www.manypixels.co/gallery) | 2,500+ royalty-free and editable illustrations to power up your design projects. 

[Delesign](https://delesign.com/free-designs/graphics/) | Royalty-free designs for your website, social media, blog, email newsletters, and more. 

[Mixkit](https://mixkit.co/free-stock-art/) | Discover free art made by talented creators for websites, framed prints, ads and more. 

[Control](https://control.rocks/) | Combo set of 108 customizable illustrations. 

[Smash](https://usesmash.com/) | Awesome illustration constructor with colorful and trendy characters. 

[Open Stickers](https://openstickers.craftwork.design) |  Free illustrations for web and apps. 

[Lost Geometry](https://lostgeometry.xyz) | A set of 20+ abstract 3D shapes to give a modern and trendy look to your design work. 

[Spline](https://spline.design/) | Creating beautiful 3D.

[Shapefest](https://www.shapefest.com/) | Beautiful free 3D objects, icons and illustrations with different materials.





    ↥ Back To Top




### Stock Photos  



Website | Description

--------|------------

[Unsplash](https://unsplash.com/) | Beautiful, free images and photos that you can download and use for any project.

[Pexels](https://www.pexels.com/) | Download and use the best free stock photos and videos.

[Stock Snap](https://stocksnap.io/) | High quality and high resolution stock images free from all copyright restrictions (CC0).

[Pixabay](https://pixabay.com/) | Free Images and video to Use Anywhere.

[Burst](https://burst.shopify.com/) | Free stock photos for websites and commercial use.

[PicJumbo](https://picjumbo.com/) | free stock photos, backgrounds and free high-resolution images for personal and commercial use.

[The noun project](https://thenounproject.com) | Icons and Photos For Everything.

[Pixbay](https://pixabay.com) | Stunning free images & royalty free stock.

[DeviantArt](https://www.deviantart.com) | Explore over 350 million pieces of art while connecting to fellow artists and art enthusiasts.

[pngimg](https://pngimg.com) | PNG images and cliparts for web design.

[StickPNG](https://www.stickpng.com/fr) | StickPNG is a vibrant community of creative people sharing transparent PNG images which you can download for free and use in your personal non-commercial or educational projects. 

[Vecteezy](https://fr.vecteezy.com) | Free photos and videos.

[Let's Enhance](https://letsenhance.io)| Let's Enhance is an Al tool to increase your images resolution without quality loss. 

[STOCKIMG.AI](https://stockimg.ai) | Generate stock image with AI.

[FreeImages](https://www.freeimages.com/) | Free Images: Photos, Vectors, Clipart, Icons, PSD & more!

[Freepik](https://www.freepik.com/) | Find and download the best high-quality photos, vectors, videos, and mockups.





    ↥ Back To Top




### Icons



Website | Description

--------|------------

[Circum Icons](https://circumicons.com/) | Consistent open source icons as SVG for React, Vue and Svelte.

[Feather Icons](https://feathericons.com/) | Simply beautiful open source icons.

[Streamline Icons](https://streamlineicons.com/) | Download 30,000 free PNG icons for website, web app, software, web design.

[Material Icons](https://fonts.google.com/icons) | Delightful, beautifully crafted symbols for common actions and items.

[Font Awesome](https://fontawesome.com) | Icon library and toolki.

[Remix Icon](https://remixicon.com/) | Simply Delightful Icon System.

[CSS.gg](https://css.gg/) | Open-source CSS, SVG and Figma UI Icons that are available in SVG Sprite, styled-components, NPM & API.

[Ikonate](https://ikonate.com/) | Fully customisable & accessible vector icons.

[Tabler Icons](https://tabler-icons.io) | Over 3450 pixel-perfect icons for web design.

[Flaticon](https://www.flaticon.com/) | Vector icons & stickers.

[Heroicons](https://heroicons.dev/) | Find icons for your project.

[Bootstrap Icons](https://icons.getbootstrap.com/) | Free, high quality, open source icon library with over 1,300 icons.

[Simple Icons](https://simpleicons.org/) | 1897 Free SVG icons for popular brands.

[The noun project](https://thenounproject.com) | Icons and Photos For Everything.

[Iconfinder](https://www.iconfinder.com/) | Millions of graphics for your design projects. Created by independent designers.

[Iconscout](https://iconscout.com) | Get 5.3 Million+ free and premium icons (with GitHub Student Developer Pack you have free access to 60 premium icons from selected contributors every month for 1 year).





    ↥ Back To Top




### Fronts



Website | Description

--------|------------

[Adobe Fonts](https://fonts.adobe.com) | Find the perfect font for your next project.

[Google Fonts](https://fonts.google.com) | Hundreds of free webfonts hosted via Google or self-hosted.

[arbfonts](https://arbfonts.com) | Arabic font.

[UI Space](https://uispace.net/) | Free PSD, AI, Fonts and more.

[What Font Is](https://www.whatfontis.com/?s3) | Find any font from any image.

[MyFonts](https://www.myfonts.com) | Thousands of fonts from all kinds of foundries, includes some trial fonts & free families.

[Type Network](https://typenetwork.com) | Incredibly high-quality fonts by select independent foundries.

[Font Freak](https://www.fontfreak.com/fonts-new.htm) | Free Fonts.

[YouWorkForThem](https://www.youworkforthem.com/fonts/) | Thousands of fonts in the “original creative marketplace”.

[Colors and Fonts](https://www.colorsandfonts.com/) | A collection of color and typography resources for Web Developers and Digital Designers to find inspiration.

[Font Awesome](https://fontawesome.com) | Icon library and toolki.

[Dafont](https://www.dafont.com) | Download fonts.

[1001 Fonts](https://www.1001fonts.com) | New & Fresh Fonts.

[Font Squirrel](https://www.fontsquirrel.com) | Free Font.

[Fontshop](https://www.fontshop.com/free-fonts) | Checkout and have fun.

[Velvetyne](https://velvetyne.fr/) | A lot of free typefaces to choose.

[WhatTheFont](https://www.myfonts.com/pages/whatthefont)| WhatTheFont uses deep learning to search our collection of over 230,000 font styles and find the best match for the fonts in your photo.

[Fontjoy](https://fontjoy.com/)| Generate font combinations with deep learning.

[Variables Fonts](https://v-fonts.com/)| Allow one font to contain multiple stylistic variations.





    ↥ Back To Top




### Inspiration



Website | Description

--------|------------

[CodeMyUI](https://codemyui.com) | Handpicked collection of web design & UI inspiration with code snippets.

[Behance](https://www.behance.net) | Connect with other creatives, and discover new talent.

[Pinterset](https://www.pinterest.com) | Inspiration for various topics.

[Graphicsfuel](https://www.graphicsfuel.com) | Free and premium quality designs, articles, inspiration and more.

[Awwward](https://www.awwwards.com) | Website web design world award.

[Ui sources](https://www.uisources.com/home) | Real design inspiration.

[Dribbble](https://dribbble.com/shots) | Millions of designers and agencies around the world showcase their portfolio work on Dribbble.

[Colors and Fonts](https://www.colorsandfonts.com/) | A collection of color and typography resources for Web Developers and Digital Designers to find inspiration.

[Logopond](https://logopond.com) | Logopond is an inspirational site & showcase of identity work from designers of varying abilities all across the world.

[DesignTAXI](https://designtaxi.com) | A creative platform that offers design news, resources, and inspiration on various design topics.

[Creative Bloq](https://www.creativebloq.com) | Offers design news, inspiration, and resources on topics such as typography, branding, and illustration.

[Mobbin](https://mobbin.com/browse/ios/apps?sort=publishedAt) | Inspire & empower the world to design better digital experiences.

[Lapa](https://www.lapa.ninja/)| Lapa Ninja is a gallery featuring the best 5751 landing page examples, free books for designers and free UI kits from around the web.

[Bestfolios](https://www.bestfolios.com/home)| Bestfolios is a gallery featuring 502 portfolios, 200 resumes and many more design inspirations.

[Screenlane](https://screenlane.com/)| Find inspiration and keep up with the latest mobile UI design trends.

[GoodUx](https://goodux.appcues.com/)| Inspiring UX, straight to your inbox.

[Cofolios](https://www.cofolios.com/)| Showcase a lot of successful ux porfolio.



### Mockups



Website | Description

--------|------------

[Screely](http://screely.com) | Turn any screenshot into a beautiful website mockup instantly with a few clicks.

[Mockup World](https://www.mockupworld.co) | Offers a large collection of free and premium mockups, including device mockups, branding mockups, and more.

[Freebiesbug](https://freebiesbug.com) | Provides a range of design resources, including free mockups for web and graphic design.

[Smartmockups](https://smartmockups.com) | Offers a free plan that includes a limited selection of mockups, as well as premium plans with access to more mockups and features.

[Pixelbuddha](https://pixelbuddha.net) | Provides free and premium design resources, including mockups for branding, packaging, and more.





    ↥ Back To Top




### Design For Developers



Website | Description

--------|------------

[Grid by Example](https://gridbyexample.com/) | This site is a collection of examples, video and other information to help you learn CSS Grid Layout. 

[THE EXPERIMENTAL LAYOUT LAB](https://labs.jensimmons.com/) | Learn what's now possible in graphic design on the web : layout, CSS Grid, and more. 

[CSS Crid Generator](https://cssgrid-generator.netlify.app/) | This project is a way for people to use CSS Grid features quickly to create dynamic layouts.

[Ultimate CSS Gradient Generator](https://www.colorzilla.com/gradient-editor/) | if you already have two colors and you need to make a CSS gradient, it outputs the code for it really nicely and gives you fallback and sorts of stuff.

[CodePen](https://codepen.io/) | CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration.

[Give ’n’ Go](https://give-n-go.co/) | A curated gallery of Dribbble shots reworked as interactive CodePen pens.

[CSS Dradient](https://cssgradient.io/) | CSS Gradient lets you create free gradient backgrounds for your website.



    ↥ Back To Top