Lessons

Lesson Info

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. Yeah, Andy and I were brainstorming around making an html version of the product brief. And I do think like there's a lot to benefit from looking at this stuff. Like again it's a system of openness, of editability, of publication. And again, at a component level, it isolates each component, so again, these are all the variations of this singular component called feedback. And they're controlled by really simple classes. Here are all the variants that I can have on my interface. This verifies with the designer, yes, I have all the variants designed for. And the developer, do I have everything I need, cool. The client, can we say this to this person, yes, we have an example of that. Again all out in the open, but all isolated to the singular component, so specific, self contained. So the way you organize your components is going to specific on some level to your product. So at some point there are these globals, and then there's your universal components that everybody uses like pagination, but more and more I find the interesting part is how does your client's business model product have its own components? And sort of this is where things start to get interesting. This is from Font Shop. Their whole pattern library style guide system is lovely. It helps that they're really good with type. They have ringers on board. Another early, early company to the game was Yelp. Yelp, again this is readily available, you can get this and have as much of it as you want. They clearly establish these guidelines. Again, interaction patterns alongside graphic patterns. Not just static things. These are all the variants of an active JavaScript object as well. So again, isolated self-contained modular components rendered as independent objects all together within one format. And finally this piece called documentation. This documentation has served several purposes. It gives us the code samples now too. So it's not just how you use it, it's not just the variations available, you can copy and paste this code and start using it right now. It proves the logic and it provides again a very open, open source way of looking at your design culture. You even need the design for those cases where stuff's not there. You know, no content, this is called blank slating. This idea of even though there's no content, there should be some messaging to tell the person to do something. So again, pattern libraries, you're not just dealing with like ideal content, like we would really, really love if everybody's bio was this long, that would be great. But pattern libraries prove that everybody's bio is not that long, a lot of people don't upload profile pictures, so your design system needs to be able to sort of like handle that. And again, you can allow for that here. Just one more try in driving home the fact that it's not verbose stuff. You're showing the variations, you're giving people just enough information to carry out a function. And the documentation itself is responsive. So pattern libraries are common repo for clients, designers, and developers to house all the building blocks of your product. They house the globals, the atoms of our design system, which serve as a style guide for formatting. We can use these pattern libraries to begin organizing our components. How do they sort of relate to each other? And you'll see, as we assemble these components, we can see how we slowly will build pages, or templates first, and then pages. Finally, they function as a warehouse for code and usage guidelines. And so from here, we'll take a look at how that workflow drifts directly into a specific project.