swyxio/spark-joy - Githubissues

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
CSS/UI Templates
Layout
Typography
Colors
Backgrounds
Icons and Favicons
Diagramming
Graphics and SVG Illustrations
Individual HTML Elements
Pure CSS Tricks
- SVG/Canvas Masking
Animations & Transitions
- Loading Spinners
- React Animation Tools
Ideas for Improving UX
- Onboarding
- Empty states
Design Software
Non-DOM Browser Technologies
- Canvas
- WebGL
- 3D
Interaction/Design Inspo
- Game design inspo
Random Stuff That Doesn't Fit Anywhere

Web Design in 4 minutes

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

CSS/UI Templates

HTML/CSS nice templates

🆕 https://shuffle.dev/ tailwind/bootstrap/materialui randomly generated templates
https://www.free-css.com/
https://www.creative-tim.com/
https://wickedtemplates.com using Tailwind v2 (and wickedblocks) and https://wickedbackgrounds.com/
https://www.tailwind-kit.com/ free tailwind component kit
https://daisyui.com/ tailwind theme
https://themeselection.com/
https://html5up.net/
https://frontendor.com/ using bootstrap
https://preview.tabler.io/# using bootstrap
https://cruip.com/ HTML, React, Vue.js, and Tailwind templates
https://open-props.style/ design tokens using CSS variables

Serious CSS Frameworks

Professional Design Systems

https://designsystemsrepo.com/
Government
- G10
- The UK: https://design-system.service.gov.uk/
  - New Zealand is heavily based https://design-system-alpha.digital.govt.nz/
- The US: https://designsystem.digital.gov/
- Canada: https://www.canada.ca/en/government/about/design-system.html
- Russia: http://gov.design/
- Australia: https://designsystemau.org/
- France: https://www.systeme-de-design.gouv.fr/
- Germany: https://produkt.gsb.bund.de/DE/Home/home_node.html and https://styleguide.bundesregierung.de/sg-de/
- Other
- Argentina: https://argob.github.io/poncho/
- Greece: https://guide.services.gov.gr/
- Netherlands: https://www.rijkshuisstijl.nl/
- Italy: https://designers.italia.it/
- Singapore: https://www.designsystem.tech.gov.sg/
- Europe
- Estonia: https://brand.estonia.ee/
- Czech Republic: https://designsystem.gov.cz/
- Ukraine: https://diia.fedoriv.com/

Heavier CSS Frameworks

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

Bootstrap
Foundation
Blaze UI
PatternFly
UIKit
Numl - A UI Design Language, UI Library of Web Components, and Runtime CSS Framework for rapidly building interfaces that follow your Design System
Utility CSS
- Bonsai CSS
- Tailwindcss
Web Components
- Weightless
- Shoelace

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

No CSS Classes - Pure HTML
- 🌟 https://andybrewer.github.io/mvp/ mvp.css
- https://yegor256.github.io/tacit/
- https://github.com/alvaromontoro/almond.css has thin fonts
- https://picocss.com/ Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.
- https://simplecss.org/demo 4kb incl dark mode
- https://watercss.kognise.dev/ Small size (< 2kb)
- https://github.com/xz/new.css (https://newcss.net/) 4.8kb
- https://github.com/oxalorg/sakura supports extremely easy theming using variables for duotone color scheming.
- https://github.com/susam/spcss
- https://neat.joeldare.com/ https://github.com/codazoda/neatcss
- https://concrete.style/ Tiny (< 1kb)
- https://github.com/zichy/fieber (new, wants feedback)
- https://mikemai.net/typesettings/index.html (new)
- https://css.winterveil.net/ magick.css is a minimalistic, (mostly) classless CSS framework that is designed to be easy to use and easy to understand. It is contained in a single file, and every choice is commented. The goal is to achieve an elegant, but magically playful look, while maximizing readability and the ability to convey information; somewhat akin to the notes of a wizard.
- https://github.com/neocities/element (inactive now)
Spectre.css lightweight (10kb), responsive and modern CSS framework for faster and extensible development.
https://purecss.io/ A set of small (3.7kb), responsive CSS modules that you can use in every web project.
https://gdcss.netlify.app/ (inspired by UK design system)
https://ajusa.github.io/lit/ lit has two modules: lit and util. lit contains all of the basics for a framework, such as a responsive grid, typography, and other elements. util has many CSS utility classes that can be used to extend lit, or any CSS framework.
https://luxacss.com/
https://jenil.github.io/chota/ good looking, lots of classes and utilities yet small
https://chr15m.github.io/DoodleCSS/ hand drawn look
https://codepen.io/web-dot-dev/pen/abpoXGZ the base classes for web.dev/learn/csss
https://open-props.style/ css variables framework - "tailwind without tailwind"id=30497165).
https://latex.vercel.app/ style your website like a LATEX document - (original version https://github.com/davidrzs/latexcss)
https://picnicss.com/ - lightweight bootstrap alternative (2014 HN)
https://github.com/gduverger/screen (inactive now)
Collections of even more:

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

https://www.getpapercss.com/ (handrwritingey css similar to roughjs)
https://terminalcss.xyz/

focus is brutalism

https://secretgeek.github.io/html_wysiwyg/html.html This page is a truly naked, brutalist html quine.
https://mrcoles.com/demo/markdown-css/ CSS to make HTML markup look like plain-text markdown.

focus is fun/nostalgia

NES.css: NES.css is a NES-style(8bit-like) CSS Framework.
PSone.css: PS1 style CSS Framework, inspired by NES.css.
LaTeX.css
Operating System CSS
- React95
- 98.css: A Windows 98 inspired framework for building faithful recreations of old UIs.
- Office 97 clipart in svg format
- XP.css: A Windows XP inspired framework for building faithful recreations of operating system GUIs. An extension of 98.css.
- 7.css
- System.css Retro Apple-inspired UI
- Puppertino meant to mimic the look of macOS. demo
- Commodore 64 CSS
- DOS: BOOTSTRA.386: A vintage 1980s DOS inspired Twitter Bootstrap theme
- a2k: A Windows 2000 inspired web component library
Text UI CSS: bios like UI's
New Dawn: A mac classic After Dark inspired stylesheet.
Geocities Bootstrap theme
Metalmorphism: High-quality metallic UI kit
more https://dev.to/iainfreestone/10-resources-for-recreating-old-school-retro-user-interfaces-today-hkj

focus in futurism

Arwes - Futuristic Sci-Fi and Cyberpunk Graphical User Interface Framework for Web Apps https://arwes.dev/
http://augmented-ui.com/ - Futuristic, Sci-Fi shaping for any element

No Framework

Instead of using a framework, consider not using one.

CSS Resets

more control in exchange for more work on your part.

eric meyer v2 https://meyerweb.com/eric/tools/css/reset/
josh comeau reset https://www.joshwcomeau.com/css/custom-css-reset/ - Chris Coyier comments
https://github.com/jensimmons/cssremedy css working group's reset if it didnt have to worry about tech debt
https://github.com/tiaanduplessis/nanoreset
https://nicolas-cusan.github.io/destyle.css/
https://hankchizljaw.com/wrote/a-modern-css-reset/
- udpated https://andy-bell.co.uk/a-more-modern-css-reset/
- commentary https://chriscoyier.net/2023/10/03/being-picky-about-a-css-reset-for-fun-pleasure/
https://gist.github.com/DavidWells/18e73022e723037a50d6
http://necolas.github.io/normalize.css/ (yes, technically does more than a reset)
- https://github.com/sindresorhus/modern-normalize is a smaller version that just supports latest Chrome, Firefox, and Safari
- Tailwind's https://tailwindcss.com/docs/preflight/ is built atop normalize
https://github.com/kripod/css-homogenizer - a modern take on Eric Meyer's Reset, based upon direct comparison between user agent style sheets.
Jamie Kyle CSS preset https://twitter.com/buildsghost/status/1360343126510981122?s=20

CSS A11y Checkers

Tailwind Component Libraries

React Component Libraries

Recent comparison/discussion of:
- DaisyUI
- React Bootstrap
- ChakraUI
- Tailwind UI
- Flowbite React
- Material UI
- https://www.tremor.so/ Simple and modular components to build dashboards in a breeze. Fully open-source, made by data scientists and software engineers with a sweet spot for design.
Radix UI Unstyled, accessible components for building high‑quality design systems and web apps in React.
Mantine More than 120 customizable components and hooks to cover you in any situation.
https://nextui.org/ uses Stitches, includes light and dark UI components out-of-the-box along with a default color palette that might be good for quickly building landing pages or other content that’s not initially tied to any branding.
https://akaspanion.github.io/ui-neumorphism/
https://component.gallery/
https://headlessui.dev/
https://ui.supabase.io/
https://ui.shadcn.com/ Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://magicui.design/ 20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.

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

https://piccalil.li/tutorial/build-a-responsive-media-browser-with-css/
Tailwind's breakpoints don't come with layout recommendations but here they are:
- sm: 640px
- md: 768px
- lg: 1024px
- xl: 1280px
- 2xl: 1536px

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

🌟 https://every-layout.dev/
https://web.dev/patterns/layout/
https://gedd.ski/post/article-grid-layout/
CSS grid generator tools
https://uisual.com/
https://csslayout.io/ (github)
Visual Hierarchy https://youtu.be/qZWDJqY27bw

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?](https://css-tricks.com/snippets/css/system-font-stack/)) - GitHub: `font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";` - [VS Code Autocomplete](https://twitter.com/kudapara/status/1093553125661773825?s=20): `font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif` - [`font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;`](https://twitter.com/_etiennemartin/status/1221114860479696896?s=20) - [`font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;`](https://twitter.com/laurosilvacom/status/1221138641923141632) - [`font-family: ‘system-ui’, sans-serif;`](https://twitter.com/esojrafael/status/1221107296127729664?s=20) - the ['system-ui' generic font family is new, standardizing name across Safari, Firefox and Blink](https://www.chromestatus.com/feature/5640395337760768) - [StackOverflow almost-system-font stack](https://news.ycombinator.com/item?id=31544613): ```css @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. ``` - [Sanitize.css](https://github.com/csstools/sanitize.css#typography-uses-the-default-system-font): ```css 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; } ``` - [Some systems come with good premium fonts](https://twitter.com/MatiasEduardoPR/status/1093508700378144768?s=20) - Apple OSes have `“avenir next”, “avenir”, “proxima-nova”`
See also [Modern Font Stacks](https://modernfontstacks.com/) - [discussion](https://news.ycombinator.com/item?id=35168652) - Simple: `font-family: system-ui, -apple-system, sans-serif;` ([has issues on old browsers + asian langauges]([url](https://news.ycombinator.com/item?id=31544075) - 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;`

Consider your site personality
- Elegant/Classic: serif like Freight Text, Adobe Garamond, PT Serif
- Playful: rounded sans serif like Proxima Soft
- Plain/Safe: neutral sans serif like Freight Sans, Inter, Proxima Nova
- Sciency/technical: squared off (geometric) sans like DIN, Industry
- monospace fonts
- https://devfonts.gafi.dev/
- https://coding-fonts.css-tricks.com/
- Programming fonts
- https://www.programmingfonts.org/ (discussion)
- 14 free programming fonts
- Variable fonts: https://whirlybirdie.com/
  - Erik Kennedy font https://mobile.twitter.com/erikdkennedy/status/1575135945359097864
- Novelty: http://velvetyne.fr/
- use a Uniwidth font (not monospace) for interface design
Fonts have fashions/trends. current vogue is Inter.
Free fonts that are great with examples (thanks @edadams)
- Google Fonts - (see Harry Roberts on Google Font loading perf - you should self host this)
- https://www.colorsandfonts.com/font-pairing
- https://www.nngroup.com/articles/pairing-typefaces/
- https://fontflipper.com/upload Just upload an image, write some sample copy. And flip through 500 Google fonts one by one.
- https://bueltge.de/free-web-font-combinations/
- 40 best google fonts by Typewolf
- 50 selections of google fonts
- Noto Sans
- Fira Sans - related to Fira Code for devvy stuff
- Raleway
- Open Sans
- Recursive - 1 variable font that can handle both monospace and UI usecases, very versatile
- Cavivanar https://twitter.com/atav1k/status/1178096244490723328?s=19
- Jack Butcher faves
  - Rubik
  - Work Sans
  - IBM Plex Family (Mono, Sans, Serif)
- Fontshare 50 free fonts https://www.fontshare.com/
- Erik Kennedy picks from these
- Premium-looking Free Fonts https://learnui.design/blog/ultimate-guide-similar-fonts.html
- Apercu · Avenir · Circular · DIN · Futura · Gotham · Helvetica · Proxima Nova · Times New Roman
- https://beautifulwebtype.com/
- Chivo https://www.latinxswhodesign.com/
- Lato Well known, very readable, pretty, client favorite
- Libre Franklin Elegant and thin
- IBM Plex Sans Loads of weights, beautifully done - example: https://thesephist.com/posts/inc/
- Clear Sans
- Atkinson Hyperlegible from Braille institue
- Inter Rasmus' typeface carefully crafted & designed for computer screens.
- Jetbrains Mono - Monospace font for devvy stuff
- Handwritten Fonts - great for presentations, annotated illustrations
- https://www.urbanfonts.com/fonts/handwritten-fonts.htm
- Caveat and Reenie Beanie on google fonts https://twitter.com/round/status/1178090890004455424?s=19
https://fontsarena.com/
https://uncut.wtf/ 90 typefaces with a focus on contemporary, or modern, type.
"Open Source Beautiful Fonts" by Gontijo
Font Pairing
Font variants and oldstyle numbers
steve schoger blessed typekit fonts for UI's
- proxima nova
- aktiv grotesk
- acumin pro
- Museo Sans (example) and similar from TypeKit
https://practicaltypography.com/system-fonts.html
https://practicaltypography.com/free-fonts.html
eye catching fun fonts
- https://www.haleyfiege.fun/fonts
- pixel fonts https://twitter.com/castpixel/status/1281345373336985612?s=20
CSS 3D text https://markdotto.com/playground/3d-text/
JS 3D text https://bennettfeely.com/ztext/
TypeSpiration https://typespiration.com/ premade font pairings for you
more opinions places
- https://muffingroup.com/blog/best-free-fonts/
- https://type-scale.com/
- https://practicaltypography.com
- http://thinkingwithtype.com/
- https://typographyforlawyers.com/
- http://webtypography.net/intro/
- https://www.youtube.com/watch?v=Vd6jZR-GknA
- 6 ways to justify font choices in your designs
- statistical data on font usage
- Study of best font for online reading - inconclusive https://news.ycombinator.com/item?id=31156018

Premium fonts and some examples

- Proxima Nova https://a16z.com/ (on Typekit) - Graphik https://type.today/en/Graphik - https://www.typewolf.com/ - MD Prime - used on CSS tricks https://www.youtube.com/watch?v=mTIatvwm1MM - Arida Black (maggie's font) https://www.myfonts.com/fonts/latinotype/arida/black/ - [Dank Mono](https://dank.sh/) - Tekton https://twitter.com/round/status/1178090204562968576?s=19 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="https://github.com/swyxio/spark-joy/blob/master/$CSS&display=swap" />

<!-- [3] -->
<link
  rel="stylesheet"
  href="https://github.com/swyxio/spark-joy/blob/master/$CSS&display=swap"
  media="print"
  onload="this.media='all'"
/>

<!-- [4] -->
<noscript>
  <link rel="stylesheet" href="https://github.com/swyxio/spark-joy/blob/master/$CSS&display=swap" />
</noscript>

font-display: optional may be good
- but harry roberts doesnt like it
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](https://hottips.imgix.net/2020/07/044-tracking-animation.gif) - https://creativemarket.com/blog/whats-the-difference-between-leading-kerning-and-tracking - https://99designs.com/blog/tips/11-kerning-tips/

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

Font Sizing

DON'T GO CRAZY WITH FONT SIZES. Try to use 1-2 sizes and vary other things like weight, space/leading, color, casing.
Don't rely on varying fontsize to control hierarchy - also use font weight (normal = 400/500, heavy = 600/700) and color
- Don't go under font weight 400, use a lighter color or smaller fontsize instead
Fluid typography with clamp: font-size: clamp(1.125rem, 1rem + 2vw, 1.5rem)
- CSS Tricks v18: font-size: clamp(2rem, calc(2rem + 1.2vw), 3rem);
- Another responsive typography fallback - font-size: calc(1rem + 2px + ((100vw - 550px) / 250)) - you can fit text to screen width
- demo it with this https://fluid-typography.netlify.app/
Inter/Tailwind font-size combo
BAD, SLOW fontsize calc
- Note: vw has known a11y issues: Preserve Zooming. Sara Soueidan recommends wrapping with calc, e.g. font-size: calc(16px + .3vw);
Complete font-size notes
the hanging-punctuation property in CSS https://news.ycombinator.com/item?id=38441747
Establishing your own type scale https://typescale.com/

Typography Talks

Typography for Developers (2hrs) https://www.youtube.com/watch?v=agbh1wbfJt8
Adam Argyle on Typography https://www.youtube.com/watch?v=aaro26rK61o&t=874s
Web Typography (48mins) https://www.youtube.com/watch?v=hbIZX6tE9JY
1. Don't trust computers
2. Use the default font size for paragraph text
3. Adjust type size according to reading distance
4. Adjust the font size if the typeface requires it
5. Set tables to be read
6. Resize display text as you would an image
7. Reduce your playload
8. Optimise page render timing
https://www.youtube.com/watch?v=OgsHSVsNRdg

Other Typography Resources

5 minute guide to Typography https://www.pierrickcalvez.com/journal/a-five-minutes-guide-to-better-typography
Typography in 10 minutes https://medium.com/nextux/become-a-typography-nerd-in-under-10-minutes-5a7eda093cb3
Quick Guide to Typography for webdevs https://sinja.io/blog/web-typography-quick-guide
typography for long form articles - https://css-tricks.com/designing-for-long-form-articles/
Font smoothing - explained, MDN
Tool for learning what fonts other people use https://fontanello.oktavilla.se/
FlowType.js
FitText
https://wh0.github.io/glitter/ It’s a generator that produces text in a glitter-like style, which you can save as SVG. Definitely not for 99% of your projects, but a pretty cool text effect.
if all letters at the same height all caps this is called Majuscule
International fonts stack https://www.figma.com/blog/when-fonts-fall/
In future, try out leading-trim
https://piccalil.li/tutorial/improve-the-readability-of-the-content-on-your-website
css podcast primer on typography https://thecsspodcast.libsyn.com/tcp036-v2
https://www.typewolf.com/checklist

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.

https://twitter.com/LoanReads/status/1313974210151305218?s=20
https://www.colourblindawareness.org/colour-blindness/
use the concept of "luminance contrast" https://twitter.com/swyx/status/1351566026090053632
https://randoma11y.com/?color=springgreen

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](https://codepen.io/oliviale/full/XyqQYL): - 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](https://twitter.com/adamwathan/status/1291724757402976257?s=20)

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

https://atmos.style A toolbox to create better UI color palettes.
https://colorgen.dev/
https://color.adobe.com/create
https://www.colorsandfonts.com/
https://colorswall.com/
https://coolors.co/
https://colorpalettes.earth/ displays color palettes sourced from images of nature (taken from Unsplash)
https://colorsinspo.com
https://huey.design/ Rapid color palettes across the rainbow
https://duo.alexpate.uk/
https://colorhunt.co/
https://2colors.colorion.co/
https://meodai.github.io/poline/ Poline - enigmatic color palette generator
https://www.colorsandfonts.com/color-palettes
https://dribbble.com/colors/4030e8
https://palettte.app/ (advanced tool; try importing the default palettes)
https://www.paletter.app/ - Create Professional Color Palettes from a Single Color
http://colours.neilorangepeel.com/category/red/
https://www.colorbox.io (by Lyft Design https://design.lyft.com/)
Consider darker/lighter color variations
https://croncolor.com/color-tool
https://leonardocolor.io/?colorKeys=%236fa7ff&base=ffffff&ratios=3%2C4.5&mode=CAM02
https://happyhues.co/
https://www.colourlovers.com/ recommended by Tracy Osborn
https://flatuicolors.com/
https://colorsupplyyy.com/
chroma.js color palette helper
https://palx.jxnblk.com/
https://hotpot.ai/assistant/color_assistant Get suggestions for palettes, gradients, and text colors. Hit the space bar for ML-powered ideas.
https://yeun.github.io/open-color/
http://khroma.co/ neural network generated color palettes
https://learnui.design/tools/data-color-picker.html Color picker for data visualizations
https://learnui.design/tools/accessible-color-generator.html Accessible color generator
https://maketintsandshades.com/ Generate tint and shades from hex code
http://paletton.com/
Tailwind:
- https://tailwind.ink/
- https://www.tailwindshades.com/
- https://tailwind.simeongriggs.dev
- https://javisperez.github.io/tailwindcolorshades/
- https://tailwind-color-picker.jessarcher.com
- https://www.tints.dev/ (HN)
Special usecases:
- Mix colors in pure CSS https://css-tricks.com/mixing-colors-in-pure-css/
- HSLuv color space is preferable to HSL. Palette generator
- why not hsl https://wildbit.com/blog/accessible-palette-stop-using-hsl-for-color-systems
- https://colors.lol/ Overly descriptive color palettes (fun)
- English color names:
- https://hexwords.netlify.app/
- https://colornames.org/
- https://c0ffee.surge.sh/

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.

https://www.joshwcomeau.com/gradient-generator/
gradients https://mybrandnewlogo.com/color-gradient-generator
vivid gradient generator https://www.learnui.design/tools/gradient-generator.html
CSS Gradient Text https://twitter.com/argyleink/status/1281623252662489088/photo/2
🌟 https://mycolor.space/gradient Generate a CSS Color Gradient
https://huemint.com/ Huemint uses machine learning to create unique color schemes for your brand, website or graphic
https://webgradients.com/ free collection of 180 linear gradients
https://uigradients.com/#Petrichor
https://gradient-king.vercel.app/
https://learnui.design/tools/gradient-generator.html (to avoid the "gray zone" problem)
Adam Argyle conic CSS gradient examples https://www.conic.style/
https://www.grabient.com/
https://www.colorsandfonts.com/color-gradients
ANIMATED GRADIENTS https://www.gradient-animator.com/
Subtle gradients by bumping only saturation on HSL (thanks argyleink) - You can really take this to the extreme!
Tailwind
- https://hypercolor.dev/
Gradient designer with interpolation in various color spaces https://akx.github.io/gradient/

Color Theory

Not tools but still important so here they are

A Beginner’s Guide to Applying Color in UI Design
Sarah Drasner on Color
Louisa Barret on Color
Erik Kennedy on HSB
Erik Kennedy on color variations
JustinMezzell on Color - advanced stuff on picking color tone/temperature. Basic version by Steve Schoger
Justin Baker on Color Theory
Convertkit on Color Theory
Josh Comeau on Color Palettes
Stripe - Designing accessible color systems
How to do Dark Mode right
- Zeno Rocha 5 tips for dark mode https://workos.com/blog/5-lessons-we-learned-adding-dark-mode-to-our-platform?ref=sidebar
Inventorying and naming a Color Palette at UXPin
Reasoning about Color some light reading on color spaces and transforms (eg "pastelize" operation)
Refactoring UI on Building Your Color Palette
Numeric systems of color palettes explained
Monochromatic color scheme guide
Canva's color wheel has a color theory guide
https://youtu.be/Co75kmQtbaA
(fun) history of primary colors
big list of color names: https://github.com/meodai/color-names
RGM to Lab color space math
(way too detailed) history and guide to color pickers https://bottosson.github.io/posts/colorpicker/

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:

https://philcoffman.com/
https://css-tricks.com/
https://magicmind.co/ very subtle texture
https://increase.com/

Background Radial Bursts behind images:

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/

https://meshgradient.com/ swirly backgrounds like apple
https://meshgradient.in/ generate mesh gradient backgrounds

Background Patterns

https://trianglify.io/ low polly pattern generator
https://leaverou.github.io/css3patterns/
https://github.com/bansal-io/pattern.css
http://www.heropatterns.com/ SVG Repeating Patterns Generator
https://doodad.dev/pattern-generator/
https://www.wowpatterns.com/free-vector-art thousands of freevector patterns, based on shapes, organic shapes as well as themes, such as animals, beach, city and people, festivals, florals etc.
https://wickedbackgrounds.com/?ref=producthunt svg background waves
https://www.svgbackgrounds.com/
https://www.transparenttextures.com/
https://www.toptal.com/designers/subtlepatterns/ (exports png though :( )
https://www.flaticon.com/pattern/ (create a bg pattern of icons)
https://coolbackgrounds.io/
https://tabbied.com/ abstract Doodles with generated patterns
https://css-doodle.com/
https://hero-generator.netlify.app/ hero picture CSS generator
https://www.gradientmagic.com/
https://kumiko-generator.netlify.app/
http://thepatternlibrary.com/
https://msurguy.github.io/flow-lines/ produces random geometric lines, and we can adjust the formulas and distances between the shapes drawn
http://svgbackgrounds.com/
https://haikei.app/ - web app to generate unique SVG shapes, backgrounds, and patterns
https://pattern.monster/ 180 patterns, and you can filter them by mode and color, and search
http://iros.github.io/patternfills/ - plenty of black-and-white patterns, also available from the command line
https://www.kennethcachia.com/plain-pattern/ allows you to upload an SVG shape (or use one of the existing ones) and it creates a repeating pattern which can be exported as SVG.
http://www.patternify.com/ CSS Pattern generator that allows you to define a pattern in a 10×10 grid
https://www.magicpattern.design/tools/css-backgrounds library of pure CSS background patterns like ZigZag or diagonal ones.
https://bgjar.com/
https://products.ls.graphics/paaatterns/
https://notchr.is/patterns/ (Really simple SVG Patterns using single unicode characters.)
https://doodad.dev/pattern-generator/ (Pattern generator that exports to png, jpg and svg.)
wave dividers
- https://www.shapedivider.app/ generate custom shape dividers
- https://svgwave.in/
- https://getwaves.io/ generate SVG waves
- https://wavelry.vercel.app/ choose between sharp, linear and smooth waves
- https://www.outpan.com/app/9aaaf27303/svg-gradient-wave-generator adjust amplitudes, smoothness, saturation and hues
- https://loading.io/background/m-wave/ generate waves, and even animate them
- https://haikei.app/ full fledged generate SVG assets, from layered waves to stacked waves and blob scenes
- svg waves generator https://codepen.io/jh3y/full/poEvKxo
- https://wweb.dev/resources/css-separator-generator

Icons and Favicons

Favicons

Don't forget them!

How to Favicon in 2021

<link rel="icon" href="https://github.com/swyxio/spark-joy/blob/master/favicon.ico" /><!-- 32×32 -->
<link rel="icon" href="https://github.com/swyxio/spark-joy/blob/master/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="https://github.com/swyxio/spark-joy/blob/master/apple-touch-icon.png" /><!-- 180×180 -->
<link rel="manifest" href="https://github.com/swyxio/spark-joy/blob/master/manifest.webmanifest" />

// manifest.webmanifest
{
"icons": [
  { "src": "/192.png", "type": "image/png", "sizes": "192x192" },
  { "src": "/512.png", "type": "image/png", "sizes": "512x512" }
]
}

the 6 favicon types you need
🌟 Real Favicon generator - pop in an image, get back a favicon! The most comprehensive one for all platforms (Windows, iOS, Android)
Favicon.io - Generate a favicon from text, from an image, or from an emoji. Download in .ico and .png formats
FontIcon - Generate favicons and images from Font Awesome icons
Favicon Generator - another one
https://textmoji.app/ small text icons meant for Slack but also can use for faviconning
SVG Favicon maker - supports emojis and 2 letter favicons with custom fonts
SVG favicons are modifiable by scroll percentage
- you can https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/
- put the scroll percentage! https://css-tricks.com/how-i-put-the-scroll-percentage-in-the-browser-title-bar/

`<link rel="">` tags and opengraph

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

<link rel="icon" type="image/png" href="https://github.com/swyxio/spark-joy/blob/master/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="https://github.com/swyxio/spark-joy/blob/master/{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

https://css-tricks.com/explain-the-first-10-lines-of-twitter-source-code/
https://github.com/joshbuchea/HEAD
https://www.matuzo.at/blog/html-boilerplate/
maybe think about adding JSON+LD too.

Icons

Logos (incl company logos)

https://logosear.ch/ superfast metasearch of 200k svg logos from GitHub
https://svgl.vercel.app/ fast search of svg logos, user submitted and categorized
https://seeklogo.com/
https://www.iconfinder.com/iconsets/payment-method-1
https://www.logology.co/ We’ve designed a catalog of 500+ logos. Take a brand identity test and we’ll instantly match you with the best ones, paired with the right fonts & colors.
https://www.svgrepo.com/ Browse 300.000+ SVG Vectors and Icons
https://iconsear.ch/ instant search of 50k svg icons from GitHub and GitLab
https://macosicons.com/ icons intended to replace mac desktop icons
https://awsicons.dev/ AWS icons and https://aws-icons.com/

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="https://github.com/swyxio/spark-joy/blob/master/" aria-label="Good Label"><svg aria-hidden="true" ... ></svg></a>

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

⭐ https://www.heroicons.com/ Steve schoger's (somewhat limited) svg iconset. another viewer: https://heroicons.dev/
⭐ https://phosphoricons.com/ 3000+ fully customizable free SVG and PNG icons. style, variations, easy to consume
⭐ https://tablericons.com/ 937 Fully customizable free SVG icons
⭐ https://icons.modulz.app/ Radix Icons - >250 15×15 icons designed by the Modulz team. - some great app icons
⭐ https://lucide.dev/, Lucide, a fork of Feather Icons with Clean, consistent, customizable SVG icons available as treeshakable packages in all frameworks.
- "Lucide is a very active fork of Feather and what I’ve been using for the past few years instead. Feather is great as are their design guidelines, but it needs way way more icons. Lucide picks up beautifully where it left off."
- rauchg feature
https://iconoir.com/ free open source library with 1000+ SVG Icons, designed on a 24x24 pixels grid
https://iconic.app/
https://teenyicons.com/ tiny minimal 1px icons
Google icons https://fonts.google.com/icons
Material Design https://materialdesignicons.com/ https://material.io/resources/icons/?style=baseline
Circum Icons https://circumicons.com Consistent open source icons as SVG for React, Vue and Svelte.
icon metasearch (list of lists of icons)
- https://icones.netlify.app/
- https://www.iconbolt.com/
- https://iconduck.com/ 104,808 free open source icons
https://thenounproject.com/ Every icon you can think of, in PNG or SVG formats. They offer over 20 million icons, with built-in customization colors like size and color. Requires login, needs creative commons attribution or $3 download
https://www.snoweb-svg.com/
https://nucleoapp.com/ Nucleo is a beautiful library of 30635 icons, and a powerful application to collect, customize and export all your icons. $99 lifetime purchase.
- https://nucleoapp.com/tool/icon-transition SVG Icon Transitions Generator
https://hotpot.ai/free_icons 5,000+ free icons. Customize colors, size, and other properties. PNG, JPG, iOS, Android, PDF. No svg.
https://iconmonstr.com/ Discover 4486+ free icons in 310 collections. SVG, EPS, PSD, PNG. OK without attribution, don't sell it.
https://icomoon.io/ - 450 icons, SVG, PDF, EPS, Ai, PSD. Paid tier goes up to 1600 icons.
https://orioniconlibrary.com/ has customizable colors and packs eg for ecommerce
https://github.com/edent/SuperTinyIcons Under 1KB each! Super Tiny Web Icons are minuscule SVG versions of your favourite logos. The average size is under 465 bytes!
https://github.com/Remix-Design/RemixIcon neutral-style system symbols for designers and developers. Unlike a patchwork icon library, 2200+ icons are all elaborately crafted so that they are born with the gene of readability, consistency and perfect pixels. Each icon was designed in "Outlined" and "Filled" styles based on a 24x24 grid.
https://icons8.com/l/fluent/ colored "microsoft style" icons
https://icons8.com/emoji emoji style customizable icons
https://icons8.com/line-awesome fontawesome-like icons
https://iconsvg.xyz/ Quick customizable icons for your projects
http://www.entypo.com/
https://simpleicons.org/
http://github.com/propublica/weepeople A typeface of people sillhouettes, to make it easy to build web graphics featuring little people instead of dots.
Bootstrap Icons https://github.com/twbs/icons, https://icons.getbootstrap.com/
https://systemuicons.com/
https://github.com/microsoft/fluentui-system-icons Fluent UI System Icons are a collection of familiar, friendly and modern icons from Microsoft.
https://www.streamlinehq.com/elements/memes a few dozen popular meme icons as svg
https://icons.mono.company/
https://iconscout.com/unicons and https://github.com/Iconscout/react-unicons
https://www.zondicons.com/
https://linearicons.com/free
animated icons http://www.transformicons.com/builder.html
http://game-icons.net/
Covid 19 icons - https://design.dev/
https://kenney.nl/ public domain game assets
https://www.iconshock.com/social-media-icons/ A pack of 300 social media icons (PNG & Vector) and a set of animated icons (Lottie and AE), which cover all the trendiest social media networks nowadays.
brand icons
- http://simpleicons.org/ icons for every brand like graphql, adobe xd, youtube, etc
- https://css.gg/ 700+ Customizable & Retina-Ready app icons — entirely built in CSS
- https://worldvectorlogo.com/
- https://www.vectorlogo.zone/ - consistently formatted SVG logos
Icon Libraries and Framework
- Iconify https://github.com/iconify/iconify -> use in https://github.com/antfu/unplugin-icons
React Icons
- https://react-icons.github.io/react-icons/
- https://github.com/miukimiu/react-kawaii
- https://reactsvgicons.com/
- https://react-icons.netlify.com/#/icons/fa (typically fontawesome). note that there is some tree shaking issues in the discussions. you may wish to use the https://github.com/meronex/meronex-icons fork instead
- https://github.com/bytedance/IconPark - more than 1,200 high-quality icons, and introduces an interface for customizing your icons. across React, Vue, SVG, PNG.
- https://github.com/useAnimations/react-useanimations

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

premium/paid icons

http://shape.so/ 4300+ Icons & Illustrations (by Meng To)
https://logobly.com/ create custom logos
https://hatchful.shopify.com/ more custom logos
https://radicalicons.com/ use radicaldesign
https://symbolicons.com/
🔥 https://streamlineicons.com/ (used in Glide Apps)
https://www.iconfinder.com/
https://www.flaticon.com/ 6.5m icons, free for PNG, paid for SVG
https://gumroad.com/l/primaries
https://gumroad.com/l/gPEAU ios 14 icons from traf - for inspo, mainly

Diagramming

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

https://nocomplexity.com/documents/arplaybook/businessarchitecture.html
https://sportebois.medium.com/better-architecture-diagrams-for-agile-teams-actionable-tips-and-lessons-e76627dc4315
https://c4model.com/ (c4 modeling more from Simon)
http://fmc-modeling.org/ FMC modeling - only rectangles and round things
How to Draw Architecture Diagrams

General Purpose Diagramming

https://excalidraw.com/ (free, open source)
https://miro.com/ - freemium, used by Maggie
https://www.draw.io/ - now shifted to https://www.diagrams.net/ (free) - has VS Code extension
https://inkscape.org/ (free)
https://whimsical.com/ ($10/mo)
https://www.lucidchart.com/
https://www.gliffy.com/
https://diagrams.net/
https://www.ilograph.com/
https://zenuml.com
https://www.simplediagrams.com/
Microsoft Visio
https://www.plectica.com/
more tools - see hn thread
more canvas diagramming tools https://infinitecanvas.tools/gallery/

Software Arch Diagrams

software arch diagrams https://twitter.com/terrastruct

Sequence Diagrams

UML: https://news.ycombinator.com/item?id=36342931
- "UML, the good parts" - Fundamental Modeling Concepts http://fmc-modeling.org/
https://www.websequencediagrams.com/
https://swimlanes.io/ a simple online tool for creating sequence diagrams.
https://bramp.github.io/js-sequence-diagrams/
https://sequencediagram.org/
https://playground.diagram.codes/
http://sdedit.sourceforge.net/ Quick Sequence Diagram Editor (but doesnt seem active)

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

Entity Relationship Diagrams

https://dbdiagram.io/home which also has an open-source markup language: https://github.com/holistics/dbml
Databasediagram.com – Private, Text to Entity-Relationship Diagram Tool
Mocodo: French-flavored ERD, aka Merise MCD, where the layout is constrained to a grid

Cloud Architecture diagrams

useful eg if needs logos

Amazon architecture icons: https://aws.amazon.com/architecture/icons/ as well as the software that has them built in
- https://awsicons.dev/ AWS icons
Google Cloud icons, cheat sheet and other assets: https://cloud.google.com/icons
https://www.draw.io/
https://www.lucidchart.com/
https://www.omnigroup.com/omnigraffle/ (used by tim bray)
https://www.ilograph.com/
https://www.cloudcraft.co/ focused on AWS
https://www.cloudskew.com/
https://arcentry.com/ (interactive/realtime) - discontinued!

Code-based Graph tools

https://gojs.net/latest/samples/decisionTree.html interactive diagrams
4 major text-to-graph langauges (Comparison https://text-to-diagram.com/)
- mermaid https://mermaid-js.github.io/mermaid/
- https://plantuml.com/
- https://github.com/terrastruct/d2
- graphviz/dot - useful inside jupyter
- new one: https://google.github.io/typograms/
http://blockdiag.com/en/
python's diagrams https://pypi.org/project/diagrams/
https://structurizr.com/
https://github.com/mhlabs/cfn-diagram visualize cloudformation -> draw.io
https://wavedrom.com/ (OSS) - Digital Timing Diagram or Waveform from simple textual description.
https://chatuml.com/ - An AI assisted diagram editor using PlantUML syntax
way more tools here: https://xosh.org/text-to-diagram/

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

Graphics and SVG Illustrations

https://www.brandcrowd.com/maker/tag/hipster
https://www.logotouse.com/ Download any logo in LogoToUse and do whatever you want with them. This is the place to showcase more than 120+ million logos that are already designed worldwide and are archived!

Backend entity/ ERD /SQL diagramming

SQL https://drawsql.app/
Cloud AWS/Azure/GCP diagrams https://www.cloudskew.com/

DIY illustration

Wobble paint https://www.lexaloffle.com/bbs/?tid=40058

Wireframing

balsamiq
https://wireflow.co/ free open source visual designer for user flows. collaborative.
AI driven design https://uizard.io/ with wireframe

Device Mocks

Mocking your browser/phone

Browser: https://shooot.bourhaouta.com/, https://screenshot.rocks/
- with depth of field
https://www.brandbird.app/
Books: https://diybookcovers.com/3Dmockups/
- https://3d-book-css.netlify.app/ and https://3dbook.xyz/
- book cover advice https://convertkit.com/how-to-make-an-ebook-cover
Macbook: https://magicmockups.com
animate them, why not https://deviceful.netlify.app/documentation.html (previously https://deviceful.app/)
phone/watch: https://www.rotato.xyz/
- including making 3d video!!! https://rotato.app/ example https://twitter.com/0xca0a/status/1583504417004789763?s=46&t=xS8iIAOyRQhHzWI8mn4Owg
- and https://x.com/hellokillian/status/1743469389222195680?s=20
other devices https://deviceshots.com/
3D mocks: https://things.morflax.com/styles
Screenstab: Turn screenshots into dramatically angled photos
🔥 Facebook Design Devices
Shotsnapp
https://www.ls.graphics/devices-mockups
in context: Device Mock-Up Inspiration
Lstore Graphics – Includes video
Creative Market device mockups
Pika: screenshot, website and device mockups (Paid, $99 one time)

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

Illustrations

https://www.reddit.com/r/FreeIllustrations/top?t=all
:star: https://undraw.co/ An open-source illustrations website, where you can change the colors of the illustrations online before downloading.
:star: https://www.humaaans.com/ diverse, customizable human svgs
- https://fresh-folk.com/ is similar
:star: https://www.blackillustrations.com/ "Beautiful, FREE illustrations of black people for your next digital project"
- hire custom designs via https://www.illustratorhub.com/
:star: https://www.vecteezy.com/ High quality vector graphics with worry-free licensing for personal and commercial use.
:star: https://streamlineicons.com/ux/ illustrations to go with Streamline icons
https://icons8.com/illustrations (previously ouch.pics)
:star: https://blush.design/ good random generator by Pablo Stanley. Made for Sketch, Figma, InVision Studio and Adobe XD.
:star: https://www.freepik.com/ Graphic resources for everyone: Find Free Vectors, Stock Photos, PSD and Icons
https://www.openpeeps.com/
https://iradesign.io/ Build your own illustrations - very gradient/faceless illo heavy
https://www.storyset.com/ free customizable illustrations for your next project
https://www.pixeltrue.com/
- https://www.pixeltrue.com/frontliner-heroes 24 high-quality Covid illustrations.
- https://www.pixeltrue.com/free-illustrations free vector illustrations
https://www.seekpng.com/ 1m+ Transparent PNG Images For Free
https://freellustrations.com/
https://2.flexiple.com/scale/all-illustrations One new high-quality, open-source illustration each day. Use our color-picker to adapt the illustrations to your brand identity!
https://2.flexiple.com/scale/home
https://illustrationkit.com/ Free vector illustrations for personal & commercial projects no attribution required
https://www.glazestock.com/
https://openclipart.org/
https://gallery.manypixels.co/ ManyPixels offer free svg illustrations with the possibility to customize the color as well.
https://generator.opendoodles.com/ illustrations with color generator for svgs
https://www.openpeeps.com/ a hand-drawn illustration library to create scenes of people.
https://opengameart.org/
https://usesmash.com/ Smash Illustrations features trendy characters and simple illustrations for free in commercial and personal use. It features more than 250+ objects and characters, and 20+ unique scenes so you can compose them however you like.
https://control.rocks/
https://mixkit.co/free-stock-art/ Mixkit is the Unsplash of illustrations, or that is their objective. It features many illustration categories and also stock videos and music, all free of charge.
https://delesign.com/free-designs/graphics/
https://illlustrations.co/ 100 beautiful illustrations, designed by Vijay Verma during a 100 days of illustrations challenge.
https://isometric.online/ This website offers a searchable list of nice and free isometric illustrations.
https://www.codeinwp.com/pattern-collection/ abstract art illutrations
https://www.glazestock.com/
https://lukaszadam.com/illustrations library of Free Illustrations and Icons for everyone.
https://design.dev/ some illustrations in PS/sketch/etc. requires account.
https://www.manuelalangella.com/retroooo-folks/ Retroooo Folks is a vector-based Mix-and-Match library of hand-drawn sketches, created for Adobe Illustrator, Sketch and Adobe Draw.
https://woobro.design/
https://pimpmydrawing.com/
https://www.drawkit.io/ Hand-drawn vector illustration resources for your next project
https://www.karthiksrinivas.in/charco A set of 16 handcrafted illustrations for your web & app projects. This set includes categories like 404 error, no internet connection, no service, fatal error, page not found, something went wrong, under construction and many more.
https://www.veila.me/freebies/scandinavian-houses-free-vector-images
https://absurd.design/
https://github.com/MariaLetta/mega-doodles-pack
https://iradesign.io/
https://autodraw.com Google AI assisted drawing
https://hotpot.ai Free or paid. Create icons, app screenshots, MacBook/browser mockups, social media posts, and other graphics for mobile apps and browser extensions.
https://www.magicpattern.design/examples - one-click web editor for illustration patterns. It's perfect for branding landing pages, social media posts and featured images. Requires Google signup.
https://gumroad.com/l/just sketch me (paid)
https://error404.fun/ 404 page illustrations
https://designstripe.com/ free illustrations + easy to use web editor that allows customizing palettes, characters, look & feel, among others

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

3D illustrations

https://www.isometriclove.com/ Cute Isometric Objects For Your Design
https://www.handz.design/ 3d hand gestures
https://isoflat.com/ Isometric and flat graphic resources
https://www.shapefest.com/ 160,000+ high resolution PNG images of beautiful 3D shapes
https://powerpeopleplatform.com/ delicious design library of 3D avatars
https://spline.design/ Easily create and publish 3D web experiences. Build and iterate fast with production-ready results.
https://news.ycombinator.com/item?id=33845291 - Blockbench - low poly blender altnerative

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

https://news.ycombinator.com/item?id=33273022

Handwritten Look

RoughJS Tools

RoughJS Animated Annotation - https://roughnotation.com/
https://excalidraw.com/
https://alias-rahil.github.io/handwritten.js/

Pixel Art

ASCII Art

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

https://fatiherikli.github.io/archetype/
https://textik.com/#a4ec12a68785f25f
http://asciiflow.com/
https://monodraw.helftone.com/
text to diagramming tools list
https://github.com/asciitosvg/asciitosvg ascii to svg diagrams
from picture to ANSI art https://mrogalski.eu/ansi-art/

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)

Here's a list of plain text information tools from my notes:
- https://mbarkhau.keybase.pub/asciigrid/
- https://gitlab.com/mbarkhau/asciigrid/
ascii-tables is exactly what is says on the label.
- https://ozh.github.io/ascii-tables/
- https://github.com/ozh/ascii-tables/
netpen
- https://www.netpen.io/main/
- https://github.com/ebirger/netpen/
svgbob and svg-term are both great for creating SVGs out of these plain text files:
Here are some TUI/CLI focused frameworks. These are over kill for me - but maybe useful to someone here:
TUI/Text-Based presentaion tools:
Honorable Mention goes to wtf-util and it's TUI configurator:
- https://wtfutil.com/
- https://github.com/ggerganov/wtf-tui

DIY Graphic Design

https://snappa.com/
https://www.canva.com/
https://www.fotojet.com/ esp for photo collages
https://studio.polotno.dev/

Stock Photos and Videos

:star: https://unsplash.com/ of course
https://www.flickr.com/creativecommons/
https://isorepublic.com/
https://negativespace.co/
stock photo metasearch
- https://www.everypixel.com/
- https://same.energy/ AI driven similarity search
- https://www.chamberofcommerce.org/findaphoto/
- https://zoomstock.com/ t-SNE stock photo search
- https://www.goodfreephotos.com/ 27k free and public domain photos, images, clipart, pics and vectors
- https://visualhunt.com/ search 354m high quality creative commons licensed photos
art focus
- https://artvee.com/ public domain art (in particular check out the NASA collection)
startups
- https://startupstockphotos.com/
faces
- https://www.nappy.co/ "Beautiful, high-res photos of black and brown people. For free."
nature
- https://freenaturestock.com/
- http://imagebase.net/
- https://visualsofearth.com/c/ nature, space, desert, etc. mobile focused.
travel
- http://photos.bucketlistly.com/ A free creative common collection of over 5000+ travel photos from all over the world anyone can use.
color
- https://500px.com/ (premium - search by color)
misc/novelty
- http://www.ghibli.jp/info/013251/ studio ghibli free backgrounds
- https://gratisography.com/ quirky/whimsy
- https://covers.alphacoders.com/by_category/4/2/twitter-header
- https://foter.com/ furniture
- https://picjumbo.com/
- https://photos.icons8.com/creator/ Create custom stock photos
- https://generated.photos/ AI-generated stock photos
- https://photos.icons8.com/
- https://duotone.shapefactory.co/?f=f56468&t=27184f&q=_&i=oMpAz-DN-9I (unsplash with duotone filter)
- https://allthefreestock.com/
- https://thenounproject.com/search/photos/?q=happy
lists of more resources
- random low quality list https://www.mattcrampton.com/blog/mega_list_of_free_image_sites_for_blogging/
- https://github.com/neutraltone/awesome-stock-resources
- https://burst.shopify.com/ Burst from Shopify - Free stock photos for everyone
Paid
- https://deathtothestockphoto.com/
- https://www.stocksy.com/ (premium)

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

Stock Videos

https://pexels.com
https://pixabay.com/videos
https://mixkit.co
https://www.vecteezy.com/
https://www.pond5.com/
https://videohive.net/ - 3,048,864 Video effects and stock footage

Video creation tools

Generic editors
- https://motionbox.io/ - Good in browser video editor - nice intros and outros, templates a bit limited but pretty good
- https://shotstack.io/ - Automate edit bulk videos with custom templates
- https://invideo.io/ - good video maker with lots of nice generic templates and imports stock video
- https://www.moovly.com/video-templates
- https://animoto.com/ - drag and drop video maker. more elegant/real.
- Canva video - does some nice transitions and charts but all the stock stuff is behind canva pro ($13/mo)
- https://www.renderforest.com/templates seems versatile but not super intuitive and dunno how to change the transitions
- https://videobolt.net nice intro editor with some video templates - from jay phelps
web editors
- https://detail.co/
- veed.io
- https://runwayml.com/ Magical AI tools, realtime collaboration, precision editing, and more. Your next-generation video creation suite.
specialty videos
- https://biteable.com/ - simple video maker with templates and stock video. kiiinda cartoony
- https://vyond.com/ - also kinda cartoony
- https://app.animaker.com/moments also kinda cartoony but can do real video (story)
- https://powtoon.com - nice studio for cartoony professional videos and presentations with nice transitions
- https://www.doodly.com/ whiteboard doodle explainer videos. see demo $39/mo
- website demo video https://talevideo.com/ https://www.reddit.com/r/SideProject/comments/ra7inj/app_to_create_a_website_videos/
- code animation based on text diffs https://twitter.com/antfu7/status/1577832867761004544?s=46&t=WQ5RClw9ARIs9_ohcB_v-g

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

misc

https://www.fable.app/academy/fable-quick-start-course-part-2-of-3 Fable motion design
https://github.com/remotion-dev/remotion - code videos with React
- example usage https://twitter.com/JDihlmann/status/1516853381242961921?s=20&t=kB6uuP2qxW83A0A-NlQerg
https://glitterly.app/ - kinda rough - mostly image maker, video features in beta
https://viddyoze.com "3d video animations". promising videos, but $97 lifetime.. seems sketchy
https://www.fiverr.com/search/gigs?query=explainer%20videos&source=top-bar&search_in=everywhere&search-autocomplete-original-term=explainer%20videos

Do it for you

https://www.medialuv.com/ - design animation studio

Tutorials from successful Youtubers

Fireship/jeff delaney https://www.youtube.com/watch?v=N6-Q2dgodLs
Florin pop https://www.youtube.com/watch?v=vcKkRrNBdVI

Avatars

lo-fi autogenerated avatars
instead of showing people's faces, try stippling https://github.com/pshihn/stippled-image
https://en.gravatar.com/
https://unavatar.now.sh/ grab social images from username/email
http://avatars.adorable.io/#demo
https://multiavatar.com
https://personas.draftbit.com/ A playful avatar generator for the modern age.
https://avataaars.com/ and https://getavataaars.com/
https://readyplayer.me/avatar 3d customizable avatars
https://bigheads.io/
https://joeschmoe.io/ An illustrated avatar collection for developers and designers
https://amritpaldesign.com/toy-faces Toy Faces is a fun diverse library of 3D avatars for your design mockups and personal use.
https://gumroad.com/l/siKBl 3d diverse avatars, paid

Individual HTML Elements

branding color with accents: https://web.dev/accent-color/

html {
--brand: hotpink;
scrollbar-color: hotpink Canvas;
}

:root {
accent-color: var(--brand);
}
:focus-visible {
outline-color: var(--brand);
}
::selection {
background-color: var(--brand);
}
.dark ::selection {
color: #1d1d1d;
} /* if you have a dark mode class */
::marker {
color: var(--brand);
}

:is(::-webkit-calendar-picker-indicator, ::-webkit-clear-button, ::-webkit-inner-spin-button, ::-webkit-outer-spin-button) {
color: var(--brand);
}

/* https://css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/ */
details {
border: 2px solid var(--brand-accent);
padding: 0.5rem 1rem;
}
details > summary {
cursor: pointer;
}

details > summary > *:first-child {
display: inline;
}

meta theme-color https://github.com/sw-yx/swyxkit/issues/19
dont use default number input attributes - do it all in js https://stackoverflow.blog/2022/09/15/why-the-number-input-is-the-worst-input/
links https://cssanimation.rocks/animating-links/
multiline capable inline links https://twitter.com/JoshWComeau/status/1481697476327452676?s=20&t=bEY8vX8hmtGmMWQsFmSEcA
tooltips on hover
- https://kazzkiq.github.io/balloon.css/
- niche tip on tooltips js perf
- https://www.floating-ui.com/ from tippyjs guy
details/summary css - use details[open] to target https://codepen.io/chriscoyier/pen/wvJmqjY
put scroll margin on everything with an id
```
[id] {
scroll-margin-top: 2ex;
}
```
Link and Button hover effects https://www.youtube.com/watch?v=ceNMP-aQkQ4
Image modification for hover effects: https://photomosh.com/
shrinking header on scroll https://css-tricks.com/how-to-create-a-shrinking-header-on-scroll-without-javascript
https://smolcss.dev/ more simple CSS tricks for responsive elements
prefer click menus over hover menus https://css-tricks.com/in-praise-of-the-unambiguous-click-menu/
how to make settings https://web.dev/building-a-settings-component/
Defensive CSS https://ishadeed.com/article/defensive-css/
breadcrumb dividers: https://twitter.com/_philNelson/status/1512316711856345090?s=20&t=q3Cp0O1KPlxADCw_zUNHDA

Anything But Dropdowns

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

Segmented Buttons (Horizontal or Vertical)
Checkbox
- https://getcssscan.com/css-checkboxes-examples 60+ beautiful checkboxes
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

CSS keyboard buttons (Linus' toes) https://twitter.com/thesephist/status/1587950509503270914?s=20&t=k8x3X6k8qD-5zF8Y5vyB8w
https://frontend.horse/articles/buttons-that-spark-joy/
https://getcssscan.com/css-buttons-examples
3d buttons
- CSS3 3D Buttons http://simurai.com/archive/buttons/#
- Button Deluxe v3 A whimsical 3D pure CSS button https://code.hnldesign.nl/btn-deluxe/
https://cssbuttons.vercel.app/ cssbuttons: HTML & CSS Buttons Collection Built in React
https://getcssscan.com/css-buttons-examples
https://simurai.com/archive/buttons/ bonbon sweet css 3d buttons
https://markodenic.com/tools/buttons-generator/
moving lightsource on hover css buttons idea https://jsfiddle.net/pixel67/ZxZ6B/28/
moving gradients on hover https://twitter.com/avstorm/status/1646204829826445312
Button without ugly focus ring with Tailwind:
- focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2
- for links focus:shadow-outline focus:outline-none

Forms

form submission UX https://twitter.com/swyx/status/1081200428950335488?s=21
Accessible Styled Forms https://github.com/scottaohara/a11y_styled_form_controls
accessibility for all elements https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/
Form Design Best Practices https://medium.com/nextux/form-design-best-practices-9525c321d759
Form Wizard https://medium.com/nextux/how-to-design-a-form-wizard-b85fe1cc665a
Complex Forms https://medium.com/nextux/form-design-for-complex-applications-d8a1d025eba6
Form Validation UX https://medium.com/nextux/forms-need-validation-2ecbccbacea1
Form Validation https://www.bram.us/2021/01/28/form-validation-you-want-notfocusinvalid-not-invalid/
- use input:not(:focus):not(:placeholder-shown):valid for non freakout UX
WTF Forms: Nicer Forms eg Radio Buttons with pure CSS https://github.com/mdo/wtf-forms
Output-inspired form: https://twitter.com/steveschoger/status/1171429842442522625
show button when placeholder-shown: https://codepen.io/liamj/pen/vYYLGZj
Toggles: https://jnkkkk.github.io/MoreToggles.css/allToggles.html
3D LED switch: https://codepen.io/jkantner/pen/VwaBomY
The Crazy Egg Guide to Great Form UI and UX https://www.crazyegg.com/blog/guides/great-form-ui-and-ux/
Best practice, research insights and examples by Geri Reid https://gerireid.com/forms.html

Tables

Datepickers

Sound

https://www.zapsplat.com/
https://www.myinstants.com/index/se/
YouTube's Audio Library https://studio.youtube.com/channel//music
https://icons8.com/music
https://freesound.org/
https://pixabay.com/music/
https://cchound.com/ 100% free, quality CC audio
https://www.pianobook.co.uk/ as hundreds of no-charge sample libraries (many pianos, lots of other things).
https://loyaltyfreakmusic.com/ some royalty free music. gremlin podcast usees it
podcast intros
- https://aaraalto.com/sounds a few brief guitar samples for podcast transitions
- https://transistor.fm/free-podcast-intro-music/ free podcast intro music
https://www.soundstripe.com/
https://www.premiumbeat.com/
https://www.streambeats.com/
https://www.canva.com/help/article/stock-music
https://www.epidemicsound.com/
https://www.youtube.com/channel/UCV3itPyPPgvftXBsreYADlw Bensound
https://www.soundboardguy.com/
https://snapmuse.com/ - royalty free music for Youtube, Podcast, Vlog and other video projects

Paid:

https://www.epidemicsound.com/
https://artlist.io/ - may have better licensing https://www.youtube.com/watch?v=mYU6XhORomg but no fx
https://www.soundstripe.com/ (cheapest) here's a comparison https://www.youtube.com/watch?v=1YBjY79axRo
https://www.bensound.com/
https://snapmuse.com/

Tools:

Lightweight Charts/Dataviz

https://rbitr.github.io/ChartS.css/
- easy creation of simple charts for documentation, data storytelling / journalism, etc. It features plots of 1-D lists, and has a custom markdown filter that converts suitably formatted lists directly to charts. It has no dependencies (other than a modern browser), and is very small compared to javascript based charting tools. The html is based on ul lists and will collapse back to readible lists in the absence of css support, making it accessible to all readers. It is open source and easily configurable according to project needs.
Apache E Charts https://echarts.apache.org/en/index.html
https://chartscss.org/ Charts.css is a modern CSS framework. It uses CSS utility classes to style HTML elements as charts.
Sparkline fonts in text: https://github.com/aftertheflood/sparks and https://www.scribbletone.com/typefaces/ff-chartwell
https://vizzuhq.com/
https://docs.anychart.com/Basic_Charts/Stacked/Value/Vertical_Area_Chart
https://antv.vision/en
https://stephenhutchings.github.io/shown/ Statically-generated, responsive charts, without the need for client-side Javascript.

Dashboarding

https://github.com/cruip/tailwind-dashboard-template This one is made with Tailwind and React and includes optional chart components built with Chart.js.

Nice React Components

https://react-smooth-range-input.now.sh/
Theme-ui-sketchy - https://github.com/beerose/theme-ui-sketchy roughjs components with themeui
React Physics Dragger https://react-physics-dragger-demo.netlify.com/
React-Designer: Easy to configure, lightweight, editable vector graphics in your react components.
<Foldable> from Folding the DOM
React Hamburger Icons https://hamburger-react.netlify.com/
- note issues with hamburger menus https://news.ycombinator.com/item?id=30712599
React Curved Arrow https://react-curved-arrow.nickjanssen.com/
Spinners
PDF viewer https://react-pdf-viewer.dev/

React Toasting

React Gamification

https://github.com/thedevelobear/react-rewards
React Confetti https://alampros.github.io/react-confetti/
React DOM Confetti https://daniel-lundin.github.io/react-dom-confetti/

Misc Weird fun stuff

Perspective stairstep text effects https://codepen.io/jamc92/details/KaMLvY (in action: http://tennentbrown.co.nz)
Split text animations https://web.dev/building-split-text-animations/
https://party.js.org/ add particle effects to a web page, specifically confetti and sparkles.
Duotone blend modes: https://jmperezperez.com/duotone-using-css-blend-modes/
- full guide to blend modes https://typefully.com/DanHollick/blending-modes-KrBa0JP
Decovar Font with Text shadows: https://codepen.io/mandymichael/details/dJZQaz (and other Variable Fonts by Mandy)
Drop shadows: box-shadow: 10px 12px 0.5rem rgba(0,0,0,0.5);
Expanding Search buton and text from Ana Tudor mentioned here
ClippyJS https://www.smore.com/clippy-js
Rythm.js - make your page dance https://okazari.github.io/Rythm.js/
XKCD chart https://timqian.com/chart.xkcd/
Netflix slide-in menu - Codepen
Peek Href on Links - 2min video
Gooey Effect with SVG and Filters
More on SVG filters
Backdrop Filters and Multiple Inner Shadows
Swyx CSS Filter toy
CSS motion blur on css tricks
Instagram filters created with CSS filters, by Una
CSS only hover effect with Headers
SVG iPhone mock and animated notification transition
RoughJS Annotation - https://roughnotation.com/
Greensock GSAP scroll trigger demo with a ThreeJS Plane model https://codepen.io/ste-vg/pen/GRooLza
little HTML tricks that are handy https://htmldom.dev/
https://1stwebdesigner.com/css-effects/
great svg ideas https://twitter.com/cassiecodes/status/1383432725059674112?s=20
exponential smoothing animation in js https://lisyarus.github.io/blog/programming/2023/02/21/exponential-smoothing.html

Pure CSS Tricks

MAKE SURE TO CHECK OUT https://components.ai
https://twitter.com/JoshWComeau/status/1170358024319492097?s=20
Sarah Drasner picks https://codepen.io/collection/nMgKxJ?cursor=ZD0xJm89MCZwPTEmdj0yNjc5NTQ1
Lea Verou CSS Secrets https://twitter.com/swyx/status/982786353216843776?s=20
- CSS3 Patterns https://leaverou.github.io/css3patterns/
CSS 3D Text https://markdotto.com/playground/3d-text/
3D CSS hover effects https://polypane.app/css-3d-transform-examples/
3D CSS text rotation https://x.st/spinning-diagrams-with-css/
collapsible list item tree view https://iamkate.com/code/tree-views/
set cursor to emoji using SVG https://twitter.com/mgechev/status/1354300680807329793?s=20
swipey image grids using SVG https://www.cassie.codes/posts/swipey-image-grids/

animated focus https://twitter.com/argyleink/status/1387072095159406596

@media (prefers-reduced-motion: no-preference) {
:focus {
  transition: outline-offset 0.25s ease;
  outline-offset: 5px;
}
}

https://ui.glass/generator/ Get started with this free CSS generator based on the glassmorphism design specifications to quickly design and customize the style properties.

glassy glassmorphism codepen, in context

.blur-and-rotate {
border-radius: 20px;
backdrop-filter: blur(20px) hue-rotate(120deg);
-webkit-backdrop-filter: hue-rotate(120deg);
}

Shadows
- Box shadows https://brumm.af/shadows
- drop shadows - eg -1px left -1px top - makes buttons look stamped
- text shadows
- experiment with multiple shadows on one element
- https://getcssscan.com/css-box-shadow-examples
- Designing Beautiful Shadows in CSS https://www.joshwcomeau.com/css/designing-shadows/
- inspired the smooth shadows generator https://smoothshadows.com/
- https://www.joshwcomeau.com/shadow-palette/ (https://css-tricks.com/shadow-palette-generator/)
- Card border Generator https://card.surge.sh/
- Broider - 9-patch css grid borders https://maxbittker.github.io/broider/
- CSS Scroll Shadows https://css-scroll-shadows.now.sh/
- Conic gradient borders https://twitter.com/argyleink/status/1282889809782927360
- Gradient Borders without extra elements: use Background-origin + transparent borders
- Components.ai box shadows https://components.ai/box-shadows
- Emoji Shadows https://codepen.io/dienhn/pen/xxErveM
- Neuomorphism Generator https://neumorphism.io/#f3d2c3
- primer on skeuo vs flat vs neuomorphism https://uxdesign.cc/tridimensionality-of-skeuomorphism-flat-design-and-neumorphism-bc9d705a5cc7

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

Blend Modes
- background-blend-mode color-burn, lighten, multiply are cool
CSS clip path
- https://labs.jensimmons.com/#shapes
- https://bennettfeely.com/clippy/
- https://youtu.be/u9bDe3Bw0sA
- CSS tricks clip path animation tutorial https://css-tricks.com/animating-with-clip-path/
- slanted image gallery with clip path https://24ways.org/2019/flexible-captioned-slanted-images/

SVG/Canvas Masking

JPG/PNG to SVG
- core tool http://potrace.sourceforge.net/
- https://picsvg.com/
- https://svgurt.com/#/
- https://codepen.io/jesstelford/pen/PaBMrL small dynamic SVG placeholders
- https://github.com/woltapp/blurhash small dynamic SVG placeholders for blurring up
- https://www.usetracy.com/ - make SVGs from monochrome drawings or images
SVG to JSX
- https://omatsuri.app/svg-to-jsx
- https://svg2jsx.com/
- https://react-svgr.com/playground/
SVG editors
- https://boxy-svg.com/
- https://editor.method.ac/
- https://vecta.io/ collaboration tools for teams, and also supporting diagrams, Autocad drawings, Vision stencils and drawings.
- https://macsvg.org/ light open-source macOS application for SVG editing and animations
- https://github.com/SVG-Edit/svgedit fully-fledged SVG editor for sophisticated SVG editing.
SVG Compression
- https://jakearchibald.github.io/svgomg/
- SVGO https://www.smashingmagazine.com/2021/03/svg-generators/#svg-compression
SVG assets manager
- https://svgx.app/ free desktop SVG asset manager which allows you to keep all SVGs in one place. You can bookmark, search and preview SVG icons, live-edit the SVG markup, preview the icons in dark mode and copy/paste markup and CSS with one click. By default it also uses SVGO for SVG optimizations. Available for Mac and Windows.
- https://iconset.io/ You can drag icons from Iconset directly into Sketch, Figma, Adobe XD and pretty much anything else, without plugin or extension installs. Plus, you can also sync icons across devices via Dropbox or similar services, and publish and share your icon sets. Available for Mac and Windows.
SVG Sprites generator https://svgsprit.es/ context https://www.smashingmagazine.com/2021/03/svg-generators/#svg-sprites-generator
Transparent fill SVG and color in on Hover - Codepen
https://speckyboy.com/css-svg-canvas-masks/
https://www.blobmaker.app/ generate some fancy blobs.
https://squircley.app/ generator of organic shapes for any kind of visuals or background images. You choose the rotation, the scale, the “curvature” and the fill color, and the tool takes care of the rest.
https://inkscape.org/
https://svg-path-visualizer.netlify.app/
https://svgcrop.com/ remove blank space automatically
https://msurguy.github.io/svg-cropper-tool/ more refined control of cropping with additional options for cropping style — circle, polygon, custom shape
SVG Polygon Generator https://codepen.io/winkerVSbecks/full/wrZQQm/ allows you to define the number of sides, radius, spacing and it generates a SVG element for you.
https://rawgraphs.io/ SVG Data Visualization Generator - sunburst, circular dendrogram or multiple convex hull, for example. with tutorials: https://rawgraphs.io/learning
svg and text effects
- https://pavellaptev.github.io/warp-svg/
- https://css-tricks.com/animate-blob-text-with-svg-text-clipping/
- more text effects https://letsbuildui.dev/articles/css-text-effects-five-minimal-examples
animate an existing svg https://svgartista.net/
mix-blend-mode: screen is really good for SVG icons, with hover
SVG animations
- SVG icon transitions https://blog.nucleoapp.com/create-2-state-svg-powered-animated-icons-76ed19160a7e
- https://nucleoapp.com/tool/icon-transition
- scroll based svg text path animation https://www.youtube.com/watch?v=Tae96ze3xwY
- stroke path animation https://css-tricks.com/a-trick-that-makes-drawing-svg-lines-way-easier/
- https://maxwellito.github.io/vivus-instant/ animate svg strokes
- https://svgartista.net/ basic fill and stroke animations
- https://www.svgator.com/ dedicated editor for SVG animations with plenty of dedicated panels for everything from skewing to stroke path and filters
- GSAP, SVG.js (http://www.svgjs.com/), Lottie
- SVG animation tool https://svija.love/animation

Animations & Transitions

Buttons, hover, inputs, and loaders https://cssfx.netlify.com/
general http://animista.net
- animate an existing svg https://svgartista.net/ (by the same people as animista)
general https://animejs.com/
https://www.theatrejs.com/ animate DOM elements or WebGL using a convenient visual editor that works along with the code you write.
motion graphics https://github.com/mojs/mojs
https://www.transition.style/ CSS transitions "My favourites are the ones that incorporate some hesitation in the animation, for an added uniqueness"
general https://daneden.github.io/animate.css/
https://animxyz.com/ Tailwind for animations, since you’re only using HTML classes.
general https://ianlunn.github.io/Hover/
Burgers https://march08.github.io/animated-burgers/
Burgers http://negomi.github.io/react-burger-menu/
Layout https://github.com/aholachek/react-flip-toolkit
Hover and loaders: https://www.csswand.dev/
Graphic animations: https://lottiefiles.com/
- https://www.pixeltrue.com/free-illustrations lottie animations
HTML animation? https://tumult.com/hype/ (paid)
Page Transitions with swup https://github.com/swup/swup (css tricks)
css animation without keyframes https://animxyz.com/docs/
collection of css animations https://xsgames.co/animatiss/
https://ericfortis.github.io/web-animations/ Open source plain JS, CSS, HTML, SVG animations
animation introduction & examples https://stackdiary.com/css-animations/

Loading Spinners

web components https://wc-spinners.cjennings.dev/
Spinners https://tobiasahlin.com/spinkit/
You can make your button a spinner too:
- https://joebell.co.uk/sketches/loading-disco
- demo: https://twitter.com/joebell_/status/1557355193473585153
Buttons, hover, inputs, and loaders https://cssfx.netlify.com/
Conic gradient loader in CSS - Codepen
React, Vue and Angular Spinners https://github.com/JoshK2/react-spinners-css
https://andrew.wang-hoyer.com/experiments/svg-animations/
Single Element CSS Spinners https://projects.lukehaas.me/css-loaders/
https://whirl.netlify.app/ 100+ animated loaders

React Animation Tools

https://react-simple-animate.now.sh/
https://github.com/brunnolou/react-morph
https://github.com/kitze/react-genie
Page transitions https://github.com/joerez/react-transitions/
https://animxyz.com/docs/ has react and vue integration

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

https://www.appcues.com/ show people things they need as they need them
https://github.com/zurb/joyride jQuery feature tour plugin, used in https://www.airdna.co/
tippy.js to handroll
React Curved Arrow https://react-curved-arrow.nickjanssen.com/

Welcome emails

https://blog.appsumo.com/welcome-email-examples/

Empty states

https://emptystat.es/

Design Software

Image editing/Export to SVG/Object Removal/Photoshop - Photopea
online SVG editor - https://yqnn.github.io/svg-path-editor/
GIMP alternative - https://glimpse-editor.org/
Image modification for hover effects: https://photomosh.com/
Make photo 16x9 small tool https://photo16x9.com/
Enlarge low res images with ML: https://twitter.com/addyosmani/status/1353616560057815041
Lunacy - https://icons8.com/lunacy Graphic design software with built-in assets
Website design feedback collaboration - Pagereview.io
Invision https://www.invisionapp.com/inside-design/design-resources/
Scenes
- https://www.ls.graphics/scene-creators
UI kit collections
- https://www.ls.graphics/ui-ux-tools
Responsive Dev Browsers
- FOSS https://responsively.app/
- http://sizzy.co/ (paid)
- https://polypane.app/ (paid)
- more alternatives

Figma

https://100dailyui.webflow.io/ Free Figma library of products, elements, and screens.
https://blush.design/ - Free Customizable Illustrations With Figma Plugin
https://www.figmafreebies.com/
7hr figma course https://www.youtube.com/watch?v=RYDiDpW2VkM

Sketch

http://freebiesketch.com/
https://www.sketchappsources.com/
Apple design resources https://developer.apple.com/design/resources/

Generative Design Tools

Image modification for hover effects: https://photomosh.com/
http://components.ai/

Non-DOM Browser Technologies

Canvas

Trianglify http://qrohlf.com/trianglify/
generative artistry https://generativeartistry.com/
Canvas Cards https://canvas-cards.glitch.me/
Open Processing https://www.openprocessing.org/

WebGL

Curtains.js (example)
Polygonjs open-source, node-based WebGL design tool, to create 3D scenes procedurally.
https://github.com/shuding/cobe - webgl globe (tweet, stripe)

Makepad

3D

ThreeJS

https://www.kukla-kit.com/ Huge pack of 3D elements accessible directly from Figma.

BabylonJS

https://babylonjs.medium.com/babylon-js-4-2-simplicity-reimagined-965f88d0fad

Interaction/Design Inspo

Httpster
Minimal Gallery
Godly.website
Hoverstat.es
Really Good Emails
SaaSFrame
Dribbble
Product Hunt
Landingfolio
App Fuel
Refero
Read.cv
https://pageflows.com/
https://uimovement.com/
https://land-book.com/
https://uidesigndaily.com/
https://www.siteinspire.com/
https://www.landingfolio.com
http://www.cssmania.com/
https://www.uisources.com/
Codrops
https://collectui.com/
https://theanimatedweb.com/
https://pageflows.com/
https://goodui.org/ "leaked ab tests"
http://ui-patterns.com/
https://uigarage.net/
https://pttrns.com/
https://thefwa.com/
steve schoger ui ux inspo list https://twitter.com/steveschoger/status/1215673997725196288?s=20
https://landings.dev/

Game design inspo

https://interfaceingame.com/
https://www.gameuidatabase.com/
movie UIs https://www.pushing-pixels.org/fui/
game movie and other fantasy UIs https://www.saji8k.com/kit-fui/

Random Stuff That Doesn't Fit Anywhere

https://10ideesrecuesenuxdesign.castoretpollux.com/en/
https://www.cssdig.com/ for analyzing your css

Mock APIs

free or mock data apis for demos

Simple Data
- http://quotes.rest/
- https://dogapi.dog/docs/api-v2 (just data, no pics)
- https://api.chucknorris.io/
- https://jokeapi.dev/ https://v2.jokeapi.dev/joke/Any\?type\=single\&blacklistFlags=nsfw,racist,sexist,explicit
- https://dev.to/dailydevtips1/15-better-lorem-ipsum-generators-3f99
- simple quote https://api.quotable.io/random
- weather apis
- OpenWeather is better and has 1M calls per month for free. https://openweathermap.org/price
- The Norwegian Meteorological Institute has an excellent free HTTP/JSON weather API that covers the globe. No signup required.
  - https://developer.yr.no
  - I've set up an iPad in my hallway to show their SVG weather charts. Super simple to integrate into a simple home made dashboard website. Here is Oslo: https://www.yr.no/en/content/1-72837/meteogram.svg
Placeholder Pictures
- https://source.unsplash.com/
- https://skuawk.com/
- https://github.com/imsky/holder
- https://lorempixel.com/
- http://placeimg.com/
- https://picsum.photos
- Blanks
- http://placehold.it/300x300
- Animals
- https://placedog.net/
- https://placebear.com/
- http://placekitten.com/
- https://dog.ceo/
- Food
- http://placebeer.com/
- https://baconmockup.com/
- Actors
- https://www.placecage.com/
- https://placekeanu.com/
- https://www.stevensegallery.com/
- https://www.fillmurray.com/
- https://assetroulette.com/
- Get a random image: <img src="https://api.assetroulette.com/random_image">
- Get a random meme image: <img src="https://api.assetroulette.com/random_meme">
- Get a random image from Unsplash: <img src="https://api.assetroulette.com/random_unsplash">
- Get a random CSS definition for base classes: <link rel="stylesheet" href="https://api.assetroulette.com/random.css">
- https://www.uifiller.com/
Users
- https://randomuser.me/
- https://jsonplaceholder.typicode.com/
Relational Data
- https://swapi.dev/ - theres a graphql swapi as well
- https://pokeapi.co/api/v2/
Misc
- mock fake user events https://github.com/andresionek91/fake-web-events
- https://openweathermap.org/guide
- https://github.com/public-apis/public-apis
- https://github.com/public-api-lists/public-api-lists
- https://public-apis.io/ (A Directory of Free Public & Open Rest APIs)
- https://github.com/Marak/faker.js - generate fake pdf https://aws.amazon.com/blogs/aws/new-for-aws-lambda-container-image-support/
- https://github.com/Rolstenhouse/unofficial-apis
- https://devresourc.es/tools-and-utilities/public-apis
- https://free-for.dev/#/?id=apis-data-and-ml

Useful big datasets

Dataset collections
- Graphext collection 91 datasets
- Data.world There are 133398 open data datasets available
- https://www.data-is-plural.com/ dataset newsletter
- https://upscale.wiki/wiki/Dataset_Database for training image upscalers
- https://huggingface.co/datasets
- https://datasets.quantumstat.com
- https://paperswithcode.com/datasets
- https://registry.opendata.aws
- https://docs.microsoft.com/en-us/azure/azure-sql/public-data-sets
- https://guides.library.cmu.edu/az.php Carnegie Mellon University listing of 750 databases, datasets, and research support tools.
- Google datasets https://datasetsearch.research.google.com
- Awesome Public Datasets https://github.com/awesomedata/awesome-public-datasets
- Kaggle Datasets https://kaggle.com/datasets
- The home of the U.S. Government’s open data https://data.gov
SQL demos
- Northwind
- Chinook: https://github.com/lerocha/chinook-database
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
- Kaggle: https://www.kaggle.com/zusmani/paradisepanamapapers
- 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
- BigQuery global daily weather data Using the BQ geo functions to overlay weather with key locations we cared about was a lot of fun. michael
- List of Famous/Notable people by Geo (241mb) - writeups, globe viz
- SF Tree dataset Every tree in San Francisco (that are managed by the department of public works, so this excludes trees in places like Golden Gate Park): 196,000 trees listed and they update it constantly! simonw
- NYC taxi dataset Yellow and green taxi trip records include fields capturing pick-up and drop-off dates/times, pick-up and drop-off locations, trip distances, itemized fares, rate types, payment types, and driver-reported passenger counts.
- Good for teaching: scalable sizes, moderate amounts of bad data
- (spark + iceberg quickstart - blog)
- Auckland Transport data
- Airbnb data on NY, London, SF, Paris, barcelona, Amsterdam
- GeoNet earthquake catalog
- New Zealand
- LINZ data service https://data.linz.govt.nz/data.world.
Misc?
- Correlates of War datasets
- r/dadjokes dataset https://dadjokes.dfdx.me/
- 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

UI Density in Time and Space
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
- 7 Gestalt Principles of Design
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
- Apple's HIG was updated for 2022 https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/
- Apple Spatial Computing Design videos:
- https://developer.apple.com/videos/play/wwdc2023/10072/
- https://developer.apple.com/videos/play/wwdc2023/10076/
- https://developer.apple.com/videos/play/wwdc2023/10073/
50 UI tips https://fifty.user-interface.io/
- https://fifty.user-interface.io/50_ui_tips.pdf
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
- note: HSL has palette issues https://wildbit.com/blog/accessible-palette-stop-using-hsl-for-color-systems
- 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

Canva Design School
Degreeless.design
Free tier software https://free-for.dev/#/
https://github.com/Vincenius/link-list
Demo HTML
- https://github.com/cristurm/nyan-cat
- https://github.com/netlify/netlify-drop-demo-site/archive/master.zip
The Design Newsletter

Paid Design Services of Note

Design Pickle
Manypixels
Contentfly (copywriting)

Courses

for the 4 minute version (free): https://jgthms.com/web-design-in-4-minutes/
- you can do the opposite (pick out differences) with https://cantunsee.space/
for the 4 hour version: https://frontendmasters.com/courses/design-for-developers/
for the 4 week version: https://refactoringui.com/book
for the 4 month version: https://learnui.design/ 995/1495/2495. 48 lessons, 26 hours
weekly lessons drip fed over email https://hackdesign.org/
i may be signing up for https://shiftnudge.com/ .. its $1800 though
upcoming design for devs book from adrian twarog https://www.enhanceui.com/
meng to https://designcode.io/ui-design-for-developers
the non-designer's design book https://www.amazon.co.uk/Non-Designers-Design-Book-Robin-Williams/dp/0133966151
Copywork
- https://www.frontendpractice.com/
- https://www.codewell.cc/

swyxio / spark-joy

readme