design pattern libraries

Click here to load reader

Post on 15-Jul-2015




0 download

Embed Size (px)


DESIGN PATTERN LIBRARIES#patternlib @brianpeppler


#patternlib @brianpepplerLucky day, back to back design systems About meJumpstart the process of building a pattern libraryThis isnt hard. Pattern libraries arent rocket science.

As people who work with digital products, some of our biggest challenges are consistency and upkeep. Patterns libraries can ease that pain and create recognizable experiences for users.

In this presentation Ill discuss the process of creating, maintaining, and evolving a design language using a pattern library. Ill also talk about documenting patterns and involving others to create a design consensus.

lets get this out of the way

Whats a pattern?A reusable solution to a commonly occurring problem#patternlib @brianpepplerSo, whats a pattern?Patterns are everywhere. from nature to virtually almost anything that we build. Provide common understanding for how things should work (books, mice, chairsthey all have an excepted standard for how we interact with them)Patterns prominent in architecture - imagine trying to build this room without a doesnt work, right?

Id like to draw a parallel between architecture and digital design because there are a lot of similarities.

Someone whos widely known for using patterns in architecture is Christopher Alexander

A Pattern LanguageChristopherAlexander#patternlib @brianpeppleralmost 40 years ago architect Christopher Alexander coauthored A Pattern Language with five othersproposed a scalable framework for creating and extending architectural design systemsdifferent scale than what we do, but there are similaritiesdeal with budgets, scalability, clients, regulations, and other designers. With this book, Alexander popularized a system to help reduce some of these friction points.

Alexander took inventory and cataloged 200+ architectural patternsordered by complexityLike Atomic Design, the patterns start simple with basic elements (building materials), then scale to rooms, buildings, neighborhoods, towns and regions

The book also recommends a standard for formatting patterns that includes for attributes:

A Pattern LanguageChristopherAlexanderProblem statementSolutionExample solutionContext#patternlib @brianpepplerproblem statement: This answers the question, What problem is the solution intended to solve?explanation of the solutionexample of the solution (in this case an image of the pattern)explanation of the patterns context. How does it play with other patterns and when is it OK and not OK to use a pattern?

Again, Im referencing this book because its ideas influence how we deal with patterns in digital workThis format will come in handy when we build our own patten library

Dense, technical book, but fascinating Why should we care about patterns?Represent best practicesIncrease efficiencyProvide common language#patternlib @brianpepplerWhy should we even care? There are a few reasons.

Represent best practices: These are the ideas that have been tested and validated through frequent use Increase efficiency: free designers from tedious and repetitive work and give developers reusable codethe end result it faster production of new features and easier maintenance of existing featuresProvide Common language: gives team a shared language when we discuss design.

Then the biggest oneConsistent user experience. This can be a huge pain point for users. So lets talk about consistency.Consistency#patternlib @brianpepplerIn order to create products that are useful, usable, and desirable, we need patterns for consistencyconsistency is important because helps users gain familiarity and trust with our products

remember Adobe productsSwitch between Macromedia and Adobe - relearn and retrainIf they had consistency, it would have improved experience. Users would LOVE products.

We seen this issue with all big players in every industryWhen you go from a companys website, app, portal, admin screensall look like they come from completely different companies. And that has a huge impact on trust and familiarity with users. So consistency is important.

Lets pause here and look at the flip side for a minuteIve rolled to a number of design systems, and every time some people resist consistency because: too rigid and monolithic, doesnt allow variation or consider context of the situation, limits creativityvalid concerns, but ones that we can deal with in other ways that arent at the expense of consistency.

So, how can we design for consistency?A collection of HTML, CSS, and JavaScript components that align to a common design and interaction approachWeb style guides#patternlib @brianpepplerWe have these awesome things called style guides! Mix together some HTML, CSS, and JavaScript and .

I love web style guides; its amazing that we have these resourcesinsanely lucky to have front-end frameworks like Bootstrap and Foundation. It was less than 4 years ago that Bootstrap was released.Years ago, start job ask questions about standards

Now frameworks like these are also inspiring teams to roll out their own web style guides. Sites like Lonely Planet, A List Apart, Code for America are all awesome examplesA set of design guidelines that dictates a particular look and feelSeriously?#patternlib @brianpeppler

be cool, brand design language: Mozillas Sandstone GitHubs Primer.

my team wanted profound, meaningful name. Looked to art, culture, history. We found a name that was significant to us, and we called called it Blue Ivy. Does anyone know the origin of Blue Ivy?AnywayThese tools are a huge advancementExtremely efficient for designers and developers

Style guides are good at showing what the design is and how to implement designBut they dont typically explain why a pattern is designed a certain way or what the context is

But for designers and developers, style guides leave open to interpretation and fragmentation. Heres an example. select an optionnachosbananasnachosbananasinachosbananasnachosbananas#patternlib @brianpepplerLets take the select list for example. It does what its name says: lets users make a selection. We also have radio, toggle, button groups. they do the same things. Style guides are filled with these. How do we know when to use which one?

These are just basic elements. In more specialized apps where custom elements are modular and scalable, and we can turn parts of the design off and on, how do we know when to do what?

Again, I love style guides, but when were working with other people, pattern libraries help us make more informed decisionsPattern librariesOrganized systems for referencing and managing design patterns#patternlib @brianpepplerSo lets talk about the nuts and bolts of building a pattern library: what they are and how to curate onePattern libraries are a lot like style guides, but they go beyond how things look . The distinction Im making is that they provide context and rationale behind design decisions

And if we go back to what I said a few minutes ago, theres a standard format for documenting a pattern.Formatting a patternPattern namePattern summaryProblem statementSolutionSolution exampleContext#patternlib @brianpepplerSo this is it. Its almost unchanged from what was proposed in A Pattern Language There are a few small tweaks:This format is updated to include a summary becausesummaries are nice The second change is the solution exampleThis is all you need. This is the format for pattern documentation. Any time a new pattern is created, it should include this information.

They typically look like this, which is from YPL

#patternlib @brianpeppler

But depending on the makeup, style, or needs of the team, a whole lot more can be documentedPattern namePattern summaryProblem statementSolution exampleContextFormatting a patternRelated patternsDependencies Pattern statusOpen issuesSample code#patternlib @brianpepplerThis may seem like a lot and its not necessary for every teamI know this can seem overwhelming. But a lot of it isnt text written in a narrative form. On the admin page that runs this thing, you might be checking a simple box that says ready for release. Related Patterns - go back to example of users needing to make a selection, cross-reference alternative approachesDependencies - if youre building a pattern that uses other patterns, help others understand how that combined pattern is decomposed

This begs the questionhow much is too much?

How much is too much?#patternlib @brianpepplerIve heard the complaint that nobody reads directions. I know it gives us more street cred to say we threw out the manual, but as designers and developers, its OUR J-O-B to know how this stuff works.

OK, i get it, you dont need instructions for a button. or a select list. Anything less is just being lazy.

The goal of a designer creating a standard should be to document just to communicate a full understanding of a pattern. We want to be concise. If youve written more than a page full of content youve gone too far.

Something that may not fit into a pattern library is extensive code documentation. If we look at the jQuery UI; it links to the API documentation.

Alright. Now that weve talked about formatting patterns, lets talk discuss what goes into a pattern library

What goes into a pattern library?elementsgrouped elementspagesflows#patternlib @brianpepplerThis is where I feel a strong connection to what Brad says when he talks about Atomic Design. elements (HTML)These are basic building blocks

Element - HTMLGrouped elements - this is what you get when you combine HTML elements together. Something like a select list with a search filterPages - like a profile page. One project I was involved in was basically analytics f