번역기 돌려서 보시면 편합니다.
UI Graphics
Websites and resources with modern UI components in different formats such as PSD, Sketch, Figma, etc. They are great for ideas for web components/UI
UI Design Daily 111 | Awesome UI Components of all types |
100 Daily UI 47 | Free Figma library of products, elements, and screens |
Sketch App Sources 13 | Sketch UIs, wireframes, icons and much more |
Humaaans 22 | Cool illustrations of people with the ability to mix and match |
Paaatterns 10 | Free collection of beautiful patterns for all vector formats |
thepatternlibrary 14 | Free beautiful background patterns |
404 illustration 28 | free illustrations for 404 pages |
Drawkit.io 16 | Illustrations for designers and startups |
Undraw.co 15 | Open-source illustrations for any idea you can imagine and create |
Illustration.co 33 | Open-source illustrations kit |
Manypixels.co 11 | Monochromatic, Isometric high quality illustrations |
Open Peeps 12 | Hand drawn illustration library |
UI Space 15 | Thousands of great UI freebies |
Animations.co 22 | Beautiful, customizable animated GIF icons |
Uplabs 10 | High-quality design resources (Free & Premium) |
InvisionApp 14 | Library of free, high-quality UI kits, icon packs, and mockups |
Open Doodles 10 | A Free Set of Sketchy Illustrations |
Avataaars 9 | Free sketch library of avatars illustrations by Pablo Stanley |
FreebieSketch 11 | Free Sketch designs, wireframes, illustrations, and more. |
Blush 5 | Free customizable illustrations with Figma Plugin |
Hero Patterns 12 | A collection of repeatable SVG background patterns |
IRA Design 7 | An open-source gradient illustrations collection by creative tim. |
Storytale.io 9 | Subset of Storytale free quality illustrations |
icons8.com/illustrations 4 | Free vector illustrations to class up your project |
Patternico 5 | Seamless Pattern Maker |
Freellustrations 16 | Free Background Images for awesome landing Pages |
Pixeltrue Illustrations 19 | Free Animated Illustrations |
Fonts
Websites that offer free fonts as well as font based tools
Google Fonts 6 | Library of around 1000 free licensed font families |
DaFont 7 | Archive of freely downloadable fonts |
Use & Modify 3 | Personal selection of beautiful, classy, punk, professional, incomplete, weird typefaces |
1001 Free Fonts 7 | I think the name speaks for itself |
Font Squirrel 1 | Font Squirrel scours the internet for high quality, legitimately free fonts |
Font Fabric 1 | A digital type foundry crafting retail fonts and custom typography for various brands |
What Font 2 | Tool for finding the fonts of a website without having to search in the devtools |
Tiff 4 | A type diff tool that visually contrasts the differences between two fonts |
TypeKit Practice 2 | Learn about typography practices |
Fontjoy 1 | Generate font pairing in one click |
Golden Ratio 2 | Golden Ratio Typography Calculator |
FontSpark 1 | Discover Better Fonts |
FontPair 1 | Helps you pair Google Fonts together |
Font Space 1 | A designer-centered free font website that has quick customizable previews |
Abstract Fonts 2 | Fonts free for personal and commercial use |
Free Typography 3 | A list of high quality fonts |
Leon Sans 1 | A geometric sans-serif typeface made with code |
Lexend 1 | A variable font empirically shown to significantly improve reading-proficiency |
Fonts for Apple Platforms 2 | Get the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps |
SFWin 2 | San Francisco Fonts for Windows 10 and non-Apple Platform |
Font Flipper 1 | Preview 800+ Google Fonts on top of your own designs, without having to download the fonts |
Fonts Arena 1 | Free curated fonts |
Befonts 2 | High quality fonts for free |
Arabic fonts 2 | Arabic fonts for free |
FontDrop 1 | Simple and easy way to view the contents of font files |
Open Foundry 3 | FREE platform for curated open-source typefaces |
Glyphter 2 | Upload your own SVGS and turn them into font files. Usefull if you want a smaller library loaded |
Colors
Websites and resources that help with choices related to colors
Colormind.io 16 | Color palette generator |
ColorCurves.app 9 | Color palette generator that uses curves to generate color palettes |
Coolors 1 | Create the perfect palette or get inspired by thousands of beautiful color schemes |
HTML Color Codes 6 | Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names |
Colors & Fonts 3 | A curated library of colors, fonts and resources |
Palette List 2 | Pick 2 colors you like and the tool generates thousands of palettes for you. |
Google Material Color Tool 4 | Official Google Material Color Palette Tool |
Material Palette 3 | Free to pick palettes, icons and colors for Material Design |
ColorSpace 2 | Generate nice color palettes from one color |
FlatUIColors 2 | Beautiful set of color palettes in various flavours |
Adobe Color 4 | Create color palettes, extract gradients from images, etc |
Colorsinspo 1 | All-in-one resource for finding everything about colors |
Happyhues 2 | Happy Hues is a color palette inspiration site that acts as a real world example as to how the colors could be used in your design projects by Mackenzie Child |
Adobe Trends 3 | Discover current color trends in different industries from the creative communities on Behance and Adobe Stock |
Color Hunt 3 | A free and open platform for color inspiration with thousands of trendy hand-picked color palettes |
Gradient Hunt 3 | A free and open platform for gradient inspiration with thousands of trendy hand-picked color gradients |
Web Gradients 2 | A free website to find good css gradients |
ColorBox 2 | A free website to produce color set |
CSS gradient 4 | A free website to make custome gradient and some examples of gradient |
gradienta 2 | A pure css and jpg gradients |
UI Gradients 4 | UI gradients color generator |
Palette Generator 1 | Generate new color palette with every spacebar press |
Material Palettes 1 | 1000+ Material Design palettes |
Grabient 3 | Gradient Selector |
ShadeSwash 1 | Quickly generate shades of any color |
BrandColors 2 | The biggest collection of official brand color codes |
BRAND PALETTES 2 | Logo Color Codes and Palettes |
Material Design Palette Generator 1 | Generate theme and color palette Material Design-like |
Colorate 1 | Color scheme tool for designers and developers. This will help you draw inspiration and serve as a resource for your color work. |
0to255 1 | A color tool that makes it easy to lighten and darken colors. It’s perfect for hover states, borders, gradients, and more. |
Color Blender 3 | A tool that shows the midpoint colors between two colors |
Gradient Buttons 3 | Ready to use copy/paste gradient buttons |
Khroma 1 | Khroma uses AI to learn which colors you like and creates limitless palettes for you to discover, search, and save. |
whocanuse 1 | A tool that brings attention and understanding to how color contrast can affect different people with visual impairments. |
Colorable 2 | Color combination contrast tester |
Color Hex Picker 2 | Tool to get hex code along with name of the color. |
Saruwakakun 1 | The stunning color scheme for website & App Designs with previews |
Paletton 2 | Paletton.com is a designer color tool designed for creating color combinations that work together well. |
Colorzilla 2 | A powerful online photoShop-like CSS gradient editor |
Image Color Picker 1 | Image color picker and palette generator |
CombineCOLORS 1 | Color mixing tool |
Color Lovers 3 | it will show the color schemes which are popular in outside world |
HTML CSS Color 1 | Free online Color (USA) or Colour (British) tools: information, gradient generator, color wheels etc. |
HEX Color Codes 2 | It gets HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names. |
CoolHue 2.0 2 | A free tool that shows different gradient examples in CSS and PNG format |
Icons
Resources for Icons including png, svg and more
UXWing 12 | Well Optimized, Free icons for commercial use |
Shapedfonts Iconclub 18 | 8000+ free icons |
Feather Icons 3 | Beautiful, customizable open source icons |
Tabler Icons 3 | 470+ highly customizable open source SVG icons |
Simple Icons 4 | 1307 Free SVG icons for popular brands |
Instant Logo Search 14 | thousands of free brands logos ( SVG - PNG ) |
Linear Icons 5 | 1000+ Ultra crisp vector icons |
Entypo 1 | 411 carefully crafted premium pictograms by Daniel Bruce |
Icons8 3 | Free icons, photos, vectors and tools |
Flat Icon | The largest database of free icons in PNG, SVG, EPS, PSD and BASE 64 formats |
The Noun Project | Over 2 Million curated icons, created by a global community |
Iconscout 1 | Free Download Icons illustrations stock photos at one place |
Nucleo App | Nucleo is a beautiful library of 27500 icons, and a powerful application to collect, customize and export all your icons. (Free & Paid) |
Icon-icons.com 2 | Free Icons PNG, ICO, ICNS and Vector file SVG |
Bootstrap Icons 1 | Free Icons built for Bootstrap but they’ll work in any project |
Remix Icon | Simply Delightful Icon System |
Iconmonstr | Discover 4496+ free icons in 313 collections |
Vivid.js 2 | Ready to use Free and Open Source SVG Icons Pack JavaScript Library. |
Iconfinder 5 | Free and premium vector icons in SVG, PNG, CSH and AI format |
Lordicon 3 | 50 free animated interactive icons |
UseAnimations 3 | Free Animated Icons in SVG and Json Format(for lottie) |
css.gg 1 | 700+ Open-source CSS, SVG and Figma UI Icons Available in SVG Sprite, styled-components, NPM & API |
SVGPorn 8 | 1000+ high-quality SVG logos |
Payment System Logos 2 | Logos for payment systems available in png and svg |
Browser Logos 5 | High resolution web browser logos |
IconBros 2 | 7843+ free icons grouped in 182 collections |
LogoHub 8 | Generate and download your logo for free in PNG and SVG format |
Material Design Icons 1 | A icon collection allowing designers and developers targeting various platforms to download icons in the format, color and size they need for any project. |
Heroicons 2 | Free, open source icons from the creators of Tailwind CSS. |
Zondicons | A set of free premium SVG icons for you to use on your digital products. |
Endless Icons 2 | A website offering a number of free icons. Icons are tagged and also compressed into kits. |
Icomoon 3 | Browse 5500+ Free Icons. Add any set you wish to easily browse and search its icons. |
Eva Icons 1 | Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. |
Zondicons 2 | A set of free premium SVG icons for you to use on your digital products. you can download the icons into your desktop |
Entypo 1 | 411 carefully crafted premium pictograms |
Cryptoicons 1 | A set of 430 crypto and fiat currency icons. Completely free. |
Ikonate 1 | Fully customisable & accessible vector icons |
appicon 1 | Quickly generate app icons in diffrent sizes for your IOS, macOS and Android projects |
LineIcons 1 | 2000+ Essential Line Icons for Designers and Developers |
Evericons | Evericons is a big pack of over 460 free icons designed by Aleksey Popov. |
SVG Repo 3 | Download free SVG Vectors for commercial use. |
Convertio | Convert PNG files to SVG online & free. (One of the services provided by it.) |
CSS ICON | Icon set made with pure css code, no dependencies, “grab and go” icons |
Unified icons 4 | Thousands of icons, one unified framework. One library, over 40,000 vector icons. |
Favicons
Resources for Favicons
Favicon.io 8 | Generate a favicon from text, from an image, or from an emoji. Download in .ico and .png formats |
Favicon Generator 4 | Generate favicon ico files for your website |
RealFaviconGenerator 2 | Generate icons for all platforms (Windows, iOS, Android) |
FontIcon 3 | Generate favicons and images from Font Awesome icons |
Icon Fonts
Resources for Icon Fonts
Font Awesome 1 | The web’s most popular icon set and toolkit |
Line Awesome 2 | Swap in replacement of Font Awesome with modern line icons |
Material Icons | Material design icon library |
IonIcons 1 | Beautifully crafted open source icons from Ionic team |
Zurb Foundation Icons | Customizable Foundation icons |
Fontisto Icons 1 | Fontisto the iconic font and css toolkit · 616+ free icons |
Boxicons | Boxicons is a free collection of carefully crafted open source icons |
Icofont 2 | 2100+ free icons to spice up your creative designs |
Material Palette 1 | Free to pick palettes, icons and colors for Material Design] |
Material Design Iconic Font 1 | Material design icon font |
Vscode Codicons | The icon font from Visual Studio Code |
Devicon | Devicon is a set of icons representing programming languages, designing & development tools |
PaymentFont | A sleek webfont for payment operators and methods. Featuring 116 icons |
Weather Icons | Weather Icons is the only icon font with 222 weather themed icons |
Stroke 7 | 202 thin stroke icons inspired by iOS 7 |
Jam Icons | 890+ handcrafted icons to make your web app awesome |
Fontastic.me 1 | Create your custom icon fonts in seconds. Over 9,000 icons available to pick from or upload your custom svg |
Fontello | 200+ web icons where you can customize the names or codes of icons. |
Linea | Linea: Featuring 750+ Free Icons |
Stock Photos
Websites that offer free stock photos of all kinds for your websites and apps
Pexels 15 | Free stock photos shared by talented creators |
Unsplash 7 | The internet’s source of freely usable images |
Pixabay 7 | Over 1.7 million+ high quality stock images and videos |
Magdeleine 4 | Gallery & free high res photo everyday |
Picspree 4 | Royalty free images, stock photos, illustrations, and vectors |
Burst 3 | Free stock photos collections |
Gratisography 1 | Free collection of free high-resolution pictures |
Life of Pix 2 | Free high resolution photography |
Stock Snap 5 | Hundreds of high quality photos added weekly |
Morguefile 2 | Over 350,000 free stock photos for commercial use |
Kaboom Pics 2 | Stock photography and color palettes. Good for product images |
New Old Stock | Stock vintage photos |
Pic Jumbo | Good collections of different types of photos |
Public Domain Pictures 4 | Public domain images of all types |
Find A Photo 1 | Searches multiple stock photo websites |
Stockvault | Categorized stock photos |
Placeholder | A free image placeholder service for the web. You can specify image size and format |
Realistic Shots 2 | Free high resolution stock photos |
Negative Space 1 | High-Resolution Free Stock Photos |
SkitterPhoto | Free high resolution photography |
PicoGraphy | Gorgeous, High-Resolution, Free Photos |
Wunder Stock | Stunningly amazing free photos |
PxHere 1 | Free Images & Free stock photos - PxHere |
Piqsels | Royalty Free Stock Photos |
FoodiesFeed 1 | Food photo stock |
Nappy | A website offering Beautiful, high-res photos of black and brown people. |
Generated Photos 1 | Unique AI Generated model photos |
Reshot | Uniquely free photos. Handpicked, non-stocky images. |
Free Images 1 | Find and download free stock photos - all free for personal and commercial use |
Lorem Picsum | An easy to use API to get beautiful placeholder images. Size and other parameters can be specified. |
scienceimage 1 | An image library specializing in science and nature images |
Integration & Application Network Image Library | Free images to provide scientists, resource managers, government agencies, community groups and graphics professionals with a resource for enhancing science communication. |
Saxifraga | Free nature images |
Stock Videos
Websites that offer free stock videos of all kinds for your websites and apps
Pexels 4 | Largest library of free to use videos, donated by the community |
Pixabay | Large library of free to use videos, donated by the community similar to Pexels |
Coverr.co 1 | Beautiful free stock video footage |
Videezy 1 | Free HD stock footage & 4K videos |
Mix Kit | Stock video clips & music |
Life Of Vids 1 | Free video clips and loops |
Videvo | Free and premium stock videos |
Loopvidz 2 | Free To Use Cinemagraphs Created With VIMAGE App |
Stock Music & Sound Effects
Websites that offer free stock music and/or sound effects
Free Stock Music 5 | Royalty free stock music for YouTube videos, podcasts, etc |
Bensound 3 | Download Royalty Free Music for free and use it in your project |
Mixkit 3 | Free music for your projects |
Freesound 2 | Free stock music and sounds |
Free Music Archive 3 | Collaborative database of creative-commons licensed sound for musicians and sound lovers |
Musopen 3 | An online copyright free classical music library |
Unminus 3 | Free Premium Music for Your Projects Royalty Free. Cleared for YouTube. |
Vectors & Clip Art
Free vectors, clipart, illustrations, patterns and more
Vecteezy 16 | Find and download free vector art |
Freepik 4 | Free vectors, stock photos, PSD and icons |
Free Vectors 10 | Community of vector lovers who share free vector graphics |
PNGTree 7 | png, backgrounds, templates, text effects |
Vector4Free 7 | Free vector graphics |
Retro Vectors 6 | Vintage vectors and graphics |
Freeble 4 | Vectors, patterns, mockups and more |
Lukaszadam 2 | Free Vector atrworks |
Illlustrations 33 | Beautiful 100 Illustrations - png, svg |
Clipart | Choose great clipart, png, coloring pages, drawings and more for your projects from the free collection! |
Growwwkit illustrations 3 | A set of 8 simple, black & white, stylish illustrations |
World Vector Logo 11 | Download vector logos of brands you love |
trianglify.io 2 | Generate low-poly backgrounds, textures, and vectors |
blob 2 | Generate Blob shapes for Web and Flutter apps |
HiClipart 2 | A community for designers to share & download transparent background PNG cliparts |
Stories by Freepik 1 | A collection of free and customizable illustrations for projects |
Black Illustrations 3 | Beautiful illustrations of black people (free and premium) |
Delesign 2 | A collection of free illustrations and more |
Custom Shape Dividers 1 | Free tool to make it easier for designers and developers to export a beautiful SVG shape divider |
Servier Medical Art 2 | 3000 free medical images to illustrate your publications and Powerpoint presentations |
Clker | Free clip art you can use for anything you like |
Product & Image Mockups
Create mockups of devices and other products
Smart Mockups 19 | Create stunning product mockups (free & premium) |
Shot Snap 2 | Create beautiful device mockup images for your app or website design |
Screely 2 | Instantly turn your screenshot into a mockup |
Screenshot.rocks 1 | Create beautiful browser & mobile mockups in seconds |
Screen Peak 1 | Create a mockup from a URL |
Mockup World 4 | The biggest source of free photo-realistic Mockups online |
Collab Shot 1 | Real-time screen grabs and image sharing |
Facebook Devices 2 | Images and Sketch files of popular devices |
Threed.io 5 | Generate 3D mockups right in your browser. |
Mockuphone 1 | 100% free mockups for all devices including IOS, Android, Windows Phone, Laptop & Desktop and TV |
Device Shots 2 | Create high-resolution device mockups for social media, for free |
HTML & CSS Templates
Websites that offer free beautiful website templates and themes of all types
HTML5Up 17 | Very modern, unique responsive HTML5/CSS3 themes |
Templatemo 7 | Minimal, resume, gallery themes and more |
Templated.co 6 | Tons of minimalistic HTML5/CSS3 themes |
FreeHTML5 4 | Free & premium HTML5 and Bootstrap themes |
StyleShout 6 | Brilliantly crafted free website templates |
Start Bootstrap 3 | Bootstrap starter themes |
Zerotheme 7 | HTML5, Bootstrap, Prestashop templates |
HTML5xCSS3 9 | Collection of wonderful templates in different categories |
Colorlib 2 | Almost any category of theme you can think of |
Free CSS 7 | Huge collection of free templates |
Hubspot 3 | Templates, infographics, banners and much more |
Mobirise 7 | Great looking HTML5/CSS3 templates |
Bootswatch 3 | Free themes for Bootstrap |
Onepagelove 5 | One page websites, templates and resources |
Themes For App 2 | Free Bootstrap themes and landing pages |
BootstrapTaste 5 | Premium & Free Bootstrap Templates |
BootstrapMade 4 | Elegant, clean and beautiful free templates using Bootstrap. |
W3Layouts 3 | W3Layouts: 3784+ Free Website Templates for 2020 |
Tooplate 3 | Tooplate: Free HTML Templates for everyone! |
Cruip 6 | Fully coded HTML templates to help you easily build your startup landing page without hassles. |
Shade 5 | Get High Converting Landing Pages For Free! |
UIdeck 5 | Free Landing Page Templates and Bootstrap Themes |
Splawr 4 | Free web templates to kickstart your idea! |
CSS Frameworks
CSS/UI frameworks to help build great looking websites and applications
Tailwind CSS 3 | Low level, utility-first framework |
Bootstrap 1 | Popular UI framework with tons of components that use both CSS and JS |
Materialize 1 | A modern responsive front-end framework based on Material Design |
Material Design Lite | Light framework based on Material Design. No JS dependency |
Bulma | Modern CSS framework with no JS |
Skeleton | Extremely light framework for basic UI elements |
Semantic UI | Empowers designers and developers by creating a shared vocabulary for UI |
Fomantic UI | A community fork of Semantic-UI |
Foundation | Mobile first framework with clean markup |
Pure CSS 1 | A set of small, responsive CSS modules |
UIKit | Lightweight and modular front-end framework |
Susy 1 | Lightweight, grid-layout engine for Sass |
Milligram.io | Minimalist CSS framework |
Vanilla Framework 2 | Simple, extensible CSS framework written in Sass |
Spectre CSS 1 | Lightweight, modern CSS framework |
Picnic CSS 1 | Lightweight and beautiful library |
Wing 1 | A beautiful CSS framework designed for minimalists |
Chota 1 | A micro (~3kb) CSS framework |
Blueprint CSS 1 | A lightweight layout library for building great responsive mobile first UIs that work everywhere |
W3.CSS | A modern CSS framework with support for desktop, tablet, and mobile design by default. Designed to be independent of jQuery or any other JavaScript library |
98.css 1 | A design system for building faithful recreations of old UIs |
NES CSS | NES-style CSS Framework |
Shoelace.css | Lightweight, forward-thinking CSS library built with future CSS syntax |
MVP.css | A minimalist stylesheet for HTML elements. No class names, no frameworks, just semantic HTML and you’re done |
Blaze.css | Open source modular CSS toolkit providing great structure for building websites quickly |
Turret CSS 1 | Turret CSS is a styles framework for development of responsive websites. |
Cutestrap | A strong, independent CSS Framework. |
Shorthand | Shorthand is a free and open source css framework, that allows you to make unique and modern design without writing any css |
XP.css 1 | XP.css is an extention of 98.css. A CSS library for building interfaces that look like old UIs. |
Framework7 | Framework7 - is a free and open source framework to develop mobile, desktop or web apps with native look and feel. |
Hint.css | A pure CSS tooltip library for your lovely websites. |
imagehover.io | Pure CSS Image Hover Effect Library |
mini.css | minimal, responsive, style-agnostic CSS framework |
Tachyons | Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible. |
Material Bootstrap 1 | Material Design with Bootstrap |
Ivory | A modern CSS framework for developing powerful web interfaces faster and easier |
Halfmoon UI 1 | A responsive and lightweight framework, designed for quickly building beautiful dashboards and product pages. |
CSS Animations
CSS animations to build awesome animations for websites and applications
Animate.css 9 | Just-add-water CSS animations |
Bounce.js 1 | Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations |
Anime.js 3 | Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects |
Magic Animations 4 | Animations has been one of the most impressive animation libraries available |
Zdog 1 | Round, flat, designer-friendly pseudo-3D engine for canvas & SVG |
CSShake 1 | CSShake delivers exactly what it says on the box — a CSS library designed specifically for shaking elements within your web page |
Hover.css 1 | Hover.css is a CSS animation library designed for use with buttons and other UI elements in your website |
AniJS 2 | AniJS is an animation library that allows you to add animations to elements in a simple ‘sentence-like’ structure |
Animista 1 | CSS Animations On Demand |
Tachyons-animate | Tachyons itself is an atomic CSS library with a ton of utility classes for essentially designing anything by adding classes to what you need |
Sequence.js 1 | Sequence.js is a JavaScript library that provides a responsive CSS framework for creating unique sliders, presentations, banners, and other step-based applications |
Infinite 1 | These animations, like rotations and pulses, that are specifically designed to run and repeat forever |
OBNOXIOUS.CSS 1 | Animations for the strong of heart, and weak of mind |
MOTION UI | A Sass library for creating flexible CSS transitions and animations |
Keyframes.app 2 | A graphical user interface for generating custom CSS keyframe animations |
Javascript Animation Libraries
javascript animations libraries to build awesome animations for websites and applications
Greensock 6 | A JavaScript library for building high-performance animations that work in every major browser |
Velocity.js 5 | Velocity is an lightweight animation engine with the same API as jQuery’s $.animate() |
lax.js 2 | Simple & light weight vanilla javascript plugin to create smooth & beautiful animations when you scroll! |
Rellax.js 3 | A buttery smooth, super lightweight, vanilla javascript parallax library |
three.js 1 | An easy to use, lightweight, 3D library with a default WebGL renderer. |
wow.js 1 | Reveal Animations When You Scroll. |
chocolat.js 2 | Free lightbox plugin. |
Animate On Scroll 2 | Animate on scroll library to reveal animations when You scroll. |
Tilt.js 3 | A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for jQuery. |
Roughnotation | Rough Notation is a small JavaScript library to create and animate annotations on a web page |
tsParticles 2 | A lightweight library for creating particles, an improved version of the abandoned and obsolete particles.js |
Particles.js 2 | A lightweight JavaScript library for creating particles |
mo.js 2 | The motion graphics toolbelt for the web |
UI Components & Kits
Not quite “frameworks”, but tools for creating user interfaces with components or UI kits
TagFold 3 | Useful Bootstrap 4, HTML5, CSS3 Code Snippets to Build Web Layouts |
UILang 5 | A minimal, ui-focused programming language for web designers |
Medialoot CSS Components 1 | Calendars, price grids and other UI components |
Froala Design Blocks 1 | Over 170 responsive design blocks ready to be used in your web or mobile apps |
Material Design For Bootstrap 1 | Open source toolkit for building material design with Bootstrap |
Photonkit 2 | Desktop UI library for Electron |
Flat UI 1 | Minimal free user interface kit |
Shards 1 | A free and modern UI toolkit for web makers based on Bootstrap |
Creative Tim 3 | All types of UI libraries and kits including JS frameworks like React |
Brumm Shadow Maker | An online tool to make css shadows |
AdminLTE 2 | Best open source admin dashboard & control panel theme |
SpinKit | Simple CSS Spinners |
Epic Spinners 1 | CSS spinners collection with Vue.js integration. |
Loading.io 4 | Online service provider for creating simple animations, spinners, progress bar and more |
Moving Letters 2 | Animated Text with JavaScript and anime.js |
CSS Layout 2 | A collection of popular web layouts and patterns in pure CSS |
Codyhouse 2 | Kick-start your web projects with CodyHouse’s front-end framework and library of accessible HTML, CSS, JavaScript components |
Tailwind Starter Kit 2 | Tailwind Starter Kit a beautiful extension for TailwindCSS, Free and Open Source |
Tailwindtoolbox 3 | Open source starter templates and components, a plugins directory and useful tools/utilities to kick start your Tailwind CSS project. |
tailwindcomponents | A free repository for community components using TailwindCSS |
sweetalert | SweetAlert makes popup messages easy and pretty. |
sweetalert2 | A beautiful,responsive,customizable,accessible replacement for javascript’s popup boxes |
tailblocks | Open source ready-to-use Tailwind CSS components. |
Soft Components 1 | A set of framework-agnostic web components based on neumorphic design. |
Fast 4 | An interface system that can be used with modern Web Frameworks such as React, Vue and Angular. |
React UI
UI and component libraries for the React JavaScript framework
Material UI 6 | React components for faster and easier web development, based on Material Design |
Chakra UI 2 | Build accessible React apps & websites with speed. Openchakra 1 |
React Bootstrap 2 | Bootstrap rebuilt for React. Include Bootstrap components right in your JavaScript |
ui-playbook | The documented collection of UI components |
ReactStrap | Another Bootstrap UI library for React |
React Admin 1 | A frontend Framework for building admin applications. Supports API’s out of the box |
BlueprintJS | React-based UI toolkit for the web |
React Semantic UI | UI components based off of the Semantic UI framework |
Shards React | React UI kit featuring a modern design system with dozens of custom components |
React Virtualized 1 | UI set for data. Includes tables, lists, sorting, etc. |
React Toolbox 1 | Material design UI library for React |
Elastic UI | Distributes UI React components and static assets for use in building web layouts |
React Desktop | Desktop styled components in React. Includes MacOS and Windows based components |
Theme UI 1 | Build consistent, themeable React apps based on constraint-based design principles |
Onsen React | Distributes Components for hybrid mobile apps with React and Onsen UI |
Evergreen | Design system for React |
Rebass | React primitive UI components built with styled system |
Grommet | mobile first UI component library |
Rimble | React design kit, library and guides |
Landing Page Template 3 | Open source landing page template for react |
Elemental UI | A UI Toolkit for React.js Websites and Apps |
Ant Design 4 | Open source design React ui library. |
Bumbag 1 | Bumbag is a friendly React UI Kit suitable for MVPs or large-scale applications. |
PRIMEREACT | The ultimate collection of design-agnostic, flexible and accessible React UI Components |
Primer Components | Primer Components are React components which implement GitHub’s Primer Design System |
Orbit 2 | Design system and React UI components for travel projects. |
Base Web | Base Web provides a robust suite of components out of the box |
Backpack UI | Backpack is the Lonely Planet toolset that we use to build front end apps. |
Reaviz | Data visualization library for React based on D3 |
React Suite | A suite of React components, sensible UI design, and a friendly development experience. |
React Spring 1 | Spring-physics based animation library for React applications. |
Recharts | A composable charting library built on React components. |
Vercel UI 1 | Modern and minimalist React UI library |
Framer Motion | A React library to power production-ready animations. |
React Spectrum | A React implementation of Spectrum, Adobe’s design system. |
React tsParticles 2 | A lightweight React component for creating particles |
particles-bg 1 | A React particles animation background component |
Vue UI
UI and component libraries for the Vue JavaScript framework
Vuetify 1 | Material design component framework |
Bootstrap Vue | Use Bootstrap components with Vue |
Buefy | Lightweight UI components based on Bulma |
Semantic UI Vue | Semantic UI Vue is the Vue integration for Semantic UI |
Quasar | High-performance Material Design component suite with builders for SPA, SSR, PWA, Mobile (Cordova & Capacitor), Desktop (Electron) and Browser extensions |
Element | Desktop UI library for Vue |
Fish UI | Vue UI toolkit for the web |
Keen UI 1 | VueUI library with a simple API, inspired by Google’s Material Design |
Onsen Vue | Distributes Components for hybrid mobile apps with Vue and Onsen UI |
Vuejsexamples | A nice collection of useful vuejs UI components |
Inkline | Inkline is a modern UI/UX Framework for Vue.js designed for creating flawless responsive web applications |
Vuesax | Unique and reusable UI components |
Antdv | UI library for Vue based on Ant Design |
Shards Vue | A high-quality & free Vue UI kit featuring a modern design system with dozens of custom components |
Prime Vue | Powerful yet simple to use, versatile, performant Vue UI Component Library to help you build stunning user interfaces. |
Chakra UI Vue | Chakra UI is a simple modular and accessible component library that gives you the building blocks to build Vue applications with speed. |
View UI | Dozens of useful and beautiful Vue components made for people with all skill levels with extensive documentation. |
Particles.vue 2 | A lightweight Vue component for creating particles |
Angular UI
UI and component libraries for the Angular JavaScript framework
Material Angular 1 | UI library for Angular based on Material design |
NG Bootstrap | UI library for Angular based on the Bootstrap framework |
PrimeNG | Powerful UI component library for Angular |
Onsen Angular | Hybrid mobile and PWA UI library for Angular and Onsen UI |
NG Lightning | Native Angular components & directives for Lightning Design System |
NG Semantic | UI library for Angular based on Semantic UI |
Nebular | Customizable UI Kit, Auth & Security for Angular |
Alyle UI | Minimal components set for Angular |
NGX Bootstrap 1 | Another UI library for Angular based on the Bootstrap framework |
NG Zorro | UI library for Angular based on Ant Design |
Pagination for datatables | npm library for pagination |
Multi select dropdown | for multi select dropdowm in forms |
NG Particles 2 | A lightweight Angular component for creating particles |
Svelte UI
UI and component libraries for the Svelte Javascript compiler
Svelte Material UI 1 | UI library for Svelte based on Material Design |
SvelteStrap | UI library for Svelte based on the Bootstrap framework |
Svelte Flat UI | UI library for Svelte based on Flat Design |
Svelte Particles 2 | A lightweight Svelte component for creating particles |
Design Systems & Style Guides
Design systems, style guides, toolkits, docs. Some of these are design guides for top companies/websites
Material Design 5 | Google’s Material Design |
Ant Design 4 | Design system for enterprise-level products |
Apple Design Resources 1 | Guides and templates for using Apple design and UI |
Primer 1 | Design, build, and create with GitHub’s design system |
Alta UI 1 | Oracle’s design system and toolkit |
Pulse 2 | Design system, guides and React component library |
Bolt | Robust Twig and web component powered UI components |
Clarity Design System 1 | UX guidelines, HTML/CSS framework, and Angular components |
AtlasKit 1 | 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 1 | Guidelines and resources to create meaningful experiences for Infor’s products |
Lexicon 1 | An experience language for crafting beautiful UI |
Mailchimp UI/UX | Style guide and components from Mailchimp |
Marvel Style Guide 1 | Set of design principles and components |
Microsoft Fluent UI 1 | Collection of UX frameworks from Microsoft |
Pluralsight Design System | Design guide with components for designing with Pluralsight |
Polaris 1 | Design system that creates great experiences for all of Shopify’s merchants |
Mozilla Protocol 1 | Protocol is a design system for Mozilla and Firefox websites |
SendGrid Style Guide 1 | 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 1 | 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 1 | Gojek’s design language system. A collection of guidelines and components to create amazing user experiences. |
Laws of UX 1 | A collection of the key maxims that designers must consider when building user interfaces. |
Online Design Tools
All kinds of online tools for design, from photo editors to wireframing, and more
Figma 4 | Online graphic design tool (Free & paid options) |
Vectr 3 | Free vector graphics software |
Taler 2 | Create social media banner designs in minutes from hundreds of customizable templates |
Canva | Create beautiful designs (Free & Paid) |
Get Waves 3 | A free SVG wave generator to make unique SVG waves for web design |
Clippy 1 | 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 2 | Photo editor and design maker |
Pixlr 1 | Online photo editor |
Animoto Video Maker 1 | Make videos online |
RemoveBG 2 | Remove image backgrounds |
Photo Creator 1 | Create your own photos instead of searching for stock |
Visme 2 | Create presentations, infographics and more |
Infogram 1 | Create infograms |
ChartGo | Create charts and graphs online |
Cartoon Photo 2 | Turn photos into cartoons |
Logo Maker 3 | Create custom logos |
Whimsical | Wireframes, diagrams and more (4 free) |
Whiteboard 3 | Online drawing tool |
Octopus 1 | Sitemap builder |
CTA Button Maker 2 | Create call to action buttons |
Blobmaker 2 | Blobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes |
Personas 2 | A playful avatar generator for the modern age |
SoftUI 1 | A Soft UI (neumorphism) CSS generator |
Photopea | A Online Photoshop editor |
Excalidraw | Virtual whiteboard for sketching hand-drawn like diagrams |
Diagrams | Diagram software and Flowchart maker |
MapInSeconds | Simple way to visualize your data with a map |
Grid Malven 2 | A css grid cheatsheet to reference when creating a css grid |
Flex Malven 2 | A flexbox grid cheatsheet to reference when working with flexbox |
Smart Upscaler 1 | Upscale images by 2-4x resolution |
GetAvataaars 2 | Fun and Colorful free avatars web generator tool by Fang-Pen Lin using Pablo Stanley sketch library |
Big Heads 1 | Easily generate avatars for your projects with Big Heads by Robert Broersma. |
Webflow 2 | Break the code barrier, Build better business websites, faster. Without coding. |
Trace 2 | Instantly remove the background from your photos |
Neumorphism.io 1 | Generate Soft-UI CSS shadow code |
DB Designer | Design your database for free online |
Ui Bakery 4 | 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 1 | 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 |
Downloadable Design Software
Free software for UI, photo, 3d modeling, etc. Alternatives to paid software like Photoshop
Gimp 2 | Free & open source image editor similar to Photoshop |
Gravit Designer 2 | 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 1 | GUI prototyping software |
Inkscape | Powerful free design tool |
Adobe XD 2 | 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 1 | Free Photo Editor: For windows only |
Colorpicker 1 | Open Source colors software: Retrieve, manipulate and store your colors easely! |
Design Inspiration
Here are some websites to get inspiration for design and UI
Behance 4 | Design projects featured by different creators |
Dribbble 1 | Design projects featured by different creators |
Httpster 4 | Showcases websites made by people from all over the world |
Microcopy Inspirations 6 | Curated collection of UX writing examples, microcopy examples and copywriting examples |
Inspofinds 1 | Latest design work from designers and the design community |
Design Notes 1 | Free online resource library for product designers |
Land Book | Displays a large collection of websites to help find inspiration |
Frontend Mentor 4 | Real-world UI Challenges using HTML, CSS and Javascript |
Awwwards 3 | A website that rate and collects the best websites in the world in UI |
Codrops 1 | A website that collects the best UI ideas and patterns and make tutorials of it |
SaaS Landing Page 2 | Discover the best landing page examples created by top-class SaaS companies |
Pages.xyz 2 | Curate and discover the best designed web pages |
UI Movement 3 | UI Movement is a community of design enthusiasts who share and discuss the most interesting and unique UI designs |
lapa ninja 3 | Best landing page inspiration |
Freefrontend 2 | Free front end design from css html and javascript. latest work some design part |
Webframe | Discover and be inspired by beautiful webapp designs |
Collect UI 1 | Daily inspiration collected from daily ui archive and beyond. Hand picked, 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 1 | A site offering users a ton of company e-mails from customer service to marketing. |
Free Design Resource 2 | 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 1 | A site for web design inspiration, updated daily. |
NavNav 2 | Responsive navigation examples |
Calltoidea | Collection of different web Components for inspiration. |
MediaQueri.es 3 | A collection of inspirational websites using media queries and responsive web design |
Mulzli Search 2 | Search engine for design inspiration |
DeviantArt 1 | Access to 370 million pieces of art for inspiration. |
Image Compression
Websites that allow you to compress large images
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 1 | 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 1 | Resize Your Images Online |
EZGif 2 | Animated GIF maker and Image editor including Image optimization and supports WebP conversion |
OnlinePngtools 1 | Resize png for without losing transparent background. |
Others
Uncategorized Stuff
everysize.kibalabs.com 4 | Check your awesome responsive webpage looks great in every size |
Devhints.io 7 | This is a modest collection of cheatsheets on Internet |
The Web Toolbox 4 | A collection of handy, free-to-use tools for web developers, programmers and designers. |
WebDevTrick 2 | A famous blog for many amazing HTML, CSS, JQuery designs. |
css-tricks 2 | Free CSS tricks and some unique ideas for beginners and advanced |
Material Design Resizer 1 | An interactive viewer that helps designers test material design breakpoints across desktop, mobile, and tablet |
Nodesign.dev 4 | 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 Foramtter, Minifier, File Converter |
Tiny helpers 2 | A collection of free single-purpose online tools for web developers |
CSS Ribbon Generator 1 | This generator will assist in creating a pure CSS corner ribbon. |
Can I Use 1 | 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 2 | Most commonly used device resolutions including phones and tablets |
Codepen 3 | Build, test and discover frontend code. |
Responsively 3 | A tool for designers and frontend developers to design and debug their in all platforms with ease |
html2pdf.js 3 | 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 1 | Generate critical css for your web pages |
SVG Gobbler 1 | Browser extension to find SVGs on a webpage and download, copy to clipboard, or export as PNG. |
shortcode.dev 2 | A collection of useful snippets and code examples for HTML, CSS, JavaScript, Node, Artisan, Blade and more. |
PlayCode 3 | Javascript playground. |
All The Tags 1 | All HTML tags briefly explained. |
source: https://github.com/bradtraversy/design-resources-for-developers 81
'생활 IT Tip > 웹개발/웹디자인 리소스' 카테고리의 다른 글
[개발 Tip] 웹 개발 리소스 모음 All In One (0) | 2021.05.30 |
---|---|
[생활 IT TIP] 2021 디자인 리소스 공개 (0) | 2021.05.30 |
[생활 IT TIP] 인공지능 AI 도구 대규모 리소스 대방출! (0) | 2021.05.03 |
[API] Youtube Video 및 MP3 Converter API (0) | 2021.04.18 |
[API] 최고의 음성인식 API 10가지 리뷰 (1) | 2021.04.18 |