< Back to Front-end notes

Hardboiled Web Design

Design and front-end development for the hardboiled coders

Resources:


Progressive Enhancement

3 Elements of Design Atmosphere

  1. Typography (responsive)
    • Large reflection of a designs personality
    • Make sure it’s readable on all screen sizes
      • Decide on a min and max font size at certain breakpoints
      • Don’t forget line-height and letter-spacing properties
  2. Color Schemes and Tones
    • Should be main engines for personality, emotional reactions, and contrast
    • Communicate what a user can, can’t, should, and shouldn’t do
    • Show a set variety of different light and dark shades of each color to expand a limited palette (e.g. 10%, 25%, 50%, 75%, 90%)
    • Make sure colors contrast enough with backgrounds to be accessible
    • Color Palettes should aim to include:
      • Main - most common colors
      • Secondary - interaction or action colors
      • Neutral - for containers, borders, etc
      • Accents and Contrasts - for information, warning, success, and other similar elements
      • Mono - shades of white and black
  3. Texture
    • Can create a sense of hierarchy in elements
    • Texture elements include:
      • Buttons
      • Borders
      • Shading
      • Box shapes
      • Backgrounds
      • Images

Circles of Confusion

Pattern Library Tips