Streaming live at 10am (PST)

Best Practices for Auditing a Style Guide


#1

Is there any best practices for auditing a style guide so that we don't miss important elements? I want to make sure I've included everything that's essential and avoid duplicating components or styles that don't need to be there. Any ideas?


#2

Great question! Here's a great resource from Airbnb: https://airbnb.design/building-a-visual-language/ ... I like how they break down Typography styles, colors, and spacing as different styles since they go across the entire component library.

You can also check out style guides and component libraries from these cool companies (some of them are kinda technical, but still useful how they organize everything):

Hope that helps!


#3

Thanks @thesergie. I was also just checking out Frontify's Style Guide https://brand.frontify.com/d/qAiubNBytHKf/style-guide

This leads me to believe that maybe there is a lot more to a Style Guide then just the colors and UI components. Frontify also let's you save the Voice + Tone, Product Descriptions, Social Media, and more.

With that being said, do you think Webflow would ever build a way to plug in a design CMS like this? Considering Webflow is in the website and UI design business as opposed to the branding and style guide business, do you think it would make sense?

Thanks for the help!


#4

Well when you're building a website or a web app you have to be aware of all the different components that are used throughout the project. So Webflow is definitely in the business of surfacing that and making it easy to manage that (components, color styles, typography styles, etc). It's less about graphics and branding and more about the systems that make up your website/app.


#5

Hey @cjroe, I know this doesn't speak to the auditing element, but have you checked out our article "How to build a living style guide in Webflow"? I'd think that creating one then walking through each style in the style manager would get you a long way there.

And re your latter comment, I'm personally a big believer in the idea that style guides should capture much more than just visual components.

Of course, that makes it a massive task that, in an ideal world, an entire team is dedicated to creating and maintaining. But between your visual style guide and properly structured content (with detailed help text!) in the CMS, you've got a good start.


#6

@jmw Right! I'm with you on the living style guide. (Ideally in reusable symbols) I will say that Frontify does go above and beyond with documenting the full brand. Considering a style guide is really a place to learn about the brand and pattern library, wouldn't it make sense to either create a separate section for the style guide (with some documentation features) or integrate with something like Frontify so that the website itself is merely an instance of that style guide? The style guide in a way is the blueprint, so it feels strange to keep it on the same level as a page within the site. (and exposed on a URL route)


#7

Definitely agree it's nice to see more and more brands bringing it all together in their style guides, as Frontify has done, though for my money, Shopify really nails it.

Regarding the question of where is most appropriate to keep the style guide, I really think it's one that has to be answered on a case by case basis, and grounded more in the brand's needs than in any sweeping "best practice." For many brands this has become a key brand marketing element, so I can see why it'd make sense to have it on the same "level" as the site itself, and "exposed" publicly. And in the case of a Webflow site, there's the massive advantage that keeping it on the same site ensures it remains a living guide (at least insofar as the styles captured in the initial build are concerned). As a style guide obsessive, awareness and maintenance are two of the biggest, hardest issues to tackle, and keeping it on the level with the site it standardizes offers advantages that far outweigh the conceptual weirdness.


#8

I agree with you about keeping it on the same level and having those components accessible to the site, however the question I would have is: Is there an easier way to document the style guide? And do sites want to publicly index that as a page vs exposing it as from a centralized place? What if I need to use it in my web application or in another app? If it's merely a Webflow page, I've lost the ability to do that...right?


#9

Sorry for the delay, @cjroe—honestly, Frontify is probably the easiest tool for documenting a style guide that I know of, though I think you can also use Storybook for that for webapps and such.

And do sites want to publicly index that as a page vs exposing it as from a centralized place?

We kinda discussed this already, but ultimately that's a question for the site/brand and how they want to use the guide. For many brands, a public style guide has become something of a marketing/talent branding move, so having it exposed is key.

If you need to use the guide to inform a webapp, yes, you've lost the ability to use a Webflow page as a living style guide, though it can certainly still serve the documentation purpose it sounds like you're looking for.


#10

Cool. Will definitely keep that in mind! Would love to see some more content on style guides from Webflow in the future! Thanks @jmw


#11

Oh, I imagine we'll be revisiting this topic :slight_smile:


#12

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.