Skip to content

UX recommendations and design principles

Colour

Some design principles I follow around colour.

I pick 4 colours, for the following global purposes:

  • Background
  • Primary (text)
  • Link
  • 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.

Standards

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.

If you're concerned about "Security" or piracy, ruining the user experience is definitely not a functional and serious way to try to half-assly protect your website. Plus, always keep in mind that if they have the page and images right in front of them, that means that you sent them to them, so they already have access to it and no amount of Javascript sugarcoating can change anything.