Tutorial Progress
Creating a Style Guide Site Map
Lesson Contents
- Breaking designs into building blocks
- Creating a diagram of contents for the living style guide
Video Lesson
Written Lesson
Before diving into creating your living style guide the first step is planning what will be in it. Like any good website, a well structured Information Architecture is the key.
So let’s get started by using the following set of designs of our sample app called “Vintage Shop” and observe the persistent elements in the UI:
At this point we recommend starting with larger groups of elements, such as the navigation, the cart or the forms. For example, we’ll separate our design into these three groups: the steps indicator, the mini cart, and the products in the cart:
With these larger groups of elements, you can start going into more detail and identify the “styles” that persist. For example, there is a convention for the typography in general, and more specifically for the headings, the subheadings, and the links vs. regular text. The color of the buttons also persists across the pages.
Putting it all together, let’s write down these groups using a diagram:
Taking a deeper look into these groups you can fine tune them and turn them into categories that you can use in your style guide as it grows. For example:
- “Elements” is a very vague term that could refer to any HTML element, so a better name for this group could be “Components” or “Modules. These are still broad terms but are more specific in the nature of the type of elements that would cover.
- “Primary vs Secondary” buttons could be part of “Base Elements”, and the color aspect of it could go inside of a “Color Palette” category.
Additionally, you can think about a category where you can include more generic information about your style guide. A good example of that would be a “Guides” section where you could describe how to contribute to the style guide or a “Branding” section where you can include guidelines about your brand that should be kept in mind when designing and implementing your app.
With this in mind, here’s what the diagram would look like:
You can see how this diagram takes the shape of a site map, which is basically what you want to use as a plan when creating your living style guide.
Now, dive into the designs and sketch up your own site map, including as many categories as you think would be useful for the future. You can get ideas from other style guides (styleguides.io/examples is a great resource). Once you are done, check the more comprehensive version that is linked at the end of this lesson’s written tutorial, and compare.
Up next, we will be installing a sample application that you can use for creating an actual living style guide.
[wpforo item=”forum” id=”21″]