A Figma publication for design systems creators, designers, developers, and managers

Jenifer Tidwell: Creator of a pattern language for UI design

What did UI look like in the early 90s? Well, considering the first web page went live on August 6, 1991, there wasn’t much to UI. Actually, that first webpage was about webpages. No creative breakthrough there. Visitors could learn about hypertext, get instructions on how to create their own webpage, and discover what it meant to search the world wide web.

Even in this most simplistic state, Jenifer Tidwell recognized the need to organize these text-filled pages into a journey that was easy and logical for any user. That meant clear entry points, global navigation, visually coding sections with color, liquid layout, cascading lists, and more. So much more that she eventually wrote a book about it. Designing Interfaces, originally published in 2005, is now in its 2nd edition is still largely used as a reference for UI design. Much like Christopher Alexander’s A Pattern Language, the book gives repeatable recipes for solving common design problems. Yet another foundational building block to today’s design systems.

The debut of human-computer interaction

As humans began to interact with devices that could perform multiple actions, researchers looked for a term to define that exchange. In 1983, this relationship between man and machine became known as human-computer interaction (HCI) thanks to the book The Psychology of Human–Computer Interaction. Up until then, these new computers were mostly for the engineers and programmers who worked on them and understood the typed commands necessary to get the machines to do what they wanted. As more non-techies became interested in computers, those programmers, engineers, and early designers looked for ways to make these machines more accessible. First, with a visual desktop where anyone could easily create and organize folders, and then later, easily navigable browsers and webpages like those Tidwell would spend nearly two decades designing and building.

A pattern language for HCI design

Citing Christopher Alexander, Tidwell made her first public statement about creating a pattern language for human-computer interface design when she was a student at MIT in the late 90s. On her pattern collection page, Common Ground, she sought to provide a solution to the question “How can the HCI community help inexperienced designers move away from clumsy designs and labor-intensive processes towards this state of confidence and skill, without spending years learning it all the hard way?” She hypothesized that a pattern language would help interface designers in day-to-day work, but also encourage the industry to develop best practices, focus on essential values, and most importantly, capture the collective wisdom of other designers in a way that could be used immediately. And, like Alexander, who said that good patterns improve with time and widespread use, Tidwell put out a call for the design world to chime in by writing about pattern languages, criticizing what she had presented, and creating new languages.

Tidwell, taking her own advice, continued developing her theory and her pattern language for human-computer interface design until she had the makings for her acclaimed text, Designing Interfaces. The book offers patterns that act as solutions to common design problems and that can be tailored to whatever the situation might be.

Those situations include the amount and type of content, and actions users are expected to take such as filling out a form or choosing from a pre-specified menu. Not only was Tidwell predicting the future by seeing the need for a systematic way to organize proven design solutions as technical capabilities grew, but she purposefully wrote the patterns in an abstract way allowing for any number of programming languages to be applied.

The evolution of typed commands to a point-and-click mouse to a touchscreen is an example of how quickly human-computer interaction design is moving. As technology gets smaller and smarter, and consumers demand ease and speed, programmers, developers, and designers need to find new ways to keep up with what people want. In pattern languages, and their modern offspring, design systems, they have a shortcut. As Tidwell says in her book, “There are lots of good ideas out there that you can reuse. You don't need to reinvent the wheel.”

Additional Resources:








Human-Computer Interaction Design Patterns: Structure, Methods, and Tools; Kruschitz, Christian and Hitz, Martin

We've been at this a while...

Key moments in design systems
  1. A Pattern Language
    A Pattern Language
  2. Designing Interfaces
    Designing Interfaces
  3. Atomic Design
    Atomic Design
  4. Material Design
    Material Design
  5. Submit a Moment

Ready to Contribute?

The team at designsystems.com is always looking for interesting content. Share your ideas with us — we’d love to hear from you.

Subscribe for Updates

We will be rolling out new articles and guides on a regular basis. Sign up to get the latest delivered to you.

Design Systems

version 2.0.0