So GUI: The Importance of Pattern Libraries
Earlier this year, my team started sharing our shiny new pattern library with the broader organization. We were excited to see their reactions, though, we kept our expectations low — maybe there’d be some clapping, a standing ovation, …a small parade perhaps?
Not so much.
The thing is, not everyone understands the value of a pattern library, or even what it is. So, below is our chance to give it some context.
Alexa, what is a ‘pattern library’?
Basically, a pattern library is a collection of design elements that repeatedly appear on a site or app. They describe best practices, explain good designs, and capture experiences so that other people can reuse them.
At a minimum, it should give you all the components to put together actual designs to a particular specification.
You can think of it like an IKEA series ( Besta, Malm, Hemnes). Within that series, you can make all sorts of configurations out of the same pieces.
What’s in it for me?
For the user:
Consistency — people like what’s familiar.
Seeing all of the pieces in one place confirms you’ve created a family of consistent styles. From the user’s perspective, websites and products that are familiar and consistent provide a much better experience. People like what’s familiar, to know what’s coming. It also reduces cognitive load on the user.
For the team:
Efficiency — it’ll save you time in the long run.
Teams can focus on the bigger picture, without worrying about pushing pixels. You ship products faster. It ensures greater efficiency in internal processes, allowing designers to onboard quickly and engineers to re-use existing code.
For the organization:
Longevity — new is not always better.
Big sites are developed by different people over a prolonged period and revised regularly. That almost always leads to a fragmented user interface unless there is something in place to ensure consistency. You only need to visit any large site to see examples of this. Navigation shifts position, form elements are formatted differently and even typography changes.
It’s easier to guess how something might look than find out how it was styled before.
How we got our sh*t together.
We built our pattern library out of necessity so we could be more efficient, consistent and increase our productivity. It took just under 6 months, a site redesign and one intrepid UI/UX Designer to get things done.
Sketch for all… and all for Sketch
We started off by getting Sketch licenses for our UI/UX team, our Creative Designers and all of our Front end Developers (#winning).
Then, using Sketch, we compiled variations of all of our recurring elements and organized our library around the principles of UX Power Tools, a boilerplate of the most common components on responsive websites.
Sketch Features
To go the extra mile, we took advantage of several of Sketch’s other tools.
Symbols
Symbols are one of the most important features in sketch. Since GUIs are meant to be reused, turning each element into a symbol and then nesting those symbols will allow a designer to easily make sweeping design changes across an application or website with minimal effort. From a consistency standpoint, using symbols will lock off certain aspects of your design that you don’t want changed by mistake such as borders, fill colors, font-size. In this case, symbols can help further promote a unified look.
Templates
Templates are a great way to give everyone your GUI and standard screen sizes in one file with common elements (header, footer) already in place. Since templates open as a new file, there’s no chance that your original GUI will ever get overwritten.
Sketch Libraries
You can use your GUI file’s symbols, fonts & colors to create a shared Sketch library that syncs with all of your coworkers via Google Drive, Dropbox, etc. When you make an update to a shared symbol, everyone else is notified via Sketch that there is a new version of one or more symbols in their document. After pressing ‘update’, all modified symbols are synced.
Plugins
Craft by InVision — With Craft by InVision, a designer can create a basic style sheet with the click of a button (similar to Sketch Libraries Beta), duplicate content on the fly and insert dummy text & images with ease to help expedite the work flow. It’s also incredibly easy to annotate directly on your art boards and allow collaboration with Freehand.
Sketch Measure — Sketch Measure will place measurements on any selected element or export the entire document with all elements easily inspected on-hover. This is great when working cross-platform and your developers don’t have access to Sketch.
Sketch Notebook — Sketch Notebook will add a notes section to your document and allow you to add a note directly on your elements to avoid any confusion or misconceptions about intended page/ element behavior.
Don’t forget…
Capture from the start.
The temptation will be there, to only start documenting your library once you finished your design. But if you create something make sure to capture it, so when you need to design something similar again you can reuse the same elements.
Keep it concise.
New and different is not always better. New patterns can also be expensive. They cost time for designers and developers, and require extra code. Try and reuse existing patterns.
Variations matter.
Careful consideration needs to be given to these various permutations as they can become quite complicated if not thought about carefully. If you don’t give them the attention they require now, things can become a lot more complicated later.
How custom should your pattern library be?
Pattern libraries can be as flexible and customizable as you want them to be. But that all depends on your organization, brand and style. The more stringent and consistent the brand, the less customizations you want to allow.
It will evolve over time.
A pattern library should never be finished, and that’s fine. You should continue making small updates to your patterns all the time. Don’t be surprised if you run into challenges deciding when to make changes or add to the library. What’s important is that you continue to maintain your library of building blocks.
Shout out to the internet for helping us out with some of the tidbits above. And to Jesse Worbington, our intrepid UI/UX Designer, for taking on the Pattern Library challenge.
