/spark-joy

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

Primary LanguageJavaScriptMIT LicenseMIT

image

Easy ways to add design flair, user delight, and whimsy to your product!

The Spark Joy philosophy is explained in further detail in my book, check it out if you'd like to explore how this approach applies to a lot more than design utilities.

Table of Contents

Web Design in 4 minutes

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

CSS/UI Templates

HTML/Bootstrap/jQuery-era templates

Serious CSS Frameworks

Heavy ones (has js, bigger learning curve, but more OOTB)

Drop-in ones (lighter, no js)

Fun CSS Frameworks

focus is fun/nostalgia

CSS Resets

more control in exchange for more work on your part.

Spacing

More. Spacing. Please.

Double your whitespace

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

you can learn more about proofing premium fonts here https://www.typography.com/blog/text-for-proofing-fonts

Don't forget setting max-width - betweeen 60-75chars is good.

Don't forget setting Leading on your h1 text and minding kerning:

https://hottips.imgix.net/2020/07/044-tracking-animation.gif

Other 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 "brand" color to match your personality. DO NOT OVERUSE IT.

  • 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 default/named colors, too brutal. Soften it a bit. "Never use black" has been proposed as a rule, but this is debated.

Example blueish palette

Monotone:

  • White-ish Card background: #FCFCFC
  • Blueish-Black icons: #1C1E20
  • Lighter text on white: #485963
  • Bluish background: #202D34

Multicolor:

  • Black: #1d1d1d.
  • purple: #b066ff;
  • blue: #203447;
  • lightblue: #1f4662;
  • blue2: #1C2F40;
  • yellow: #ffc600;
  • pink: #EB4471;
  • white: #d7d7d7;
You may or may not want to use generic names if you want it swappable for dark mode:

Example yellowish palette:

  • primary-light: #FFD151 mustard
  • primary-dark: #FFAE03 UCLA gold
  • secondary-success: #20A39E light sea green
  • secondary-warning: #EF5B5B sunset orange
  • secondary-info: #08D377 dark cerulean
  • grays: #E8E9E9, #D1D3D4, #BABDBF, #808488, #666A6D, #4D5052, #333537, #1C1D1E

Examples: https://dev.to/dcodeyt/add-dark-mode-to-your-websites-with-css-5bh4

Note - THIS IS DISPUTED!!! Even Slack's impl has separate light and dark theming.

The problem is "primary" isn't a color, it's a measure of contrast in the current context. On the same page you might have a white panel with a black button and a black panel with a white button, and both of those buttons are "primary" even though they are different colors. - Adam Wathan

One liner dark mode (careful about perf!): filter: invert(100%) hue-rotate(180deg); - more filters here

But here are tools to help generate palettes:

Color knowledge

Not tools but still important so here they are

Icons and Favicons

Favicons

Don't forget them!

Icons

Logos

General & Misc

Note you can put gradients on SVG icons manually https://play.tailwindcss.com/yM2N8GpEUK

premium/paid icons

Diagramming

Before you get to the tools - some good thinking (and lists of tools) on architecture diagrams:

General Purpose

Entity Relationship Diagrams

Special Focus For Cloud Architecture diagrams (needs logos etc)

Code-based Graph tools

Wireframing

Graphics and SVG Illustrations

Hipster Logo Generator? any others?

Backend entity/ ERD /SQL diagramming

Device Mocks

Mocking your browser/phone

Illustrations

Illo's in context: https://onepagelove.com/tag/illustrations

Learn 3d illo in blender https://polygonrunway.com/

DIY Graphic Design

Stock Photos and Videos

Avatars

Pure CSS Tricks

border-radius: 50px;
background: #f3d2c3;
box-shadow:  20px 20px 22px #cfb3a6, 
             -20px -20px 22px #fff2e0;

SVG/Canvas Masking

Background Stuff

Background Gradients and Patterns

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

Background Radial Bursts behind images:

https://hottips.imgix.net/2020/07/063-burst.jpg?w=1200&auto=compress

Background Gradients

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

Background Patterns

Background Illustrations

Background Stock Photos

Misc Backgroundy Stuff

Spinners

Animations & Transitions

Individual Elements

Buttons

Forms

Sound

Paid:

Tools:

Lightweight Charts/Dataviz

Nice React Components

React Toasting

React Gamification

Misc Weird fun stuff

Design Software

Figma

Sketch

Canvas

WebGL

ThreeJS

Video

Tutorials from successful Youtubers

Onboarding

Misc Genres (Handwriting, Pixel, ASCII styles)

RoughJS Tools

Pixel Art

ASCII Art

Perf

        <link rel="icon" type="image/png" href="/temporal-icon.png" />
        <meta name="theme-color" content="#317EFB"/>
        <meta property="title" content="Temporal.io: Build Invincible Apps" />
        <meta property="og:title" content="Temporal.io: Build Invincible Apps" />
        <meta name="description" content="Temporal is the open source runtime for running mission critical code that runs atop unreliable, distributed services at any scale." />
        <meta property="og:description" content="Temporal is the open source runtime for running mission critical code that runs atop unreliable, distributed services at any scale." />
        <meta property="og:image" content="https://temporal.io/logo-font-straight-dark.svg" />
        <meta property="og:url" content="http://temporal.io" />
        <meta property="twitter:title" content="Temporal.io: Build Invincible Apps" />
        <meta property="twitter:description" content="Temporal is the open source runtime for running mission critical code that runs atop unreliable, distributed services at any scale." />
        <meta property="twitter:image" content="https://temporal.io/logo-font-straight-dark.svg" />
        <meta property="twitter:card" content="summary_large_image" />
        <meta name="twitter:site" content="@temporaltech" />

        {/* resource hints */}
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link rel="preconnect" href="https://www.youtube.com" />
        <link rel="preconnect" href="https://yt3.ggpht.com" />
        <link rel="preconnect" href="https://static.doubleclick.net" />
        <link rel="preconnect" href="https://googleads.g.doubleclick.net" />
        <link rel="preconnect" href="https://i.ytimg.com" />
        <link rel="preconnect" href="https://s.ytimg.com" />
        <link rel="preconnect" href="https://www.google-analytics.com" />

        <script
          async
          src="https://www.googletagmanager.com/gtag/js?id=[Tracking ID]"
        />

        <script
          dangerouslySetInnerHTML={{
            __html: `
                  window.dataLayer = window.dataLayer || [];
                  function gtag(){dataLayer.push(arguments);}
                  gtag('js', new Date());
                  gtag('config', '[Tracking ID]');
              `,
          }}
        />

Other Lists like this one

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)
  • UI Design for Developers (Meng To)
  • Learning How to Design (ShopTalk)
  • Laws of UX
  • Design Principles
  • https://twitter.com/mrcndrw/status/1283078825870532609?s=20
  • 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

More Free Stuff

Paid Premium Services

  • Design Pickle
  • Manypixels
  • Contentfly (copywriting)

Courses

The value of design

Interaction/Design Inspo

Mock APIs