About

UI Tips is a small, daily collection of interface advice. Each tip is one rule, a sentence or two on why, and a drawing that shows the mistake turning into the fix. See the mistake. Then the fix.

Who makes it

UI Tips is made by Praveen Juge, a designer and developer who works on UI design, accessibility, CSS and design systems. The tips come from the same handful of problems that turn up in almost every design review.

What it covers

• Layout & spacing: spacing, alignment and grouping.
• Typography & color: type sizes, line length and color.
• Forms & components: buttons, fields and the things people tap.
• UX & accessibility: contrast, color and feedback that work for everyone.

How the drawings work

Every figure is a flat wireframe drawn in code, as SVG, with one number that runs from 0, the mistake, to 1, the fix. The page plays that change on a loop: the fix, a quick step back to the mistake, then the fix again, slowly. Under the drawing on each tip you can pause it or drag between the two. If your system asks for reduced motion, the drawings hold still on the fix.

The motion follows Emil Kowalski's animation rules, and the site is set in Geist and Geist Mono. The code is open source on GitHub.

Share them

Every tip downloads as an image (1:1, 4:5, 9:16 and 16:9) or a video, in light or dark. They're free to share: credit UI Tips and link back to the tip, so people can find the rest.

Follow along

A new tip goes up every day. Follow on X, Instagram, Threads, LinkedIn or Bluesky, or subscribe to the RSS feed.

For machines

Every tip is also plain Markdown: add .md to its address, like /1/touch-target-size.md. /llms.txt lists them all.