Practical UI Patterns for Design Systems

Evidence-based solutions As patterns are recurring solutions, they are only developed through repeated, successful use: if it didn’t work, we shouldn’t repeat it. Patterns gather up best practices and principles refined by previous designers but can also be compared with other solutions and tested with users. Patterns are also framed in terms of how they solve a problem. In contrast, a design principle like “give users control” is vague about how this solves problems for users. Extending our earlier thumbnail example, you can see how a collection of tiny, compressed images would be faster to download than all the high-resolution resources, so the preview collection could be perused in less time. If your images download faster, your users might stay longer. You could review your site analytics to see if their time spent on site is longer when you use thumbnails. This kind of evidence validates the success of the solution. With evidence, more people end up using the solution. This is how solutions become patterns.

For example, by using a search filter pattern, you might be reminded to include a cancellation option to clear the filters to return to an unfiltered search, whereas designing and building search filters without reference to the pattern might leave you slowly figuring out these kinds of details one by one. Patterns let you accelerate design and development processes.

A UI pattern is a recurring digital solution to a problem, in a given context. Learning and using patterns can help you Efficiently solve design problems across evolving interfaces as technology changes Produce intuitive products through consistency and familiarity Save time instead of repeating yourself Communicate design decisions Communicate within teams to solve problems Find evidence to support a solution Use tailored solutions for a context Use smart defaults without extensive product design experience Stand on the shoulders of giants Learn how to improve a user’s experience

After identifying patterns that you’re interested in, I suggest exploring these resources for visual style inspiration: Site Inspire ( www.siteinspire.com ) Hover States ( www.hoverstat.es ) Dribbble ( https://dribbble.com )