DEV Community

Cover image for 70 Design Resources for Developers
Moemin Mamdouh 👨‍💻 for Codewell

Posted on

70 Design Resources for Developers

Be sure to subscribe to Codewell's Newsletter or follow us on Twitter for more awesome resources like this!

Colors

  • ColorHunt: Free and open platform for color inspiration with thousands of trendy hand-picked color palettes

  • Coolors: Create the perfect palette or get inspired by thousands of beautiful color schemes.

  • Color Inspo: Thousands of beautiful color palettes you can use it directly by one click.

  • Grabient: Beautiful and simple UI for generating web gradients.

  • Khroma:Khroma uses AI to learn which colors you like and creates limitless palettes for you to discover, search, and save.

  • Pigment:A unique way to generate fresh and vibrant colors based on lighting and pigment, instead of math. Find a beautiful, free color palette in seconds to kick off your next project.

Illustrations

  • Blush: Easily create and customize stunning illustrations with collections made by artists across the globe.

  • Open Peeps: A hand-drawn illustration library.

  • Avataaars: Create avatar illustrations in Sketch App with this free library. Combine clothes, hair, emotions, accesories, and colors.

  • Open Doodles: A Free Set of Sketchy Illustrations.

  • Lukaszadam: MIT licensed SVG illustration images in different shapes & styles. Completely free for commercial projects - no attribution required. Open Source Illustrations.

  • Pixeltrue: Free SVG Illustrations AND Lottie Animations are available for free for personal and commercial use (MIT License).

  • Uplabs: UpLabs is the place to find high-quality design resources for designers, creative agencies and developers.

  • Humaaans: Mix-&-match illustrations of people with a design library

  • unDraw: Open-source illustrations for any idea you can imagine and create.

  • Charco: A set of 16 handcrafted illustrations for your web & app projects. This set includes categories like 404 error, no internet connection, no service, fatal error, page not found, something went wrong, under construction and many more.

  • Ouch!: Ouch helps creators unable to draw overcome the lack of quality graphics. Download free PNG and SVG illustrations from top Dribbble artists to enhance your product.

Learning Design

  • Growth Design: Growth & UX case studies in a comic book format. Improve your product skills with real-world examples.

  • Design Better: DesignBetter.Co is the essential guide to the best design practices from top design experts. Learn how to build a world-class design organization and more.

  • ReallyGoodUX: Screenshots and examples of great UX from real mobile and web products. Discover the best UX examples—including onboarding tours and walkthroughs, new feature and rebrand announcements, UX copywriting, signup flows

  • Laws Of UX: A collection of the maxims and principles that designers can consider when building user interfaces.

  • Checklist Design: A collection of the best design practices.

  • NN/g: Provides research-based UX guidance, by studying users around the world.

  • DesignerUp: An ecosystem of product design resources to help you become a more mindful designer and create better products.

Inspiration

  • Mobbin: A hand-picked collection of the latest mobile design patterns from apps that reflect the best in design. Get inspiration from over 250 iOS apps and 25,000 patterns (screenshots from iPhone 12) available on the platform. Sign up to save your favorite patterns.

  • Onepagelove: One Page website design gallery showcasing the best Single Page websites, templates and resources.

  • Landingfolio: Landingfolio features the best landing page inspiration, templates, resources and examples on the web.

  • Landbook: Design gallery with the best and most carefully collected websites. We help creatives find inspiration & motivation to do rad stuff.

Images & Videos

  • Mixkit: Awesome Stock Video Clips, Stock Music, Sound Effects & Video Templates. All available for free!

  • Pexels: Free stock photos you can use everywhere. ✓ Free for commercial use ✓ No attribution required.

  • Unsplash: The internet’s source of freely-usable images. Powered by creators everywhere.

  • Burst: Browse thousands of beautiful copyright-free images. All our pictures are free to download for personal and commercial use, no attribution required.

  • Coverr: Beautiful Free Stock Video Footage.

Accessibility

  • Contrast Checker: The Lightness slider can be used to adjust the selected color. WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

  • The A11Y Project: The A11Y Project is a community-driven effort to make digital accessibility easier.

  • WhoCanUse: It's a tool that brings attention and understanding to how color contrast can affect different people with visual impairments.

  • ColorBox: Create amazing color sets superfast.

  • ColorOracle: Color Oracle is a free color blindness simulator for Windows, Mac and Linux.

Icons

  • Icons8: Icons, illustrations, photos, music, and design tools

  • Flat Icon: Icons for use.

  • The Noun Project: Icons and Photos For Everything

  • Iconscout: Free Download Icons illustrations stock photos at one place

  • Iconmonstr: Discover 4496+ free icons in 313 collections

  • Feather Icons: Beautiful, customizable open source icons

  • Iconfinder: Free and premium vector icons in SVG, PNG, CSH and AI format

  • Heroicons: Free, open source icons from the creators of Tailwind CSS.

Fonts

  • Google Fonts: Library of around 1000 free licensed font families

  • DaFont: Archive of freely downloadable fonts

  • FF Fonts: 100,000+ Free Fonts

  • Dev Fonts: Find and use the coding fonts for free

Design Software

  • Adobe XD: Share your story with designs that look and feel like the real thing. Wireframe, animate, prototype, collaborate, and more — it’s all right here, all in one UI/UX design tool.

  • Figma: Figma is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows.

  • ProtoPie: Don’t let a good idea stay just an idea. ProtoPie is the most intuitive way to prototype and perfect them.

  • Principle: Principle makes it easy to design animated and interactive user interfaces. Whether you're designing the flow of a multi-screen app, or new interactions and animations, Principle helps you create designs that look and feel amazing.

  • Invision Studio: Free screen designing tool from InVision

  • Framer: Framer is an all-in-one tool that helps teams design every part of the product experience. Start in Framer and get to a functional prototype faster than ever—no code required.

Design Resources

  • Mockup World: The best free Mockups from the Web

  • Freebiesbug: Hand-picked resources for web designer and developers, constantly updated.

  • UI8: 4,745 curated design resources to energize your creative workflow

  • UI Bundle: Discover 535 free design assets for designers and developers

  • Uplabs: Unlimited UI Kits, Icons, Templates, and much more.

  • Original Mockups: Free PSD Mockup Templates

Design Articles & News

  • UX Collective: We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design.

  • Sidebar: The five best design links, every weekday.

  • Designer News: Designer News is where the design community meets.

  • UX Movement: A publication of articles to teach you how to design interfaces that provide an intuitive user experience.

  • Another Design: It includes inspiring work, cool typefaces, people to follow, news to read, tools to try, jobs, and other delicious spam. If you're into that stuff, subscribe!

Books

  • The Lean Startup: How Today's Entrepreneurs Use Continuous Innovation to Create Radically Successful Businesses

  • Don't Make Me Think: A Common Sense Approach to Web Usability (Voices That Matter)

  • Refactoring UI: Learn how to design beautiful user interfaces by yourself using specific tactics explained from a developer's point-of-view.

Oldest comments (4)

Collapse
 
imahmoud profile image
Mahmoud Ibrahiam

Thank you 💗💗,

You can add Darker in color section, it's tool to generate shades and tints

Collapse
 
guillaumebern profile image
Guillaume Bernier

My partner and I just released a brand new open source icon library that works with different frameworks like React, Vue and Svelte. You can find additional features on Circum Icons to make the integration easier, like building arrays, copy individual component tag, etc.

If you want something more unique and less popular! 😊
Let me know if you have any suggestions or improvements that we should do.

Collapse
 
guillaumebern profile image
Guillaume Bernier

You should also take a look at Penpot as an alternative to Figma

Collapse
 
learnwithshakib profile image
Md shakib ahmed

It is actually quite helpful and beneficial to have a few free examples on hand. I have found UIHUT to be useful. I use it for web design and graphic design projects

UIHUT, The most powerful and largest design resources platform. Over 20,000 UI KITs across all categories such as Web Template, Illustrations, 3D Assets, Web App, Icon, Dashboards, and so much more. Components for every single product design need.