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:
- The Shape of Design, Frank Chimero
- Designing for the Web, Mark Boulton
- Design trampoline: Learn design theory basics, Anna Riazhskikh
- Practical Typography, Matthew Butterick
- Web typography made simple, Hannah Boom
- 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
- Learn UI Design Fundamentals, Scrimba
8.1 Basic design theory
Learning outcomes:
- UI design fundamentals:
- Contrast.
- Typography.
- Visual Hierarchy.
- Scale.
- Alignment.
- Use of whitespace.
- Color theory.
- Use of images.
Resources:
8.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:
- Accessibility overview
- Inclusive design principles, inclusivedesignprinciples.org
8.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).