Winning Design Resource

Solutions to Common UI Challenges

Collection of Design Resources

🎉 All free or open source.

Note: Updated for 2022-2024+

Contents

1. Website Templates
2. Image Design & Editing
3. Fonts
4. Color Palettes
5. Animations
6. Photos
7. Illustrations & Icons
8. Website Hosting
9. Other Resources

Website Templates

• https://html5up.net
• Landing & Splash Pages (added 2021)
• https://www.creative-tim.com/templates/react-free
• https://csslayout.io/patterns

Image Design & Editing

Web-based graphics creation tools.

• Modyfi - Fully interactive collaborative animation suite!
• PhotoPea - Photoshopish Clone
• VectorInk
• Gravit Designer Now owned by Corel.
• Best Snip SVG Animator
• SVGo SVG Compressor Compression & optimization utility.
• Boxy SVG Requires Chrome/WebKit/Edge/Opera.

Fonts

• FontSource
• Google fonts: https://fonts.google.com/
• The Stocks: http://thestocks.im/ (includes fonts, icons, etc.)
• FontPair: https://fontpair.co/fonts/

Color Palettes

• Adobe: https://color.adobe.com/create/color-wheel/
• Color Hunt: https://colorhunt.co/
• Coolers: https://coolors.co/

Animations

• Hover.css: http://ianlunn.github.io/Hover/
• Animate.css: https://daneden.github.io/animate.css/
• Anime.js: https://animejs.com/
• magic.css: https://www.minimamente.com/project/magic/
• bounce.js: http://bouncejs.com/
• Green Sock: https://greensock.com/gsap
• Hamburger Menu Animations: https://github.com/jonsuh/hamburgers

Photos

• Unsplash: https://unsplash.com/
• Pexels: https://www.pexels.com/
• The Stocks: http://thestocks.im/ (includes fonts, icons, etc.)
• CSS Clips: https://bennettfeely.com/clippy/
• WoC in Tech Chat: https://www.flickr.com/photos/wocintechchat/

Illustrations & Icons

• https://simpleicons.org/ - Over 3,000 brand icons. (2024)
• https://icomoon.io/app/#/select - easily export custom SVG & PNG sets (2021, 2023)
• https://thenounproject.com - Icons and Photos For Everything. (2023)
• https://iconoir.com - Over 1,000 free SVG icons. (2022)
• https://react-kawaii.vercel.app/#/Components - Cartoon SVG components.
• https://www.svgrepo.com/ (2021-02)
• https://isometric.online/ (added 2021)
• https://icons8.com/illustrations (added 2021)
• https://www.manypixels.co/gallery/ (added 2021)
• https://www.drawkit.io/free (added 2021)
• https://illlustrations.co/ (added 2021)
• https://generator.opendoodles.com/ (added 2020)
• Humaaans: https://www.humaaans.com/ (added 2020)
• Vecteezy: https://www.vecteezy.com/ (added 2022)
• Font Awesome: https://fontawesome.com/v6/search?o=r&m=free
• Undraw: https://undraw.co/illustrations - you can change the color on these illustrations to match your color palettes!

Website Hosting

• https://render.com/ (2023)
• https://www.netlify.com/
• https://pages.github.com/
• https://zeit.co/now
• https://surge.sh/

Other Resources

• http://codingheroes.io/resources/
• http://thestocks.im/ (includes fonts, icons, etc.)
• https://pixlr.com/x/ (online image editor)
• Shadow Designer - CSS