UI/UX for backend devs

Fundamentals

• White space
• Color
• Contrast
• Scale
• Alignment
• Typography
• Visual Hierarchy

Notes

White Space

padding, margin, line-height, start big, awkward big, make it smaller till it seems OK

Color

Start with 2 / 3 main colors. Use Variations of the same Hue, with different Saturation and Brightness

Contrast

Check design against contrast (AA or AAA WCAG 2.0) Design is also about accessibility and readability

Scale

Most important elements should stand out with proper scaling. Lines should not be too long, just comfortable for reading.

Alignment

Text and elements should be aligned against each other. Even if they look intentionally random, they need to be in the "grid". The human brain likes order. E.g.

• the background of one paragraph is longer than usual, but the text is in line with other paragraphs and headings, or
• three items aligned to left, first with 2rem, second 6rem, third 4rem (multiple of 2rem used as indent)

Typography

Check typography libraries, and typical typography of elements on the web. Typography usually should somehow follow the usual headings, paragraphs, quote tags, etc.

Visual Hierarchy

Elements around the main element should gradually fade to propagate the important one. Headings, paragraphs, cards, forms, sliders, all have their purpose.