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:
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
Learning outcomes:
UI design fundamentals:
Contrast.
Typography.
Visual Hierarchy.
Scale.
Alignment.
Use of whitespace.
Color theory.
Use of images.
Resources:
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:
Inclusive design principles, inclusivedesignprinciples.org
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).