Home

Awesome

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.

<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

Table of Contents

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

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

Professional Design Systems

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/, https://www.cssbed.com/, https://dohliam.github.io/dropin-minimal-css/ and https://github.com/dbohdan/classless-css

Superlight: 100 bytes of css to look great nearly everywhere

html {
  max-width: 60ch;
  padding: 1.5rem;
  margin: auto;
  line-height: 1.5rem;
  font-size: 24px;
}

see also http://bettermotherfuckingwebsite.com/

Fun CSS Frameworks

focus is fun

focus is brutalism

focus is fun/nostalgia

focus in futurism

No Framework

Instead of using a framework, consider not using one.

CSS Resets

more control in exchange for more work on your part.

CSS A11y Checkers

Tailwind Component Libraries

React Component Libraries

Layout

Stacking and Elevation

Good idea to have an elevation system in place. Material's is pretty good: https://material.io/design/environment/elevation.html

ComponentDefault elevation values (dp)
Dialog24
Modal bottom sheet Modal side sheet16
Navigation drawer16
Floating action button (FAB - pressed)12
Standard bottom sheet Standard side sheet8
Bottom navigation bar8
Bottom app bar8
Menus and sub menus8
Card (when picked up)8
Contained button (pressed state)8
Floating action button (FAB - resting elevation) Snackbar6
Top app bar (scrolled state)4
Top app bar (resting elevation)0 or 4
Refresh indicator Search bar (scrolled state)3
Contained button (resting elevation)2
Search bar (resting elevation)1
Card (resting elevation)1
Switch1
Text button0
Standard side sheet0

More notes on FAB implementation- https://youtu.be/RXopH5t2Kww

2D Spacing

More. Spacing. Please.

Double your whitespace

Responsive Layout Breakpoints

When in doubt, use Material Layout: https://material.io/design/layout/responsive-layout-grid.html#breakpoints

Screen sizeMarginBodyLayout columns
Extra-small (phone)
0-599dp16dpScaling4
Small (tablet)
600-90432dpScaling8
905-1239Scaling840dp12
Medium (laptop)
1240-1439200dpScaling12
Large (desktop)
1440+Scaling104012

Layout Bleed

A nice bleed lets you put emphasis on things selectively.

You want a normal width, a popout width, and a "full bleed" width. Optional for an intermediate one.

This is the best version of bleed implementation https://ryanmulligan.dev/blog/layout-breakouts/ (borrows from https://joshwcomeau.com/css/full-bleed/)

This is adapted to be responsive

<style>
	/* https://ryanmulligan.dev/blog/layout-breakouts/ */
	.swyxcontent {
		--gap: clamp(1rem, 6vw, 3rem);
		--full: minmax(var(--gap), 1fr);
		--content: min(65ch, 100% - var(--gap) * 2);
		--popout: minmax(0, 2rem);
		--feature: minmax(0, 5rem);

		display: grid;
		grid-template-columns: 
			[full-start]
			[feature-start]
			[popout-start]
			[content-start] var(--content) [content-end]
			[feature-end]
			[popout-end]
			[feature-end]
			[full-end]
	}

	@media (min-width: 640px) {
		.swyxcontent {
			grid-template-columns:
				[full-start] var(--full)
				[feature-start] var(--feature)
				[popout-start] var(--popout)
				[content-start] var(--content) [content-end]
				var(--popout) [popout-end]
				var(--feature) [feature-end]
				var(--full) [full-end];
		}
	}

	:global(.swyxcontent > *) {
		grid-column: content;
	}

	article :global(pre) {
		grid-column: feature;
	}
</style>

Then you can selectively use the popout, feature, and full classes as needed

.content > * {
  grid-column: content;
}
.popout {
  grid-column: popout;
}
.feature {
  grid-column: feature;
}
.full {
  grid-column: full;
}

Other Layout Tools and tips

Typography

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

Fonts

<ul> <li> <details> <summary>For speed, use [System Font Stacks](https://systemfontstack.com/) (incl. Segoe and Roboto)</summary>

(what are these?)

@ff-sans:
  -apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS
  "Segoe UI",                        // Windows
  "Liberation Sans",                 // Linux
  sans-serif;                        // The final fallback for rendering in sans-serif.
@ff-serif: Georgia, Cambria, "Times New Roman", Times, serif;
@ff-mono:
  ui-monospace,                     // San Francisco Mono on macOS and iOS
  "Cascadia Mono", "Segoe UI Mono", // Newer Windows monospace fonts that are optionally installed. Most likely to be rendered in Consolas
  "Liberation Mono",                // Linux
  Menlo, Monaco, Consolas,          // A few sensible system font choices
  monospace;                        // The final fallback for rendering in monospace.

  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;
  }
</details>

See also Modern Font Stacks - discussion

</li> </ul> <details> <summary> Premium fonts and some examples </summary>

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

</details>

Font Loading Strategy

Line Height

https://www.thegoodlineheight.com

Line Width

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

You may wish to use max-width: 60ch on content. Note on the ch unit not being EXACTLY 60 chars

Kerning and char spacing

<details> <summary> Don't forget setting Leading (line height) on your h1 text and minding kerning: </summary>

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

</details>

When you use allcaps section titles, set the tracking (letting-spacing) a little wider. (Example from Steve Schoger)

Font Sizing

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.

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.

Here's a more complete primer on color personalities with more examples.

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

<details> <summary> Example blueish palette </summary>

Monotone:

Multicolor:

</details> <details> <summary> You may or may not want to use generic names if you want it swappable for dark mode: </summary>

Example yellowish palette:

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

</details>

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

https://workos.com/blog/5-lessons-we-learned-adding-dark-mode-to-our-platform?ref=sidebar

Palette Generators

Color Gradients

Note: Default gradients often have "hard edges" that are too rough. (example, example). Add a third color stop in the middle and boost saturation. You can use esaing gradients in future.

Color Theory

Not tools but still important so here they are

Color Theory for Data Visualization

Dataviz is a special category since it's not just design, but information. Credit to Teej's thread.

Backgrounds

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%
);

Linear gradients can be "eased" to be smoother: https://css-tricks.com/easing-linear-gradients/

Background Patterns

Background Illustrations

Background SVG texture

Misc Backgroundy Stuff

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.

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

Software Arch Diagrams

Sequence Diagrams

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

Entity Relationship Diagrams

Cloud Architecture diagrams

useful eg if needs logos

further reading

Code-based Graph tools

Node based GUIs: https://github.com/wbkd/awesome-node-based-uis

Graphics and SVG Illustrations

Backend entity/ ERD /SQL diagramming

DIY illustration

Wireframing

Device Mocks

Mocking your browser/phone

Record your device https://www.screen.studio/

Illustrations

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

3D illustrations

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

Handwritten Look

RoughJS Tools

Pixel Art

ASCII Art

exampels of ascii art in code: https://blog.regehr.org/archives/1653 (HN discussion)

matrix8967's list

from matrix8967: Some ANSI Color Codes and ASCIInema can carry you a long way. (note: may want to reformat this in future)

DIY Graphic Design

Stock Photos and Videos

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

Stock Videos

Video creation tools

tips for product tours https://dev.to/highlight/how-to-create-animated-product-stories-2bcd

misc

Do it for you

Tutorials from successful Youtubers

Avatars

Individual HTML Elements

Anything But Dropdowns

Instead of dropdowns, use: (https://learnui.design/blog/4-rules-intuitive-ux.html)

Buttons

Forms

Tables

Datepickers

Sound

Paid:

Tools:

Lightweight Charts/Dataviz

Dashboarding

Nice React Components

React Toasting

React Gamification

Misc Weird fun stuff

Pure CSS Tricks

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

SVG/Canvas Masking

Animations & Transitions

Loading Spinners

React Animation Tools

Learn how to use Framer Motion with Sam Selikoff's https://buildui.com/

Ideas for Improving UX

Onboarding

On tutorials vs contextual tips: https://www.nngroup.com/articles/onboarding-tutorials/

Feature tours

Welcome emails

Empty states

https://emptystat.es/

Design Software

Figma

Sketch

Generative Design Tools

Non-DOM Browser Technologies

Canvas

WebGL

Makepad

3D

ThreeJS

BabylonJS

Interaction/Design Inspo

Game design inspo

Random Stuff That Doesn't Fit Anywhere

Mock APIs

free or mock data apis for demos

Useful big datasets

Copy and Emails

UI Design Challenges and Copywork

Other Lists like this one

Helpful podcasts/talks/articles

More Free Stuff

Paid Design Services of Note

Courses