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

Keep it simple: https://jgthms.com/web-design-in-4-minutes/

• Heavy/JS frameworks:
  • Bootstrap, Foundation, Blaze UI, PatternFly
  • UIKit
  • Weightless (web components)
• Drop-in:
  • Spectre.css
  • https://purecss.io/
  • https://ajusa.github.io/lit/
  • https://screencss.com/
  • https://andybrewer.github.io/mvp/
  • https://github.com/xz/new.css
  • https://github.com/oxalorg/sakura
  • way, way more than we have space for: https://github.com/dohliam/dropin-minimal-css
• Fun
  • https://www.getpapercss.com/ (handrwritingey css similar to roughjs)
  • https://terminalcss.xyz/
  • NES.css: NES.css is a NES-style(8bit-like) CSS Framework.
  • PSone.css: PS1 style CSS Framework, inspired by NES.css.
  • LaTeX.css
  • 98.css: A Windows 98 inspired framework for building faithful recreations of old UIs.
  • XP.css: A Windows XP inspired framework for building faithful recreations of operating system GUIs. An extension of 98.css.
  • BOOTSTRA.386: A vintage 1980s DOS inspired Twitter Bootstrap theme
  • New Dawn: A mac classic After Dark inspired stylesheet.
• Resets
  • https://github.com/tiaanduplessis/nanoreset
  • https://nicolas-cusan.github.io/destyle.css/
  • https://hankchizljaw.com/wrote/a-modern-css-reset/
  • http://necolas.github.io/normalize.css/

More. Spacing. Please.

Double your whitespace

• https://gedd.ski/post/article-grid-layout/
• https://every-layout.dev/
• https://csslayout.io/ (github)

  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;
  }

• Consider your site personality
  • Elegant/Classic: serif like Freight Text, Adobe Garamond, PT Serif
  • Playful: rounded sans serif like Proxima Soft
  • Plain/Safe: neutral sans serif like Freight Sans, Inter, Proxima Nova
  • Sciency/technical: squared off (geometric) sans like DIN, Industry
• Free fonts that are great with examples (thanks @edadams)
  • Google Fonts - (see Harry Roberts on Google Font loading perf)
    • 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/
• Font variants and oldstyle numbers
• steve schoger blessed typekit fonts for UI's
  • proxima nova
  • aktiv grotesk
  • acumin pro
  • Museo Sans (example) and similar from TypeKit
• https://practicaltypography.com/system-fonts.html
• https://practicaltypography.com/free-fonts.html
• eye catching fun fonts
  • https://www.haleyfiege.fun/fonts
• more opinions places
  • https://muffingroup.com/blog/best-free-fonts/
  • https://type-scale.com/
  • 6 ways to justify font choices in your designs

Font-size things you might try:

• font-size: calc(1rem + 2px + ((100vw - 550px) / 250)) - you can [fit text to screen width] (https://twitter.com/shshaw/status/1240647643388395521?s=20)
• 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

Pick a primary color to match your personality:

• Blue: safe, familiar
• Gold: expensive, sophisticated (Examples)
• 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://duo.alexpate.uk/
• https://colorhunt.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
• https://learnui.design/tools/data-color-picker.html Color picker for data visualizations
• https://learnui.design/tools/accessible-color-generator.html Accessible color generator

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

• https://twitter.com/JoshWComeau/status/1170358024319492097?s=20
• Sarah Drasner picks https://codepen.io/collection/nMgKxJ?cursor=ZD0xJm89MCZwPTEmdj0yNjc5NTQ1
• CSS3 3D Buttons http://simurai.com/archive/buttons/#
• 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/

• Transparent fill SVG and color in on Hover - Codepen
• https://speckyboy.com/css-svg-canvas-masks/
• https://www.blobmaker.app/
• https://getwaves.io/
• https://wweb.dev/resources/css-separator-generator
• https://inkscape.org/
• 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/

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

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

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!

• https://leaverou.github.io/css3patterns/
• https://github.com/bansal-io/pattern.css
• http://www.heropatterns.com/
• https://www.transparenttextures.com/
• https://www.toptal.com/designers/subtlepatterns/ (exports png though :( )
• https://pattern.flaticon.com/ (create a bg pattern of icons)
• https://coolbackgrounds.io/
• https://css-doodle.com/
• https://hero-generator.netlify.app/ hero picture CSS generator
• https://www.gradientmagic.com/
• http://thepatternlibrary.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/
• Dimming/coloring text on background images https://coder-coder.com/background-image-opacity/
• True Grit Texture Supply PNG textures (paid)

• 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
• https://andrew.wang-hoyer.com/experiments/svg-animations/
• Single Element CSS Spinners https://projects.lukehaas.me/css-loaders/

• 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/
• HTML animation? https://tumult.com/hype/ (paid)

Don't forget your favicons!!!

• Favicon generator - pop in an image, get back a favicon!
• SVG favicons are modifiable by scroll percentage
  • you can https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/
  • put the scroll percentage! https://css-tricks.com/how-i-put-the-scroll-percentage-in-the-browser-title-bar/
• https://gauger.io/fonticon/ generate favicons from fontawesome fonts

useful UI 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://feathericons.com/
• https://www.zondicons.com/
• animated icons http://www.transformicons.com/builder.html
• https://game-icons.net/
• 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/

premium/paid icons

• http://shape.so/ 4300+ Icons & Illustrations (by Meng To)
• https://logobly.com/ create custom logos
• https://hatchful.shopify.com/ more custom logos
• https://symbolicons.com/
• https://streamlineicons.com/ (used in Glide Apps)
• https://www.flaticon.com/
• https://gumroad.com/l/primaries

Hipster Logo Generator? any others?

• https://hipsterlogogenerator.com/

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

• https://excalidraw.com/ (free, open source)
• miro.om - freemium, used by Maggie
• https://www.draw.io/ (free) - has VS Code extension
• https://inkscape.org/ (free)
• https://whimsical.com/ ($10/mo)
• more tools - lucidcharts, miro, plectica - see hn thread

Mocking your browser/phone

• Browser: https://shooot.bourhaouta.com/
• Books: https://diybookcovers.com/3Dmockups/

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://blush.design/ good random generator
• 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
• https://unsplash.com/ of course
• https://duotone.shapefactory.co/?f=f56468&t=27184f&q=_&i=oMpAz-DN-9I (unsplash with duotone filter)
• https://github.com/neutraltone/awesome-stock-resources
• https://allthefreestock.com/

• RoughJS Annotation - https://roughnotation.com/
• https://excalidraw.com/

• instead of showing people's faces, try stippling https://github.com/pshihn/stippled-image
• 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

• 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
• https://freesound.org/
• https://www.audacityteam.org/
• https://joshwcomeau.com/react/announcing-use-sound-react-hook/

• https://rbitr.github.io/ChartS.css/
• Sparkline fonts in text: https://github.com/aftertheflood/sparks and https://www.scribbletone.com/typefaces/ff-chartwell

• 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
• ClippyJS https://www.smore.com/clippy-js
• XKCD chart https://timqian.com/chart.xkcd/
• Image editing/Export to SVG/Object Removal/Photoshop - Photopea
• GIMP alternative - https://glimpse-editor.org/
• 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
• RoughJS Annotation - https://roughnotation.com/

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

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

• Curtains.js (example)

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

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

• https://react-smooth-range-input.now.sh/
• Theme-ui-sketchy - https://github.com/beerose/theme-ui-sketchy roughjs components with themeui
• 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
• React Hamburger Icons https://hamburger-react.netlify.com/
• React Curved Arrow https://react-curved-arrow.nickjanssen.com/
• Spinners
  • https://github.com/tienpham94/react-awesome-spinners - requires styled components
  • 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
  • https://www.npmjs.com/package/react-loaders-kit - 200kb tho
  • https://github.com/adexin/spinners-react
• PDF viewer https://react-pdf-viewer.dev/

• Arwes - Futuristic Sci-Fi and Cyberpunk Graphical User Interface Framework for Web Apps https://arwes.dev/

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

• 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://animoto.com/ - drag and drop video maker
• https://biteable.com/ - video maker with templates
• https://powtoon.com - videos and presentations for engaging and explaining

• https://www.appcues.com/ show people things they need as they need them
• React Curved Arrow https://react-curved-arrow.nickjanssen.com/

• https://github.com/bradtraversy/design-resources-for-developers
• https://tiny-helpers.dev/

• How do I learn design? (CodeNewbie)
• Design foundations for developers (Syntax)
• Design tips for developers (Syntax)
• Tactical design advice for developers (The Changelog)
• Learning How to Design (ShopTalk)
• 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.
• Design Details: Principles of Design - Design Details' most downloaded episode of all time!
• 7 Rules for Creating Gorgeous UI
  • Light comes from the sky
  • Black and white first
  • Double your whitespace
  • Learn the methods of overlaying text on images
  • Make text pop — and un-pop
  • Use only good fonts
  • Steal like an artist

• 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
• The Design Newsletter

• https://medium.com/@awilkinson/slack-s-2-8-billion-dollar-secret-sauce-5c5ec7117908

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