# UI Tips > Short, numbered UI and UX tips. Each one shows the mistake, then the fix, as a small animated drawing. A new one every day. UI Tips is by Praveen Juge (https://praveenjuge.com). Each tip is one rule for interface design, a short body, a longer write-up with sources, and an animated drawing of the mistake turning into the fix. Every tip's page has a Markdown version at the same address plus .md, linked below. The tips are free to share, with a link back. ## Layout & spacing Tips on spacing, alignment and grouping: how the space between things tells people what belongs together, and how fewer edges make a screen calmer to read. (https://ui.praveenjuge.com/layout) - [Space by relationship: closer means related](https://ui.praveenjuge.com/2/spacing-by-proximity.md): UI Tip #002. People read distance as meaning. Keep a label close to its field, and put more space between groups than inside them, so the structure shows before anyone reads. - [Align to one edge and keep it](https://ui.praveenjuge.com/6/align-to-one-edge.md): UI Tip #006. Every new alignment line adds noise. Pick one edge for a block of content, usually the left, and hang the text, inputs and buttons from it. ## Typography & color Tips on type and color: sizes that come from one scale, lines short enough to read, and color that helps the text instead of fighting it. (https://ui.praveenjuge.com/typography) - [Use one type scale and stick to it](https://ui.praveenjuge.com/3/type-scale.md): UI Tip #003. Pick a handful of sizes from one ratio and use only those. Fewer sizes make the hierarchy easy to read, and 15px next to 16px just looks like a mistake. - [Limit line length to ~45–75 characters](https://ui.praveenjuge.com/8/line-length.md): UI Tip #008. Long lines make the eye lose its place on the way back, and short ones break the rhythm. Give body text a max-width around 65ch and let the margins grow. ## Forms & components Tips on buttons, fields and the components people tap and type into: targets big enough for a thumb, labels that say what happens, errors that show up where they belong. (https://ui.praveenjuge.com/forms) - [Make touch targets at least 44×44pt](https://ui.praveenjuge.com/1/touch-target-size.md): UI Tip #001. Fingers are blunt. Give anything tappable a hit area of at least 44×44pt, even when the icon inside it is smaller. Pad the target, not the glyph. - [Label buttons with verbs, not “OK”](https://ui.praveenjuge.com/5/button-labels.md): UI Tip #005. A button should say what happens when you press it: Save draft, Delete 3 files, Send invite. Then nobody has to reread the dialog to find the safe one. - [Show the error next to the field that caused it](https://ui.praveenjuge.com/7/inline-form-errors.md): UI Tip #007. A message at the top of a long form makes people hunt. Put the error by the field, say what went wrong and how to fix it, and keep what they typed. ## UX & accessibility Tips on making an interface work for everyone: enough contrast to read in sunlight, signals that don't rely on color alone, and feedback fast enough to feel instant. (https://ui.praveenjuge.com/ux) - [Check text contrast at 4.5:1 or more](https://ui.praveenjuge.com/4/text-contrast.md): UI Tip #004. Body text needs a contrast ratio of at least 4.5:1 against its background, and large text 3:1. Light grey on white looks calm in a mockup and fails in sunlight. - [Never use color as the only signal](https://ui.praveenjuge.com/9/dont-rely-on-color.md): UI Tip #009. About 1 in 12 men has some color blindness. Pair color with a second cue, like an icon, a label, a pattern or a position, so the state still reads in grayscale. - [Give every action instant feedback](https://ui.praveenjuge.com/10/instant-feedback.md): UI Tip #010. Respond within 100ms of a tap or click, even when the work takes longer. Change the button's state, show progress, then confirm the result. ## Optional - [About](https://ui.praveenjuge.com/about): who makes the site, how the drawings work, and how to share them. - [RSS](https://ui.praveenjuge.com/rss.xml): every tip, newest first.