The design library. Taking design systems to the next level.

Pull up your website or web app. Now blur your focus. Go ahead and name all the groupings or content blocks. What do you have...navigation? Or perhaps buttons, headlines, contact form, user login, footer? As I’m sure you’re aware, each of these elements assemble into a layout, presented within your browser. While some pages may have special features, the majority of the blocks consist of recurring elements.

Allow me to oversimplify the process of creating a site or application design (or redesign). A UX designer creates a series of screens. A developer turns that into code. The product launches and everything’s good. All finished, right? Not quite. 

Shortly thereafter, a graphic needs to be updated. A new feature becomes red hot. And then another, then another…on and on. Edits, enhancements, and new initiatives come in droves. Andy why not? Iteration is one of the strengths of the digital world. But how do you keep your finger on a consistent user experience as your product evolves?

Enter the design system. A few months ago, I wrote an article as an introduction to design systems. Now I’d like to take a deeper dive into one particular part of that article, the design library.

What is a design library?

Remember those blurry content blocks from earlier? A design library is like a tool box where all those parts live, right within a design application like Sketch or Figma. Within a few minutes, a designer can rough-in layouts with ease. It’s rapid prototyping in high fidelity.

What does that mean exactly? Welp, in this business seeing is believing. To show this in action, I captured an example of Ample's most recent design library. We developed it for Crossroads. Watch me construct a new page in just a couple of minutes...

What’s even better than being fast? All the components are consistent. Colors are on-brand. Type is set in the right weights and sizes. No guesswork. But the layout is kinda...generic. Well of course it is because all the copy and imagery is placeholder. Let’s change that...

Still on-brand but now tailored for a purpose. All this happened within the override settings baked right into the design application. When our client saw the demo, his response was, “Good gravy, this is like our own piece of software. This is amazing.” He’s not wrong.

Not only is this a time saver for designers but also for developers. When a component moves into production, that component is battle-tested, ready for the masses. So when it pops up in a new page or feature, that component’s customizations can be set and it’s done. Truly a kit of parts.

Too good to be true? Like any good tool, it may look simple or even obvious. Well, there’s real work to make this happen. Here are a few milestones to get you thinking about the process:

1. Audit the design. Which elements are reusable components and which are for on- time needs? Our rule of thumb is: If an element shows up three times, we include it as a component. 
2. Define the customizations. Picture a page header or jumbotron. What’s the variability? Is it always the full width of the browser? Will you always have a background video or not? What about the quantity of text elements? Alignments? Colors? As you can see, each component can get complex in a hurry.
3. Determine key screen sizes. Can you create these components responsively to save production time. Or are they unique?
4. Keeping it going. How do you plan to support the system? How might you create a process for team members to submit requests for new components? Has the design library 1:1 with the coded versions? How are developers made aware of updates to existing components?
   

Obviously, there are lots of questions to answer when creating a design system and library. It’s not exactly child’s play but making meaningful tools rarely is. Luckily we have first-hand experience with this sort of thing. Sound like something you’d like to pursue? We can help you bring it into focus.