Post pobrano z: People Writing About Style Guides
Are you thinking about style guides lately? It seems to me it couldn’t be a hotter topic these days. I’m delighted to see it, as someone who was trying to think and build this way when the prevailing wisdom was nice thought, but these never work. I suspect it’s threefold why style guides and design systems have taken off:
- Component-based front-end architectures becoming very popular
- Styling philosophies that scope styles becoming very popular
- A shift in community attitude that style guides work
That last one feels akin to cryptocurrency to me. If everyone believes in the value, it works. If people stop believing in the value, it dies.
Anyway, in my typical Coffee-and-RSS mornings, I’ve come across quite a few recently written articles on style guides, so I figured I’d round them up for your enjoyment.
How to Build a Design System with a Small Team by Naema Baskanderi:
As a small team working on B2B enterprise software, we were diving into creating a design system with limited time, budget and resources … Where do you start when you don’t have enough resources, time or budget?
Her five tips feel about right to me:
- Don’t start from scratch
- Know what you’re working with (an audit)
- Build as you go
- Know your limits
- Stay organized
Style guide-driven design systems by Brad Frost:
I’ll often have teams stand up the style guide website on Day 1 of their design system initiative. A style guide serves as the storefront that showcases all of the design system’s ingredients and serves as a tangible center of mass for the whole endeavor.
This Also published their style guide (Here’s 100’s of others, if you like peaking at other people’s take on this kind of thing).
What is notable about this to me is that it’s the closest to the meaning of style guide to me (as opposed to a pattern library or design system that are more about design instructions for building out parts of the website). They only include the three things that are most important to their brand: typography, writing, and identity. Smart.
Everything you write should be easy to understand. Clarity of writing usually follows clarity of thought. Take time to think about what you’re going to say, then say it as simply as possible. Keep these rules in mind whenever you’re writing on behalf of the studio.
Laying the foundations for system design by Andrew Couldwell:
I use the term ‘foundations’ as part of a hierarchy for design systems and thinking. Think of the foundations as digital brand guidelines. They inspire and dovetail into our design systems, guiding all our digital products.
- At a brand level they cover things like values, identity, tone of voice, photography, illustration, colours and typography.
- At a digital level they cover things like formatting, localization, calls to action, responsive design and accessibility.
- And in design systems they are the basis of, and cover the application of, things like text styles, form inputs, buttons and responsive grids.
Again a step back and wider view. Yes, a design system, but one that works alongside brand values.
How to create a living style guide by Adriana De La Cuadra:
Similar to a standard style guide, a living style guide provides a set of standards for the use and creation of styles for an application. In the case of a standard style guide, the purpose is to maintain brand cohesiveness and prevent the misuse of graphics and design elements. In the same way LSGs are used to maintain consistency in an application and to guide their implementation. But what makes a LSG different and more powerful is that much of its information comes right from the source code
An easy first reaction might be: Of course our style guide is „living”, we aren’t setting out to build a dead style guide. But I think it’s an interesting distinction to make. Style guides can sit in your development process in different places, as I wrote a few years back.
It’s all to easy to make a style guide that sits on the sidelines or is „the exhaust” of the process. It’s different entirely to place your style guide smack in the middle of a development workflow and not allow any sidestepping.
Lastly, Punit Web rounds up some very recently published style guides, in case you’re particularly interested in fresh ones you perhaps haven’t seen before.
People Writing About Style Guides is a post from CSS-Tricks
