Who should read this book

This book is for designers, developers, marketers, and makers familiar with the basics of building the Web who want to produce better user experiences in digital products. This book will help you learn how to discern good from bad, build on existing communities of practice, and dig deep into fundamentals.

What you’ll find in this book

This book offers a concise guide to UI patterns: the tested, proven general mechanisms for solving recurring user interface problems, so that you don’t have to reinvent the wheel and can instead focus on designing solutions to the unique problems in your business.

Chapters 2 and 3 explore user signup and onboarding to highlight the process of discovering, evaluating, and understanding patterns through the theme of finding, reading, and sharing information.

Chapters 4 and 5 will cover how to consistently apply solid patterns through design systems and pattern libraries and how to avoid anti-patterns.

Finally, we’ll explore mixing and matching patterns for e-commerce in depth. This is where the magic happens. Most of the book will focus on potential solutions, so you can choose the right tool for your problems. This chapter, however, will explore a specific problem space and apply pattern solutions to these problems.

What you won’t find in this book

In the digital space, there’s a lot of crossover among software engineering, visual design, and information architecture. While these fields have their own rich heritage and history behind them that can inform digital interactions, we’ll be avoiding them because that’s far too much to cover in one book. However, I strongly encourage everyone to pursue information elsewhere to learn the history of their field of practice as well as the relevant disciplines that came before. For example, while copywriters and content strategists on the Web face uniquely digital challenges writing blogs, RSS feeds, tweets, and cross-channel content, they can learn immense amounts from journalists, librarians, and traditional marketers as some challenges remain the same as those found in these preexisting fields. I’ll touch on some copywriting practices for UI later on, but if you spend most of your day writing, you’ll want to dig further into these fields.

This book won’t cover exhaustive lists of available patterns for all scenarios. There is no complete code library or complete collection of design assets. I will only mention some particular resources, pattern libraries, and showcases that will help you find further extensive collections of patterns for different contexts. I’ll also point out common names for patterns that differ across libraries.

How to use this book

Patterns are neat because they elegantly package up all the things you need to know about interface and interaction design. They help you grow into the field. They are useful resources that you can refer back to (you don’t need to memorize all of them from the start). If you have the general gist of patterns available and instant access to all of them, all you need to do is look up the pattern you need when it comes time to solve a problem. If you know a handful of relevant, similar patterns, you can look them all up and weigh them one by one.

Use this book to learn how to recognize traits across seemingly unrelated patterns and how they similarly solve problems (e.g., continuous scrolling, tabs, and pagination might have more in common than you think). Then you can start with a problem space (whether driven by stakeholder engagement, user research, or technology), clarify the problem according to real user needs, validate them, then translate those needs into pattern solutions.

Use this book to learn how to communicate UI design solutions. Most of this book will be more valuable to people new to the practice of web and product design as they develop their vocabulary to discuss interface patterns. It may, however, also help experts learn how to share their solutions as they learn how to mentor.

This book will show you concrete examples of how to discover UI patterns, evaluate patterns, and communicate solutions to design problems and user needs. Use this book as a starting point for your journey into making digital user interfaces.