easy ways to add design flair, user delight, and whimsy to your product.
More. Spacing. Please.
For speed, use System Font Stacks (incl. Segoe and Roboto)
- 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;
- 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
- Elegant/Classic: serif like
- Free fonts that are great with examples (thanks @edadams)
- Google Fonts
- 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
- more opinions places
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
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
- 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
MAKE SURE TO CHECK OUT https://components.ai
- 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
- Box shadows https://brumm.af/shadows
border-radius: 50px;
background: #f3d2c3;
box-shadow: 20px 20px 22px #cfb3a6,
-20px -20px 22px #fff2e0;
- 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/
- 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/
- 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:
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://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/
- 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)
- 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
- 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/
- 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
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/
- 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
- 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
- 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-simple-animate.now.sh/
- https://yubabajs.com
- https://github.com/brunnolou/react-morph
- https://github.com/kitze/react-genie
- 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://animoto.com/ - drag and drop video maker
- https://biteable.com/ - video maker with templates
- https://powtoon.com - videos and presentations for engaging and explaining
- 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)
- Starting from Scratch
- 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.
- Reduce Clutter
- 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