Giters

shivswami / 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

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/CSS nice templates

Serious CSS Frameworks

Heavier CSS Frameworks

bigger learning curve, may have js, but more OOTB)

Drop-in CSS Frameworks

lighter, no js. preview some of these with https://sites.yax.com/

Superlight: 58 bytes of css to look great nearly everywhere

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

Fun CSS Frameworks

focus is fun

focus is brutalism

focus is fun/nostalgia

focus in futurism

CSS Resets

more control in exchange for more work on your part.

CSS A11y Checkers

Tailwind Component Libraries

Spacing

More. Spacing. Please.

Double your whitespace

Layout

special topic - responsive media

Typography

typography matters https://twitter.com/kvncnls/status/1399077512014086150?s=21

Fonts

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

Font Loading Strategy

  • https://github.com/zachleat/web-font-loading-recipes
  • https://iainbean.com/posts/2021/5-steps-to-faster-web-fonts/
  • Everything Harry Roberts writes

    • Google Fonts strategy

       <!--
   - 1. Preemptively warm up the fonts’ origin.
   -
   - 2. Initiate a high-priority, asynchronous fetch for the CSS file. Works in
   -    most modern browsers.
   -
   - 3. Initiate a low-priority, asynchronous fetch that gets applied to the page
   -    only after it’s arrived. Works in all browsers with JavaScript enabled.
   -
   - 4. In the unlikely event that a visitor has intentionally disabled
   -    JavaScript, fall back to the original method. The good news is that,
   -    although this is a render-blocking request, it can still make use of the
   -    preconnect which makes it marginally faster than the default.
   -->

 <!-- [1] -->
 <link rel="preconnect"
       href="https://fonts.gstatic.com"
       crossorigin />

 <!-- [2] -->
 <link rel="preload"
       as="style"
       href="$CSS&display=swap" />

 <!-- [3] -->
 <link rel="stylesheet"
       href="$CSS&display=swap"
       media="print" onload="this.media='all'" />

 <!-- [4] -->
 <noscript>
   <link rel="stylesheet"
         href="$CSS&display=swap" />
 </noscript>
  • font-display: optional may be good
  • don't load fonts if prefers-reduced-data see Kilian Valkhof

Line Height

https://www.thegoodlineheight.com

Line Width

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

Kerning and char spacing

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

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

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

Font Sizing

DON'T GO CRAZY WITH FONT SIZES.

Typography Talks

Other Typography Resources

If building a collaborative design tool that offers font choice, see how Figma does it https://youtu.be/kVD-sjtFoEI

Colors

Pick a primary "brand" color to match your personality. DO NOT OVERUSE IT.

  • Blue: safe, familiar
  • Gold: expensive, sophisticated (Examples, again)
  • 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.

1 in 12 men and 1 in 200 women have color blindness. Make sure to check that important distinctions can be perceived.

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

Palette Generators

Color Gradients

Color knowledge

Not tools but still important so here they are

(fun) history of primary colors

Icons and Favicons

Favicons

Don't forget them!

<link rel=""> tags and opengraph

Ideas of things you can include based on my own site.

  <link rel="icon" type="image/png" href="/favicon.png" />
  <link rel="webmention" href="https://webmention.io/www.swyx.io/webmention" />
  <link rel="pingback" href="https://webmention.io/www.swyx.io/xmlrpc" />
  <meta name="theme-color" content="#818CF8">
  <title>{frontmatter.title} ∊ swyx.io</title>
  <link rel="canonical" href={canonical} />
  <meta property="og:url" content={swyxioURL} />
  <meta property="og:type" content="article" />
  <meta property="og:title" content={seoTitle} />
  <meta name="Description" content={seoDescription} />
  <meta property="og:description" content={seoDescription} />
  {#if frontmatter.cover_image}
    <meta property="og:image" content={coverImage} />
  {/if}
  <meta
    name="twitter:card"
    content={frontmatter.cover_image ? 'summary_large_image' : 'summary'} />
  <meta name="twitter:domain" content="swyx.io" />
  <meta name="twitter:creator" content="@swyx" />
  <meta name="twitter:title" content={seoTitle} />
  <meta name="twitter:description" content={seoDescription} />
  <meta
    name="twitter:image"
    content={frontmatter.cover_image ? frontmatter.cover_image : 'https://www.swyx.io/swyx-ski.jpeg'} />
  <meta name="twitter:label1" value="Last updated" content="Last updated" />
  <meta name="twitter:data1" value={metaDate} content={metaDate} />
  <meta name="twitter:label2" content="Read Time" />
  <meta name="twitter:data2" content={readTime} />

other boilerplates to use

Icons

Logos (incl company logos)

General & Misc

Important: Note on icon accessibility. Don't use icon fonts.

  • Icon + text: use <svg aria-hidden="true">
  • Icon only: <svg role="img"><title>foo</title>...</svg. Pick from Aria roles list.
  • Icon with link: <a href="/" aria-label="Good Label"><svg aria-hidden="true" ... ></svg></a>

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

You may like: Free Fundamentals of Icon design in 1 hour course by MDS

premium/paid icons

Diagramming

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

General Purpose Diagramming

Sequence Diagrams

Specifically for BPMN: https://bpmn.io/

Entity Relationship Diagrams

Cloud Architecture diagrams

useful eg if needs logos

the 5 types of arch diagrams https://www.readysetcloud.io/blog/allen.helton/the-5-types-of-architecture-diagrams/

Code-based Graph tools

Wireframing

Graphics and SVG Illustrations

Hipster Logo Generator? any others?

Backend entity/ ERD /SQL diagramming

DIY illustration

Device Mocks

Mocking your browser/phone

Illustrations

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

3D illustrations

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

DIY Graphic Design

Stock Photos and Videos

Image modification for hover effects: https://photomosh.com/

Stock 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

Make sure to see the Color Gradients section to generate gradients

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

https://meshgradient.com/ swirly backgrounds like apple

Background Patterns

Background Illustrations

Background Stock Photos

Misc Backgroundy Stuff

Spinners

Animations & Transitions

Individual HTML Elements

Buttons

Forms

Tables

Sound

Paid:

Tools:

Lightweight Charts/Dataviz

Nice React Components

React Toasting

React Gamification

Misc Weird fun stuff

Design Software

Figma

Sketch

Generative Design Tools

Canvas

WebGL

3D

ThreeJS

BabylonJS

Video

Tutorials from successful Youtubers

Onboarding

Misc Genres (Handwriting, Pixel, ASCII styles)

RoughJS Tools

Pixel Art

ASCII Art

Perf

Sample meta tags with preconnects 
        <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/talks/articles

More Free Stuff

Paid Premium Services

  • Design Pickle
  • Manypixels
  • Contentfly (copywriting)

Courses

Interaction/Design Inspo

Game design inspo

Mock APIs

free or mock data apis for demos

Copy and Emails

Random Stuff That Doesn't Fit Anywhere

About

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

License:MIT License

Languages

Language:JavaScript 57.9%Language:Svelte 33.8%Language:HTML 5.2%Language:CSS 3.1%