swyxio/spark-joy swyxio/spark-joy

  • Stars
    star
    9,387
  • Rank 3,808 (Top 0.08 %)
  • Language
  • License
    MIT License
  • Created over 5 years ago
  • Updated 2 months ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
swyxio/spark-joy
github

swyxio

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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

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

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

Component Default elevation values (dp)
Dialog 24
Modal bottom sheet Modal side sheet 16
Navigation drawer 16
Floating action button (FAB - pressed) 12
Standard bottom sheet Standard side sheet 8
Bottom navigation bar 8
Bottom app bar 8
Menus and sub menus 8
Card (when picked up) 8
Contained button (pressed state) 8
Floating action button (FAB - resting elevation) Snackbar 6
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
Switch 1
Text button 0
Standard side sheet 0

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 size Margin Body Layout columns
Extra-small (phone)
0-599dp 16dp Scaling 4
Small (tablet)
600-904 32dp Scaling 8
905-1239 Scaling 840dp 12
Medium (laptop)
1240-1439 200dp Scaling 12
Large (desktop)
1440+ Scaling 1040 12

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

  • For speed, use [System Font Stacks](https://systemfontstack.com/) (incl. Segoe and Roboto)

    (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;
  }

    See also Modern Font Stacks - discussion

    • Simple: font-family: system-ui, -apple-system, sans-serif; ([has issues on old browsers + asian langauges](url - github and bootstrap have removed it fwiw))
    • Sans-serif font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
    • Serif: font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    • Mono: font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, 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.

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

Kerning and char spacing

Don't forget setting Leading (line height) on your h1 text and minding kerning:

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

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.

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

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.

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

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.

  • 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

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)

  • Segmented Buttons (Horizontal or Vertical)
  • Checkbox
  • Switch
  • Radio button
  • Cards and Visual options (images as buttons)
  • Typeahead (for large dropdown eg countries)
  • Date (calendar control for poisson dates, input type="date" for high variability)
  • Stepper (for numbers)

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

  • Dataset collections
  • SQL demos
  • Tech
    • GitHub Activity data (blog) This 3TB+ dataset comprises the largest released source of GitHub activity to date. It contains a full snapshot of the content of more than 2.8 million open source GitHub repositories including more than 145 million unique commits, over 2 billion different file paths, and the contents of the latest revision for 163 million files, all of which are searchable with regular expressions.
    • Los Alamos cybersecurity data
      • This data set represents 58 consecutive days of de-identified event data collected from five sources within Los Alamos National Laboratory’s corporate, internal computer network.
      • The data sources include Windows-based authentication events from both individual computers and centralized Active Directory domain controller servers; process start and stop events from individual Windows computers; Domain Name Service (DNS) lookups as collected on internal DNS servers; network flow data as collected on at several key router locations; and a set of well-defined red teaming events that present bad behavior within the 58 days. In total, the data set is approximately 12 gigabytes compressed across the five data elements and presents 1,648,275,307 events in total for 12,425 users, 17,684 computers, and 62,974 processes.
  • Finance
    • Numerai v4 - 1191 features and targets for the entire history of the @numerai tournament. 2.4 million rows and 574 eras. One of the hardest tabular dataset competitions on the planet.
  • Text
    • Enron email (source): 500,000+ emails from 150 employees of the Enron Corporation (podcast)
    • ICIJ Offshore Leaks db This ICIJ database contains information on more than 810,000 offshore entities that are part of the Pandora Papers, Paradise Papers, Bahamas Leaks, Panama Papers
    • GDELT Project "monitors the world's broadcast, print, and web news from nearly every corner of every country in over 100 languages and identifies the people, locations, organizations, themes, sources, emotions, counts, quotes, images and events driving our global society every second of every day, creating a free open platform for computing on the entire world."
      • Hex's Horoscope Welcome to the inaugural Hex Horoscope, a new monthly series in which I attempt to divine the general trend of the month to come using Hex. We'll start with a visual look at how the first week of August stacks up to the competition, and then do some actual predictive modeling to take a stab at what the rest of the month has in store.
  • Geo
  • Misc?
    • Correlates of War datasets
    • Flight delays
    • Disney world wait times
    • Trashnet: Code (only for the convolutional neural network) and dataset for mine and Mindy Yang's final project for Stanford's CS 229: Machine Learning class. The dataset spans six classes: glass, paper, cardboard, plastic, metal, and trash. Currently, the dataset consists of 2527 images. The pictures were taken by placing the object on a white posterboard and using sunlight and/or room lighting. The pictures have been resized down to 512 x 384, which can be changed in data/constants.py (resizing them involves going through step 1 in usage). The devices used were Apple iPhone 7 Plus, Apple iPhone 5S, and Apple iPhone SE.
    • NFL play by play data The package contains NFL play-by-play data back to 1999. Includes completion probability (cp), completion percentage over expected (cpoe), and expected yards after the catch (xyac_epa and xyac_mean_yardage) in play-by-play going back to 2006. Includes drive information, including drive starting position and drive result. Includes series information, including series number and series success. Features models for Expected Points, Win Probability, Completion Probability, and Yards After the Catch

Copy and Emails

UI Design Challenges and Copywork

Other Lists like this one

Helpful podcasts/talks/articles

  • 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)
  • You can create a great looking website while sucking at design
  • Laws of UX
  • 100 Things I Know About Design
  • The self taught UI/UX designer roadmap
  • https://learnui.design/blog/4-rules-intuitive-ux.html
    • Obey the Law of Locality
    • Anything But Dropdowns
    • Pass the Squint Test
    • Teach By Example
  • https://littlebigdetails.com/
  • web interface handbook https://imperavi.com/books/web-interface-handbook/
  • Design Principles
  • Visual design rules you can safely follow
    • Use near-black and near-white instead of pure black and white
    • Saturate your neutrals
    • Use high contrast for important elements
    • Everything in your design should be deliberate
    • Optical alignment is often better than mathematical alignment
    • Lower letter spacing and line height with larger text. Raise them with smaller text
    • Container borders should contrast with both the container and the background
    • Everything should be aligned with something else
    • Colours in a palette should have distinct brightness values
    • If you saturate your neutrals you should use warm or cool colours, not both
    • Measurements should be mathematically related
    • Elements should go in order of visual weight
    • If you use a horizontal grid, use 12 columns
    • Spacing should go between points of high contrast
    • Closer elements should be lighter
    • Make drop shadow blur values double their distance values
    • Put simple on complex or complex on simple
    • Keep container colours within brightness limits
    • Make outer padding the same or more than inner padding
    • Keep body text at 16px or above
    • Use a line length around 70 characters
    • Make horizontal padding twice the vertical padding in buttons
    • Use two typefaces at most
    • Nest corners properly
    • Don’t put two hard divides next to each other
  • https://twitter.com/mrcndrw/status/1283078825870532609
  • https://internetdevels.com/blog/the-10-commandments-of-user-interface-design (infographic)
  • 3 most common mistakes of UI design by MDS
    • too many font sizes used. Try to use 1-2 sizes and vary other things like weight, negative space, color, casing.
    • don't over rely on strict mathematical spacing - use optical alignment instead - make judgments based on the needs of the layout.
    • consistent color usage. Tappable = one color. dont make titles and buttons same color. mind accessibility.
  • 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
  • Human Interface Guidelines from Apple, Microsoft, Elementary OS, IBM, etc
  • 50 UI tips https://fifty.user-interface.io/
  • Steve Schoger - Refactoring UI process: https://www.youtube.com/watch?v=7Z9rrryIOC4
    1. Give text consistent contrast
    2. Don't use grey text on colored backgrounds
    3. Use perceived brightness
    4. Start with too much whitespace
    5. Balance weight and contrast
    6. Supercharge the defaults
    7. Overlap elements to create depth
    8. Use shadows to convey elevation
    9. Shadows have two parts
    10. Create depth with color
    11. Use fewer borders
    12. Think outside the database
    13. Alternate Backgrounds
    14. Grays dont have to be GRAY.
    15. Use good fonts!
  • 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
  • Matt D Smith Checklist (Notion)
    • Do I have a very solid understanding of the human problem I'm solving with this interface?
    • Is this a low, medium, or high complexity project and have I let that drive my decision for designing a low-fidelity version or not?
    • If I'm using reference material, would I feel comfortable putting my design next to the reference and talking through the areas I used for inspiration, without giving the impression that I copied or created a very close derivative?
    • Have I had the necessary conversations with stakeholders and/or developers about the goal of this project and its ability to be implemented. In other words, am I aware of business and/or technological constraints?
    • Typography
      • Have I chosen font sizes very deliberately (ideally 2-4 per screen or section) and pushed myself to use as few as possible?
      • Am I sure there's not a single straggling font size lying around somewhere that could be matched up with another size?
      • Are there any areas where font weight would be a better change instead of font size?
      • Are there any areas where font case—whether UPPERCASE, Title Case, or Sentence case—would be more affective that a font size change?
      • Does the visual hierarchy of my typography content match my intentions with what is the most important on the screen?
      • Do my titles and body copy feel right together? Am I playing with type scale in a fun and dynamic way?
      • Have I defined the usage of certain sizes and/or colors for my typography, whether in my own head or specifically written documentation?
      • Are my typographic color choices extrememly well defined, a specific color for links, actions, buttons versus read-only text, and is there anywhere that can be improved?
      • If applicable, are there any areas where I could add more visual interest to my typography by adding any decorative or informational elements in the surrouding area?
      • Have I intentionally chosen a specific typeface for specific reasons?
      • If I haven't used sytem or open source fonts (SF Pro, Roboto, Inter, Helvetica, etc.) have I done due dilligence on purchasing the appropriate font licensing and/or checked with stakeholders or developers if the font I've chosen is approved and/or can be used during development?
      • Does the typeface I've chosen convey the right personality or feeling that I want to convey?
      • Have I considered adding the ability for a user to choose their own type size based on their preference, and if not have a made sure that the most important content is no smaller than 16px?
    • Layout
      • Have I used the box model concept while laying out out every element of my designs, or are there a few stragglers here and there that I haven't been intentional about?
      • Have I used a clear grid structure with properly aligned elements that visually balance each other out? (12 column, etc.)
      • Have I used an intentional implicit grid for all of the negative space surrounding the elements in my layout, especially to define intentional relationships with my content?
      • Does my design have enough negative space?
      • Are there elements in my design where the negative space could double to create a much nicer layout?
      • Does anything feel too crammed or too tight and have I considered layering the information where necessary to create more simplicity?
      • Is all of the text left or right aligned and scannable where applicable?
      • Does my eye have to dart around all over the screen to view the content or is there a nice line of continuation I can pay attention to while viewing?
      • Are my interface elements balanced compositionally with layout anchors?
      • Are there any areas where my designs have been mathematically aligned, but still feel off? Have I correct these with optical alignment?
      • Is the density of my design appropriate? Is it tight and condensed because of the high volume of information? Is it a medium density? Are there ways to add more negative space to have a more open and friendly feel with a lower density layout?
      • Are there any areas where I could create more intentional prioritization of content by using scale or visual weight with background color changes, etc.?
      • Is there appropriate affordance given to the interactive objects on the screen? Is it easy to see what's scrollable, swipeable, tappable, etc.? Are there areas where I know that it could be made more clear?
      • Have I fully considered exandable/collapseable or other interactive options for some of the components? Does everything on the screen need to be on the screen or is there a more elegant solution for the content that involves adding another page or another section?
    • Color
      • Have a made a conscious choice between using HEX codes, RGB values, or HSB/HSL section methods?
      • Have I double checked to make sure that all of my interface elements have appropriate color contrast and meet at least WCAG 2.1 AA accessibility standards?
      • Have I made a very conscious decision about my structural colors versus my interactive colors?
      • Have I clearly defined a primary, secondary, and possibly tertiary CTA (call to action) color and used it accordingly?
      • Could my secondary styles and colors be tweaked slightly to better compliment the primary CTA?
      • Have I very strategically defined all of my color usages to create an understandable framework for future color usage? Is there room for improvement?
      • Does my color palette follow a systematic and intentional method for color selection based on a base HUE?
      • Is there room to provide a secondary HUE for structural or interactive colors or is the one I've chosen adequate?
      • Is there any opportunity for using a well-placed gradient? If I'm using a gradient have I double checked that any text used in combination with it is accessible?
      • Have I specifically chosen a very strict set of greys, if applicable, for my entire project across every screen?
      • Are there any greys that are very close in color that could be combined and simplified?
      • Have I revised and/or adjusted my overall color palette to include all colors and usages of those colors for every single element?
      • Have I considered the Z-axis of my layout and how white, grey, and darker colors create a natural depth? Are the objects closest to my foreground the lightest in color?
      • If my UI is dark in color, have I been extremely conscious with the overall contrast and meticulously chosen each color?
      • If my UI is dark in color, have I reserved absolute white and absolute black for specific pieces of the interface? Is there any room for almost black or almost white, with subtle changes in color?
    • Style
      • Have I consciously decided on a specific design direction?
      • Can I intentionally describe my designs with specific adjectives?
      • Have I considered the constraints of the medium I'm designing for and how that should and will affect my designs?
      • Have I very consciously chosen specific corner radius styles? Should they be hard edge, slightly rounded, very rounded, pill-shaped?
      • If I have chosen specific corner radius styles for modules, buttons, etc. have I explored other options to see if there are better alternatives that specifically map to the type of style I'm trying to achieve?
      • Have I very specifically chosen a certain type of border or divider for my content?
      • Have I considered using only negative space to create a separation of content rather than relying on a line or separate modules?
      • Have I made sure my borders or dividers don't overpower the actual content? Could they be toned down to shift focus on the most important areas of the designs?
      • Have I considered depth, lighting, and shadow to the best of its potential? If I'm using any type of depth as a metaphor, are my darkest elements going back into the design and my brightest elements coming forward intentionally?
      • Have I strongly considered how my buttons are interacted with? Hover states, tapped states, etc. Are there any fun animations that I could add to double-down on the direction I'm trying to achieve?
      • Are my buttons working as hard as they should be to create laser-like focus on the most important actions on the screen when applicable?
    • Imagery
      • Knowing that great imagery will make my designs 10X better than subpar imagery, have I intentionally chosen, selected, sourced, or created the absolute best possible imagery for my designs (if applicable)?
      • Does the imagery I'm using make my designs better or is it distracting?
      • Am I intentionally using a static image in my designs that will never be changed, or is there an opportunity to create something more dynamic based on events or user action?
      • Are there places in my design where I can leverage emoji (like on these checklist titles) to create a more unique design?
      • Am I using a rasterized bitmap image when I could be using CSS or an SVG in place of it?
      • If I'm using dynamic imagery in my designs, have I stress tested for all black or all white images to make sure the design still works?
      • If my designs contain user-generated content, have I carefully considered empty states, the ability to change the imagery, the ability to create and/or upload the imagery?
      • Are there smart defaults that look nice when no user generate content has been added?
      • Am I using any imagery that is only "so-so" and not adding great value to the design?
      • Have I paid special attention to any icons used in my project?
      • Are my icons following a strong pattern of size, color, stroke, fill, etc.?
      • Are my icons decorating or interactive and have I made that extremely clear with the designs?
      • Are there any opportunities to create a simple custom illustration (line, shape, pattern, etc.) to add more visual interest to the design?
      • Have I considered how the products marketing site or branding should or will impact the interface?
      • Is there an app store icon that needs to be designed? Are there opportunies to create a fun branded experience between the app icon, the loading screen, and the default view of the first time a user launches the app?
      • If I'm designing a website have I designed a custom favicon that shows up in the browser tab as an extra little detail for my project?
    • Elements
      • Does my project have a clear navigation structure and ideally prioritize the top 5 or fewer links or sections?
      • Have I strongly considered how my input fields function (default, hover, focused, disabled, error, etc.) and created a very clear state design for all possibilities?
      • Do my input fields match the overall style and direction of the project?
      • Are the forms I've designed absolutey necessary and require the most critical information?
      • Have I very clearly communicated the reasons for requiring certain information?
      • If applicable, have I made it clear that certain pieces of information are required for the progress of the user through the app or site?
      • Have I considered all the variables and/or error states if some information is not gathered properly?
      • If my project has user profiles, have I considered what it will look like the first time it's used, after information has been added? Are the mechanisms for editing information abundantly clear or is there room for improvement?
      • Have I carefully considered the implications of a settings screen?
      • Have I done the hardwork of creating smart defaults for the user and not used the settings screen as a dumping ground for all possible changes?
      • Have I carefully chosen lists and/or card-based layouts in my designs based on the volume of information?
      • Are the any missing components to my designs that might not be needed now, but could be very useful in the future, eg. table designs, etc.?
      • Have I considered the states and function of all of my components and created a well-organized file system?
      • Is there a need to turn my clean and organized file-system into an actual design system to be used for other projects?
      • Are there more people on my team (stakeholders, developers, etc.) who need visibility into the choices I'm making for naming components, etc. and should they have an opinion or a say into what things are called as well?
    • Tactics
      • Have I explored LOTS of alternative versions of what I'm trying to design and by process of elimination decided on what works best?
      • If my project is slightly more complex than the average project, whether because of features or team size, have I spent enough time getting everyone on board with how the app should function by using low-fidelity designs?
      • If my project is a web-based project, have I fully considered the mobile version and used that as a way to force prioritization of features and layout?
      • If my project is an application, have a used a mobile-first approach to create simplicity up front?
      • If my project is more of a marketing site, have I designed and explored really nice and impactful desktop versions before confining myself too much with mobile versions?
      • If my project is an iOS app, have I made intentional decisions about where to follow the Apple HIG (human interface guidelines) or where to deviate from it? If I've deviated, do I have a VERY good reason to do so and are the stakeholders and developers OK with this?
      • If my project is an Android app, have I made the decision to exclusively use a material design system, or do I have strong reasons for not doing that?
      • Have I used very intentional placeholder copy and/or images in my designs that could support specific users, etc.?
      • Have I told a story with my designs (based on features) and could I effectively present my designs using what I've created?
      • Are my designs organized in a clear way to showcase specific features and flows?
      • Have I created the necessary prototypes to experiment with animations and interactions?
      • Do I need to create any separate prototype flows to describe certain functionality to stakeholders or developers?
      • Have a been an excellent communicator from the very beginning of the project and now that's it's time to hand off the design, I already know what my developer needs?
  • UI Common Mistakes Checklist
    1. Poor contrast
    2. Many primary buttons
    3. Small clickable area
    4. Poor paddings
    5. Icon inconsistency
    6. Text hard to read/scan
    7. Wrong alignment
    8. Not enough whitespace
    9. Poor validation
    10. Proximity violation
    11. Long text lines
    12. Redundant texts
    13. Poor quality of screenshots
    14. Small font-size
    15. Taking full width when it's not necessary
    16. No hovering state
    17. Poor shadows
    18. Layout shifts
  • Simple design: https://www.anthonyhobday.com/simpledesign/ (rec by Hey designer)
  • 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
  • How to design great keyboard shortcuts

More Free Stuff

Paid Design Services of Note

  • Design Pickle
  • Manypixels
  • Contentfly (copywriting)

Courses

More Repositories

1

ai-notes

notes for software engineers getting up to speed on new AI developments. Serves as datastore for https://latent.space writing, and product brainstorming, but has cleaned up canonical references under the /Resources folder.
2,778
star
2

brain

Swyx's second brain!
1,458
star
3

launch-cheatsheet

how smart people launch things - collected advice for beginner indiehackers, focused on pricing, landing pages, and everything else that you need going up to a launch.
852
star
4

swyxkit

An opinionated blog starter for SvelteKit + Tailwind + Netlify. Refreshed for SvelteKit 1.0!
Svelte
673
star
5

awesome-dev-podcasts

a curated list of awesome dev podcasts and why they are awesome
664
star
6

cli-cheatsheet

helpful libraries for *building* CLIs. Not a list of CLIs.
618
star
7

devtools-angels

active angel investors in developer tools!
588
star
8

swyxdotio

This is the repo for swyx's blog - Blog content is created in github issues, then posted on swyx.io as blog pages! Comment/watch to follow along my blog within GitHub
Svelte
334
star
9

async-render-toolbox

BECAUSE PERFORMANCE SHOULD BE SEXY
JavaScript
320
star
10

gpt3-list

List of things that people are claiming is enabled by GPT3. unverified but links to sources.
267
star
11

svelte-actions

prototype official actions for Svelte
TypeScript
228
star
12

gh-action-data-scraping

this shows how to use github actions to do periodic data scraping
JavaScript
171
star
13

ssg

Svelte Site Generator. why try this? because sapper has a lot of setup, and isn't great at pipelining data:
TypeScript
165
star
14

fresh

Community curated lists that never go out of style! 🍅
137
star
15

page-transitions-react-travelapp

react port of https://github.com/sdras/page-transitions-travelapp. See the deployed metlife site:
JavaScript
93
star
16

ask-cli

a cli to ask questions of gpt3 and iterate/chain of thought
TypeScript
90
star
17

svelte-data-fetching

Data Fetching For Developers Who Are New to Svelte And Wanna Learn To Do Other Stuff Good Too
CSS
84
star
18

uuid-list

list of unique id implementations, design considerations, and resources.
84
star
19

sw-yx

readmeee
Python
80
star
20

netlify-plugin-search-index

Generate a Search Index you can query via a static JSON blob or a Netlify Function! A completely framework agnostic Netlify Build plugin that crawls your static site to generate a search index.
JavaScript
79
star
21

automation

bots and their source
75
star
22

gatsby-netlify-form-example-v2

CSS
70
star
23

awesome-monaco-editor

awesome-monaco-editor
64
star
24

svelte-amplify-datastore-demo

How to do Auth + Amplify Data Store with Svelte
JavaScript
64
star
25

tracking

Developer industry stats and where to find them.
62
star
26

README

a readme for people working with me. always a work in progress.
60
star
27

react-typescript-storybook-starter

react-typescript-storybook-starter
JavaScript
58
star
28

bettertwitter

a better twitter UI
Svelte
56
star
29

egghead-cli-workshop

Build Custom CLI Tooling with OClif and React-Ink!
TypeScript
54
star
30

swyx-react-typescript-snippets

swyx react ts snippets
54
star
31

buying-domains

useful data and advice for buying domains.
44
star
32

codingcareer.com

Career Guides, Principles, Strategies & Tactics to build an exceptional dev career
Svelte
43
star
33

amplify-react-serverless-components

a trial app to deploy React Server Components inside of a serverless AWS Lambda function, scaffolded using the AWS Amplify CLI
CSS
41
star
34

technical-community-builders

companies hiring technical community builders
39
star
35

gatsby-theme-netlify-identity

Add Netlify Identity Authentication to any Gatsby app
JavaScript
38
star
36

hooks

hooks for personal use
TypeScript
38
star
37

rincewind

Rincewind: A boilerplate for React + PostCSS (with Tailwind) + TypeScript
TypeScript
36
star
38

sveltekit-monorepo

sveltekit + turborepo + histoire in a turborepo
JavaScript
36
star
39

digital-garden-tos

Digital Garden Terms of Service
33
star
40

demo-amplify-storage-file-upload

Full Amplify Storage demo showing how to build an app to upload and navigate files in AWS S3
Svelte
33
star
41

company-youtubes

Resource: The Best Company YouTubes
32
star
42

svelte-zen-garden

svelte-zen-garden
CSS
30
star
43

domainblocklist

domains that are mostly just automated reposts of content sites like CSS Tricks
29
star
44

netlify-google-spreadsheet-demo

netlify-google-spreadsheet-demo
JavaScript
28
star
45

podcats

make podcast feeds with markdown, mp3s, and typescript
TypeScript
28
star
46

netlify-plugin-rss

Generate an RSS feed from your static html files, agnostic of static site generator!
HTML
27
star
47

everything-store

Svelte
26
star
48

react-static-podcast-hosting

react-static-podcast-hosting
TypeScript
26
star
49

create-react-app-lambda-typescript

create-react-app-lambda-typescript
TypeScript
26
star
50

alumni-startups

startups by alums of bigname startups
25
star
51

reactive-react

An overly-simplistic mockup of a "Reactive" version of React. See talk slides:
JavaScript
24
star
52

react-blade

Inline GraphQL for the age of Suspense - NO LONGER MAINTAINED
JavaScript
23
star
53

react-wired

wired.js styled components for the discerning react user. not actively developed.
JavaScript
23
star
54

netlify-plugin-no-more-404

Netlify Build plugin to guarantee you preserve your own internal URL structure between builds. Don't break the web! Demo:
JavaScript
22
star
55

async-react-future

high level api's to try with async react
JavaScript
20
star
56

talk-typesafe-fullstack-react-demo-cms

talk-react-summit-demo-cms
TypeScript
20
star
57

smaller-safer-serverless-starter

Build Smaller Safer Serverless web apps faster with Preact, TypeScript, Tailwind, and Next.js
TypeScript
20
star
58

DEPRECATED-netlify-fauna-todo

(DEPRECATED) Netlify Identity + FaunaDB app with most recent versions of FaunaDB client and React
JavaScript
20
star
59

react-todomvc

A simple React component to demo your CRUD backend by implementing just 3 methods!
CSS
19
star
60

podcasting-cheatsheet

tools for podcasting
19
star
61

is-this-netlify

check if a site is hosted on netlify by just prepending "http://is-this.netlify.com"
Svelte
19
star
62

crossbones

Fullstackian award, 1707-FSA-NY. a cross-platform barebones react native setup inspired by https://github.com/FullstackAcademy/bones by
JavaScript
19
star
63

svelte-filesystem-demo

Svelte
18
star
64

bash-cheatsheet

concrete examples of bash syntax for people too lazy to actually learn bash
17
star
65

dev-to-cms

dev-to-cms
TypeScript
17
star
66

gatsby-theme-dev-blog

Swyx's personal opinionated Gatsby Theme for Dev Blogs. See https://swyx.io and see neutral demo at
JavaScript
17
star
67

cli-state

Single, mutable sources of truth for your CLIs
TypeScript
16
star
68

TwoSitesOneRepo

demonstrating how to host multiple sites on netlify from one repo
JavaScript
16
star
69

jamstack-jumpstart

Jamstack-Jumpstart, a workshop for MidDevCon and JSConfAsia 2019
JavaScript
16
star
70

netlify-plugin-encrypted-files

Netlify Build Plugin to obscure files in git repos! (both filenames and their contents) This enables you to partially open source your site, while still being able to work as normal on your local machine and in your Netlify builds.
JavaScript
15
star
71

HNX

swyx's hacker news chrome extension
JavaScript
14
star
72

netlify-fauna-graphql-todo

netlify-fauna-graphql-todo
JavaScript
13
star
73

cli-state-machine

Componentizing and Self-Healing Business Logic with xState Machine
TypeScript
13
star
74

talk-reacts-new-defaults

talk-reacts-new-defaults
JavaScript
12
star
75

blade.macro

this is a placeholder repo speccing out the blade "inline graphql" idea. for a prototype see this site =>
12
star
76

gatsby-plugin-netlify-identity

gatsby-plugin-netlify-identity
JavaScript
11
star
77

FSA-GraphQL-of-Thrones

FSA-GraphQL-of-Thrones
JavaScript
10
star
78

react-static-typescript-starter

react-static-typescript-starter
TypeScript
10
star
79

react-demos

TypeScript
9
star
80

learn-you-a-cloud

learn-you-a-cloud
9
star
81

stateful-serverless

stateful-serverless
JavaScript
9
star
82

gatsby-theme-dev-blog-demo

(DEPRECATED) demo now deploys directly from https://github.com/sw-yx/gatsby-theme-dev-blog
JavaScript
9
star
83

distsys-tldr

TLDRs of Distsys Papers
8
star
84

svelte-cubed-starter

JavaScript
8
star
85

amplify-vscode-snippets

8
star
86

technical-artists

technical-artists
8
star
87

boring-SSG

a proof of concept static site generator with React, Reach Router and Parcel
JavaScript
8
star
88

gatsby-netlify-i18n-redirects

gatsby-netlify-i18n-redirects
CSS
8
star
89

fullstack-serverless-stripe-aws

fullstack-serverless-stripe-aws with Thor & Swyx livestream
JavaScript
8
star
90

react.macro

small babel macros for react
JavaScript
8
star
91

email-tools-list

8
star
92

fresh-react-hooks

DEPRECATED: THIS REPO IS NOT MAINTAINED 😂
8
star
93

react-hero-video

A small styled React component to play your hero videos! Check out the demo:
JavaScript
8
star
94

egghead-storybook2

continuation of my egghead course on storybook
JavaScript
7
star
95

awesometalksdata

data dump from awesometalks.party
JavaScript
7
star
96

rincewind-demo

Rincewind: A boilerplate for React + PostCSS (with Tailwind) + TypeScript
TypeScript
7
star
97

life

The Source Code for Life. A book in progress.
7
star
98

hooks-suspense-faunadb-todo

netlify + faunadb + react hooks
JavaScript
7
star
99

react-static-mdx

react-static-mdx
CSS
7
star
100

AuthApiTesting

Testing Passport.js Authentication gated API routes with Mocha/Chai/Supertest
JavaScript
7
star