Loadding..

Design Resources For Developers

Design Resources For Developers

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

Website                           Description
UI Design DailyAwesome UI Components of all types
100 Daily UIFree Figma library of products, elements, and screens.
Sketch App SourcesSketch UIs, wireframes, icons and much more
HumaaansCool illustrations of people with the ability to mix and match
PaaatternsFree collection of beautiful patterns for all vector formats
Drawkit.ioIllustrations for designers and startups
Undraw.coOpen-source illustrations for any idea you can imagine and create.
Open PeepsHand drawn illustration library
UI SpaceThousands of great UI freebies
animations.coBeautiful, customizable animated GIF icons
UplabsHigh-quality design resources (Free & Premium)
InvisionAppLibrary of free, high-quality UI kits, icon packs, and mockups.
Speckyboy ArticleThe 10 most popular open source frontend web UI kits

Fonts

Websites that offer free fonts as well as font based tools

Website                           Description
Google FontsLibrary of around 1000 free licensed font families
DaFontArchive of freely downloadable fonts
Use & ModifyPersonal selection of beautiful, classy, punk, professional, incomplete, weird typefaces
1001 Free FontsI think the name speaks for itself 😏
Font SquirrelFont Squirrel scours the internet for high quality, legitimately free fonts
Font FabricA digital type foundry crafting retail fonts and custom typography for various brands
What FontTool for finding the fonts of a website without having to search in the devtools
TiffA type diff tool that visually contrasts the differences between two fonts.
Font FlameTool for pairing fonts to see how they look together
FontJoyFont pairing generator
TypeKit PracticeLearn about typography practices
Golden RatioGolden Ratio Typography Calculator

Icons

Resources for Icons including font based, png, svg and more

Website                           Description
Font AwesomeThe web’s most popular icon set and toolkit.
Material IconsMaterial design icon library
Shapedfonts Iconclub8000+ free icons
Feather IconsBeautiful, customizable open source icons
Tabler Icons470+ highly customizable open source SVG icons
Simple Icons1307 Free SVG icons for popular brands
Zurb Foundation IconsCustomizable Foundation icons
Linear Icons1000+ Ultra crisp vector icons
Entypo411 carefully crafted premium pictograms by Daniel Bruce
Icons8Free icons, photos, vectors and tools
Flat IconThe largest database of free icons in PNG, SVG, EPS, PSD and BASE 64 formats.
The Noun ProjectOver 2 Million curated icons, created by a global community
IconsoutFree Download Icons illustrations stock photos at one place.
Colors & FontsA curated library of colors, fonts and resources.
icon-icons.comFree Icons PNG, ICO, ICNS and Vector file SVG.
Bootstrap IconsFree Icons built for Bootstrap but they’ll work in any project.

Stock Photos

Websites that offer free stock photos of all kinds for your websites and apps

Website                           Description
PexelsFree stock photos shared by talented creators
UnsplashThe internet’s source of freely usable images
PixabayOver 1.7 million+ high quality stock images and videos
MagdeleineGallery & free high res photo everyday
PicspreeRoyalty free images, stock photos, illustrations, and vectors
BurstFree stock photos collections
Life of PixFree high resolution photography
Stock SnapHundreds of high quality photos added weekly
MorguefileOver 350,000 free stock photos for commercial use
Kaboom PicsStock photography and color palletes. Good for product images
New Old StockStock vintage photos
Pic JumboGood collections of different types of photos
Public Domain PicturesPublic domain images of all types
Find A PhotoSearches multiple stock photo websites
StockvaultCategorized stock photos

Stock Videos

Websites that offer free stock videos of all kinds for your websites and apps

Website                           Description
Coverr.coBeautiful free stock video footage
VideezyFree HD stock footage & 4K videos
Mix KitStock video clips & music
Life Of VidsFree video clips and loops
VidevoFree and premium stock videos

Vectors & Clip Art

Free vectors, clipart, illustrations, patterns and more

Website                           Description
VecteezyFind and download free vector art
FreepikFree vectors, stock photos, PSD and icons
Free VectorsCommunity of vector lovers who share free vector graphics
PNGTreepng, backgrounds, templates, text effects
Vector4FreeFree vector graphics
Retro VectorsVintage vectors and graphics
FreebleVectors, patterns, mockups and more
LukaszadamFree Vector atrworks
IlllustrationsBeautiful 100 Illustrations – png, svg

Product and Image Mockups

Create mockups of devices and other products

Website                           Description
Smart MockupsCreate stunning product mockups (free & premium)
Shot SnapCreate beautiful device mockup images for your app or website design
ScreelyInstantly turn your screenshot into a mockup
Screen PeakCreate a mockup from a URL
Mockup WolrdThe biggest source of free photo-realistic Mockups online
Collab ShotReal-time screen grabs and image sharing

HTML CSS Templates

Websites that offer free beautiful website templates and themes of all types

Website                           Description
HTML5UpVery modern, unique responsive HTML5/CSS3 themes
TemplatemoMinimal, resume, gallery themes and more
Templated.coTons of minimalistic HTML5/CSS3 themes
FreeHTML5Free & premium HTML5 and Bootstrap themes
StyleShoutBrilliantly crafted free website templates
Start BootstrapBootstrap starter themes
ZerothemeHTML5, Bootstrap, Prestashop templates
HTML5xCSS3Collection of wonderful templates in different categories
ColorlibAlmost any category of theme you can think of
Free CSSHuge collection of free templates
HubspotTemplates, infographics, banners and much more
MobiriseGreat looking HTML5/CSS3 templates
BootswatchFree themes for Bootstrap
OnepageloveOne page websites, templates and resources

CSS Frameworks

CSS/UI frameworks to help build great looking websites and applications

Website                           Description
Tailwind CSSLow level, utility-first framework
BootstrapPopular UI framework with tons of components that use both CSS and JS
MaterializeA modern responsive front-end framework based on Material Design
Material Design LiteLight framework based on Material Design. No JS dependency
BulmaModern CSS framework with no JS
SkeletonExtremely light framework for basic UI elements
Semantic UIEmpowers designers and developers by creating a shared vocabulary for UI.
FoundationMobile first framework with clean markup
Pure CSSA set of small, responsive CSS modules
UIKitLightweight and modular front-end framework
SusyLightweight, grid-layout engine for Sass
Milligram.ioMinimalist CSS framework
Vanilla FrameworkSimple, extensible CSS framework written in Sass
Spectre CSSLightweight, modern CSS framework
Picnic CSSLightweight and beautiful library
WingA beautiful CSS framework designed for minimalists.
ChotaA micro (~3kb) CSS framework.
Blueprint CSSA lightweight layout library for building great responsive mobile first UIs that work everywhere.

UI Components and Kits

Not quite “frameworks”, but tools for creating user interfaces with comoponents or UI kits

Website                           Description
UILanga minimal, ui-focused programming language for web designers
Medialoot CSS ComponentsCalendars, price grids and other UI components
Froala Design BlocksOver 170 responsive design blocks ready to be used in your web or mobile apps
Material Design For BootstrapOpen source toolkit for building material design with Bootstrap
PhotonkitDesktop UI library for Electron
Flat UIMinimal free user interface kit
ShardsA free and modern UI toolkit for web makers based on Bootstrap.
Creative TimAll types of UI libraries and kits including JS frameworks like React
Brumm Shadow MakerAn online tool to make css shadows

React UI

UI and component libraries for the React JavaScript framework

Website                           Description
Material UIReact components for faster and easier web development, based on Material Design
Chakra UIBuild accessible React apps & websites with speed. Openchakra
React BootstrapBootstrap rebuilt for React. Include Bootstrap components right in your JavaScript
ReactStrapAnother Bootstrap UI library for React
React AdminA frontend Framework for building admin applications. Supports API’s out of the box
BlueprintJSReact-based UI toolkit for the web
React Semantic UIUI components based off of the Semantic UI framework
Shards ReactReact UI kit featuring a modern design system with dozens of custom components.
React VirtualizedUI set for data. Includes tables, lists, sorting, etc
React ToolboxMaterial design UI library for React
Elastic UIDistributes UI React components and static assets for use in building web layouts
React DesktopDesktop styled components in React. Includes MacOS and Windows based components
Onsen ReactDistributes Components for hybrid mobile apps with React and Onsen UI
EvergreenDesign system for React
RebassReact primitive UI components built with styled system
Grommetmobile first UI component library
RimbleReact design kit, library and guides
Landing Page TemplateOpen source landing page template for react

Vue UI

UI and component libraries for the Vue JavaScript framework

Website                           Description
VuetifyMaterial design component framework
Bootstrap VueUse Bootstrap components with Vue
BuefyLightweight UI components based on Bulma
QuasarBuild high-performance VueJS user interfaces in record time
ElementDesktop UI library for Vue
Fish UIVue UI toolkit for the web
Keen UIVueUI library with a simple API, inspired by Google’s Material Design
vuejsexamplesA nice collection of useful vuejs UI components

Angular UI

UI and component libraries for the Angular JavaScript framework

Website                           Description
Material AngularUI library for Angular based on Material design
NG BootstrapUI library for Angular based on the Bootstrap framework
PrimeNGPowerful UI component library for Angular
Onsen AngularHybrid mobile and PWA UI library for Angular and Onsen UI
NG LightningNative Angular components & directives for Lightning Design System
NG SemanticUI library for Angular based on Semantic UI

Design Systems and Style Guides

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

Website                           Description
Material DesignGoogle’s Material Design
Ant DesignDesign system for enterprise-level products
Apple Design ResourcesGuides and templates for using Apple design and UI
Alta UIOracle’s design system and toolkit
PulseDesign system, guides and React component library
BoltRobust Twig and web component powered UI components
Clarity Design SystemUX guidelines, HTML/CSS framework, and Angular components
AtlasKitAtlassian’s official UI library, built according to the Atlassian Design Guidelines
Audi Design ResourcesAudi UI design system and toolkit
Carbon Design SystemsCarbon is IBM’s open-source design system for products and experiences
Yelp Style GuideYelp style guide, components and toolkit
CometScalable design system of visual language, components, and design assets
ETrade Design SystemGuides and toolkits that blend finance with simplicity and ease of use
Fundamental LibraryOpen source and community driven project for consistent user interfaces
Infor DesignGuidelines and resources to create meaningful experiences for Infor’s products
LexiconAn experience language for crafting beautiful UI
Mailchimp UI/UXStyle guide and components from Mailchimp
Marvel Style GuideSet of design principles and components
Microsoft Fluent UICollection of UX frameworks from Microsoft
Pluralsight Design SystemDesign guide with components for designing with Pluralsight
Mozilla ProtocolProtocol is a design system for Mozilla and Firefox websites
SendGrid Style GuideUI library for developing consistent UI/UX at SendGrid.
VTEX StyleguideReusable patterns, components and assets related to product design in VTEX
RizzoStyle guide with UI components, JS components, widgets, etc

Online Design Tools

All kinds of online tools for design, from photo editors to wireframing, color generators and more

Website                           Description
FigmaOnline graphic design tool (Free & paid options)
VectrFree vector graphics software
CanvaCreate beautiful designs (Free & Paid)
Wireframe.ccWireframing tool (free & paid)
FotorPhoto editor and design maker
Animoto Video MakerMake videos online
RemoveBGRemove image backgrounds
Photo CreatorCreate your own photos instead of searching for stock
VismeCreate presentations, infographics and more
InfogramCreate infograms
ChartGoCreate charts and graphs online
Cartoon PhotoTurn photos into cartoons
ColorsColor schemes generator
ColorSpaceGenerate nice color palettes from one color
Adobe ColorCreate color palettes, extract gradients from images, etc.
Logo MakerCreate custom logos
WhimsicalWireframes, diagrams and more (4 free)
WhiteboardOnline drawing tool
OctopusSitemap builder
Favicon GeneratorGenerate favicon ico files for your website
CTA Button MakerCreate call to action buttons
BlobmakerBlobmaker is a free generative design tool, to help you quickly create random, unique, and organic-looking SVG shapes.
PersonasA playful avatar generator for the modern age.
SoftUIA Soft UI (neumorphism) CSS generator.
PhotopeaA Online Photoshop editor.
SquooshReduce photo size and convert to modern formats.
MapInSecondsSimple way to visualize your data with a map.
ColorsinspoAll in one resource for finding everything about colors.

Downloadable Design Software

Free software for UI, photo, 3d modeling, etc. Alternatives to paid software like Photoshop

Website                           Description
GimpFree & open source image editor similar to Photoshop
Gravit DesignerFree full-featured vector graphic design app that works on ALL platforms.
BlenderOpen source, free animation, 3D modeling, etc
Raw TherapeeCross-platform raw image processing program
Be FunkyOnline design program
KritaSketching and painting program designed for digital artists
Pencil ProjectGui prototyping software
InkscapePowerful free design tool

Design Inspiration

Here are some websites to get inspiration for design and UI

Website                           Description
BehanceDesign projects featured by different creators
DribbleDesign projects featured by different creators
HttpsterShowcases websites made by people from all over the world
Microcopy InspirationsCurated collection of ux writing examples, microcopy examples and copywriting examples
InspofindsLatest design work from designers and the design community.
Design NotesFree online resource library for product designers
NamelixGenerate brandable business names and logos
Land BookDisplays a large collection of websites to help find inspiration.
Frontend MentorReal word UI Challenges using HTML, CSS and Javascript
awwwardsA web site that rate and collects the best websites in the world in UI
codropsA web site that collects the best UI ideas and patterns and make tutorials of it
Adobe TrendsDiscover current color trends in different industries from the creative communities on Behance and Adobe Stock.

Print
Image

enqtran

I'm enqtran - A coder and blogger :) [email protected]