A collection of useful design resources for developers

This collection contains some useful design resources for developers. Many of them were mentioned in the Refactoring UI tutorials.

Tutorials

CSS frameworks

More at https://github.com/troxler/awesome-css-frameworks Show archive.org snapshot .

Drawing tools

Presentation Graphics Tools

Desktop Screenshot with screely Show archive.org snapshot

Picture tools

Image converters

https://squoosh.app/ Show archive.org snapshot can convert to webp
convert cli command

Icon sets

Articles / Discussion Font vs. SVG:

Search over multiple open source icon sets: https://iconduck.com/ Show archive.org snapshot or https://www.svgrepo.com/ Show archive.org snapshot

Fonts

Filter fonts with Adobe fonts Show archive.org snapshot (formerly Typekit)
Check out how a font will look like with Fonts In Use Show archive.org snapshot
Free fonts https://fonts.google.com/ Show archive.org snapshot
Built-in fonts https://modernfontstacks.com/ Show archive.org snapshot

Patterns

Illustrations

freeillustrations Show archive.org snapshot
https://www.humaaans.com/ Show archive.org snapshot
https://undraw.co/ Show archive.org snapshot
https://www.opendoodles.com/ Show archive.org snapshot
[https://iradesign.io/](https://iradesign.io/]

Colors

Tailwindcss Color Palette Show archive.org snapshot
Duotone background images Show archive.org snapshot
Sorted CSS colors Show archive.org snapshot
CSS Gradient Show archive.org snapshot
[Alert colors] (https://anice.red/)
Hue Show archive.org snapshot
coolors Show archive.org snapshot
supercolorpalette Show archive.org snapshot
uchu.style Show archive.org snapshot

Images & Videos

Collection of other designs

Filter web designs by color, topic and tags (e.g. contact form) with Dribbble Show archive.org snapshot
Filter existing web designs by topic with land-book Show archive.org snapshot
Filter existing web designs by topic with Webframe Show archive.org snapshot
Filter existing web designs by topic with Landingfolio Show archive.org snapshot
Filter existing web designs by topic with SaaS Websites Show archive.org snapshot
Filter existing web designs by topic with Lookup Design Show archive.org snapshot
Filter existing web designs by topic with Hyperpixel Show archive.org snapshot
Filter existing web designs by topic and components with Nicelydone Show archive.org snapshot
Filter existing web designs by topic with Land Book Show archive.org snapshot
Filter existing web designs by topic with One page love Show archive.org snapshot
List of explorable Bootstrap designs Show archive.org snapshot
A checklist for design components Checklist Design Show archive.org snapshot
Tailwind UI components Show archive.org snapshot
saaspages.xyz Show archive.org snapshot
adpages.xyz Show archive.org snapshot
cyrillic.design
siteinspire.com Show archive.org snapshot
designmadeingermany.de Show archive.org snapshot
responsive-jp.com Show archive.org snapshot
mobbin.design Show archive.org snapshot
thegallery.io Show archive.org snapshot
lapa.ninja Show archive.org snapshot
maxibestof.one Show archive.org snapshot
httpster.net Show archive.org snapshot
designmunk.com Show archive.org snapshot
reallygoodux.io Show archive.org snapshot
The component section of Refactoring UI
loop Show archive.org snapshot
daisyui Show archive.org snapshot
tabler Bootstrap component extensions Show archive.org snapshot
https://shoelace.style/components Show archive.org snapshot
https://ui.shadcn.com/ Show archive.org snapshot

Example CIs

makandra

Analyzers

CSS stats Show archive.org snapshot analyzes a website for colors, fonts and more

CSS

Emanuel

makandra.com

Say thanks6

Last edit

2025-07-28

Emanuel

Keywords

developers, programmers, ui, kit, developer

License

Source code in this card is licensed under the MIT License.

Posted by Emanuel to makandra dev (2019-10-15 05:43)