Conteúdo em Design Systems

Referências de Content Guidelines aplicadas a Design Systems no Brasil e no mundo.

Caroline Linhares
UX Collective 🇧🇷

--

Ilustração por Gabriel Soares 💕

“Escala” é a palavra mágica dentro de qualquer empresa de Produto que queira crescer ou se desenvolver consistentemente e organizada. Inclusive, os Design Systems normalmente nascem a partir do momento em que está tudo um caos, e esse caos se expressa visualmente nas interfaces e performativamente nos times.

A criação de padrões visuais e de linguagem nos produtos é também uma das camadas da construção de marca. Um produto com sua experiência unificada em todas as pontas constrói bases mais sólidas para estabelecer um modelo de negócio e ganhar a confiança dos seus usuários. Se o que você comunica e como comunica não divergem, isso te traz mais credibilidade, além de demonstrar que você é uma pessoa com personalidade e identidade fortes. Isso acontece com as empresas também.

Indo mais ou menos nessa linha, o mercado começou a entender que padronizar como a linguagem verbal é aplicada em um produto é tão importante quanto padronizar componentes, grids e Design Tokens.

Por a escrita já ser uma entidade muito livre, onde diferentes níveis de formalidade, tons de voz e complexidade podem ser adicionados, não criar padrões que ajudem as pessoas de uma mesma empresa a escreverem, pode gerar uma loucura completa de nuances e cada um falando à sua maneira.

Os Content Systems têm ajudado as empresas a se organizarem em um mesmo acordo e unificarem o discurso em diferentes etapas da jornada do usuário. Incluir conteúdo no seu Design System é bom para o seu time, que terá menos dúvidas na hora de escrever; para a empresa, que acelerará os processos e escalar com mais facilidade; e para a marca, que criará uma narrativa consistente entre todos os seus pontos de contato.

Aqui você vai encontrar alguns exemplos — dos mais elaborados aos mais simples, de empresas brasileiras e do exterior — de Content aplicado a Design Systems. Espero que essas referências te ajudem a entender como isso funciona e por onde começar * (Talvez eu fale desse segundo tópico em outro post. Comenta aqui embaixo se te interessa).

1. Atlassian Design System

A Atlassian tem uma seção específica para Content, onde você encontrará guidelines sobre linguagem inclusiva, gramática, tom de voz, padrões de escrita e muito mais. É um sistema bem organizado e gosto do fato de Content estar no mesmo nível de Design e Desenvolvimento, o que é raro.

Atlassian Design System

2. Sirius Design System

O SIRIUS é um exemplo de Design System brasileiro aberto com um guia mais completo. Você encontrará muita informação sobre acessibilidade, padrões e glossários.

Sirius Design System

3. Material Design System

Eu não encontrei a seção de comunicação na nova versão do Material V3, mas na versão antiga, ainda disponível, vocês podem encontrar alguns exemplos de como eles organizam as guidelines de comunicação e writing por lá.

4. Vers Design Systems

Um exemplo mais enxuto, mas ainda válido, é o Vers. A parte de conteúdo fica na seção de Branding e você encontrará exemplos sobre tom de voz e alguns padrões de linguagem, o que acho uma ótima base para, no futuro, evoluir para assuntos mais específicos.

5. Mail Chimp Content Style Guide

O mais famoso entre os famosos. Desde que iniciei em content, o Mail Chimp já era comentado como referência de Content Style Guide. Apesar disso, eu sinto muita falta de exemplos e aplicação. De toda forma, é uma boa referência.

6. Salesforce Product & Content

A Salesforce tem um brand guide com padrões de tom de voz e guidelines de escrita definidos. Eu também encontrei um PDF com mais informações sobre essas guidelines. Vale dar uma olhada.

Salesforce Product & Content

7. Elastic UI

Gosto muito da Elastic porque eles entram em um nível mais específico com até guidelines para componentes. Isso faz com que o Design System saia do nível “como escrever” e dê mais exemplos (fundamental para o aprendizado de qualquer coisa).

Elastic UI

8. Carbon Design System

Acho a seção de Content da Carbon bem enxuta para o tamanho e evolução do System deles, mas ainda assim é ótima e tem muitos links que vão te levar para as guidelines da IBM focadas em conteúdo.

9. Morningstar Design System

Bem completo, muitas nuances com uma seção só para writing. Sinto falta de mais exemplos, mas dá uma ideia boa sobre como pensar a estrutura de um Content System.

10. Acorn Firefox Design System

Também tem uma seção dedicada a Content, o que gosto muito, como já deu para perceber. Vale dar uma navegada na forma como eles construíram o glossário, que achei bem interessante.

Acorn Design System

Tenho muitos links, então não conseguirei dar contexto de tudo. Mas aqui vai uma lista para você fazer seu benchmarking e ter uma ideia de como outros Design Systems têm organizado as guidelines de Content recentemente.

Conhece mais alguma referência legal? Coloca aqui nos comentários! 💕

--

--