Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mscompsci/super-cool-design-resources

A collection of super cool design tools and websites
https://github.com/mscompsci/super-cool-design-resources

design development guides tools ui ux

Last synced: 4 days ago
JSON representation

A collection of super cool design tools and websites

Awesome Lists containing this project

README 

        
# 😎 Super Cool Design Resources



A collection of super cool design and development tools/resources



Everything in this guide is free btw



## ♿ Accessibility



### Colors



- [WhoCanUse color checker](https://www.whocanuse.com/)



### Documents



- [PAVE PDF accessibility tool](https://pave-pdf.org/?lang=en)



### Development

- [ARIA Authoring Practices Guide UI Component Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/)



### Icons



- [Fontawesome icon accessibility](https://docs.fontawesome.com/v5/web/other-topics/accessibility)



### Website Testing



- [WAVE browser plugin](https://wave.webaim.org/extension/)



## 🎨 Colors



### Tools and Generators



- [Coolors pallet generator](https://coolors.co/)



## 📐 Design



### UX Resources



- [Laws of UX](https://lawsofux.com/)

- [Daily UI Challenge](https://www.dailyui.co/)

- [UX Project Checklist](https://www.ux-checklist.com/)



### Tools

- [Blender](https://www.blender.org/)

- [Figma](https://www.figma.com/)

- [Miro](https://miro.com/)



#### Plugins



- [Clay Mockups 3D](https://www.figma.com/community/plugin/819335598581469537)

- [Iconify icons](https://www.figma.com/community/plugin/735098390272716381)

- [Maze user testing integration](https://maze.co/integrations/figma/)



## 📜 Text and Fonts



### Font Libraries



- [Google Fonts](https://fonts.google.com/)

- [Fontsource Library](https://fontsource.org/)



### Tools



- [Fontjoy type comparer](https://fontjoy.com/)



### Notices



- [FreePrivacyPolicy privacy and copyright notices](https://www.freeprivacypolicy.com/blog/sample-copyright-notice/)



### Markdown



- [Markdown Guide](https://gist.github.com/rxaviers/7360908)

- [GitHub supported emojis](https://gist.github.com/rxaviers/7360908)



## 🖼️ Icons and Images



### Editors and Generators



#### Online



- [Base64 image encoder](https://www.base64-image.de/)

- [Canva](https://www.canva.com/)

- [Icons8](https://icons8.com/)

- [x-icon editor](https://www.xiconeditor.com/)

- [Text to ACII art generator](https://www.patorjk.com/software/taag)



#### Desktop



- [GIMP (GNU Image Manipulation Program)](https://www.gimp.org/)

- [Inkscape](https://inkscape.org/)



### Icon Libraries



- [Fontawesome icons](https://origin.fontawesome.com/icons)

- [Hero icons](https://heroicons.com/)

- [Lucide icons](https://lucide.dev/icons/)

- [Skill Icons](https://skillicons.dev/)

- [Iconify icon search](https://icon-sets.iconify.design/)

- [Framework7 icons](https://framework7.io/icons/)



### Image Libraries (Free Use)



- [British Library public domain images](https://www.flickr.com/photos/britishlibrary/albums/)

- [Pexels](https://www.pexels.com/)

- [Pixabay](https://pixabay.com/)

- [Unsplash](https://unsplash.com/)



## 💻 Web Development



### CSS and Tailwind CSS



#### Animation



- [Animista animation preview](https://animista.net/play)

- [cubic-bezier](https://cubic-bezier.com/#.17,.67,.83,.67)

- [Keyframes app](https://keyframes.app/animate)

- [Transition.css](https://www.transition.style/)

- [Wait! Animate](https://waitanimate.wstone.uk/)



#### Backgrounds and Patterns



- [Hero Patterns](https://heropatterns.com/)

- [Haikei SVG generator](https://app.haikei.app/)

- [Doodad patterns](https://doodad.dev/pattern-generator/)



#### Calculators and Generators



- [Clippy CSS clip-path generator](https://bennettfeely.com/clippy/)

- [Fancy Border Radius](https://9elements.github.io/fancy-border-radius/)

- [Quantity Queries](https://quantityqueries.com/)



#### Colors, Shadows, and Gradients



- [Smooth Shadow](https://shadows.brumm.af/)

- [Tailwindcss color reference](https://uicolors.app/browse/tailwind-colors)

- [Tailwindcss Gradient Generator](https://www.creative-tim.com/twcomponents/gradient-generator/)



#### Effects



- [CSS Filters](https://www.cssfilters.co/)

- [CSS Glow Generator](https://cssbud.com/css-generator/css-glow-generator/)

- [Glassmorphism Generator](https://hype4.academy/tools/glassmorphism-generator)

- [Neumorphism.io CSS Generator](https://neumorphism.io/)



#### Libraries and Kits



- [Open Props](https://open-props.style/)

- [Tailwind CSS Typography plugin](https://github.com/tailwindlabs/tailwindcss-typography)



### Frameworks



- [Astro](https://astro.build/)

- [Svelte/SvelteKit](https://svelte.dev/)



### HTML



#### Boilerplates and Libraries



- [HTML Boilerplates](https://htmlboilerplates.com/)



### JavaScript



#### 3D Graphics

- [Babylon.js](https://doc.babylonjs.com/journey)

- [Three.js](https://threejs.org/)



#### Component Libraries



- [Swiper carousels](https://swiperjs.com/)

- [Slick carousels](https://kenwheeler.github.io/slick/)

- [Masonry image layouts](https://masonry.desandro.com/)



#### Effects Libraries



- [Atropos 3D Parallax](https://atroposjs.com/)

- [Heatmap.js heatmaps](https://www.patrick-wied.at/static/heatmapjs/)

- [Typed.js](https://mattboldt.github.io/typed.js/)



### User Interface Systems



- [Skeleton](https://www.skeleton.dev/)

- [DaisyUI](https://daisyui.com/)

- [Preline](https://preline.co/index.html)

- [Shadcn/ui](https://ui.shadcn.com/)

- [NextUI](https://nextui.org/)

- [Flowbite](https://flowbite.com/)



### Website Testing



- [Browserstack browser testing](https://www.browserstack.com/screenshots)

- [Nu HTML Checker](https://validator.unl.edu/)

- [W3C Markup Validator](https://validator.w3.org/)

- [Regex101](https://regex101.com/)



## 📚 Learning



### General Programming



- [W3 Schools](https://www.w3schools.com/)

- [freeCodeCamp](https://www.freecodecamp.org/learn)



### Web Development



- [The Odin Project](https://www.theodinproject.com/)

- [Full Stack Open](https://fullstackopen.com/en/)