Pol's Coding Notes

# Design, UI/UX

  • Avoid common design mistakes
  • Figma: Learn Design
  • Fonts in Use
  • Spacing is really important. Make sure spacing between content is the same and follows a rationale.
  • Using patterns and textures is cool. Examples:
  • Nice icons:
  • Using subtle gradients:
  • Using subtle drop shadows
  • Don't use true black and white. They are too harsh. Use softer variations. You can set CSS variables for black and white and then set these to softer variants.
  • Default browser UI should be changed, especially checkboxes, selectors... Make sure to respect accessibility.
  • Animations
    • Don't overuse them
    • Subtle scale/transitions on hover are nice
    • CSS transitions vs Physics based
    • Examples:
  • Good references:
  • Box-shadow CSS Generator
  • General knowledge about logo design (thanks Fabiola!)

  • Always use color to support something that your design is already saying; never use it as the only means of communication.

  • Always design and think about a system before starting to code. This means, define a set of values for spacing, text, color, etc. It saves a lot of time and helps give consistency to your designs. Do not tweak pixel by pixel like a madman: too much choice, in the end, is bad.

  • Bad photos will ruin a design, even if everything else about it looks great.

# Scale and cropping

  • If we create asymmetry in a symmetrical image, our eye will notice the non-symmetrical element first. It will stand out immediately.
  • We always see what stands out, what is different.

# Layout and composition

  • Start with the layout and simple shapes, and progressively add the other elements step by step (typography, colors, and others).

# Color

  • Different modes: monotone, duotone like Spotify
  • hsla is the most human readable color value. HEX is good for copying and pasting, but it does not give the reader info about the color itself. Example: hsl(270,60%,70%, .15). MDN article
  • We can make a color palette programmatically instead of by hand. It will save us if, for example, we want to change the primary color.

# Color Tools

# Gradients

We have to be careful when animating a gradient because it will most likely trigger a DOM repaint. Do it this way. CSS transform are the least expensive operation (vs margins, borders, etc.)

# Creating a color palette

Starting with a picture is easier, because we can grab colors from that image and create a palette. Examples

# Typography

# Pairing fonts

  1. One display, one sans-serif. One serif, one sans-serif
  2. Only two fonts.
  3. Do not pick two similar fonts.
  • Fontjoy, to generate font pairings
  • Google Fonts. You can select multiple fonts and see how they would pair together. They are ordered by most used. It's not a bad idea to use popular fonts and pairing (people are used to them and they might be already cached in their browsers).

# Terminology

  • Kerning: the space between letters. In CSS: letter-spacing.
  • Leading: the space between lines. In CSS, line-height.
  • Widows & orphans: words that are isolated, they break the flow of text and should be avoided.
  • More terms

# Font loading performance

← Figma →