spark-joy
Design tools
A collection of design and development resources for adding flair to products
✨😂 2000+ ways to add design flair, user delight, and whimsy to your product.
9k stars
100 watching
328 forks
last commit: 2 months ago
Linked from 2 awesome lists
awesome-listcssdesign
CSS/UI Templates | |||
| https://shuffle.dev/ | 🆕 tailwind/bootstrap/materialui randomly generated templates | ||
| https://www.free-css.com/ | |||
| https://www.creative-tim.com/ | |||
| https://wickedtemplates.com | using Tailwind v2 (and ) and | ||
| https://www.tailwind-kit.com/ | free tailwind component kit | ||
| https://daisyui.com/ | tailwind theme | ||
| https://themeselection.com/ | |||
| https://html5up.net/ | |||
| https://frontendor.com/ | using bootstrap | ||
| https://preview.tabler.io/# | using bootstrap | ||
| https://cruip.com/ | HTML, React, Vue.js, and Tailwind templates | ||
| https://open-props.style/ | design tokens using CSS variables | ||
CSS/UI Templates / Serious CSS Frameworks | |||
| https://designsystemsrepo.com/ | |||
CSS/UI Templates / Serious CSS Frameworks / Government / G10 | |||
| https://design-system.service.gov.uk/ | The UK: | ||
CSS/UI Templates / Serious CSS Frameworks / Government / G10 / https://design-system.service.gov.uk/ | |||
| https://design-system-alpha.digital.govt.nz/ | New Zealand is heavily based | ||
CSS/UI Templates / Serious CSS Frameworks / Government / G10 | |||
| https://designsystem.digital.gov/ | The US: | ||
| https://www.canada.ca/en/government/about/design-system.html | Canada: | ||
| http://gov.design/ | Russia: | ||
| https://designsystemau.org/ | Australia: | ||
| https://www.systeme-de-design.gouv.fr/ | France: | ||
| https://produkt.gsb.bund.de/DE/Home/home_node.html | Germany: and | ||
CSS/UI Templates / Serious CSS Frameworks / Government / Other | |||
| https://argob.github.io/poncho/ | Argentina: | ||
| https://guide.services.gov.gr/ | Greece: | ||
| https://www.rijkshuisstijl.nl/ | Netherlands: | ||
| https://designers.italia.it/ | Italy: | ||
| https://www.designsystem.tech.gov.sg/ | Singapore: | ||
CSS/UI Templates / Serious CSS Frameworks / Government / Europe | |||
| https://brand.estonia.ee/ | Estonia: | ||
| https://designsystem.gov.cz/ | Czech Republic: | ||
| https://diia.fedoriv.com/ | Ukraine: | ||
CSS/UI Templates / Serious CSS Frameworks | |||
| Bootstrap | |||
| Foundation | |||
| Blaze UI | |||
| PatternFly | |||
| UIKit | |||
| Numl | A UI Design Language, UI Library of Web Components, and Runtime CSS Framework for rapidly building interfaces that follow your Design System | ||
CSS/UI Templates / Serious CSS Frameworks / Utility CSS | |||
| Bonsai CSS | |||
| Tailwindcss | |||
CSS/UI Templates / Serious CSS Frameworks / Web Components | |||
| Weightless | 377 | 2 months ago | |
| Shoelace | |||
CSS/UI Templates / Drop-in CSS Frameworks / No CSS Classes | |||
| https://andybrewer.github.io/mvp/ | 🌟 mvp.css | ||
| https://yegor256.github.io/tacit/ | |||
| https://github.com/alvaromontoro/almond.css | 1,139 | about 1 month ago | has thin fonts |
| https://picocss.com/ | Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled | ||
| https://simplecss.org/demo | 4kb incl dark mode | ||
| https://watercss.kognise.dev/ | Small size (< 2kb) | ||
| https://github.com/xz/new.css | 3,963 | 8 months ago | ( ) 4.8kb |
| https://github.com/oxalorg/sakura | 4,152 | 3 days ago | supports extremely easy theming using variables for duotone color scheming |
| https://github.com/susam/spcss | 945 | 11 months ago | |
| https://neat.joeldare.com/ | |||
| https://concrete.style/ | Tiny (< 1kb) | ||
| https://github.com/zichy/fieber | 17 | 3 months ago | (new, wants feedback) |
| https://mikemai.net/typesettings/index.html | (new) | ||
| https://css.winterveil.net/ | magick.css is a minimalistic, (mostly) classless CSS framework that is designed to be easy to use and easy to understand. It is contained in a single file, and every choice is commented. The goal is to achieve an elegant, but magically playful look, while maximizing readability and the ability to convey information; somewhat akin to the notes of a wizard | ||
| https://github.com/neocities/element | 86 | 11 months ago | (inactive now) |
CSS/UI Templates / Drop-in CSS Frameworks | |||
| Spectre.css | lightweight (10kb), responsive and modern CSS framework for faster and extensible development | ||
| https://purecss.io/ | A set of small (3.7kb), responsive CSS modules that you can use in every web project | ||
| https://gdcss.netlify.app/ | (inspired by UK design system) | ||
| https://ajusa.github.io/lit/ | lit has two modules: lit and util. lit contains all of the basics for a framework, such as a responsive grid, typography, and other elements. util has many CSS utility classes that can be used to extend lit, or any CSS framework | ||
| https://luxacss.com/ | |||
| https://jenil.github.io/chota/ | good looking, lots of classes and utilities yet small | ||
| https://chr15m.github.io/DoodleCSS/ | hand drawn look | ||
| https://codepen.io/web-dot-dev/pen/abpoXGZ | the base classes for web.dev/learn/csss | ||
| https://open-props.style/ | css variables framework - "tailwind without tailwind"id=30497165) | ||
| https://latex.vercel.app/ | style your website like a LATEX document - (original version ) | ||
| https://picnicss.com/ | lightweight bootstrap alternative ( ) | ||
| https://github.com/gduverger/screen | 93 | over 4 years ago | (inactive now) |
CSS/UI Templates / Drop-in CSS Frameworks / Collections of even more: | |||
| https://github.com/dohliam/dropin-minimal-css | 1,716 | 4 months ago | |
| https://github.com/dbohdan/classless-css | 1,972 | 5 months ago | |
| https://github.com/ubershmekel/cssbed | 131 | 5 months ago | ( ) |
| https://thesephist.github.io/paper.css/ | and | ||
CSS/UI Templates / Fun CSS Frameworks | |||
| https://www.getpapercss.com/ | (handrwritingey css similar to roughjs) | ||
| https://terminalcss.xyz/ | |||
| https://secretgeek.github.io/html_wysiwyg/html.html | This page is a truly naked, brutalist html quine | ||
| https://mrcoles.com/demo/markdown-css/ | CSS to make HTML markup look like plain-text markdown | ||
| NES.css | 20,734 | 10 months ago | : NES.css is a NES-style(8bit-like) CSS Framework |
| PSone.css | 632 | over 1 year ago | : PS1 style CSS Framework, inspired by NES.css |
| LaTeX.css | |||
CSS/UI Templates / Fun CSS Frameworks / Operating System CSS | |||
| React95 | |||
| 98.css | 9,630 | 15 days ago | : A Windows 98 inspired framework for building faithful recreations of old UIs |
CSS/UI Templates / Fun CSS Frameworks / Operating System CSS / 98.css | |||
| Office 97 clipart in svg format | |||
CSS/UI Templates / Fun CSS Frameworks / Operating System CSS | |||
| XP.css | 2,299 | almost 2 years ago | : A Windows XP inspired framework for building faithful recreations of operating system GUIs. An extension of 98.css |
| 7.css | |||
| System.css | Retro Apple-inspired UI | ||
| Puppertino | 1,048 | about 1 month ago | meant to mimic the look of macOS |
| Commodore 64 CSS | |||
| BOOTSTRA.386 | 6,644 | 2 months ago | DOS: : A vintage 1980s DOS inspired Twitter Bootstrap theme |
| a2k | : A Windows 2000 inspired web component library | ||
CSS/UI Templates / Fun CSS Frameworks | |||
| Text UI CSS | 1,626 | about 1 year ago | : bios like UI's |
| New Dawn | 171 | 8 months ago | : A mac classic After Dark inspired stylesheet |
| Geocities Bootstrap theme | |||
| Metalmorphism | : High-quality metallic UI kit | ||
| https://dev.to/iainfreestone/10-resources-for-recreating-old-school-retro-user-interfaces-today-hkj | more | ||
| https://arwes.dev/ | Arwes - Futuristic Sci-Fi and Cyberpunk Graphical User Interface Framework for Web Apps | ||
| http://augmented-ui.com/ | Futuristic, Sci-Fi shaping for any element | ||
CSS/UI Templates / CSS Resets | |||
| https://meyerweb.com/eric/tools/css/reset/ | eric meyer v2 | ||
| https://www.joshwcomeau.com/css/custom-css-reset/ | josh comeau reset - | ||
| https://github.com/jensimmons/cssremedy | 2,196 | over 2 years ago | css working group's reset if it didnt have to worry about tech debt |
| https://github.com/tiaanduplessis/nanoreset | 88 | 2 months ago | |
| https://nicolas-cusan.github.io/destyle.css/ | |||
| https://hankchizljaw.com/wrote/a-modern-css-reset/ | |||
CSS/UI Templates / CSS Resets / https://hankchizljaw.com/wrote/a-modern-css-reset/ | |||
| https://andy-bell.co.uk/a-more-modern-css-reset/ | udpated | ||
| https://chriscoyier.net/2023/10/03/being-picky-about-a-css-reset-for-fun-pleasure/ | commentary | ||
CSS/UI Templates / CSS Resets | |||
| https://gist.github.com/DavidWells/18e73022e723037a50d6 | |||
| http://necolas.github.io/normalize.css/ | (yes, technically does more than a reset) | ||
CSS/UI Templates / CSS Resets / http://necolas.github.io/normalize.css/ | |||
| https://github.com/sindresorhus/modern-normalize | 6,297 | 3 months ago | is a smaller version that just supports latest Chrome, Firefox, and Safari |
| https://tailwindcss.com/docs/preflight/ | Tailwind's is built atop normalize | ||
CSS/UI Templates / CSS Resets | |||
| https://github.com/kripod/css-homogenizer | 35 | 27 days ago | a modern take on Eric Meyer's Reset, based upon direct comparison between user agent style sheets |
| https://twitter.com/buildsghost/status/1360343126510981122?s=20 | Jamie Kyle CSS preset | ||
CSS/UI Templates / CSS A11y Checkers | |||
| https://github.com/jackdomleo7/Checka11y.css | 446 | 11 months ago | |
| https://ffoodd.github.io/a11y.css/ | |||
| https://github.com/mike-engel/a11y-css-reset | 263 | over 2 years ago | |
| https://chrome.google.com/webstore/detail/a11ycss/iolfinldndiiobhednboghogkiopppid?hl=en | chrome extension | ||
CSS/UI Templates / Tailwind Component Libraries | |||
| https://github.com/thedevdojo/tails | 60 | 5 months ago | |
| http://tailwindcomponents.com/ | |||
| https://tailwindui.com/components | |||
| https://merakiui.com/ | |||
| https://www.gust-ui.com/ | |||
| https://flowbite.com/docs/getting-started/introduction/ | |||
| https://mertjf.github.io/tailblocks/ | |||
| https://www.hyperui.dev/ | 🌟 | ||
CSS/UI Templates / Tailwind Component Libraries / Tailwind visual builder | |||
| https://devdojo.com/tails | |||
| https://shuffle.dev/ | |||
CSS/UI Templates / Tailwind Component Libraries | |||
| https://daisyui.com/ | |||
| https://www.tailwind-kit.com/ | |||
CSS/UI Templates / React Component Libraries | |||
| Recent comparison/discussion | of: | ||
CSS/UI Templates / React Component Libraries / Recent comparison/discussion | |||
| https://www.tremor.so/ | Simple and modular components to build dashboards in a breeze. Fully open-source, made by data scientists and software engineers with a sweet spot for design | ||
CSS/UI Templates / React Component Libraries | |||
| Radix UI | Unstyled, accessible components for building high‑quality design systems and web apps in React | ||
| Mantine | More than 120 customizable components and hooks to cover you in any situation | ||
| https://nextui.org/ | uses Stitches, includes light and dark UI components out-of-the-box along with a default color palette that might be good for quickly building landing pages or other content that’s not initially tied to any branding | ||
| https://akaspanion.github.io/ui-neumorphism/ | |||
| https://component.gallery/ | |||
| https://headlessui.dev/ | |||
| https://ui.supabase.io/ | |||
| https://ui.shadcn.com/ | Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source | ||
| https://magicui.design/ | 20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable | ||
Layout / Responsive Layout Breakpoints | |||
| https://piccalil.li/tutorial/build-a-responsive-media-browser-with-css/ | |||
| Tailwind's breakpoints | don't come with layout recommendations but here they are: | ||
Layout / Other Layout Tools and tips | |||
| https://every-layout.dev/ | 🌟 | ||
| https://web.dev/patterns/layout/ | |||
| https://gedd.ski/post/article-grid-layout/ | |||
Layout / Other Layout Tools and tips / CSS grid generator tools | |||
| https://grid.layoutit.com/ | |||
| https://cssgrid-generator.netlify.app/ | |||
| https://layout.bradwoods.io/ | |||
Layout / Other Layout Tools and tips | |||
| https://uisual.com/ | |||
| https://csslayout.io/ | ( ) | ||
| https://youtu.be/qZWDJqY27bw | Visual Hierarchy | ||
Typography / Fonts | |||
| has issues on old browsers + asian langauges | Simple: ( - github and bootstrap have removed it fwiw)) | ||
Typography / Fonts / Consider your site personality | |||
| Freight Text | Elegant/Classic: serif like , , | ||
| Proxima Soft | Playful: rounded sans serif like | ||
| Freight Sans | Plain/Safe: neutral sans serif like , , | ||
| DIN | Sciency/technical: squared off (geometric) sans like , | ||
Typography / Fonts / Consider your site personality / monospace fonts | |||
| https://devfonts.gafi.dev/ | |||
| https://coding-fonts.css-tricks.com/ | |||
Typography / Fonts / Consider your site personality / Programming fonts | |||
| https://www.programmingfonts.org/ | ( ) | ||
| 14 free programming fonts | |||
Typography / Fonts / Consider your site personality | |||
| https://whirlybirdie.com/ | Variable fonts: | ||
Typography / Fonts / Consider your site personality / https://whirlybirdie.com/ | |||
| https://mobile.twitter.com/erikdkennedy/status/1575135945359097864 | Erik Kennedy font | ||
Typography / Fonts / Consider your site personality | |||
| http://velvetyne.fr/ | Novelty: | ||
| use a Uniwidth font (not monospace) for interface design | |||
Typography / Fonts | |||
| fashions/trends | Fonts have . current vogue is Inter | ||
| @edadams | 9,416 | 2 months ago | Free fonts that are great with examples (thanks ) |
Typography / Fonts / @edadams | |||
| see Harry Roberts on Google Font loading perf | Google Fonts - ( - you should ) | ||
Typography / Fonts / @edadams / see Harry Roberts on Google Font loading perf | |||
| https://www.colorsandfonts.com/font-pairing | |||
| https://www.nngroup.com/articles/pairing-typefaces/ | |||
| https://fontflipper.com/upload | Just upload an image, write some sample copy. And flip through 500 Google fonts one by one | ||
| https://bueltge.de/free-web-font-combinations/ | |||
| 40 best google fonts by Typewolf | |||
| 50 selections of google fonts | |||
| Noto Sans | |||
| Fira Sans | related to for devvy stuff | ||
| Raleway | |||
| Open Sans | |||
| Recursive | 1 variable font that can handle both monospace and UI usecases, very versatile | ||
| https://twitter.com/atav1k/status/1178096244490723328?s=19 | Cavivanar | ||
Typography / Fonts / @edadams | |||
| https://www.fontshare.com/ | Fontshare 50 free fonts | ||
Typography / Fonts / @edadams / https://www.fontshare.com/ | |||
| Erik Kennedy picks from these | |||
Typography / Fonts / @edadams | |||
| https://learnui.design/blog/ultimate-guide-similar-fonts.html | Premium-looking Free Fonts | ||
| https://beautifulwebtype.com/ | |||
| https://www.latinxswhodesign.com/ | Chivo | ||
| Lato | Well known, very readable, pretty, client favorite | ||
| Libre Franklin | Elegant and thin | ||
| IBM Plex Sans | Loads of weights, beautifully done - example: | ||
| Clear Sans | |||
| Atkinson Hyperlegible | from Braille institue | ||
| Inter | typeface carefully crafted & designed for computer screens | ||
| Jetbrains Mono | Monospace font for devvy stuff | ||
Typography / Fonts / @edadams / Handwritten Fonts | |||
| https://www.urbanfonts.com/fonts/handwritten-fonts.htm | |||
| https://twitter.com/round/status/1178090890004455424?s=19 | Caveat and Reenie Beanie on google fonts | ||
Typography / Fonts | |||
| https://fontsarena.com/ | |||
| https://uncut.wtf/ | 90 typefaces with a focus on contemporary, or modern, type | ||
| by Gontijo | "Open Source Beautiful Fonts" | ||
Typography / Fonts / Font Pairing | |||
| https://fontpair.co/ | |||
| https://fontjoy.com/ | |||
| https://fontsinuse.com/ | see how | ||
| http://femmebot.github.io/google-type/ | |||
| https://www.boldwebdesign.com.au/ | |||
| https://justmytype.co/ | |||
| https://bueltge.de/free-web-font-combinations/ | |||
| https://www.canva.com/font-combinations/ | Canva has a great tool: | ||
| https://www.colorsandfonts.com/font-pairings | |||
| https://www.nngroup.com/articles/pairing-typefaces/ | Read: | ||
Typography / Fonts | |||
| Font variants and oldstyle numbers | |||
Typography / Fonts / steve schoger blessed typekit fonts | |||
| example | Museo Sans ( ) and similar from | ||
Typography / Fonts | |||
| https://practicaltypography.com/system-fonts.html | |||
| https://practicaltypography.com/free-fonts.html | |||
Typography / Fonts / eye catching fun fonts | |||
| https://www.haleyfiege.fun/fonts | |||
| https://twitter.com/castpixel/status/1281345373336985612?s=20 | pixel fonts | ||
Typography / Fonts | |||
| https://markdotto.com/playground/3d-text/ | CSS 3D text | ||
| https://bennettfeely.com/ztext/ | JS 3D text | ||
| https://typespiration.com/ | TypeSpiration premade font pairings for you | ||
Typography / Fonts / more opinions places | |||
| https://muffingroup.com/blog/best-free-fonts/ | |||
| https://type-scale.com/ | |||
| https://practicaltypography.com | |||
| http://thinkingwithtype.com/ | |||
| https://typographyforlawyers.com/ | |||
| http://webtypography.net/intro/ | |||
| https://www.youtube.com/watch?v=Vd6jZR-GknA | |||
| 6 ways to justify font choices in your designs | |||
| statistical data on font usage | |||
| https://news.ycombinator.com/item?id=31156018 | Study of best font for online reading - inconclusive | ||
Typography / Fonts | |||
| https://a16z.com/ | Proxima Nova (on Typekit) | ||
| https://type.today/en/Graphik | Graphik | ||
| https://www.typewolf.com/ | |||
| https://www.youtube.com/watch?v=mTIatvwm1MM | MD Prime - used on CSS tricks | ||
| https://www.myfonts.com/fonts/latinotype/arida/black/ | Arida Black (maggie's font) | ||
| Dank Mono | |||
| https://twitter.com/round/status/1178090204562968576?s=19 | Tekton | ||
| doesnt like it | but harry roberts | ||
Typography / Line Width | |||
| https://pearsonified.com/characters-per-line/ | |||
| https://grtcalculator.com/ | |||
| https://www.charactercountonline.com/ | |||
| https://charcounter.com/en/ | |||
Typography / Kerning and char spacing | |||
| https://creativemarket.com/blog/whats-the-difference-between-leading-kerning-and-tracking | |||
| https://99designs.com/blog/tips/11-kerning-tips/ | |||
Typography / Font Sizing | |||
| clamp | Fluid typography with : | ||
Typography / Font Sizing / clamp | |||
| CSS Tricks | v18: | ||
| font-size: calc(1rem + 2px + ((100vw - 550px) / 250)) | Another responsive typography fallback - - you can | ||
| https://fluid-typography.netlify.app/ | demo it with this | ||
Typography / Font Sizing | |||
| Inter/Tailwind font-size combo | |||
| BAD, SLOW fontsize calc | |||
Typography / Font Sizing / BAD, SLOW fontsize calc | |||
| Sara Soueidan | Note: has known a11y issues: Preserve Zooming. recommends wrapping with , e.g | ||
Typography / Font Sizing | |||
| Complete font-size notes | |||
| https://news.ycombinator.com/item?id=38441747 | the property in CSS | ||
| https://typescale.com/ | Establishing your own type scale | ||
Typography / Typography Talks | |||
| https://www.youtube.com/watch?v=agbh1wbfJt8 | Typography for Developers (2hrs) | ||
| https://www.youtube.com/watch?v=aaro26rK61o&t=874s | Adam Argyle on Typography | ||
| https://www.youtube.com/watch?v=hbIZX6tE9JY | Web Typography (48mins) | ||
| https://www.youtube.com/watch?v=OgsHSVsNRdg | |||
Typography / Other Typography Resources | |||
| https://www.pierrickcalvez.com/journal/a-five-minutes-guide-to-better-typography | 5 minute guide to Typography | ||
| https://medium.com/nextux/become-a-typography-nerd-in-under-10-minutes-5a7eda093cb3 | Typography in 10 minutes | ||
| https://sinja.io/blog/web-typography-quick-guide | Quick Guide to Typography for webdevs | ||
| https://css-tricks.com/designing-for-long-form-articles/ | typography for long form articles - | ||
| explained | Font smoothing - , | ||
| https://fontanello.oktavilla.se/ | Tool for learning what fonts other people use | ||
| FlowType.js | |||
| FitText | |||
| https://wh0.github.io/glitter/ | It’s a generator that produces text in a glitter-like style, which you can save as SVG. Definitely not for 99% of your projects, but a pretty cool text effect | ||
| Majuscule | if all letters at the same height all caps this is called | ||
| https://www.figma.com/blog/when-fonts-fall/ | International fonts stack | ||
| leading-trim | In future, try out | ||
| https://piccalil.li/tutorial/improve-the-readability-of-the-content-on-your-website | |||
| https://thecsspodcast.libsyn.com/tcp036-v2 | css podcast primer on typography | ||
| https://www.typewolf.com/checklist | |||
Colors | |||
| Examples | Gold: expensive, sophisticated ( , ) | ||
| https://twitter.com/LoanReads/status/1313974210151305218?s=20 | |||
| https://www.colourblindawareness.org/colour-blindness/ | |||
| https://twitter.com/swyx/status/1351566026090053632 | use the concept of "luminance contrast" | ||
| https://randoma11y.com/?color=springgreen | |||
Colors / Palette Generators | |||
| https://atmos.style | A toolbox to create better UI color palettes | ||
| https://colorgen.dev/ | |||
| https://color.adobe.com/create | |||
| https://www.colorsandfonts.com/ | |||
| https://colorswall.com/ | |||
| https://coolors.co/ | |||
| https://colorpalettes.earth/ | displays color palettes sourced from images of nature (taken from Unsplash) | ||
| https://colorsinspo.com | |||
| https://huey.design/ | Rapid color palettes across the rainbow | ||
| https://duo.alexpate.uk/ | |||
| https://colorhunt.co/ | |||
| https://2colors.colorion.co/ | |||
| https://meodai.github.io/poline/ | Poline - enigmatic color palette generator | ||
| https://www.colorsandfonts.com/color-palettes | |||
| https://dribbble.com/colors/4030e8 | |||
| https://palettte.app/ | (advanced tool; try importing the default palettes) | ||
| https://www.paletter.app/ | Create Professional Color Palettes from a Single Color | ||
| http://colours.neilorangepeel.com/category/red/ | |||
| https://www.colorbox.io | (by Lyft Design ) | ||
| darker/lighter color variations | Consider | ||
| https://croncolor.com/color-tool | |||
| https://leonardocolor.io/?colorKeys=%236fa7ff&base=ffffff&ratios=3%2C4.5&mode=CAM02 | |||
| https://happyhues.co/ | |||
| https://www.colourlovers.com/ | |||
| https://flatuicolors.com/ | |||
| https://colorsupplyyy.com/ | |||
| chroma.js color palette helper | |||
| https://palx.jxnblk.com/ | |||
| https://hotpot.ai/assistant/color_assistant | Get suggestions for palettes, gradients, and text colors. Hit the space bar for ML-powered ideas | ||
| https://yeun.github.io/open-color/ | |||
| http://khroma.co/ | neural network generated color palettes | ||
| https://learnui.design/tools/data-color-picker.html | Color picker for data visualizations | ||
| https://learnui.design/tools/accessible-color-generator.html | Accessible color generator | ||
| https://maketintsandshades.com/ | Generate tint and shades from hex code | ||
| http://paletton.com/ | |||
Colors / Palette Generators / Tailwind: | |||
| https://tailwind.ink/ | |||
| https://www.tailwindshades.com/ | |||
| https://tailwind.simeongriggs.dev | |||
| https://javisperez.github.io/tailwindcolorshades/ | |||
| https://tailwind-color-picker.jessarcher.com | |||
| https://www.tints.dev/ | ( ) | ||
Colors / Palette Generators / Special usecases: | |||
| https://css-tricks.com/mixing-colors-in-pure-css/ | Mix colors in pure CSS | ||
| HSLuv | color space is preferable to HSL | ||
Colors / Palette Generators / Special usecases: / HSLuv | |||
| https://wildbit.com/blog/accessible-palette-stop-using-hsl-for-color-systems | why not hsl | ||
Colors / Palette Generators / Special usecases: | |||
| https://colors.lol/ | Overly descriptive color palettes (fun) | ||
Colors / Palette Generators / Special usecases: / English color names: | |||
| https://hexwords.netlify.app/ | |||
| https://colornames.org/ | |||
| https://c0ffee.surge.sh/ | |||
Colors / Color Gradients | |||
| https://www.joshwcomeau.com/gradient-generator/ | |||
| https://mybrandnewlogo.com/color-gradient-generator | gradients | ||
| https://www.learnui.design/tools/gradient-generator.html | vivid gradient generator | ||
| https://twitter.com/argyleink/status/1281623252662489088/photo/2 | CSS Gradient Text | ||
| https://mycolor.space/gradient | 🌟 Generate a CSS Color Gradient | ||
| https://huemint.com/ | Huemint uses machine learning to create unique color schemes for your brand, website or graphic | ||
| https://webgradients.com/ | free collection of 180 linear gradients | ||
| https://uigradients.com/#Petrichor | |||
| https://gradient-king.vercel.app/ | |||
| https://learnui.design/tools/gradient-generator.html | (to avoid ) | ||
| https://www.conic.style/ | Adam Argyle conic CSS gradient examples | ||
| https://www.grabient.com/ | |||
| https://www.colorsandfonts.com/color-gradients | |||
| https://www.gradient-animator.com/ | ANIMATED GRADIENTS | ||
| argyleink | Subtle gradients by bumping only saturation on HSL (thanks ) - You can ! | ||
Colors / Color Gradients / Tailwind | |||
| https://hypercolor.dev/ | |||
Colors / Color Gradients | |||
| https://akx.github.io/gradient/ | Gradient designer with interpolation in various color spaces | ||
Colors / Color Theory | |||
| https://workos.com/blog/5-lessons-we-learned-adding-dark-mode-to-our-platform?ref=sidebar | Zeno Rocha 5 tips for dark mode | ||
Colors / Color Theory for Data Visualization | |||
| Color Use Guidelines for Data Representation. Cynthia Brewer. Proc. Section on Statistical Graphics, American Statistical Association, pp. 55-60, 1999. Color Scheme Explorer. | |||
| How to pick more beautiful colors for your data visualizations. Lisa Charlotte Rost | |||
| Color Use Guidelines for Data Representation - Cynthia A. Brewer | |||
| How to pick the least wrong colors - An algorithm for creating color palettes for data visualization | ( ) | ||
| Paul Tol's INTRODUCTION TO COLOUR SCHEMES | |||
| https://blog.datawrapper.de/category/color-in-data-vis/ | |||
Colors / Color Theory for Data Visualization / https://blog.datawrapper.de/category/color-in-data-vis/ | |||
| How to pick more beautiful colors for your data visualizations | |||
Colors / Color Theory for Data Visualization / Open source libraries | |||
| D3 Color scales | 801 | 5 months ago | |
| Colorbrewer schemes | |||
| Matplotlib colormaps | |||
Colors / Color Theory for Data Visualization / Books | |||
| Storytelling with Data | Chapter 4: | ||
| Art + Data: A Collection of Tableau Dashboards | |||
| A Dictionary of Color Combinations | |||
| Visualize This: The FlowingData Guide to Design, Visualization, and Statistics | |||
Colors / Color Theory for Data Visualization / Misc recommended papers | |||
| Somewhere Over the Rainbow: An Empirical Assessment of Quantitative Colormaps. Yang Liu, Jeffrey Heer. ACM CHI 2018. | |||
| Colorgorical: Creating Discriminable and Preferable Color Palettes for Information Visualization. Connor Gramazio, David Laidlaw & Karen Schloss. IEEE Transactions on Visualization and Computer Graphics. 2017. | |||
Backgrounds / Background Gradients and Patterns | |||
| https://philcoffman.com/ | |||
| https://css-tricks.com/ | |||
| https://magicmind.co/ | very subtle texture | ||
| https://increase.com/ | |||
| https://cssgradient.io/ | |||
| https://youtu.be/U4z-wph1NyI | |||
| https://onepagelove.com/tag/gradients | |||
| https://meshgradient.com/ | swirly backgrounds like apple | ||
| https://meshgradient.in/ | generate mesh gradient backgrounds | ||
| https://trianglify.io/ | low polly pattern generator | ||
| https://leaverou.github.io/css3patterns/ | |||
| https://github.com/bansal-io/pattern.css | 3,844 | over 2 years ago | |
| http://www.heropatterns.com/ | SVG Repeating Patterns Generator | ||
| https://doodad.dev/pattern-generator/ | |||
| https://www.wowpatterns.com/free-vector-art | thousands of freevector patterns, based on shapes, organic shapes as well as themes, such as animals, beach, city and people, festivals, florals etc | ||
| https://wickedbackgrounds.com/?ref=producthunt | svg background waves | ||
| https://www.svgbackgrounds.com/ | |||
| https://www.transparenttextures.com/ | |||
| https://www.toptal.com/designers/subtlepatterns/ | (exports png though :( ) | ||
| https://www.flaticon.com/pattern/ | (create a bg pattern of icons) | ||
| https://coolbackgrounds.io/ | |||
| https://tabbied.com/ | abstract Doodles with generated patterns | ||
| https://css-doodle.com/ | |||
| https://hero-generator.netlify.app/ | hero picture CSS generator | ||
| https://www.gradientmagic.com/ | |||
| https://kumiko-generator.netlify.app/ | |||
| http://thepatternlibrary.com/ | |||
| https://msurguy.github.io/flow-lines/ | produces random geometric lines, and we can adjust the formulas and distances between the shapes drawn | ||
| http://svgbackgrounds.com/ | |||
| https://haikei.app/ | web app to generate unique SVG shapes, backgrounds, and patterns | ||
| https://pattern.monster/ | 180 patterns, and you can filter them by mode and color, and search | ||
| http://iros.github.io/patternfills/ | plenty of black-and-white patterns, also available from the command line | ||
| https://www.kennethcachia.com/plain-pattern/ | allows you to upload an SVG shape (or use one of the existing ones) and it creates a repeating pattern which can be exported as SVG | ||
| http://www.patternify.com/ | CSS Pattern generator that allows you to define a pattern in a 10×10 grid | ||
| https://www.magicpattern.design/tools/css-backgrounds | library of pure CSS background patterns like ZigZag or diagonal ones | ||
| https://bgjar.com/ | |||
| https://products.ls.graphics/paaatterns/ | |||
| https://notchr.is/patterns/ | (Really simple SVG Patterns using single unicode characters.) | ||
| https://doodad.dev/pattern-generator/ | (Pattern generator that exports to png, jpg and svg.) | ||
Backgrounds / Background Gradients and Patterns / wave dividers | |||
| https://www.shapedivider.app/ | generate custom shape dividers | ||
| https://svgwave.in/ | |||
| https://getwaves.io/ | generate SVG waves | ||
| https://wavelry.vercel.app/ | choose between sharp, linear and smooth waves | ||
| https://www.outpan.com/app/9aaaf27303/svg-gradient-wave-generator | adjust amplitudes, smoothness, saturation and hues | ||
| https://loading.io/background/m-wave/ | generate waves, and even animate them | ||
| https://haikei.app/ | full fledged generate SVG assets, from layered waves to stacked waves and blob scenes | ||
| https://codepen.io/jh3y/full/poEvKxo | svg waves generator | ||
| https://wweb.dev/resources/css-separator-generator | |||
Backgrounds / Background Illustrations | |||
| https://freeillustrations.xyz/ | |||
Backgrounds / Background SVG texture | |||
| https://twitter.com/bdc/status/1443557247813099522?s=20 | for increase.com | ||
| https://www.transparenttextures.com/ | |||
Backgrounds / Misc Backgroundy Stuff | |||
| https://css-doodle.com/ | CSS Doodle | ||
| https://leaverou.github.io/css3patterns/ | CSS backgroundy patterns | ||
| https://twitter.com/yuanchuan23 | this guy | ||
| https://github.com/simeydotme/pokemon-cards-css | 5,495 | over 1 year ago | super adanced pokemon shiny card gradients |
| http://generative-placeholders.glitch.me/ | Generative Gradients | ||
Backgrounds / Misc Backgroundy Stuff / http://generative-placeholders.glitch.me/ | |||
| https://dev.to/georgedoescode/a-generative-svg-starter-kit-5cm1 | Generateive SVG | ||
Backgrounds / Misc Backgroundy Stuff | |||
| https://blurha.sh/ | Image Placeholders - blurring - (and gatsby image and nextjs image) | ||
| https://coder-coder.com/background-image-opacity/ | Dimming/coloring text on background images | ||
| True Grit Texture Supply | PNG textures (paid) | ||
Backgrounds / Misc Backgroundy Stuff / Remove backgrounds | |||
| now native in iOS/macOS | this is | ||
| https://www.remove.bg/ | from images - but has been monetized to shit. see below for better alternatives | ||
| https://github.com/imgly/background-removal-js | 5,856 | 4 months ago | open source Background Removal in the Browser |
| https://pixian.ai/remove-image-backgrounds | |||
| https://www.photoroom.com/background-remover | |||
| https://backgroundremoverai.com/ | |||
Backgrounds / Misc Backgroundy Stuff / Remove backgrounds / https://backgroundremoverai.com/ | |||
| https://github.com/nadermx/backgroundremover | 6,813 | about 2 months ago | source |
Backgrounds / Misc Backgroundy Stuff / Remove backgrounds | |||
| https://www.inpixio.com/remove-background/ | |||
| https://express.adobe.com/tools/remove-background | |||
| https://baseline.is/tools/background-remover/ | from images | ||
| https://www.unscreen.com/ | for gif/video | ||
Backgrounds / Misc Backgroundy Stuff / Remove ANYTHING (AMAZING) | |||
| https://cleanup.pictures/ | |||
| https://cleanupphotos.com/ | |||
Backgrounds / Misc Backgroundy Stuff / colorizing black and white images | |||
| https://demos.algorithmia.com/colorize-photos | |||
Backgrounds / Misc Backgroundy Stuff | |||
| https://clipdrop.co/relight | relight images | ||
| https://edit.photo/ | edit photo in browser no BS | ||
Backgrounds / Misc Backgroundy Stuff / https://edit.photo/ | |||
| https://palette.fm/ | AI Colorizer | ||
Backgrounds / Misc Backgroundy Stuff | |||
| https://animatedbackgrounds.me/ | |||
Icons and Favicons / Favicons | |||
| https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/ | you can | ||
| https://css-tricks.com/how-i-put-the-scroll-percentage-in-the-browser-title-bar/ | put the scroll percentage! | ||
Icons and Favicons / <link rel=""> tags and opengraph | |||
| https://css-tricks.com/explain-the-first-10-lines-of-twitter-source-code/ | |||
| https://github.com/joshbuchea/HEAD | 29,998 | 5 months ago | |
| https://www.matuzo.at/blog/html-boilerplate/ | |||
Icons and Favicons / Icons | |||
| https://logosear.ch/ | superfast metasearch of 200k svg logos from GitHub | ||
| https://svgl.vercel.app/ | fast search of svg logos, user submitted and categorized | ||
| https://seeklogo.com/ | |||
| https://www.iconfinder.com/iconsets/payment-method-1 | |||
| https://www.logology.co/ | We’ve designed a catalog of 500+ logos. Take a brand identity test and we’ll instantly match you with the best ones, paired with the right fonts & colors | ||
| https://www.svgrepo.com/ | Browse 300.000+ SVG Vectors and Icons | ||
| https://iconsear.ch/ | instant search of 50k svg icons from GitHub and GitLab | ||
| https://macosicons.com/ | icons intended to replace mac desktop icons | ||
| https://awsicons.dev/ | AWS icons and | ||
| Aria roles | Icon only: . Pick from list | ||
| https://www.heroicons.com/ | ⭐ Steve schoger's (somewhat limited) svg iconset. another viewer: | ||
| https://phosphoricons.com/ | ⭐ 3000+ fully customizable free SVG and PNG icons. style, variations, easy to consume | ||
| https://tablericons.com/ | ⭐ 937 Fully customizable free SVG icons | ||
| https://icons.modulz.app/ | ⭐ Radix Icons - >250 15×15 icons designed by the Modulz team. - some great app icons | ||
| https://lucide.dev/ | ⭐ , Lucide, a fork of with Clean, consistent, customizable SVG icons available as treeshakable packages in all frameworks | ||
Icons and Favicons / Icons / https://lucide.dev/ | |||
| Lucide | " is a very active fork of Feather and what I’ve been using for the past few years instead. Feather is great as are their design guidelines, but it needs way way more icons. Lucide picks up beautifully where it left off." | ||
| rauchg feature | |||
Icons and Favicons / Icons | |||
| https://iconoir.com/ | free open source library with 1000+ SVG Icons, designed on a 24x24 pixels grid | ||
| https://iconic.app/ | |||
| https://teenyicons.com/ | tiny minimal 1px icons | ||
| https://fonts.google.com/icons | Google icons | ||
| https://materialdesignicons.com/ | Material Design | ||
| https://circumicons.com | Circum Icons Consistent open source icons as SVG for React, Vue and Svelte | ||
Icons and Favicons / Icons / (list of lists of icons) | |||
| https://icones.netlify.app/ | |||
| https://www.iconbolt.com/ | |||
| https://iconduck.com/ | 104,808 free open source icons | ||
Icons and Favicons / Icons | |||
| https://thenounproject.com/ | Every icon you can think of, in PNG or SVG formats. They offer over 20 million icons, with built-in customization colors like size and color. Requires login, needs creative commons attribution or $3 download | ||
| https://www.snoweb-svg.com/ | |||
| https://nucleoapp.com/ | Nucleo is a beautiful library of 30635 icons, and a powerful application to collect, customize and export all your icons. $99 lifetime purchase | ||
Icons and Favicons / Icons / https://nucleoapp.com/ | |||
| https://nucleoapp.com/tool/icon-transition | SVG Icon Transitions Generator | ||
Icons and Favicons / Icons | |||
| https://hotpot.ai/free_icons | 5,000+ free icons. Customize colors, size, and other properties. PNG, JPG, iOS, Android, PDF. No svg | ||
| OK without attribution, don't sell it | Discover 4486+ free icons in 310 collections. SVG, EPS, PSD, PNG. | ||
| https://icomoon.io/ | 450 icons, SVG, PDF, EPS, Ai, PSD. Paid tier goes up to 1600 icons | ||
| https://orioniconlibrary.com/ | has customizable colors and packs eg for ecommerce | ||
| https://github.com/edent/SuperTinyIcons | 14,711 | 22 days ago | Under 1KB each! Super Tiny Web Icons are minuscule SVG versions of your favourite logos. The average size is under 465 bytes! |
| https://github.com/Remix-Design/RemixIcon | 6,921 | 24 days ago | neutral-style system symbols for designers and developers. Unlike a patchwork icon library, 2200+ icons are all elaborately crafted so that they are born with the gene of readability, consistency and perfect pixels. Each icon was designed in "Outlined" and "Filled" styles based on a 24x24 grid |
| https://icons8.com/l/fluent/ | colored "microsoft style" icons | ||
| https://icons8.com/emoji | emoji style customizable icons | ||
| https://icons8.com/line-awesome | fontawesome-like icons | ||
| https://iconsvg.xyz/ | Quick customizable icons for your projects | ||
| http://www.entypo.com/ | |||
| https://simpleicons.org/ | |||
| http://github.com/propublica/weepeople | A typeface of people sillhouettes, to make it easy to build web graphics featuring little people instead of dots | ||
| https://github.com/twbs/icons | 7,413 | 18 days ago | Bootstrap Icons , |
| https://systemuicons.com/ | |||
| https://github.com/microsoft/fluentui-system-icons | 6,043 | 13 days ago | Fluent UI System Icons are a collection of familiar, friendly and modern icons from Microsoft |
| https://www.streamlinehq.com/elements/memes | a few dozen popular meme icons as svg | ||
| https://icons.mono.company/ | |||
| https://iconscout.com/unicons | and | ||
| https://www.zondicons.com/ | |||
| https://linearicons.com/free | |||
| http://www.transformicons.com/builder.html | animated icons | ||
| http://game-icons.net/ | |||
| https://design.dev/ | Covid 19 icons - | ||
| https://kenney.nl/ | public domain game assets | ||
| https://www.iconshock.com/social-media-icons/ | A pack of 300 social media icons (PNG & Vector) and a set of animated icons (Lottie and AE), which cover all the trendiest social media networks nowadays | ||
Icons and Favicons / Icons / brand icons | |||
| http://simpleicons.org/ | icons for every brand like graphql, adobe xd, youtube, etc | ||
| https://css.gg/ | 700+ Customizable & Retina-Ready app icons — entirely built in CSS | ||
| https://worldvectorlogo.com/ | |||
| https://www.vectorlogo.zone/ | consistently formatted SVG logos | ||
Icons and Favicons / Icons / Icon Libraries and Framework | |||
| https://github.com/iconify/iconify | 4,593 | 10 days ago | Iconify -> use in |
Icons and Favicons / Icons / React Icons | |||
| https://react-icons.github.io/react-icons/ | |||
| https://github.com/miukimiu/react-kawaii | 2,912 | 17 days ago | |
| https://reactsvgicons.com/ | |||
| https://react-icons.netlify.com/#/icons/fa | (typically fontawesome). note that there is some tree shaking issues in the discussions. you may wish to use the fork instead | ||
| https://github.com/bytedance/IconPark | 8,346 | over 1 year ago | more than 1,200 high-quality icons, and introduces an interface for customizing your icons. across React, Vue, SVG, PNG |
| https://github.com/useAnimations/react-useanimations | 1,114 | 5 months ago | |
Icons and Favicons / Icons | |||
| http://shape.so/ | 4300+ Icons & Illustrations (by Meng To) | ||
| https://logobly.com/ | create custom logos | ||
| https://hatchful.shopify.com/ | more custom logos | ||
| https://radicalicons.com/ | use | ||
| https://symbolicons.com/ | |||
| https://streamlineicons.com/ | 🔥 (used in ) | ||
| https://www.iconfinder.com/ | |||
| https://www.flaticon.com/ | 6.5m icons, free for PNG, paid for SVG | ||
| https://gumroad.com/l/primaries | |||
| https://gumroad.com/l/gPEAU | ios 14 icons from traf - for inspo, mainly | ||
Diagramming | |||
| https://nocomplexity.com/documents/arplaybook/businessarchitecture.html | |||
| https://sportebois.medium.com/better-architecture-diagrams-for-agile-teams-actionable-tips-and-lessons-e76627dc4315 | |||
| https://c4model.com/ | (c4 modeling ) | ||
| http://fmc-modeling.org/ | FMC modeling - only rectangles and round things | ||
| How to Draw Architecture Diagrams | |||
Diagramming / General Purpose Diagramming | |||
| https://excalidraw.com/ | (free, open source) | ||
| https://miro.com/ | freemium, used by Maggie | ||
| https://www.draw.io/ | now to (free) - has | ||
| https://inkscape.org/ | (free) | ||
| https://whimsical.com/ | ($10/mo) | ||
| https://www.lucidchart.com/ | |||
| https://www.gliffy.com/ | |||
| https://diagrams.net/ | |||
| https://www.ilograph.com/ | |||
| https://zenuml.com | |||
| https://www.simplediagrams.com/ | |||
| Microsoft Visio | |||
| https://www.plectica.com/ | |||
| see hn thread | more tools - | ||
| https://infinitecanvas.tools/gallery/ | more canvas diagramming tools | ||
Diagramming / Software Arch Diagrams | |||
| https://twitter.com/terrastruct | software arch diagrams | ||
Diagramming / Sequence Diagrams | |||
| https://news.ycombinator.com/item?id=36342931 | UML: | ||
Diagramming / Sequence Diagrams / https://news.ycombinator.com/item?id=36342931 | |||
| http://fmc-modeling.org/ | "UML, the good parts" - Fundamental Modeling Concepts | ||
Diagramming / Sequence Diagrams | |||
| https://www.websequencediagrams.com/ | |||
| https://swimlanes.io/ | a simple online tool for creating sequence diagrams | ||
| https://bramp.github.io/js-sequence-diagrams/ | |||
| https://sequencediagram.org/ | |||
| https://playground.diagram.codes/ | |||
| http://sdedit.sourceforge.net/ | Quick Sequence Diagram Editor (but doesnt seem active) | ||
Diagramming / Entity Relationship Diagrams | |||
| https://dbdiagram.io/home | which also has an open-source markup language: | ||
| Databasediagram.com – Private, Text to Entity-Relationship Diagram Tool | |||
| Mocodo | : French-flavored ERD, aka Merise MCD, where the layout is constrained to a grid | ||
Diagramming / Cloud Architecture diagrams | |||
| https://aws.amazon.com/architecture/icons/ | Amazon architecture icons: as well as the software that has them built in | ||
Diagramming / Cloud Architecture diagrams / https://aws.amazon.com/architecture/icons/ | |||
| https://awsicons.dev/ | AWS icons | ||
Diagramming / Cloud Architecture diagrams | |||
| https://cloud.google.com/icons | Google Cloud icons, cheat sheet and other assets: | ||
| https://www.draw.io/ | |||
| https://www.lucidchart.com/ | |||
| https://www.omnigroup.com/omnigraffle/ | (used by tim bray) | ||
| https://www.ilograph.com/ | |||
| https://www.cloudcraft.co/ | focused on AWS | ||
| https://www.cloudskew.com/ | |||
| https://arcentry.com/ | (interactive/realtime) - discontinued! | ||
| https://github.com/lynnlangit/learning-cloud/tree/master/0_CLOUD-PATTERNS/1_Viz-Systems | 459 | 4 months ago | lynn langit's list |
| https://www.readysetcloud.io/blog/allen.helton/the-5-types-of-architecture-diagrams/ | the 5 types of arch diagrams | ||
Diagramming / Code-based Graph tools | |||
| https://gojs.net/latest/samples/decisionTree.html | interactive diagrams | ||
| https://text-to-diagram.com/ | 4 major text-to-graph langauges (Comparison ) | ||
Diagramming / Code-based Graph tools / https://text-to-diagram.com/ | |||
| https://mermaid-js.github.io/mermaid/ | mermaid | ||
| https://plantuml.com/ | |||
| https://github.com/terrastruct/d2 | 18,027 | 3 days ago | |
Diagramming / Code-based Graph tools | |||
| https://google.github.io/typograms/ | new one: | ||
| http://blockdiag.com/en/ | |||
| https://pypi.org/project/diagrams/ | python's | ||
| https://structurizr.com/ | |||
| https://github.com/mhlabs/cfn-diagram | 67 | 5 months ago | visualize cloudformation -> draw.io |
| https://wavedrom.com/ | (OSS) - Digital Timing Diagram or Waveform from simple textual description | ||
| https://chatuml.com/ | An AI assisted diagram editor using PlantUML syntax | ||
| https://xosh.org/text-to-diagram/ | way more tools here: | ||
Graphics and SVG Illustrations | |||
| https://www.brandcrowd.com/maker/tag/hipster | |||
| https://www.logotouse.com/ | Download any logo in LogoToUse and do whatever you want with them. This is the place to showcase more than 120+ million logos that are already designed worldwide and are archived! | ||
| https://drawsql.app/ | SQL | ||
| https://www.cloudskew.com/ | Cloud AWS/Azure/GCP diagrams | ||
| https://www.lexaloffle.com/bbs/?tid=40058 | Wobble paint | ||
Graphics and SVG Illustrations / Wireframing | |||
| https://wireflow.co/ | free open source visual designer for user flows. collaborative | ||
| https://uizard.io/ | AI driven design with wireframe | ||
Graphics and SVG Illustrations / Device Mocks | |||
| https://shooot.bourhaouta.com/ | Browser: , | ||
Graphics and SVG Illustrations / Device Mocks / https://shooot.bourhaouta.com/ | |||
| depth of field | with | ||
Graphics and SVG Illustrations / Device Mocks | |||
| https://www.brandbird.app/ | |||
| https://diybookcovers.com/3Dmockups/ | Books: | ||
Graphics and SVG Illustrations / Device Mocks / https://diybookcovers.com/3Dmockups/ | |||
| https://3d-book-css.netlify.app/ | and | ||
| https://convertkit.com/how-to-make-an-ebook-cover | book cover advice | ||
Graphics and SVG Illustrations / Device Mocks | |||
| https://magicmockups.com | Macbook: | ||
| https://deviceful.netlify.app/documentation.html | animate them, why not (previously ) | ||
| https://www.rotato.xyz/ | phone/watch: | ||
Graphics and SVG Illustrations / Device Mocks / https://www.rotato.xyz/ | |||
| https://rotato.app/ | including making 3d video!!! example | ||
| https://x.com/hellokillian/status/1743469389222195680?s=20 | and | ||
Graphics and SVG Illustrations / Device Mocks | |||
| https://deviceshots.com/ | other devices | ||
| https://things.morflax.com/styles | 3D mocks: | ||
| Screenstab | : Turn screenshots into dramatically angled photos | ||
| Facebook Design Devices | 🔥 | ||
| Shotsnapp | |||
| https://www.ls.graphics/devices-mockups | |||
| Device Mock-Up Inspiration | in context: | ||
| Lstore Graphics | – Includes video | ||
| Creative Market | device mockups | ||
| Pika | : screenshot, website and device mockups (Paid, $99 one time) | ||
Graphics and SVG Illustrations / Illustrations | |||
| https://www.reddit.com/r/FreeIllustrations/top?t=all | |||
| https://undraw.co/ | An open-source illustrations website, where you can change the colors of the illustrations online before downloading | ||
| https://www.humaaans.com/ | diverse, customizable human svgs | ||
Graphics and SVG Illustrations / Illustrations / https://www.humaaans.com/ | |||
| https://fresh-folk.com/ | is similar | ||
Graphics and SVG Illustrations / Illustrations | |||
| https://www.blackillustrations.com/ | "Beautiful, FREE illustrations of black people for your next digital project" | ||
Graphics and SVG Illustrations / Illustrations / https://www.blackillustrations.com/ | |||
| https://www.illustratorhub.com/ | hire custom designs via | ||
Graphics and SVG Illustrations / Illustrations | |||
| https://www.vecteezy.com/ | High quality vector graphics with worry-free licensing for personal and commercial use | ||
| https://streamlineicons.com/ux/ | illustrations to go with Streamline icons | ||
| https://icons8.com/illustrations | (previously ouch.pics) | ||
| https://blush.design/ | good random generator by Pablo Stanley. Made for Sketch, Figma, InVision Studio and Adobe XD | ||
| https://www.freepik.com/ | Graphic resources for everyone: Find Free Vectors, Stock Photos, PSD and Icons | ||
| https://www.openpeeps.com/ | |||
| https://iradesign.io/ | Build your own illustrations - very gradient/faceless illo heavy | ||
| https://www.storyset.com/ | free customizable illustrations for your next project | ||
| https://www.pixeltrue.com/ | |||
Graphics and SVG Illustrations / Illustrations / https://www.pixeltrue.com/ | |||
| https://www.pixeltrue.com/frontliner-heroes | 24 high-quality Covid illustrations | ||
| https://www.pixeltrue.com/free-illustrations | free vector illustrations | ||
Graphics and SVG Illustrations / Illustrations | |||
| https://www.seekpng.com/ | 1m+ Transparent PNG Images For Free | ||
| https://freellustrations.com/ | |||
| https://2.flexiple.com/scale/all-illustrations | One new high-quality, open-source illustration each day. Use our color-picker to adapt the illustrations to your brand identity! | ||
| https://2.flexiple.com/scale/home | |||
| https://illustrationkit.com/ | Free vector illustrations for personal & commercial projects no attribution required | ||
| https://www.glazestock.com/ | |||
| https://openclipart.org/ | |||
| https://gallery.manypixels.co/ | ManyPixels offer free svg illustrations with the possibility to customize the color as well | ||
| https://generator.opendoodles.com/ | illustrations with color generator for svgs | ||
| https://www.openpeeps.com/ | a hand-drawn illustration library to create scenes of people | ||
| https://opengameart.org/ | |||
| https://usesmash.com/ | Smash Illustrations features trendy characters and simple illustrations for free in commercial and personal use. It features more than 250+ objects and characters, and 20+ unique scenes so you can compose them however you like | ||
| https://control.rocks/ | |||
| https://mixkit.co/free-stock-art/ | Mixkit is the Unsplash of illustrations, or that is their objective. It features many illustration categories and also stock videos and music, all free of charge | ||
| https://delesign.com/free-designs/graphics/ | |||
| https://illlustrations.co/ | 100 beautiful illustrations, designed by Vijay Verma during a 100 days of illustrations challenge | ||
| https://isometric.online/ | This website offers a searchable list of nice and free isometric illustrations | ||
| https://www.codeinwp.com/pattern-collection/ | abstract art illutrations | ||
| https://www.glazestock.com/ | |||
| https://lukaszadam.com/illustrations | library of Free Illustrations and Icons for everyone | ||
| https://design.dev/ | some illustrations in PS/sketch/etc. requires account | ||
| https://www.manuelalangella.com/retroooo-folks/ | Retroooo Folks is a vector-based Mix-and-Match library of hand-drawn sketches, created for Adobe Illustrator, Sketch and Adobe Draw | ||
| https://woobro.design/ | |||
| https://pimpmydrawing.com/ | |||
| https://www.drawkit.io/ | Hand-drawn vector illustration resources for your next project | ||
| https://www.karthiksrinivas.in/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 | ||
| https://www.veila.me/freebies/scandinavian-houses-free-vector-images | |||
| https://absurd.design/ | |||
| https://github.com/MariaLetta/mega-doodles-pack | 486 | over 5 years ago | |
| https://iradesign.io/ | |||
| https://autodraw.com | Google AI assisted drawing | ||
| https://hotpot.ai | Free or paid. Create icons, app screenshots, MacBook/browser mockups, social media posts, and other graphics for mobile apps and browser extensions | ||
| https://www.magicpattern.design/examples | one-click web editor for illustration patterns. It's perfect for branding landing pages, social media posts and featured images. Requires Google signup | ||
| https://gumroad.com/l/just | sketch me (paid) | ||
| https://error404.fun/ | 404 page illustrations | ||
| https://designstripe.com/ | free illustrations + easy to use web editor that allows customizing palettes, characters, look & feel, among others | ||
Graphics and SVG Illustrations / 3D illustrations | |||
| https://www.isometriclove.com/ | Cute Isometric Objects For Your Design | ||
| https://www.handz.design/ | 3d hand gestures | ||
| https://isoflat.com/ | Isometric and flat graphic resources | ||
| https://www.shapefest.com/ | 160,000+ high resolution PNG images of beautiful 3D shapes | ||
| https://powerpeopleplatform.com/ | delicious design library of 3D avatars | ||
| https://spline.design/ | Easily create and publish 3D web experiences. Build and iterate fast with production-ready results | ||
| https://news.ycombinator.com/item?id=33845291 | Blockbench - low poly blender altnerative | ||
| https://news.ycombinator.com/item?id=33273022 | |||
Graphics and SVG Illustrations / Handwritten Look | |||
| https://roughnotation.com/ | RoughJS Animated Annotation - | ||
| https://excalidraw.com/ | |||
| https://alias-rahil.github.io/handwritten.js/ | |||
Graphics and SVG Illustrations / Pixel Art | |||
| http://pixelartmaker.com/ | |||
| https://nostalgic-css.github.io/NES.css/ | |||
| https://www.zophar.net/music/nintendo-snes-spc | SNES music | ||
Graphics and SVG Illustrations / ASCII Art | |||
| https://fatiherikli.github.io/archetype/ | |||
| https://textik.com/#a4ec12a68785f25f | |||
| http://asciiflow.com/ | |||
| https://monodraw.helftone.com/ | |||
| list | text to diagramming tools | ||
| https://github.com/asciitosvg/asciitosvg | 211 | almost 2 years ago | ascii to svg diagrams |
| https://mrogalski.eu/ansi-art/ | from picture to ANSI art | ||
Graphics and SVG Illustrations / matrix8967's list / Here's a list of plain text information tools from my notes: | |||
| https://mbarkhau.keybase.pub/asciigrid/ | |||
| https://gitlab.com/mbarkhau/asciigrid/ | |||
Graphics and SVG Illustrations / matrix8967's list / ascii-tables is exactly what is says on the label | |||
| https://ozh.github.io/ascii-tables/ | |||
| https://github.com/ozh/ascii-tables/ | 608 | over 1 year ago | |
Graphics and SVG Illustrations / matrix8967's list / netpen | |||
| https://www.netpen.io/main/ | |||
| https://github.com/ebirger/netpen/ | 37 | over 1 year ago | |
Graphics and SVG Illustrations / matrix8967's list / svgbob and svg-term are both great for creating SVGs out of these plain text files: | |||
| https://github.com/marionebl/svg-term-cli/ | 3,552 | 7 months ago | |
| https://ivanceras.github.io/svgbob-editor/ | |||
| https://github.com/ivanceras/svgbob/ | 3,883 | 4 days ago | |
Graphics and SVG Illustrations / matrix8967's list / Here are some TUI/CLI focused frameworks. These are over kill for me | |||
| https://www.textualize.io/ | |||
| https://charm.sh/ | |||
| http://maaslalani.com/slides/ | |||
| https://github.com/peterbrittain/asciimatics/ | 3,655 | about 2 months ago | |
Graphics and SVG Illustrations / matrix8967's list / TUI/Text-Based presentaion tools: | |||
| https://sli.dev/ | |||
| https://github.com/slidevjs/slidev/ | 33,443 | 3 days ago | |
| https://github.com/maaslalani/slides/ | 9,928 | 3 months ago | |
| http://maaslalani.com/slides/ | |||
| https://github.com/d0c-s4vage/lookatme/ | 2,110 | 8 months ago | |
| https://github.com/chunqiuyiyu/ervy/ | 1,590 | about 1 year ago | |
Graphics and SVG Illustrations / matrix8967's list / Honorable Mention goes to wtf-util and it's TUI configurator: | |||
| https://wtfutil.com/ | |||
| https://github.com/ggerganov/wtf-tui | 85 | almost 4 years ago | |
Graphics and SVG Illustrations / DIY Graphic Design | |||
| https://snappa.com/ | |||
| https://www.canva.com/ | |||
| https://www.fotojet.com/ | esp for photo collages | ||
| https://studio.polotno.dev/ | |||
Graphics and SVG Illustrations / Stock Photos and Videos | |||
| https://unsplash.com/ | of course | ||
| https://www.flickr.com/creativecommons/ | |||
| https://isorepublic.com/ | |||
| https://negativespace.co/ | |||
Graphics and SVG Illustrations / Stock Photos and Videos / stock photo metasearch | |||
| https://www.everypixel.com/ | |||
| https://same.energy/ | AI driven similarity search | ||
| https://www.chamberofcommerce.org/findaphoto/ | |||
| https://zoomstock.com/ | t-SNE stock photo search | ||
| https://www.goodfreephotos.com/ | 27k free and public domain photos, images, clipart, pics and vectors | ||
| https://visualhunt.com/ | search 354m high quality creative commons licensed photos | ||
Graphics and SVG Illustrations / Stock Photos and Videos / art focus | |||
| https://artvee.com/ | public domain art (in particular check out the ) | ||
Graphics and SVG Illustrations / Stock Photos and Videos / startups | |||
| https://startupstockphotos.com/ | |||
Graphics and SVG Illustrations / Stock Photos and Videos / faces | |||
| https://www.nappy.co/ | "Beautiful, high-res photos of black and brown people. For free." | ||
Graphics and SVG Illustrations / Stock Photos and Videos / nature | |||
| https://freenaturestock.com/ | |||
| http://imagebase.net/ | |||
| https://visualsofearth.com/c/ | nature, space, desert, etc. mobile focused | ||
Graphics and SVG Illustrations / Stock Photos and Videos / travel | |||
| http://photos.bucketlistly.com/ | A free creative common collection of over 5000+ travel photos from all over the world anyone can use | ||
Graphics and SVG Illustrations / Stock Photos and Videos / color | |||
| https://500px.com/ | (premium - search by color) | ||
Graphics and SVG Illustrations / Stock Photos and Videos / misc/novelty | |||
| http://www.ghibli.jp/info/013251/ | studio ghibli free backgrounds | ||
| https://gratisography.com/ | quirky/whimsy | ||
| https://covers.alphacoders.com/by_category/4/2/twitter-header | |||
| https://foter.com/ | furniture | ||
| https://picjumbo.com/ | |||
| https://photos.icons8.com/creator/ | Create custom stock photos | ||
| https://generated.photos/ | AI-generated stock photos | ||
| https://photos.icons8.com/ | |||
| https://duotone.shapefactory.co/?f=f56468&t=27184f&q=_&i=oMpAz-DN-9I | (unsplash with duotone filter) | ||
| https://allthefreestock.com/ | |||
| https://thenounproject.com/search/photos/?q=happy | |||
Graphics and SVG Illustrations / Stock Photos and Videos / lists of more resources | |||
| https://www.mattcrampton.com/blog/mega_list_of_free_image_sites_for_blogging/ | random low quality list | ||
| https://github.com/neutraltone/awesome-stock-resources | 13,048 | 4 months ago | |
| https://burst.shopify.com/ | Burst from Shopify - Free stock photos for everyone | ||
Graphics and SVG Illustrations / Stock Photos and Videos / Paid | |||
| https://deathtothestockphoto.com/ | |||
| https://www.stocksy.com/ | (premium) | ||
Graphics and SVG Illustrations / Stock Videos | |||
| https://pexels.com | |||
| https://pixabay.com/videos | |||
| https://mixkit.co | |||
| https://www.vecteezy.com/ | |||
| https://www.pond5.com/ | |||
| https://videohive.net/ | 3,048,864 Video effects and stock footage | ||
Graphics and SVG Illustrations / Video creation tools / Generic editors | |||
| https://motionbox.io/ | Good in browser video editor - nice intros and outros, templates a bit limited but pretty good | ||
| https://shotstack.io/ | Automate edit bulk videos with custom templates | ||
| https://invideo.io/ | good video maker with lots of nice generic templates and imports stock video | ||
| https://www.moovly.com/video-templates | |||
| https://animoto.com/ | drag and drop video maker. more elegant/real | ||
| https://www.renderforest.com/templates | seems versatile but not super intuitive and dunno how to change the transitions | ||
| https://videobolt.net | nice intro editor with some video templates - from jay phelps | ||
Graphics and SVG Illustrations / Video creation tools / web editors | |||
| https://detail.co/ | |||
| https://runwayml.com/ | Magical AI tools, realtime collaboration, precision editing, and more. Your next-generation video creation suite | ||
Graphics and SVG Illustrations / Video creation tools / specialty videos | |||
| https://biteable.com/ | simple video maker with templates and stock video. kiiinda cartoony | ||
| https://vyond.com/ | also kinda cartoony | ||
| https://app.animaker.com/moments | also kinda cartoony but can do real video ( ) | ||
| https://powtoon.com | nice studio for cartoony professional videos and presentations with nice transitions | ||
| https://www.doodly.com/ | whiteboard doodle explainer videos. $39/mo | ||
| https://talevideo.com/ | website demo video | ||
| https://twitter.com/antfu7/status/1577832867761004544?s=46&t=WQ5RClw9ARIs9_ohcB_v-g | code animation based on text diffs | ||
Graphics and SVG Illustrations / Video creation tools | |||
| https://www.fable.app/academy/fable-quick-start-course-part-2-of-3 | Fable motion design | ||
| https://github.com/remotion-dev/remotion | 20,779 | 5 days ago | code videos with React |
Graphics and SVG Illustrations / Video creation tools / https://github.com/remotion-dev/remotion | |||
| https://twitter.com/JDihlmann/status/1516853381242961921?s=20&t=kB6uuP2qxW83A0A-NlQerg | example usage | ||
Graphics and SVG Illustrations / Video creation tools | |||
| https://glitterly.app/ | kinda rough - mostly image maker, video features in beta | ||
| https://viddyoze.com | "3d video animations". promising videos, but $97 lifetime.. seems sketchy | ||
| https://www.fiverr.com/search/gigs?query=explainer%20videos&source=top-bar&search_in=everywhere&search-autocomplete-original-term=explainer%20videos | |||
| https://www.medialuv.com/ | design animation studio | ||
| https://www.youtube.com/watch?v=N6-Q2dgodLs | Fireship/jeff delaney | ||
| https://www.youtube.com/watch?v=vcKkRrNBdVI | Florin pop | ||
Graphics and SVG Illustrations / Avatars / lo-fi autogenerated avatars | |||
| https://boringavatars.com/ | |||
| https://robohash.org/ | |||
| https://idbloc.co/blog/product/update/2019/05/09/toggles-identicons-and-beauty.html | identicons | ||
| https://github.com/emeraldpay/hashicon | 192 | almost 3 years ago | |
Graphics and SVG Illustrations / Avatars | |||
| https://github.com/pshihn/stippled-image | 32 | over 4 years ago | instead of showing people's faces, try stippling |
| https://en.gravatar.com/ | |||
| https://unavatar.now.sh/ | grab social images from username/email | ||
| http://avatars.adorable.io/#demo | |||
| https://multiavatar.com | |||
| https://personas.draftbit.com/ | A playful avatar generator for the modern age | ||
| https://avataaars.com/ | and | ||
| https://readyplayer.me/avatar | 3d customizable avatars | ||
| https://bigheads.io/ | |||
| https://joeschmoe.io/ | An illustrated avatar collection for developers and designers | ||
| https://amritpaldesign.com/toy-faces | Toy Faces is a fun diverse library of 3D avatars for your design mockups and personal use | ||
| https://gumroad.com/l/siKBl | 3d diverse avatars, paid | ||
Individual HTML Elements | |||
| https://kazzkiq.github.io/balloon.css/ | |||
| niche tip on tooltips js perf | |||
| https://www.floating-ui.com/ | from tippyjs guy | ||
Individual HTML Elements / Anything But Dropdowns / Checkbox | |||
| https://getcssscan.com/css-checkboxes-examples | 60+ beautiful checkboxes | ||
Individual HTML Elements / Buttons | |||
| https://twitter.com/thesephist/status/1587950509503270914?s=20&t=k8x3X6k8qD-5zF8Y5vyB8w | CSS keyboard buttons (Linus' toes) | ||
| https://frontend.horse/articles/buttons-that-spark-joy/ | |||
| https://getcssscan.com/css-buttons-examples | |||
Individual HTML Elements / Buttons / 3d buttons | |||
| http://simurai.com/archive/buttons/# | CSS3 3D Buttons | ||
| https://code.hnldesign.nl/btn-deluxe/ | Button Deluxe v3 A whimsical 3D pure CSS button | ||
Individual HTML Elements / Buttons | |||
| https://cssbuttons.vercel.app/ | cssbuttons: HTML & CSS Buttons Collection Built in React | ||
| https://getcssscan.com/css-buttons-examples | |||
| https://simurai.com/archive/buttons/ | bonbon sweet css 3d buttons | ||
| https://markodenic.com/tools/buttons-generator/ | |||
| https://jsfiddle.net/pixel67/ZxZ6B/28/ | moving lightsource on hover css buttons idea | ||
| https://twitter.com/avstorm/status/1646204829826445312 | moving gradients on hover | ||
Individual HTML Elements / Forms | |||
| https://twitter.com/swyx/status/1081200428950335488?s=21 | form submission UX | ||
| https://github.com/scottaohara/a11y_styled_form_controls | 461 | almost 2 years ago | Accessible Styled Forms |
| https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/ | accessibility for all elements | ||
| https://medium.com/nextux/form-design-best-practices-9525c321d759 | Form Design Best Practices | ||
| https://medium.com/nextux/how-to-design-a-form-wizard-b85fe1cc665a | Form Wizard | ||
| https://medium.com/nextux/form-design-for-complex-applications-d8a1d025eba6 | Complex Forms | ||
| https://medium.com/nextux/forms-need-validation-2ecbccbacea1 | Form Validation UX | ||
| https://www.bram.us/2021/01/28/form-validation-you-want-notfocusinvalid-not-invalid/ | Form Validation | ||
| https://github.com/mdo/wtf-forms | 2,695 | about 4 years ago | WTF Forms: Nicer Forms eg Radio Buttons with pure CSS |
| https://twitter.com/steveschoger/status/1171429842442522625 | Output-inspired form: | ||
| https://codepen.io/liamj/pen/vYYLGZj | show button when placeholder-shown: | ||
| https://jnkkkk.github.io/MoreToggles.css/allToggles.html | Toggles: | ||
| https://codepen.io/jkantner/pen/VwaBomY | 3D LED switch: | ||
| https://www.crazyegg.com/blog/guides/great-form-ui-and-ux/ | The Crazy Egg Guide to Great Form UI and UX | ||
| https://gerireid.com/forms.html | Best practice, research insights and examples by Geri Reid | ||
Individual HTML Elements / Tables | |||
| https://www.uxbooth.com/articles/designing-user-friendly-data-tables/ | |||
| https://medium.com/nextux/design-better-data-tables-4ecc99d23356 | |||
| https://twitter.com/erikdkennedy/status/1329787833058353154?s=20 | |||
| A table with both a sticky header and a sticky first column | |||
Individual HTML Elements / Datepickers | |||
| https://github.com/Pikaday/Pikaday | 8,013 | 4 months ago | |
| https://twitter.com/timolins/status/1429761631471480838 | |||
Individual HTML Elements / Sound | |||
| https://www.zapsplat.com/ | |||
| https://www.myinstants.com/index/se/ | |||
| https://studio.youtube.com/channel/ | YouTube's Audio Library | ||
| https://icons8.com/music | |||
| https://freesound.org/ | |||
| https://pixabay.com/music/ | |||
| https://cchound.com/ | 100% free, quality CC audio | ||
| https://www.pianobook.co.uk/ | as hundreds of no-charge sample libraries (many pianos, lots of other things) | ||
| https://loyaltyfreakmusic.com/ | some royalty free music. gremlin podcast usees it | ||
Individual HTML Elements / Sound / podcast intros | |||
| https://aaraalto.com/sounds | a few brief guitar samples for podcast transitions | ||
| https://transistor.fm/free-podcast-intro-music/ | free podcast intro music | ||
Individual HTML Elements / Sound | |||
| https://www.soundstripe.com/ | |||
| https://www.premiumbeat.com/ | |||
| https://www.streambeats.com/ | |||
| https://www.canva.com/help/article/stock-music | |||
| https://www.epidemicsound.com/ | |||
| https://www.youtube.com/channel/UCV3itPyPPgvftXBsreYADlw | Bensound | ||
| https://www.soundboardguy.com/ | |||
| https://snapmuse.com/ | royalty free music for Youtube, Podcast, Vlog and other video projects | ||
| https://www.epidemicsound.com/ | |||
| https://artlist.io/ | may have better licensing but no fx | ||
| https://www.soundstripe.com/ | (cheapest) here's a comparison | ||
| https://www.bensound.com/ | |||
| https://snapmuse.com/ | |||
| https://www.audacityteam.org/ | |||
| https://joshwcomeau.com/react/announcing-use-sound-react-hook/ | |||
| https://source-separation.github.io/tutorial/landing.html | |||
Individual HTML Elements / Lightweight Charts/Dataviz | |||
| https://rbitr.github.io/ChartS.css/ | |||
| https://echarts.apache.org/en/index.html | Apache E Charts | ||
| https://chartscss.org/ | Charts.css is a modern CSS framework. It uses CSS utility classes to style HTML elements as charts | ||
| https://github.com/aftertheflood/sparks | 2,084 | about 1 year ago | Sparkline fonts in text: and |
| https://vizzuhq.com/ | |||
| https://docs.anychart.com/Basic_Charts/Stacked/Value/Vertical_Area_Chart | |||
| https://antv.vision/en | |||
| https://stephenhutchings.github.io/shown/ | Statically-generated, responsive charts, without the need for client-side Javascript | ||
Individual HTML Elements / Dashboarding | |||
| https://github.com/cruip/tailwind-dashboard-template | 2,356 | about 2 months ago | This one is made with Tailwind and React and includes optional chart components built with Chart.js |
Individual HTML Elements / Nice React Components | |||
| https://react-smooth-range-input.now.sh/ | |||
| https://github.com/beerose/theme-ui-sketchy | 202 | almost 2 years ago | Theme-ui-sketchy - roughjs components with themeui |
| https://react-physics-dragger-demo.netlify.com/ | React Physics Dragger | ||
| React-Designer | : Easy to configure, lightweight, editable vector graphics in your react components | ||
| Folding the DOM | from | ||
| https://hamburger-react.netlify.com/ | React Hamburger Icons | ||
Individual HTML Elements / Nice React Components / https://hamburger-react.netlify.com/ | |||
| https://news.ycombinator.com/item?id=30712599 | note issues with hamburger menus | ||
Individual HTML Elements / Nice React Components | |||
| https://react-curved-arrow.nickjanssen.com/ | React Curved Arrow | ||
Individual HTML Elements / Nice React Components / Spinners | |||
| https://github.com/tienpham94/react-awesome-spinners | 249 | almost 2 years ago | requires styled components |
| https://github.com/davidhu2000/react-spinners | 3,114 | about 2 months ago | |
| https://github.com/JoshK2/react-spinners-css | 322 | over 1 year ago | |
| https://github.com/JoshK2/react-spinners-css | 322 | over 1 year ago | |
| https://www.npmjs.com/package/react-loaders-kit | 200kb tho | ||
| https://github.com/adexin/spinners-react | 415 | 10 days ago | |
| https://gooey-react.netlify.app/examples/rotating-loader/ | |||
Individual HTML Elements / Nice React Components | |||
| https://react-pdf-viewer.dev/ | PDF viewer | ||
Individual HTML Elements / React Toasting | |||
| https://cogoport.github.io/cogo-toast | |||
| https://fkhadra.github.io/react-toastify/ | |||
Individual HTML Elements / React Gamification | |||
| https://github.com/thedevelobear/react-rewards | 1,517 | over 1 year ago | |
| https://alampros.github.io/react-confetti/ | React Confetti | ||
| https://daniel-lundin.github.io/react-dom-confetti/ | React DOM Confetti | ||
Individual HTML Elements / Misc Weird fun stuff | |||
| https://codepen.io/jamc92/details/KaMLvY | Perspective stairstep text effects (in action: ) | ||
| https://web.dev/building-split-text-animations/ | Split text animations | ||
| https://party.js.org/ | add particle effects to a web page, specifically confetti and sparkles | ||
| https://jmperezperez.com/duotone-using-css-blend-modes/ | Duotone blend modes: | ||
Individual HTML Elements / Misc Weird fun stuff / https://jmperezperez.com/duotone-using-css-blend-modes/ | |||
| https://typefully.com/DanHollick/blending-modes-KrBa0JP | full guide to blend modes | ||
Individual HTML Elements / Misc Weird fun stuff | |||
| https://codepen.io/mandymichael/details/dJZQaz | Decovar Font with Text shadows: (and other ) | ||
| mentioned here | Expanding Search buton and text from Ana Tudor | ||
| https://www.smore.com/clippy-js | ClippyJS | ||
| https://okazari.github.io/Rythm.js/ | Rythm.js - make your page dance | ||
| https://timqian.com/chart.xkcd/ | XKCD chart | ||
| Codepen | Netflix slide-in menu - | ||
| 2min video | Peek Href on Links - | ||
| Gooey Effect with SVG and Filters | |||
| SVG filters | More on | ||
| Backdrop Filters and Multiple Inner Shadows | |||
| Swyx CSS Filter toy | |||
| CSS motion blur on css tricks | |||
| Instagram filters created with CSS filters, by Una | |||
| CSS only hover effect with Headers | |||
| SVG iPhone mock and animated notification transition | |||
| https://roughnotation.com/ | RoughJS Annotation - | ||
| https://codepen.io/ste-vg/pen/GRooLza | Greensock GSAP scroll trigger demo with a ThreeJS Plane model | ||
| https://htmldom.dev/ | little HTML tricks that are handy | ||
| https://1stwebdesigner.com/css-effects/ | |||
| https://twitter.com/cassiecodes/status/1383432725059674112?s=20 | great svg ideas | ||
| https://lisyarus.github.io/blog/programming/2023/02/21/exponential-smoothing.html | exponential smoothing animation in js | ||
Pure CSS Tricks | |||
| https://leaverou.github.io/css3patterns/ | CSS3 Patterns | ||
| https://brumm.af/shadows | Box shadows | ||
Pure CSS Tricks / https://brumm.af/shadows | |||
| https://getcssscan.com/css-box-shadow-examples | |||
| https://www.joshwcomeau.com/css/designing-shadows/ | Designing Beautiful Shadows in CSS | ||
| https://smoothshadows.com/ | inspired the smooth shadows generator | ||
Pure CSS Tricks | |||
| https://www.joshwcomeau.com/shadow-palette/ | ( ) | ||
| https://card.surge.sh/ | Card border Generator | ||
| https://maxbittker.github.io/broider/ | Broider - 9-patch css grid borders | ||
| https://css-scroll-shadows.now.sh/ | CSS Scroll Shadows | ||
| https://twitter.com/argyleink/status/1282889809782927360 | Conic gradient borders | ||
| use Background-origin + transparent borders | Gradient Borders without extra elements: | ||
| https://components.ai/box-shadows | Components.ai box shadows | ||
| https://codepen.io/dienhn/pen/xxErveM | Emoji Shadows | ||
| https://neumorphism.io/#f3d2c3 | Neuomorphism Generator | ||
Pure CSS Tricks / https://neumorphism.io/#f3d2c3 | |||
| https://uxdesign.cc/tridimensionality-of-skeuomorphism-flat-design-and-neumorphism-bc9d705a5cc7 | primer on skeuo vs flat vs neuomorphism | ||
Pure CSS Tricks / Blend Modes | |||
| background-blend-mode color-burn, lighten, multiply are cool | |||
Pure CSS Tricks / CSS clip path | |||
| https://labs.jensimmons.com/#shapes | |||
| https://bennettfeely.com/clippy/ | |||
| https://youtu.be/u9bDe3Bw0sA | |||
| https://css-tricks.com/animating-with-clip-path/ | CSS tricks clip path animation tutorial | ||
| https://24ways.org/2019/flexible-captioned-slanted-images/ | slanted image gallery with clip path | ||
Pure CSS Tricks / SVG/Canvas Masking / JPG/PNG to SVG | |||
| http://potrace.sourceforge.net/ | core tool | ||
| https://picsvg.com/ | |||
| https://svgurt.com/#/ | |||
| https://codepen.io/jesstelford/pen/PaBMrL | small dynamic SVG placeholders | ||
| https://github.com/woltapp/blurhash | 15,853 | 5 months ago | small dynamic SVG placeholders for blurring up |
| https://www.usetracy.com/ | make SVGs from monochrome drawings or images | ||
Pure CSS Tricks / SVG/Canvas Masking / SVG to JSX | |||
| https://omatsuri.app/svg-to-jsx | |||
| https://svg2jsx.com/ | |||
| https://react-svgr.com/playground/ | |||
Pure CSS Tricks / SVG/Canvas Masking / SVG editors | |||
| https://boxy-svg.com/ | |||
| https://editor.method.ac/ | |||
| https://vecta.io/ | collaboration tools for teams, and also supporting diagrams, Autocad drawings, Vision stencils and drawings | ||
| https://macsvg.org/ | light open-source macOS application for SVG editing and animations | ||
| https://github.com/SVG-Edit/svgedit | 6,698 | 11 days ago | fully-fledged SVG editor for sophisticated SVG editing |
Pure CSS Tricks / SVG/Canvas Masking / SVG Compression | |||
| https://jakearchibald.github.io/svgomg/ | |||
| https://www.smashingmagazine.com/2021/03/svg-generators/#svg-compression | SVGO | ||
Pure CSS Tricks / SVG/Canvas Masking / SVG assets manager | |||
| https://svgx.app/ | free desktop SVG asset manager which allows you to keep all SVGs in one place. You can bookmark, search and preview SVG icons, live-edit the SVG markup, preview the icons in dark mode and copy/paste markup and CSS with one click. By default it also uses SVGO for SVG optimizations. Available for Mac and Windows | ||
| https://iconset.io/ | You can drag icons from Iconset directly into Sketch, Figma, Adobe XD and pretty much anything else, without plugin or extension installs. Plus, you can also sync icons across devices via Dropbox or similar services, and publish and share your icon sets. Available for Mac and Windows | ||
Pure CSS Tricks / SVG/Canvas Masking | |||
| https://svgsprit.es/ | SVG Sprites generator context | ||
| Codepen | Transparent fill SVG and color in on Hover - | ||
| https://speckyboy.com/css-svg-canvas-masks/ | |||
| https://www.blobmaker.app/ | generate some fancy blobs | ||
| https://squircley.app/ | generator of organic shapes for any kind of visuals or background images. You choose the rotation, the scale, the “curvature” and the fill color, and the tool takes care of the rest | ||
| https://inkscape.org/ | |||
| https://svg-path-visualizer.netlify.app/ | |||
| https://svgcrop.com/ | remove blank space automatically | ||
| https://msurguy.github.io/svg-cropper-tool/ | more refined control of cropping with additional options for cropping style — circle, polygon, custom shape | ||
| https://codepen.io/winkerVSbecks/full/wrZQQm/ | SVG Polygon Generator allows you to define the number of sides, radius, spacing and it generates a | ||
| https://rawgraphs.io/ | SVG Data Visualization Generator - sunburst, circular dendrogram or multiple convex hull, for example. with tutorials: | ||
Pure CSS Tricks / SVG/Canvas Masking / svg and text effects | |||
| https://pavellaptev.github.io/warp-svg/ | |||
| https://css-tricks.com/animate-blob-text-with-svg-text-clipping/ | |||
| https://letsbuildui.dev/articles/css-text-effects-five-minimal-examples | more text effects | ||
Pure CSS Tricks / SVG/Canvas Masking | |||
| https://svgartista.net/ | animate an existing svg | ||
| really good for SVG icons, with hover | is | ||
Pure CSS Tricks / SVG/Canvas Masking / SVG animations | |||
| https://blog.nucleoapp.com/create-2-state-svg-powered-animated-icons-76ed19160a7e | SVG icon transitions | ||
Pure CSS Tricks / SVG/Canvas Masking / SVG animations / https://blog.nucleoapp.com/create-2-state-svg-powered-animated-icons-76ed19160a7e | |||
| https://nucleoapp.com/tool/icon-transition | |||
Pure CSS Tricks / SVG/Canvas Masking / SVG animations | |||
| https://www.youtube.com/watch?v=Tae96ze3xwY | scroll based svg text path animation | ||
| https://css-tricks.com/a-trick-that-makes-drawing-svg-lines-way-easier/ | stroke path animation | ||
| https://maxwellito.github.io/vivus-instant/ | animate svg strokes | ||
| https://svgartista.net/ | basic fill and stroke animations | ||
| https://www.svgator.com/ | dedicated editor for SVG animations with plenty of dedicated panels for everything from skewing to stroke path and filters | ||
| http://www.svgjs.com/ | GSAP, SVG.js ( ), Lottie | ||
| https://svija.love/animation | SVG animation tool | ||
Animations & Transitions | |||
| https://cssfx.netlify.com/ | Buttons, hover, inputs, and loaders | ||
| http://animista.net | general | ||
Animations & Transitions / http://animista.net | |||
| https://svgartista.net/ | animate an existing svg (by the same people as animista) | ||
Animations & Transitions | |||
| https://animejs.com/ | general | ||
| https://www.theatrejs.com/ | animate DOM elements or WebGL using a convenient visual editor that works along with the code you write | ||
| https://github.com/mojs/mojs | 18,533 | 6 months ago | motion graphics |
| https://www.transition.style/ | CSS transitions "My favourites are the ones that incorporate some hesitation in the animation, for an added uniqueness" | ||
| https://daneden.github.io/animate.css/ | general | ||
| https://animxyz.com/ | Tailwind for animations, since you’re only using HTML classes | ||
| https://ianlunn.github.io/Hover/ | general | ||
| https://march08.github.io/animated-burgers/ | Burgers | ||
| http://negomi.github.io/react-burger-menu/ | Burgers | ||
| https://github.com/aholachek/react-flip-toolkit | 4,086 | about 2 months ago | Layout |
| https://www.csswand.dev/ | Hover and loaders: | ||
| https://lottiefiles.com/ | Graphic animations: | ||
Animations & Transitions / https://lottiefiles.com/ | |||
| https://www.pixeltrue.com/free-illustrations | lottie animations | ||
Animations & Transitions | |||
| https://tumult.com/hype/ | HTML animation? (paid) | ||
| https://github.com/swup/swup | 4,660 | about 1 month ago | Page Transitions with swup ( ) |
| https://animxyz.com/docs/ | css animation without keyframes | ||
| https://xsgames.co/animatiss/ | collection of css animations | ||
| https://ericfortis.github.io/web-animations/ | Open source plain JS, CSS, HTML, SVG animations | ||
| https://stackdiary.com/css-animations/ | animation introduction & examples | ||
Animations & Transitions / Loading Spinners | |||
| https://wc-spinners.cjennings.dev/ | web components | ||
| https://tobiasahlin.com/spinkit/ | Spinners | ||
Animations & Transitions / Loading Spinners / You can make your button a spinner too: | |||
| https://joebell.co.uk/sketches/loading-disco | |||
| https://twitter.com/joebell_/status/1557355193473585153 | demo: | ||
Animations & Transitions / Loading Spinners | |||
| https://cssfx.netlify.com/ | Buttons, hover, inputs, and loaders | ||
| Codepen | Conic gradient loader in CSS - | ||
| https://github.com/JoshK2/react-spinners-css | 322 | over 1 year ago | React, Vue and Angular Spinners |
| https://andrew.wang-hoyer.com/experiments/svg-animations/ | |||
| https://projects.lukehaas.me/css-loaders/ | Single Element CSS Spinners | ||
| https://whirl.netlify.app/ | 100+ animated loaders | ||
Animations & Transitions / React Animation Tools | |||
| https://react-simple-animate.now.sh/ | |||
| https://github.com/brunnolou/react-morph | 2,539 | almost 2 years ago | |
| https://github.com/kitze/react-genie | 745 | over 1 year ago | |
| https://github.com/joerez/react-transitions/ | 215 | almost 2 years ago | Page transitions |
| https://animxyz.com/docs/ | has react and vue integration | ||
Ideas for Improving UX / Onboarding | |||
| https://www.appcues.com/ | show people things they need as they need them | ||
| https://github.com/zurb/joyride | 1,420 | about 4 years ago | jQuery feature tour plugin, used in |
| https://react-curved-arrow.nickjanssen.com/ | React Curved Arrow | ||
| https://blog.appsumo.com/welcome-email-examples/ | |||
Design Software | |||
| Photopea | Image editing/Export to SVG/Object Removal/Photoshop - | ||
| https://yqnn.github.io/svg-path-editor/ | online SVG editor - | ||
| https://glimpse-editor.org/ | GIMP alternative - | ||
| https://photomosh.com/ | Image modification for hover effects: | ||
| https://photo16x9.com/ | Make photo 16x9 small tool | ||
| https://twitter.com/addyosmani/status/1353616560057815041 | Enlarge low res images with ML: | ||
| https://icons8.com/lunacy | Lunacy - Graphic design software with built-in assets | ||
| Pagereview.io | Website design feedback collaboration - | ||
| https://www.invisionapp.com/inside-design/design-resources/ | Invision | ||
Design Software / Scenes | |||
| https://www.ls.graphics/scene-creators | |||
Design Software / UI kit collections | |||
| https://www.ls.graphics/ui-ux-tools | |||
Design Software / Responsive Dev Browsers | |||
| https://responsively.app/ | FOSS | ||
| http://sizzy.co/ | (paid) | ||
| https://polypane.app/ | (paid) | ||
| more alternatives | |||
Design Software / Figma | |||
| https://100dailyui.webflow.io/ | Free Figma library of products, elements, and screens | ||
| https://blush.design/ | Free Customizable Illustrations With Figma Plugin | ||
| https://www.figmafreebies.com/ | |||
| https://www.youtube.com/watch?v=RYDiDpW2VkM | 7hr figma course | ||
Design Software / Sketch | |||
| http://freebiesketch.com/ | |||
| https://www.sketchappsources.com/ | |||
| https://developer.apple.com/design/resources/ | Apple design resources | ||
Design Software / Generative Design Tools | |||
| https://photomosh.com/ | Image modification for hover effects: | ||
| http://components.ai/ | |||
Non-DOM Browser Technologies / Canvas | |||
| http://qrohlf.com/trianglify/ | Trianglify | ||
| https://generativeartistry.com/ | generative artistry | ||
| https://canvas-cards.glitch.me/ | Canvas Cards | ||
| https://www.openprocessing.org/ | Open Processing | ||
Non-DOM Browser Technologies / WebGL | |||
| Curtains.js | ( ) | ||
| Polygonjs | open-source, node-based WebGL design tool, to create 3D scenes procedurally | ||
| https://github.com/shuding/cobe | 3,258 | 5 months ago | webgl globe ( , ) |
| https://github.com/makepad/makepad | 5,171 | 6 days ago | |
| https://www.youtube.com/watch?v=Xr6dtXw0Ipg | |||
Non-DOM Browser Technologies / 3D | |||
| https://www.kukla-kit.com/ | Huge pack of 3D elements accessible directly from Figma | ||
| https://babylonjs.medium.com/babylon-js-4-2-simplicity-reimagined-965f88d0fad | |||
Interaction/Design Inspo | |||
| Httpster | |||
| Minimal Gallery | |||
| Godly.website | |||
| Hoverstat.es | |||
| Really Good Emails | |||
| SaaSFrame | |||
| Product Hunt | |||
| Landingfolio | |||
| App Fuel | |||
| Refero | |||
| Read.cv | |||
| https://pageflows.com/ | |||
| https://uimovement.com/ | |||
| https://land-book.com/ | |||
| https://uidesigndaily.com/ | |||
| https://www.siteinspire.com/ | |||
| https://www.landingfolio.com | |||
| http://www.cssmania.com/ | |||
| https://www.uisources.com/ | |||
| Codrops | |||
| https://collectui.com/ | |||
| https://theanimatedweb.com/ | |||
| https://pageflows.com/ | |||
| https://goodui.org/ | "leaked ab tests" | ||
| http://ui-patterns.com/ | |||
| https://uigarage.net/ | |||
| https://pttrns.com/ | |||
| https://thefwa.com/ | |||
| https://twitter.com/steveschoger/status/1215673997725196288?s=20 | steve schoger ui ux inspo list | ||
| https://landings.dev/ | |||
Interaction/Design Inspo / Game design inspo | |||
| https://interfaceingame.com/ | |||
| https://www.gameuidatabase.com/ | |||
| https://www.pushing-pixels.org/fui/ | movie UIs | ||
| https://www.saji8k.com/kit-fui/ | game movie and other fantasy UIs | ||
Random Stuff That Doesn't Fit Anywhere | |||
| https://10ideesrecuesenuxdesign.castoretpollux.com/en/ | |||
| https://www.cssdig.com/ | for analyzing your css | ||
Random Stuff That Doesn't Fit Anywhere / Mock APIs / Simple Data | |||
| http://quotes.rest/ | |||
| https://dogapi.dog/docs/api-v2 | (just data, no pics) | ||
| https://api.chucknorris.io/ | |||
| https://jokeapi.dev/ | |||
| https://dev.to/dailydevtips1/15-better-lorem-ipsum-generators-3f99 | |||
| https://api.quotable.io/random | simple quote | ||
Random Stuff That Doesn't Fit Anywhere / Mock APIs / Simple Data / weather apis | |||
| https://openweathermap.org/price | OpenWeather is better and has 1M calls per month for free | ||
Random Stuff That Doesn't Fit Anywhere / Mock APIs / Simple Data / weather apis / The Norwegian Meteorological Institute has an excellent free HTTP/JSON weather API that covers the globe. No signup required | |||
| https://developer.yr.no | |||
| https://www.yr.no/en/content/1-72837/meteogram.svg | I've set up an iPad in my hallway to show their SVG weather charts. Super simple to integrate into a simple home made dashboard website. Here is Oslo: | ||
Random Stuff That Doesn't Fit Anywhere / Mock APIs / Placeholder Pictures | |||
| https://source.unsplash.com/ | |||
| https://skuawk.com/ | |||
| https://github.com/imsky/holder | 5,837 | about 1 year ago | |
| https://lorempixel.com/ | |||
| http://placeimg.com/ | |||
| https://picsum.photos | |||
Random Stuff That Doesn't Fit Anywhere / Mock APIs / Placeholder Pictures / Blanks | |||
| http://placehold.it/300x300 | |||
Random Stuff That Doesn't Fit Anywhere / Mock APIs / Placeholder Pictures / Animals | |||
| https://placedog.net/ | |||
| https://placebear.com/ | |||
| http://placekitten.com/ | |||
| https://dog.ceo/ | |||
Random Stuff That Doesn't Fit Anywhere / Mock APIs / Placeholder Pictures / Food | |||
| http://placebeer.com/ | |||
| https://baconmockup.com/ | |||
Random Stuff That Doesn't Fit Anywhere / Mock APIs / Placeholder Pictures / Actors | |||
| https://www.placecage.com/ | |||
| https://placekeanu.com/ | |||
| https://www.stevensegallery.com/ | |||
| https://www.fillmurray.com/ | |||
Random Stuff That Doesn't Fit Anywhere / Mock APIs / Placeholder Pictures | |||
| https://assetroulette.com/ | |||
| https://www.uifiller.com/ | |||
Random Stuff That Doesn't Fit Anywhere / Mock APIs / Users | |||
| https://randomuser.me/ | |||
| https://jsonplaceholder.typicode.com/ | |||
Random Stuff That Doesn't Fit Anywhere / Mock APIs / Relational Data | |||
| https://swapi.dev/ | theres a graphql swapi as well | ||
| https://pokeapi.co/api/v2/ | |||
Random Stuff That Doesn't Fit Anywhere / Mock APIs / Misc | |||
| https://github.com/andresionek91/fake-web-events | 80 | over 2 years ago | mock fake user events |
| https://openweathermap.org/guide | |||
| https://github.com/public-apis/public-apis | 317,596 | 21 days ago | |
Random Stuff That Doesn't Fit Anywhere / Mock APIs / Misc / https://github.com/public-apis/public-apis | |||
| https://github.com/public-api-lists/public-api-lists | 10,400 | 27 days ago | |
Random Stuff That Doesn't Fit Anywhere / Mock APIs / Misc | |||
| https://public-apis.io/ | (A Directory of Free Public & Open Rest APIs) | ||
| https://github.com/Marak/faker.js | generate fake pdf | ||
| https://github.com/Rolstenhouse/unofficial-apis | 2,620 | 6 months ago | |
| https://devresourc.es/tools-and-utilities/public-apis | |||
| https://free-for.dev/#/?id=apis-data-and-ml | |||
Random Stuff That Doesn't Fit Anywhere / Useful big datasets / Dataset collections | |||
| Graphext collection | 91 datasets | ||
| Data.world | There are 133398 open data datasets available | ||
| https://www.data-is-plural.com/ | dataset newsletter | ||
| https://upscale.wiki/wiki/Dataset_Database | for training image upscalers | ||
| https://huggingface.co/datasets | |||
| https://datasets.quantumstat.com | |||
| https://paperswithcode.com/datasets | |||
| https://registry.opendata.aws | |||
| https://docs.microsoft.com/en-us/azure/azure-sql/public-data-sets | |||
| https://guides.library.cmu.edu/az.php | Carnegie Mellon University listing of 750 databases, datasets, and research support tools | ||
| https://datasetsearch.research.google.com | Google datasets | ||
| https://github.com/awesomedata/awesome-public-datasets | 60,953 | 8 days ago | Awesome Public Datasets |
| https://kaggle.com/datasets | Kaggle Datasets | ||
| https://data.gov | The home of the U.S. Government’s open data | ||
Random Stuff That Doesn't Fit Anywhere / Useful big datasets / SQL demos | |||
| https://github.com/lerocha/chinook-database | 1,889 | 6 months ago | Chinook: |
Random Stuff That Doesn't Fit Anywhere / Useful big datasets / Tech | |||
| GitHub Activity data | ( ) This 3TB+ dataset comprises the largest released source of GitHub activity to date. It contains a full snapshot of the content of more than 2.8 million open source GitHub repositories including more than 145 million unique commits, over 2 billion different file paths, and the contents of the latest revision for 163 million files, all of which are searchable with regular expressions | ||
| Los Alamos cybersecurity data | |||
Random Stuff That Doesn't Fit Anywhere / Useful big datasets / Finance | |||
| Numerai v4 | 1191 features and targets for the entire history of the @numerai tournament. 2.4 million rows and 574 eras. One of the hardest tabular dataset competitions on the planet | ||
Random Stuff That Doesn't Fit Anywhere / Useful big datasets / Text | |||
| Enron email | ( ): 500,000+ emails from 150 employees of the Enron Corporation ( ) | ||
| ICIJ Offshore Leaks db | This ICIJ database contains information on more than 810,000 offshore entities that are part of the Pandora Papers, Paradise Papers, Bahamas Leaks, Panama Papers | ||
Random Stuff That Doesn't Fit Anywhere / Useful big datasets / Text / ICIJ Offshore Leaks db | |||
| https://www.kaggle.com/zusmani/paradisepanamapapers | Kaggle: | ||
Random Stuff That Doesn't Fit Anywhere / Useful big datasets / Text | |||
| GDELT Project | "monitors the world's broadcast, print, and web news from nearly every corner of every country in over 100 languages and identifies the people, locations, organizations, themes, sources, emotions, counts, quotes, images and events driving our global society every second of every day, creating a free open platform for computing on the entire world." | ||
Random Stuff That Doesn't Fit Anywhere / Useful big datasets / Text / GDELT Project | |||
| Hex's Horoscope | Welcome to the inaugural Hex Horoscope, a new monthly series in which I attempt to divine the general trend of the month to come using Hex. We'll start with a visual look at how the first week of August stacks up to the competition, and then do some actual predictive modeling to take a stab at what the rest of the month has in store | ||
Random Stuff That Doesn't Fit Anywhere / Useful big datasets / Geo | |||
| BigQuery global daily weather data | Using the BQ geo functions to overlay weather with key locations we cared about was a lot of fun | ||
| 241mb | List of Famous/Notable people by Geo ( ) - , | ||
| SF Tree dataset | Every tree in San Francisco (that are managed by the department of public works, so this excludes trees in places like Golden Gate Park): 196,000 trees listed and they update it constantly! | ||
| NYC taxi dataset | Yellow and green taxi trip records include fields capturing pick-up and drop-off dates/times, pick-up and drop-off locations, trip distances, itemized fares, rate types, payment types, and driver-reported passenger counts | ||
Random Stuff That Doesn't Fit Anywhere / Useful big datasets / Geo / NYC taxi dataset | |||
| spark + iceberg quickstart | 256 | 11 days ago | ( - ) |
| Auckland Transport data | |||
Random Stuff That Doesn't Fit Anywhere / Useful big datasets / Geo | |||
| Airbnb data on NY, London, SF, Paris, barcelona, Amsterdam | |||
| GeoNet earthquake catalog | |||
Random Stuff That Doesn't Fit Anywhere / Useful big datasets / Geo / New Zealand | |||
| https://data.linz.govt.nz/data.world | LINZ data service | ||
Random Stuff That Doesn't Fit Anywhere / Useful big datasets / Misc? | |||
| Correlates of War datasets | |||
| r/dadjokes dataset | |||
| Flight delays | |||
| Disney world wait times | |||
| Trashnet | 575 | over 1 year ago | : Code (only for the convolutional neural network) and dataset for mine and Mindy Yang's final project for Stanford's CS 229: Machine Learning class. The dataset spans six classes: glass, paper, cardboard, plastic, metal, and trash. Currently, the dataset consists of 2527 images. The pictures were taken by placing the object on a white posterboard and using sunlight and/or room lighting. The pictures have been resized down to 512 x 384, which can be changed in data/constants.py (resizing them involves going through step 1 in usage). The devices used were Apple iPhone 7 Plus, Apple iPhone 5S, and Apple iPhone SE |
| NFL play by play data | The package contains NFL play-by-play data back to 1999. Includes completion probability (cp), completion percentage over expected (cpoe), and expected yards after the catch (xyac_epa and xyac_mean_yardage) in play-by-play going back to 2006. Includes drive information, including drive starting position and drive result. Includes series information, including series number and series success. Features models for Expected Points, Win Probability, Completion Probability, and Yards After the Catch | ||
Random Stuff That Doesn't Fit Anywhere / Copy and Emails | |||
| https://www.goodemailcopy.com/ | |||
| https://www.swipefiles.co/ | |||
Random Stuff That Doesn't Fit Anywhere / UI Design Challenges and Copywork | |||
| https://fakeclients.com/ui | |||
| https://uxtools.co/challenges/ | |||
| https://www.frontendpractice.com/ | |||
| https://www.codewell.cc/ | |||
| https://cssbattle.dev/ | |||
Random Stuff That Doesn't Fit Anywhere / Other Lists like this one | |||
| https://a11yresources.webflow.io/ | |||
| https://webflow.com/accessibility/checklist | |||
| https://www.getstark.co/library/ | |||
| https://10015.io/ | |||
| https://www.fetoolkit.io/ | |||
| https://github.com/bradtraversy/design-resources-for-developers | 58,937 | 8 days ago | |
| https://tiny-helpers.dev/ | |||
| https://www.uigoodies.com/ | |||
| https://www.uplabs.com/ | |||
| https://github.com/neutraltone/awesome-stock-resources | 13,048 | 4 months ago | |
| https://nodesign.dev/ | |||
| https://github.com/goabstract/Awesome-Design-Tools | 33,997 | 4 months ago | / |
| https://github.com/emmabostian/design-inspiration | 1,032 | almost 4 years ago | |
| https://undesign.learn.uno/ | |||
| https://user-interface.io/ | |||
| https://dev.to/theme_selection/best-design-resources-websites-every-developer-should-bookmark-1p5d | |||
| https://dev.to/joserfelix/40-high-quality-free-resources-for-web-development-10o3 | |||
Random Stuff That Doesn't Fit Anywhere / Helpful podcasts/talks/articles | |||
| UI Density in Time and Space | |||
| How do I learn design? | (CodeNewbie) | ||
| Design foundations for developers | (Syntax) | ||
| Design tips for developers | (Syntax) | ||
| Tactical design advice for developers | (The Changelog) | ||
| UI Design for Developers | (Meng To) | ||
| Learning How to Design | (ShopTalk) | ||
| You can create a great looking website while sucking at design | |||
| Laws of UX | |||
| 100 Things I Know About Design | |||
| The self taught UI/UX designer roadmap | |||
| https://learnui.design/blog/4-rules-intuitive-ux.html | |||
| https://littlebigdetails.com/ | |||
| https://imperavi.com/books/web-interface-handbook/ | web interface handbook | ||
| Design Principles | |||
Random Stuff That Doesn't Fit Anywhere / Helpful podcasts/talks/articles / Design Principles | |||
| 7 Gestalt Principles of Design | |||
Random Stuff That Doesn't Fit Anywhere / Helpful podcasts/talks/articles | |||
| Visual design rules you can safely follow | |||
| https://twitter.com/mrcndrw/status/1283078825870532609 | |||
| https://internetdevels.com/blog/the-10-commandments-of-user-interface-design | ( ) | ||
| MDS | 3 most common mistakes of UI design by | ||
| Simple Layout checklist | |||
| Human Interface Guidelines from Apple, Microsoft, Elementary OS, IBM, etc | |||
Random Stuff That Doesn't Fit Anywhere / Helpful podcasts/talks/articles / Human Interface Guidelines from Apple, Microsoft, Elementary OS, IBM, etc | |||
| https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/ | Apple's HIG was updated for 2022 | ||
Random Stuff That Doesn't Fit Anywhere / Helpful podcasts/talks/articles / Human Interface Guidelines from Apple, Microsoft, Elementary OS, IBM, etc / Apple Spatial Computing Design videos: | |||
| https://developer.apple.com/videos/play/wwdc2023/10072/ | |||
| https://developer.apple.com/videos/play/wwdc2023/10076/ | |||
| https://developer.apple.com/videos/play/wwdc2023/10073/ | |||
Random Stuff That Doesn't Fit Anywhere / Helpful podcasts/talks/articles | |||
| https://fifty.user-interface.io/ | 50 UI tips | ||
Random Stuff That Doesn't Fit Anywhere / Helpful podcasts/talks/articles / https://fifty.user-interface.io/ | |||
| https://fifty.user-interface.io/50_ui_tips.pdf | |||
Random Stuff That Doesn't Fit Anywhere / Helpful podcasts/talks/articles | |||
| https://www.youtube.com/watch?v=7Z9rrryIOC4 | Steve Schoger - Refactoring UI process: | ||
| little details of visual ui design | Steve Schoger - | ||
| Buffer Design tips | |||
| Notion | Matt D Smith Checklist ( ) | ||
| UI Common Mistakes Checklist | |||
| https://www.anthonyhobday.com/simpledesign/ | Simple design: (rec by ) | ||
| Refactoring UI | |||
Random Stuff That Doesn't Fit Anywhere / Helpful podcasts/talks/articles / Refactoring UI / Working with Color | |||
| https://wildbit.com/blog/accessible-palette-stop-using-hsl-for-color-systems | note: HSL has palette issues | ||
Random Stuff That Doesn't Fit Anywhere / Helpful podcasts/talks/articles | |||
| Tracy Osborn Checklist | |||
| Design Details: Principles of Design | Design Details' most downloaded episode of all time! | ||
| 7 Rules for Creating Gorgeous UI | |||
| How to design great keyboard shortcuts | |||
Random Stuff That Doesn't Fit Anywhere / More Free Stuff | |||
| Canva Design School | |||
| Degreeless.design | |||
| https://free-for.dev/#/ | Free tier software | ||
| https://github.com/Vincenius/link-list | 300 | over 4 years ago | |
Random Stuff That Doesn't Fit Anywhere / More Free Stuff / Demo HTML | |||
| https://github.com/cristurm/nyan-cat | 138 | over 3 years ago | |
| https://github.com/netlify/netlify-drop-demo-site/archive/master.zip | 4 | over 3 years ago | |
Random Stuff That Doesn't Fit Anywhere / More Free Stuff | |||
| The Design Newsletter | |||
Random Stuff That Doesn't Fit Anywhere / Courses | |||
| https://jgthms.com/web-design-in-4-minutes/ | for the 4 minute version (free): | ||
Random Stuff That Doesn't Fit Anywhere / Courses / https://jgthms.com/web-design-in-4-minutes/ | |||
| https://cantunsee.space/ | you can do the opposite (pick out differences) with | ||
Random Stuff That Doesn't Fit Anywhere / Courses | |||
| https://frontendmasters.com/courses/design-for-developers/ | for the 4 hour version: | ||
| https://refactoringui.com/book | for the 4 week version: | ||
| https://learnui.design/ | for the 4 month version: 995/1495/2495. 48 lessons, 26 hours | ||
| https://hackdesign.org/ | weekly lessons drip fed over email | ||
| https://shiftnudge.com/ | i may be signing up for .. its $1800 though | ||
| https://www.enhanceui.com/ | upcoming design for devs book from adrian twarog | ||
| https://designcode.io/ui-design-for-developers | meng to | ||
| https://www.amazon.co.uk/Non-Designers-Design-Book-Robin-Williams/dp/0133966151 | the non-designer's design book | ||
Random Stuff That Doesn't Fit Anywhere / Courses / Copywork | |||
| https://www.frontendpractice.com/ | |||
| https://www.codewell.cc/ | |||
jnv/lists
More related projects:
-
toddmotto/public-apis
-
n0shake/public-apis
-
clening/mastodonprivacyguide
-
mastodon/mastodon
-
danielgatis/rembg
-
trwnh/mastomods
-
oliviertassinari/react-swipeable-views
-
kentcdodds/babel-plugin-preval
-
mckael/madon
-
-
keychera/panas.example
-
huacnlee/rails-settings-cached
-
styled-icons/styled-icons