8471 shaares
203 private links
203 private links
In short, don’t try to make something beautiful. Try to make something well-organized, and watch the beauty emerge!
Some best practices to design interfaces.
- centering in a box: leave at least half its shortest dimension as a minimum margin.
- vertically centering text
Why is it called ‘x’ height? Because the letter ‘x’ is the only letter in the alphabet that has all its terminals touch both the baseline and the meanline, with no extending points.
- when centering text inside a box, you need to use the height of the lowercase letters to do the centering and make sure there is the same amount of space all around the text.
- when centering a polygon, center the circle passing by each point instead of centering the box around the polygon.
- when putting a rounded box into another one, a mistake I have seen often is to use the same border-radius on the box outside and the box inside. You need to use a proportional radius when doing such rounded box nesting.
- repetition is key to a rhythm: go for the design system.
- not so justified: use manually justify content instead of this ugly automatic one.
- a contrast ratio of 4.5 or higher is recommended.
- the contrast between each heading level should be high enough for the structure to be visible. if possible, a consistent ratio between different header levels usually looks more elegant.