Skip to content
😂easy ways to add design flair, user delight, and whimsy to your product.
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit 675af28 Jan 16, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
website website Oct 12, 2019
CONTRIBUTING.md Create CONTRIBUTING.md Jan 3, 2020
LICENSE Initial commit May 2, 2019
PERF.md Update PERF.md Jan 4, 2020
README.md

README.md

spark-joy

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

Typography

Color Picking

Color knowledge (not tools but still important so here they are)

Pure CSS

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

Pure CSS Tricks

SVG/Canvas Masking

Background Gradients and Patterns

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

Animations & Transitions

Icons

premium/paid icons

Graphics and SVG Illustrations

Diagramming

Stock Photos and Videos

Avatars

Animating Individual Elements

Styling Forms

Sound

Misc Weird fun stuff

Canvas

Page Transitions

WebGL

React

Simple Animation

Page transitions

Nice React Components

Toasting

Gamification

Icons

Video

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

More Free Stuff

Interaction/Design Inspo

You can’t perform that action at this time.