Design Web

Introduction

  • UX(user experience) design

    • information architecture - easily find what they looking for.
    • user pyschology
    • usability testing
    • content strategy
    • wireframes
    • interaction design.

  • UI(user interface) design

    • color.
    • typography.
    • spacing.
    • sizing.
    • shape.

  • Project brief

    • Get the who, what and why of the project straight from the service-customer.

  • Wireframes

    • Low fidelity versions of the final design.

  • Color Theory

    • Types of color

      • Primary
      • Secondary
      • Tertiary

    • Terms

      • Hue - dominant color
      • Tint / Shades / Tones - Add white / Add black / Add grey
      • Saturation - Rich or dullness

    • Color models

      • CMYK - Cyan, Magenta, Yellow and black. (used esp for printing)
      • RGB - Red, Green, Blue
      • HSB - Hue, Saturation, Brightness
      • Hexadecimal - ##rrggbb

    • Color psychology

      • understand different emotions evoked by colors
      • *not an absolute science

    • Color Harmonies

      • Which colors go well together with the primary.
      • use color.adobe/color-wheel, muzli-color, webgradients
      • color contrasts aid in accessibility.

  • Typography

    • Fonts
      • Google and Adobe fonts.
      • Understand your brand and audience.
      • Test effect of size on font.
      • Font attributes(size, weight, family) and roles(where they will be used)
      • Type scales.

  • Spacing and sizing

    • Good for visual hierarchy
    • 8pt system
    • Grid system vs Rulers and guide systems.

  • Icons and Images.

Parts of a webpage

  • Header.

    • top section of a page
    • contains logo, navigation menu, call-to-action and optionally a search form.

  • Hero section.