The Secret Sauce, Ep. 03: Design Systems Benefits

Senior Designer Carl Martens takes the lead this week, as he explains the importance of thinking about Web sites in terms of design systems rather than pages, and goes on to talk about the benefits produced by taking this approach.

Account Manager Allison Manley lets Senior Designer Carl Martens take the lead this week, as he explains the importance of thinking about Web sites in terms of design systems rather than pages, and goes on to talk about the benefits produced by taking this approach. We've seen design system thinking make a huge impact for our clients time and again because it creates a truly modular, extensible system onto which they can build for years to come as their organization's needs and goals evolve.

iTunes | RSS Feed | Download

We'll be back next week with another episode of the Secret Sauce, but for now subscribe to all of our episodes – including our long-form interview series called On the Air With Palantir – over on iTunes.

We want to make your project a success.

Let's Chat.

Transcript

Allison Manley [AM]: Hi, and welcome to the Secret Sauce, brought to you by Palantir.net. This is a short podcast, 5 to 10 minutes or so, that offers a quick tip on some small thing you can do to help your business run better.

I’m Allison Manley, an account manager here at Palantir, and today’s advice comes to us from one of our senior designers, Carl Martens, who is going to talk about the benefits of designing in systems.

Carl Martens [CM]: Hi, my name is Carl Martens, and today I’m going to be talking about design systems. It’s really important to be thinking in systems rather than in pages when you’re dealing with the modern Web, and here are some reasons why. First off, it creates consistency with your visuals and your content that you have on the site. You’re creating patterns rather than one-off pages. It also creates efficiency. You don’t necessarily have to run into situations where you have hundreds of different Photoshop comps to deal with, but rather just a system of patterns that are created so you can be more efficient when you’re working. And lastly, it creates sustainability. What that really means is life after working on the project. If you’re handing this off to a client, they would be able to take this and continue to develop it and improve it along the way.

So if you break down ‘system’ as a definition, it’s basically a set of interconnected parts that form a complex whole. If we look at that a little deeper, the interconnected parts within design systems are elements, components, and templates. Elements within design systems would be any sort of basic mark-up, one-off mark-up, that you’d be creating. So your H1s to H6s, your list items, your block quotes, anything like that. Components are a combination of all of these elements, and what’s great about this is that you’re actually combining these to create these little modular components that go into your design system. And then lastly what it does is it creates a template.

This would be any sort of content-type page such as a general page, home page, any sort of listing page like that. Where this is basically going is creating atomic design. This is a phrase that was coined by Brad Frost a while back, and it’s really just kind of a philosophy in thinking about how to build design systems and using elements into components into templates to further the progress of a design. And the last part of that is the complex whole of the definition. This is really just the continuation of the design system into the content management system, which could be Drupal or WordPress or any content management system.

For example, if you’re doing a website for a client, where would you begin?  Imagine your client is a news outlet and they need to create a new website for their news site. Where do you really want to begin within this process? First, you want to get their branding information and their color schemes, and really identify how those fit within the design system you’re creating. Use that as a foundation.

Next, you start to incorporate those elements that we were talking about – those headers, those paragraph styles, those list styles. All of those are really vital, to be able to identify those early on in the process. Then what’s next, what’s really important is to get to know the content of your site. Why are people coming to your site? In the case of a news site, it’s for the story. So you need to identify all of the different elements and components that would be creating that story content type. What that could include is the date, the time, the title, author information, but also some lead information, like lead text, lead image, and so on. What you really want to do here is combine those colors and those elements to create those first components, and then eventually into your templates.

Typically when people are thinking about creating a new design, they think, oh, let’s go and work on the home page — that’s the new shiny thing that the client wants to look at. But being that you just identified all these pieces within the story, it’s more ideal to work on the story page itself rather than the home page. So you want to start to lay out and figure out how these different elements and components can be displayed — such as, where is the title, the author information, where the lead image would be, how big it is on the page — and build that out within the design system that you’re creating. And what you end up with is the full template for the actual story page.

Then what you want to do next is move on to other templates. And this is where going into the home page would be ideal, because you’re wanting to boil down this information of this story page into smaller components that are more eye-catching initially, so that people can be led into the stories, the actual detailed pages themselves. So you boil that information down, maybe into a smaller list where you have several of these elements visible.

For example, if you’re creating a component for the home page, you might have a feature block at the top where you have a large image, you have the large text of the title, and maybe a brief teaser with the lead copy in there. And that’s your lead component. But then you can create other components in that home page as well. Maybe you have a smaller blocked-out section which maybe is broken down into some sort of taxonomy or organization, and then maybe farther down the page you have a chronological listing of all the news stories that are being published.

What’s great about this is that through design systems you’re basically taking all of this information you have identified early, breaking it up into smaller pieces, and rearranging it on different pages so that it works for whatever type of page you’re trying to create. So there’s a difference between a detailed story page versus a home page, and different reasons for coming to those different pages.

With that said, creating new templates such as a listing page becomes easier and easier. So you’ve created a detailed page, you’ve created a home page, and now if you go into a listing page, you’ve already created a chronological listing view of that content. So it’s really easy to take that type of component and place it in there, and the majority of that template is already created for you. So as you go through creating these different templates, the more work you’ve done on the components, the easier it gets down the line.

To wrap things up, the really great thing about thinking in design systems and marrying it to a content management system is that the interlinking piece is the system that you’re creating. So when you’re building out those different elements and components in the design sense of a story page, that can be translated into a content management system such as Drupal, where your fields are called the same. So you have a title field, an author field, maybe a lead image, and so on. So the transition from design into the content management system definitely becomes a much easier process than if you were building these one-off pages.

Thank you for listening!

AM: That’s it for this week’s Secret Sauce. For more great tips, follow us on Twitter at @palantir, or visit our website at palantir.net. Have a great week, everybody!

Content Strategy Design