8. Design for developers

Best Practices

Core modules

The idea of this module is to (re-)introduce developers to design thinking. They may not want to work as designers, but having some basic user experience and design theory is good for everyone involved in building websites, no matter what their role. At the very least, even the most technical, "non-designer" developer should understand design briefs, why things are designed as they are, and be able to get into the mindset of the user. And it'll help them make their portfolios look better.

In addition, front-end developers are often tasked with doing various bits of design work on projects. Clients and employers often assume that they can do it because they are involved with the visual elements of the website. Historically, "web developer" used to be more of a hybrid designer/developer role than it is today.

General resources:

9.1 Basic design theory

Learning outcomes:

  • UI design fundamentals:
    • Contrast.
    • Typography.
    • Visual Hierarchy.
    • Scale.
    • Alignment.
    • Use of whitespace.
  • Color theory.
  • Use of images.

Resources:

9.2 User-centered design

Learning outcomes:

  • Understand that everything we do is for the user.
  • Intro to user research/testing, and user requirements.
  • Design for accessibility — consider the target audience and what additional needs they may have. Design for those from the very start.
  • Understand what design patterns are, and the common patterns used on the web, for example:
    • Dark mode.
    • Breadcrumbs.
    • Cards.
    • Deferred/Lazy registration.
    • Infinite scroll.
    • Modal dialogs.
    • Progressive disclosure.
    • Progress indication on forms/registration/setup.
    • Shopping cart.

Resources:

9.3 Design briefs

Learning outcomes:

  • Speaking design language, to communicate with designers.
  • Interpreting design brief requirements to produce an implementation.
  • Typical tools designers use to get their message across to developers (e.g. Figma).
Previous: 7. AccessibilityNext: 9. Version control