People Writing About Style Guides

产品设计 2018-01-30

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:

  1. Component-based front-end architectures becoming very popular
  2. Styling philosophies that scope styles becoming very popular
  3. 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:

  1. Don’t start from scratch
  2. Know what you’re working with (an audit)
  3. Build as you go
  4. Know your limits
  5. 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.


责编内容by:CSS-Tricks (源链)。感谢您的支持!


美工请假了,程序员来做个图顶一下!... 如果哪天设计师消失了,这个世界会变成什么样?在互联网行业,你经常会听到这样的抱怨: 设计师:“你妹的!技术写出来的代码跟屎一样,老子用 AE 做的那么碉堡的效果,看你给我弄成了什么狗样子,你怎么不...
什么是现象级爆款产品?怎么打造?这4个人有完善的方法论... “什么是现象级爆款产品?”2018年4月14日,在由《中国企业家》杂志社、木兰汇公益基金会主办的全球木兰论坛暨2018(第十届)中国商界木兰年会、主题为“如何打造现象级爆款产品”的尖峰论坛上,...
Opening the content pipeline for personalization i... If you’ve been following the Personalization section of the Adobe Digital Marketing Blog, you’ve le...
从软件到硬件,2017 我GET到的15条产品心得总结... 文章为作者对2017产品工作的心得总结,相信能够给你带来启发和帮助。 2017,大部分时间围绕着微信生态来做产品,从小程序到企业微信,从 C 端到 B 端,不禁引发一些思考。 微信是...
AI早教产业鄙视链,你处在哪一层? AI语音交互已然成为早教产品的竞争焦点。 看起来,若干AI引擎公司似乎抢占了整个生态圈的制高点,而缺乏智能化解决方案开发能力的传统故事机企业面临被洗牌。 事实真的是这样吗? 0...