Design for developers

Note: As you'll see below, this module is currently only a curriculum outline/syllabus. We are intending to convert this into a full course in the future, as time allows.

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.

Prerequisites

Before starting this module, you should be familiar with HTML and CSS.

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.

Lessons

Basic design theory

Learning outcomes:

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

Resources:

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:

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).

See also