easy ways to add design flair, user delight, and whimsy to your product.
- 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
- 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
MAKE SURE TO CHECK OUT https://components.ai
- 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/
- 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: screenis 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
- 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:
- 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
- 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/
- 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
- 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/
- 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/
Diagramming
- https://www.draw.io/ (free)
- https://whimsical.com/ ($10/mo)
- more tools - lucidcharts, miro, plectica - see hn thread
- 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
- 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
- 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
- https://www.zapsplat.com/
- https://www.myinstants.com/index/se/
- https://www.youtube.com/audiolibrary/music?nv=1
- 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
- Trianglify http://qrohlf.com/trianglify/
- generative artistry https://generativeartistry.com/
- Canvas Cards https://canvas-cards.glitch.me/
- Open Processing https://www.openprocessing.org/
- 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/thedevelobear/react-rewards
- React Confetti https://alampros.github.io/react-confetti/
- React DOM Confetti https://daniel-lundin.github.io/react-dom-confetti/
- https://github.com/miukimiu/react-kawaii
- https://react-icons.netlify.com/#/icons/fa (typically fontawesome)
- https://github.com/useAnimations/react-useanimations
- https://powtoon.com - videos and presentations for engaging and explaining
- 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