Designing a System: Discovery to Pattern Library
This segment we're going to look at all of this stuff in action, so what we're going to explore. This mysterious thing we keep hearing, these two words, pattern libraries. We know what patterns are. We know what libraries are. But we have no idea what those things look like when they're brought together. We're going to look at build from scratch workflows. These are workflows when the client comes to you and there's nothing, like there might not be content at all yet. Like how do we bring all these pieces together to solve that problem. Realistically when we were planning this workshop, we understood that that's not reality. There's a lot of legacy content, there's a lot of preexisting websites. Websites that have desktop patterns and they need mobile patterns, so how do we work with them? We call those clients retrofits. And so when we're talking about pattern libraries, we mentioned this earlier when we talked about type. We're talking about really designing a system. We're not desig...
ning pages anymore. One more quote from Brad Frost, there may be a couple more before we're done. It's essential to consider how every thing you include in interface looks and functions across a whole slew of browsers and environments. And when I think of this, I visualize all of my components, like we saw in the custom UI libraries and wire frames, existing simultaneously. There can't be, there needs to be independence. I need to avoid conflict, I need to build this system that has harmony. So this is how we got here. Again component inventory, on the text level we visually looked through our interface as it existed as just sort of textual content, and we broke that out into a bulleted list that had hierarchy. We took that through the wire framing process, and again made a mess, and then cleaned it up and extracted our custom UI library. And we're working in tandem with a development partner so we understand that we don't have to do all this ourselves. This is a complementary parallel relationship. So again, to recap, pattern libraries are, what I feel, the closest thing we've seen so far is this product brief. It's this big collection of stuff. We've done a lot of research, we want a repository, a place to hold, a container to hold all of this stuff, but this time it's in code. It's not just a text document, this is a living breathing artifact. And whereas the product brief was like this handshake bridge between us and the client, the pattern library is a bridge that connects not only us and the developer, but the client and the developer. Now we all meet together in this common format. So what are they, what are they made up of? Pattern libraries are made up of globals, this includes our typography, our grids, layout systems, and variables like color. It also includes components, components are again, we've seen these things in our component library and text form, we've seen their blocky format and wire frame, and now we're going to see them carried over into html. And then finally, it's also documentation, but not documentation in that rigid sense of documentation that Andy talked about, avoiding when we got into, that's why we're staying agile. This is editable documentation, this is as much documentation as we need to carry out the functionality around a component. So again documentation that assists everybody in understanding a common language of how things are put together. So again, globals. This is pattern libraries to be embraced across more and more businesses. This is buffers, pattern library, these are their colors. You can see the navigation, how they've broken up their atoms from the molecules from their organisms, and each one gaining resolution as you dig deeper into it. But on a very high level, they're giving us the colors, the hex values, they're giving us more information than we might be able to use as designers, but the developers need this too. This is also an onboarding tool. As we're bringing on new developers to work on the project, even new designers, this is like the manual. This is the brand manual as like a production person. But again, the thing to remember about this on the global level, these are global elements. These aren't specific to one view or one page or one template, these globals effect everything. What we also want to do, we want to represent our typography. So this is our, similar to what we would get via typecast or via grid lover, these are our various headers all laid out, as well as their associated class names. And again, just enough information, just what we need associated with that atomic element. We also have grids. Again from template to template, from pages to page, you're going to see repeated grids. So it's not just documentation of the grid system, but your grids can be add-ons. We use this three column grid everywhere. There should be a shorthand just for that so I can implement that layout forever. So again, it's not just structure. They themselves are little mini patterns that we can use, but again you can see type, color, grid, again very granular, very low level, they're not really describing as much as they're describing the framework. So components, we've seen this. We did some work, we did some study, we did our homework. We began sort of naming things. All the work we've been doing, and sort of like really reinforcing around naming conventions and hierarchy and structure is all about the payoff. So this is an example of Male Chimp's style guide slash pattern library. Male Chimp was very early to the game as far as publicly opening up their pattern library. Like a lot of people are like, ah, this is that stuff behind the curtain people don't want to see. By exposing it, you're opening up yourself up to suggestions, to edits, and just a general sort of like culture of transparency. And you're also educating, you're teaching people. Like these are best practices. And it helps that they're really lovely, you know they're guidelines like, don't hit people over the head, give them exactly what they need. And again, we don't have copyright over this. Here, you know, make more good stuff, you know, be more good, I like it.
And just to add to that, you know, if sometimes your client may be resistant. This seems like a lot of extra work. Right, like how's this helping my product? So not only is it going to help it just from consistency, efficiency, things like that, but it's also kind of transparency as marketing, right. Like these are marketing tools as well, just as much as they're information tools. You know people are using these as a way to again show culture through process. This is what we care about, so you can kind of put your guiding principles into this. You can put you know how you think into this, and you can show that you're working in a very modular, modern way.