tinjure20 / 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.

Spacing

More. Spacing. Please.

Layout

• https://gedd.ski/post/article-grid-layout/
• https://every-layout.dev/

Typography

For speed, use System Font Stacks (incl. Segoe and Roboto)

(what are these?)

• GitHub: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
• VS Code Autocomplete: font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
• font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
• font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
• font-family: ‘system-ui’, sans-serif;
  • the 'system-ui' generic font family is new, standardizing name across Safari, Firefox and Blink
• Sanitize.css:

  html {
    font-family:
      system-ui,
      /* macOS 10.11-10.12 */ -apple-system,
      /* Windows 6+ */ Segoe UI,
      /* Android 4+ */ Roboto,
      /* Ubuntu 10.10+ */ Ubuntu,
      /* Gnome 3+ */ Cantarell,
      /* KDE Plasma 5+ */ Noto Sans,
      /* fallback */ sans-serif,
      /* macOS emoji */ "Apple Color Emoji",
      /* Windows emoji */ "Segoe UI Emoji",
      /* Windows emoji */ "Segoe UI Symbol",
      /* Linux emoji */ "Noto Color Emoji";
  }
  code, kbd, pre, samp {
    font-family:
      /* macOS 10.10+ */ Menlo,
      /* Windows 6+ */ Consolas,
      /* Android 4+ */ Roboto Mono,
      /* Ubuntu 10.10+ */ Ubuntu Monospace,
      /* KDE Plasma 5+ */ Noto Mono,
      /* KDE Plasma 4+ */ Oxygen Mono,
      /* Linux/OpenOffice fallback */ Liberation Mono,
      /* fallback */ monospace;
  }

• Some systems come with good premium fonts - Apple OSes have “avenir next”, “avenir”, “proxima-nova”

• Consider your site personality
  • Elegant/Classic: serif like Freight Text
  • Playful: rounded sans serif like Proxima Soft
  • Plain/Safe: neutral sans serif like Freight Sans
• Free fonts that are great with examples (thanks @edadams)
  • Google Fonts
    • Noto Sans
    • Fira Sans - related to Fira Code for devvy stuff
    • Raleway
    • Open Sans
    • Cavivanar https://twitter.com/atav1k/status/1178096244490723328?s=19
  • 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
  • Handwritten Fonts - great for presentations, annotated illustrations
    • https://www.urbanfonts.com/fonts/handwritten-fonts.htm
    • Caveat and Reenie Beanie on google fonts https://twitter.com/round/status/1178090890004455424?s=19
• Font Pairing
  • Canva has a great tool: https://www.canva.com/font-combinations/
• 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
• more opinions places
  • https://muffingroup.com/blog/best-free-fonts/

Premium fonts and some examples

• Proxima Nova https://a16z.com/ (on Typekit)
• Graphik https://type.today/en/Graphik
• https://www.typewolf.com/
• Dank Mono
• Tekton https://twitter.com/round/status/1178090204562968576?s=19

Font-size things you might try:

• font-size: calc(1rem + 2px + ((100vw - 550px) / 250))
• FlowType.js
• FitText
• Inter/Tailwind font-size combo
• BAD, SLOW fontsize calc
• Complete font-size notes
• Don't rely on varying fontsize to control hierarchy - also use font weight (normal = 400/500, heavy = 600/700) and color
  • Don't go under font weight 400, use a lighter color or smaller fontsize instead

Note: vw has known a11y issues: Preserve Zooming. Sara Soueidan recommends wrapping with calc, e.g. font-size: calc(16px + .3vw);

You may wish to use max-width: 60ch on content. Note on the ch unit not being EXACTLY 60 chars

Color Picking

Pick a primary color to match your personality:

• Blue: safe, familiar
• Gold: expensive, sophisticated
• Pink: fun, not so serious

You can also have a grey for secondary content, and lighter grey for tertiary content.

Don't use system defaults, too brutal. Example palette:

• Black: #1d1d1d.
• purple: #b066ff;
• blue: #203447;
• lightblue: #1f4662;
• blue2: #1C2F40;
• yellow: #ffc600;
• pink: #EB4471;
• white: #d7d7d7;

But here are tools to help generate palettes:

• https://color.adobe.com/create
• https://coolors.co/
• 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/ recommended by Tracy Osborn
• 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

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
• Inventorying and naming a Color Palette at UXPin

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
    • drop shadows - eg -1px left -1px top - makes buttons look stamped
    • text shadows
    • experiment with multiple shadows on one element
  • Card border Generator https://card.surge.sh/
  • Components.ai box shadows https://components.ai/box-shadows
  • Neuomorphism Generator https://neumorphism.io/#f3d2c3

border-radius: 50px;
background: #f3d2c3;
box-shadow:  20px 20px 22px #cfb3a6, 
             -20px -20px 22px #fff2e0;

• 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/
  • slanted image gallery with clip path https://24ways.org/2019/flexible-captioned-slanted-images/

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

Not just for background backgrounds - applying gradients and background images to text is super underrated. Examples:

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

Gradients

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

• https://mycolor.space/gradient Generate a CSS Color Gradient
• https://webgradients.com/ free collection of 180 linear gradients
• https://uigradients.com/#Petrichor
• https://www.grabient.com/
• ANIMATED GRADIENTS https://www.gradient-animator.com/
• Subtle gradients by bumping only saturation on HSL (thanks argyleink) - You can really take this to the extreme!

Patterns

• https://leaverou.github.io/css3patterns/
• https://www.toptal.com/designers/subtlepatterns/ (exports png though :( )
• https://pattern.flaticon.com/ (create a bg pattern of icons)
• https://coolbackgrounds.io/
• https://www.gradientmagic.com/

Misc Backgroundy Stuff

• 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/
• True Grit Texture Supply PNG textures (paid)

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

Diagramming - when describing something prefer pictures over words. Make pictures.

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

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.

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/
• https://unavatar.now.sh/ grab social images from username/email
• 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
• Refactoring UI
  • Starting from Scratch
    • Choose a personality
    • Don't design too much
    • Detail comes later
  • Hierarchy
    • Size isn't everything
    • Emphasize by de-emphasizing
  • Layout and Spacing
    • Establish a spacing/sizing system
  • Designing Text
    • Keep your line length in check
  • Working with Color
    • Ditch hex for HSL
  • Creating Depth
    • (to be continued)
  • Emulate a light source
    • (to be continued)
  • Working with Images
    • (to be continued)
  • Finishing Touches
    • (to be continued)
• Tracy Osborn Checklist
  • Reduce Clutter
    • use ColourLovers for color palettes
    • Fonts - max 2. Use fancy fonts sparingly
    • more whitespace
    • break up walls of text with bullet points
    • big clear CTA buttons
  • Headlines: talk benefits not details. short.

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

• Dribbble ofc
• https://pageflows.com/
• https://uimovement.com/
• https://www.siteinspire.com/
• http://www.cssmania.com/
• https://www.uisources.com/
• Codrops
• https://collectui.com/