UX recommendations and design principles¶
Some design principles I follow around colour.
I pick 4 colours, for the following global purposes:
- Primary (text)
- Active (e.g focused link)
I use those 4 colours as CSS variables, and I only use them, and no other colour.
As an addition, I may authorise three other pastel colours:
- Success (green-ish)
- Warning (orange-ish)
- Error (red-ish)
This allows me to focus on actual content, and have a stable, simple and understandable colour palette.
HTML document structure¶
For document structure, I always "keep it simple" and logical:
- header, which also generally includes navigation
- section, which contain one or more articles
- footer, which contains... the footer
As much as I can, I use semantically-correct HTML tags, and no weird imbrication or infinite div.
For spacing, I define a base value as CSS variable, e.g.
1.2rem, and use this spacing for every block that may need spacing.
I allow a few derivates of the given value:
value / 2,
value / 4 and
value * 2; but no other value.
I define a base text size on html-block DOM level, and only use its em-based derivates to size every other element inside the document.
This allows to keep a simple and easy-to-work-with document, and allows to have clear and recognizable document models.
When designing a web page, I think about the user, not about myself.
There's a shitton of standards made to allow users with problems, disabilities, and such to pretty much have a decent experience with IT tools.
Another category of "standards" would also be about standardized responsibilities, behaviours and controls.
It's in no fucking way up to your website to decide how I want my scroll experience to be.
Don't override or force-disable/force-change default/standard features.