lexsoft00/spark-joy

✨😂easy ways to add design flair, user delight, and whimsy to your product.

spark-joy

easy ways to add design flair, user delight, and whimsy to your product.

Typography

• https://www.typewolf.com/
• https://muffingroup.com/blog/best-free-fonts/
• Free fonts that are great with examples (thanks @edadams)
  • Chivo https://www.latinxswhodesign.com/
  • Lato Well known, very readable, pretty, client favorite
  • Libre Franklin Elegant and thin
  • IBM Plex Sans Loads of weights, beautifully done
  • Clear Sans
  • Inter Rasmus' typeface carefully crafted & designed for computer screens.
  • Jetbrains Mono - Monospace font for devvy stuff
• steve schoger blessed typekit fonts for UI's
  • proxima nova
  • aktiv grotesk
  • acumin pro
  • museo sans
• eye catching fun fonts
  • https://www.haleyfiege.fun/fonts
• Premium fonts and some examples
  • Proxima Nova https://a16z.com/ (on Typekit)

Color Picking

• https://color.adobe.com/create
• https://dribbble.com/colors/4030e8
• https://palettte.app/ (advanced tool; try importing the default palettes)
• http://colours.neilorangepeel.com/category/red/
• https://www.colorbox.io (by Lyft Design https://design.lyft.com/)
• Consider darker/lighter color variations
• 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/

Color knowledge (not tools but still important so here they are)

• Sarah Drasner on Color
• Louisa Barret on Color
• Erik Kennedy on Color/HSB
• JustinMezzell on Color - advanced stuff on picking color tone/temperature
• Justin Baker on Color Theory
• How to do Dark Mode right

Pure CSS

MAKE SURE TO CHECK OUT https://components.ai

Pure CSS Tricks

• https://twitter.com/JoshWComeau/status/1170358024319492097?s=20
• Lea Verou CSS Secrets https://twitter.com/swyx/status/982786353216843776?s=20
  • CSS3 Patterns https://leaverou.github.io/css3patterns/
• Shadows
  • Box shadows https://brumm.af/shadows
  • Card border Generator https://card.surge.sh/
• Blend Modes
  • background-blend-mode color-burn, lighten, multiply are cool
• CSS clip path
  • https://labs.jensimmons.com/#shapes
  • https://bennettfeely.com/clippy/
  • https://youtu.be/u9bDe3Bw0sA
  • CSS tricks clip path animation tutorial https://css-tricks.com/animating-with-clip-path/

SVG/Canvas Masking

• Transparent fill SVG and color in on Hover - Codepen
• https://speckyboy.com/css-svg-canvas-masks/
• https://www.blobmaker.app/
• https://getwaves.io/
• text effects https://css-tricks.com/animate-blob-text-with-svg-text-clipping/
• animate an existing svg https://svgartista.net/
• mix-blend-mode: screen is really good for SVG icons, with hover
• SVG animations
  • https://www.svgator.com/
  • scroll based svg text path animation https://www.youtube.com/watch?v=Tae96ze3xwY
  • stroke path animation https://css-tricks.com/a-trick-that-makes-drawing-svg-lines-way-easier/

Background Gradients and Patterns

• https://leaverou.github.io/css3patterns/
• https://uigradients.com/#Petrichor
• https://coolbackgrounds.io/
• https://www.gradientmagic.com/
• ANIMATED GRADIENTS https://www.gradient-animator.com/
• CSS Doodle https://css-doodle.com/
• CSS backgroundy patterns https://leaverou.github.io/css3patterns/
• this guy https://twitter.com/yuanchuan23
• Generative Gradients http://generative-placeholders.glitch.me/
• Subtle gradients by bumping only saturation on HSL (thanks argyleink) - You can really take this to the extreme!

background-image: linear-gradient(
  120deg,
  hsl(200 50% 90%) 0%,
  hsl(200 100% 90%) 100%
);

In particular, applying gradients and background images to text is super underrated. Examples:

• https://philcoffman.com/
• https://css-tricks.com/

Spinners

• web components https://wc-spinners.cjennings.dev/
• Spinners https://tobiasahlin.com/spinkit/
• Buttons, hover, inputs, and loaders https://cssfx.netlify.com/
• Conic gradient loader in CSS - Codepen
• React, Vue and Angular Spinners https://github.com/JoshK2/react-spinners-css

Animations & Transitions

• Buttons, hover, inputs, and loaders https://cssfx.netlify.com/
• general http://animista.net
  • animate an existing svg https://svgartista.net/ (by the same people as animista)
• general https://daneden.github.io/animate.css/
• general https://ianlunn.github.io/Hover/
• Burgers https://march08.github.io/animated-burgers/
• Burgers http://negomi.github.io/react-burger-menu/
• Layout https://github.com/aholachek/react-flip-toolkit
• Hover and loaders: https://www.csswand.dev/
• Graphic animations: https://lottiefiles.com/

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.
• https://hotpot.ai/free_icons 5,000+ free icons. Customize colors, size, and other properties.
• https://iconmonstr.com/ Discover 4486+ free icons in 310 collections
• https://icomoon.io/
• https://orioniconlibrary.com/ has customizable colors and packs eg for ecommerce
• https://material.io/resources/icons/?style=baseline
• http://www.entypo.com/
• https://www.heroicons.com/
• https://www.zondicons.com/
• animated icons http://www.transformicons.com/builder.html
• https://game-icons.net/

premium/paid icons

• https://symbolicons.com/
• https://streamlineicons.com/ (used in Glide Apps)
• https://www.flaticon.com/
• https://gumroad.com/l/primaries

Graphics and SVG Illustrations

• 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
  • https://fresh-folk.com/ is similar
• http://ouch.pics/
• https://www.freepik.com/ Graphic resources for everyone: Find Free Vectors, Stock Photos, PSD and Icons
• 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://opengameart.org/
• 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.glazestock.com/
• https://lukaszadam.com/illustrations
• https://woobro.design/
• https://pimpmydrawing.com/
• https://www.drawkit.io/ Hand-drawn vector illustration resources for your next project
• https://www.isometriclove.com/ Cute Isometric Objects For Your Design
• 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
• 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.

Diagramming

• https://www.draw.io/ (free)
• https://whimsical.com/ ($10/mo)
• more tools - lucidcharts, miro, plectica - see hn thread

Stock Photos and Videos

• https://photos.icons8.com/creator/ Create custom stock photos
• https://pexels.com
• https://generated.photos/ AI-generated stock photos
• unsplash of course
• https://github.com/neutraltone/awesome-stock-resources
• https://allthefreestock.com/

Avatars

• https://www.avatars.io/
• https://en.gravatar.com/
• http://avatars.adorable.io/#demo
• https://personas.draftbit.com/ A playful avatar generator for the modern age.
• https://getavataaars.com/
• https://joeschmoe.io/ An illustrated avatar collection for developers and designers

Animating Individual Elements

• links https://cssanimation.rocks/animating-links/
• tooltips on hover https://kazzkiq.github.io/balloon.css/
• Link and Button hover effects https://www.youtube.com/watch?v=ceNMP-aQkQ4

Styling Forms

• Accessible Styled Forms https://github.com/scottaohara/a11y_styled_form_controls
• WTF Forms: Nicer Forms eg Radio Buttons with pure CSS https://github.com/mdo/wtf-forms
• Output-inspired form: https://twitter.com/steveschoger/status/1171429842442522625
• show button when placeholder-shown: https://codepen.io/liamj/pen/vYYLGZj

Sound

• https://www.zapsplat.com/
• https://www.myinstants.com/index/se/
• https://www.youtube.com/audiolibrary/music?nv=1

Misc Weird fun stuff

• Perspective stairstep text effects https://codepen.io/jamc92/details/KaMLvY (in action: http://tennentbrown.co.nz)
• Duotone blend modes: https://jmperezperez.com/duotone-using-css-blend-modes/
• Decovar Font with Text shadows: https://codepen.io/mandymichael/details/dJZQaz (and other Variable Fonts by Mandy)
• Drop shadows: box-shadow: 10px 12px 0.5rem rgba(0,0,0,0.5);
• Expanding Search buton and text from Ana Tudor mentioned here
• XKCD chart https://timqian.com/chart.xkcd/
• Image editing/Export to SVG/Object Removal/Photoshop - Photopea
• Netflix slide-in menu - Codepen
• Peek Href on Links - 2min video
• Gooey Effect with SVG and Filters
• CSS only hover effect with Headers
• SVG iPhone mock and animated notification transition

Canvas

• Trianglify http://qrohlf.com/trianglify/
• generative artistry https://generativeartistry.com/
• Canvas Cards https://canvas-cards.glitch.me/
• Open Processing https://www.openprocessing.org/

Page Transitions

• swup https://github.com/swup/swup (css tricks)

WebGL

• Curtains.js (example)

React

Simple Animation

• https://react-simple-animate.now.sh/
• https://yubabajs.com
• https://github.com/brunnolou/react-morph
• https://github.com/kitze/react-genie

Page transitions

• https://github.com/joerez/react-transitions/

Nice React Components

• https://react-smooth-range-input.now.sh/
• React Physics Dragger https://react-physics-dragger-demo.netlify.com/
• React-Designer: Easy to configure, lightweight, editable vector graphics in your react components.
• <Foldable> from Folding the DOM
• Spinners
  • https://github.com/tienpham94/react-awesome-spinners
  • https://github.com/davidhu2000/react-spinners
  • https://github.com/JoshK2/react-spinners-css
  • https://github.com/jameygleason/aperitif
  • https://github.com/JoshK2/react-spinners-css

Toasting

• https://cogoport.github.io/cogo-toast
• https://fkhadra.github.io/react-toastify/

Gamification

• https://github.com/thedevelobear/react-rewards
• React Confetti https://alampros.github.io/react-confetti/
• React DOM Confetti https://daniel-lundin.github.io/react-dom-confetti/

Icons

• https://github.com/miukimiu/react-kawaii
• https://react-icons.netlify.com/#/icons/fa (typically fontawesome)
• https://github.com/useAnimations/react-useanimations

Video

• https://animoto.com/ - drag and drop video maker
• https://biteable.com/ - video maker with templates
• https://powtoon.com - videos and presentations for engaging and explaining

Helpful podcasts and talks

• How do I learn design? (CodeNewbie)
• Design foundations for developers (Syntax)
• Design tips for developers (Syntax)
• Tactical design advice for developers (The Changelog)
• Simple Layout checklist
  • Clear idea of purpose, target audience, where/how long it will be seen
  • Information hierarchy (vary size, contrast, position)
  • Clear visual structure - pick the most suitable way to group elements
  • Space - leave enough whitespace. Too much > too little
  • Alignment - use as few lines as possible
• Steve Schoger - little details of visual ui design
  • add a bit of color to your greys
  • saturate greys when using a colored background
  • consider temp when saturating greys
  • use a consistent corner radius
  • use consistent icon set
  • use font size to emphasize impt info
  • use color to create a hierarchy
  • use consistent spacing scale
  • use color to draw attention
  • offset box-shadows
  • easy on the link styles
  • use contrast to create balance
  • pick an appropriate line height
  • use alignment to clean up your design
  • give actions hierarchy
  • consider spacing instead of borders
  • use color to create depth and hierarchy
  • use good fonts
• Buffer Design tips
  • Color: emotion, personality
  • Balance: symmetry, asymmetry
  • Lines: straight lines for harmony, curved for movement. guide the eyes
  • Typography: 3 max, san-serif for web, kerning for headlines
  • Add Contrast with shapes, color, element sizes
  • Scale: size elemnts differently to draw attention or demonstrate concept
  • Proximity: group related items together. connect colors, fonts, shapes
  • Hierarchy: most impt elements first
  • Repetition: consistency of fonts, colors, logos
  • Direction: F, E, Z pattern. Put key info in left
  • Space: use space to amplify other objects

More Free Stuff

• Canva Design School
• Degreeless.design
• Free tier software https://free-for.dev/#/
• https://github.com/Vincenius/link-list
• Public API's for demos https://github.com/public-api-lists/public-api-lists

Interaction/Design Inspo

• https://pageflows.com/
• https://uimovement.com/