35
GitHub - sw-yx/spark-joy: ✨😂easy ways to add design flair, user delight, and whi...
source link: https://github.com/sw-yx/spark-joy
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
spark-joy
easy ways to add design flair, user delight, and whimsy to your product.
Typography
- https://www.typewolf.com/
- Free fonts that are great with examples
- Chivo https://www.latinxswhodesign.com/
- Proxima Nova https://a16z.com/
- steve schoger blessed typekit fonts for UI's
- proxima nova
- aktiv grotesk
- acumin pro
- museo sans
Color Picking
- https://color.adobe.com/create
- https://dribbble.com/colors/4030e8
- https://palettte.app/ (advanced tool; try importing the default paletttes)
- 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/
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
- Degreeless.design even more tools
Font picking
Pure CSS
MAKE SURE TO CHECK OUT https://components.ai
Pure CSS Tricks
- https://twitter.com/JoshWComeau/status/1170358024319492097?s=20
- CSS Secrets https://twitter.com/swyx/status/982786353216843776?s=20
- Shadows
- Box shadows https://brumm.af/shadows
- Card border Generator https://card.surge.sh/
- Blend Modes
- 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
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/
- this guy https://twitter.com/yuanchuan23
- Generative Gradients http://generative-placeholders.glitch.me/
- Subtle gradients by bumping only saturation on HSL (thanks argyleink)
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:
Spinners
- web components https://wc-spinners.cjennings.dev/
- Spinners https://tobiasahlin.com/spinkit/
- Buttons, hover, inputs, and loaders https://cssfx.dev
- Conic gradient loader in CSS - Codepen
Animations & Transitions
- Buttons, hover, inputs, and loaders https://cssfx.dev
- 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://iconmonstr.com/
- https://thenounproject.com/
- 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
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
Diagramming
- https://www.draw.io/ (free)
- https://whimsical.com/ ($10/mo)
- more tools - lucidcharts, miro, plectica - see hn thread
Stock Photos and Videos
- 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
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
WebGL
React
Simple Animation
Page 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
Toasting
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
Paid services that seem cool
- https://powtoon.com - videos and presentations for engaging and explaining
Helpful podcasts and talks
- https://www.codenewbie.org/podcast/how-do-i-learn-design
- https://syntax.fm/show/196/design-foundations-for-developers
- https://syntax.fm/show/068/design-tips-for-developers
- 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
More Free Stuff
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK