Giters

hasparus / spark-joy

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

spark-joy

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

Spacing

More.

Layout

Typography

For speed, use System Font Stacks (incl. Segoe and Roboto)

(what are these?)

  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;
  }
Premium fonts and some examples

Font-size things you might try:

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

Color Picking

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:

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

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

Gradients

background-image: linear-gradient(
  120deg,
  hsl(200 50% 90%) 0%,
  hsl(200 100% 90%) 100%
);

Patterns

Misc Backgroundy Stuff

Spinners

Animations & Transitions

Icons

premium/paid icons

Graphics and SVG Illustrations

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

Illustrations

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
  • 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)

More Free Stuff

Interaction/Design Inspo

About

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

License:MIT License

Languages

Language:JavaScript 57.9%Language:HTML 39.0%Language:CSS 3.1%