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
- Refactoring UI Videos Show archive.org snapshot
- Refactoring UI Book
- Refactoring UI Chapter Color Palette Show archive.org snapshot
- Refactoring UI Chapter Line Height Show archive.org snapshot
- Laws of UX is a collection of the maxims and principles that designers can consider when building user interfaces Show archive.org snapshot
- 50 UI Tips Show archive.org snapshot
- https://bootcamp.uxdesign.cc/the-self-taught-ui-ux-designer-roadmap-in-2021-aa0f5b62cecb Show archive.org snapshot
- https://anthonyhobday.com/sideprojects/saferules/ Show archive.org snapshot
CSS frameworks
More at https://github.com/troxler/awesome-css-frameworks Show archive.org snapshot .
Drawing tools
- Sketch Show archive.org snapshot
- Figma Show archive.org snapshot
- Axure RP Show archive.org snapshot
- tldraw Show archive.org snapshot
Presentation Graphics Tools
Picture tools
- Desktop Screenshot Show archive.org snapshot
- Isoflow: Cloud diagram Designer Show archive.org snapshot
- Skeletonreact: SVG placeholder generator Show archive.org snapshot
- Fancy border radius Show archive.org snapshot
- Code Screenshot ray.so Show archive.org snapshot
- Code Screenshot carbon.now Show archive.org snapshot
Image converters
- https://squoosh.app/ Show archive.org snapshot can convert to webp
convertcli command
Icon sets
Articles / Discussion Font vs. SVG:
- https://news.ycombinator.com/item?id=26326599 Show archive.org snapshot
- https://github.blog/2016-02-22-delivering-octicons-with-svg/ Show archive.org snapshot
Search over multiple open source icon sets: https://iconduck.com/ Show archive.org snapshot or https://www.svgrepo.com/ Show archive.org snapshot
- AntDesign Show archive.org snapshot
- Basic icons Show archive.org snapshot
- Bootstrap Icons Show archive.org snapshot
- Entypo Show archive.org snapshot
- EvilIcons Show archive.org snapshot
- Feather Show archive.org snapshot
- Fontawesome Show archive.org snapshot
- Fontisto Show archive.org snapshot
- Foundation Show archive.org snapshot
- Github Icons Octicons Show archive.org snapshot
- Heroicons Show archive.org snapshot
- Ionicons Show archive.org snapshot
- Line Awesome Show archive.org snapshot
- Material Icons Show archive.org snapshot
- MaterialCommunityIcons Show archive.org snapshot
- MaterialIcons Show archive.org snapshot
- SimpleLineIcons Show archive.org snapshot
- Streamline Show archive.org snapshot
- Tabler Icons Show archive.org snapshot
- Tetrisly Show archive.org snapshot
- Useiconic SVG Show archive.org snapshot
- UIKit Show archive.org snapshot
- Zocial Show archive.org snapshot
- Zondicons Show archive.org snapshot
- Thenounproject Show archive.org snapshot
- Phosphoricons Show archive.org snapshot
- Iconoir Show archive.org snapshot
- Icones Show archive.org snapshot
- Atlasicons 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
Images & Videos
- Unsplash stock images Show archive.org snapshot
- Mixkit stock videos Show archive.org snapshot
- Distill Show archive.org snapshot
- Pixelmob Show archive.org snapshot
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 Show archive.org snapshot
- 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
Example CIs
Analyzers
- CSS stats Show archive.org snapshot analyzes a website for colors, fonts and more