Design for developers

{{LearnSidebar}} 

{{NextMenu("Learn_web_development/Core/Version_control", "Learn_web_development/Core")}} 

[!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:

• Fundamental text and font styling

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:

• Accessibility overview
• Inclusive design principles

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

• Learn UI Design Fundamentals, Scrimba ^{Course Partner}
• The Shape of Design, Frank Chimero
• Designing for the Web, Mark Boulton
• Design for web, Prisca Schmarsow + other contributors. Highlights include:
  • Design trampoline: Learn design theory basics, Anna Riazhskikh
  • Web typography made simple, Hannah Boom
• Practical Typography, Matthew Butterick
• Web Style Guide, Patrick J. Lynch and Sarah Horton
• Visual design rules you can safely follow every time, Anthony Hobday
• 16 little UI design rules that make a big impact, Adham Dannaway

{{NextMenu("Learn_web_development/Core/Version_control", "Learn_web_development/Core")}}