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.
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:
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.
Sign up for our email newsletter. Nothing spammy about it. Just a monthly rundown of what we’re sharing.