Machine Translated by Google

Projeto
Sistemas
Um guia prático
para criar linguagens de
design para produtos digitais.

por Alla Kholmatova

Machine Translated by Google

Para Alyona
Machine Translated by Google

Publicado em 2017 pela Smashing Media AG, Freiburg, Alemanha.

Todos os direitos reservados.

ISBN: 978-3-945749-58-6

Design da capa: Espen Brunborg

Edição de texto: Owen Gregory
Layout do interior: Markus Seyfferth
Produção do e-book: Cosima Mielke
Fontes: Elena de Nicole Dotin, Mija de Miguel Hernández e Maison
Neue de Timo Gässner.

Design Systems foi escrito por Alla Kholmatova e

revisado por Karen McGrane e Jeremy Keith.

Por favor, envie erros para: errata@smashingmagazine.com

Machine Translated by Google

Índice

PARTE 1: FUNDAÇÕES

1 Sistemas de Projeto 18

2 Princípios de design 46

3 Padrões Funcionais 63

4 Padrões Perceptivos 82

5 Idioma Compartilhado 107

PARTE II: PROCESSO

6 Parâmetros do seu sistema 134

7 Planejamento e praticidade 166

8 Sistematizando Padrões Funcionais 184

9 Sistematização de padrões de percepção 212

10 Bibliotecas de padrões 243

Conclusão 285
Machine Translated by Google

Sobre o autor

com nove anos de experiência trabalhando na

Alla Kholmatova
web, paraé uma
UX e designer
variedade dede interação
produtos e empresas.
Mais recentemente, ela foi designer de produto sênior na
plataforma de educação aberta, FutureLearn.

Ela está particularmente interessada em sistemas de

design, linguagem e formas colaborativas de trabalho.
Nos últimos dois anos ela passou muito tempo trabalhando
e pesquisando sobre o assunto. Ela tem compartilhado
suas ideias com as pessoas por meio de artigos, workshops
e projetos. Alla contribui para publicações de design, como A
List Apart, e fala em conferências em todo o mundo.
Machine Translated by Google

Sobre os revisores
Karen McGrane ajudou empresas a criar melhores produtos
digitais por meio do poder do design da experiência do usuário e
da estratégia de conteúdo nos últimos vinte anos. Ela é sócia-
gerente da Bond Art + Science,1 uma consultoria de UX que
fundou em 2006, e ex-vice-presidente e líder nacional de
experiência do usuário na Razorfish. Karen ensina gerenciamento
de design no programa MFA em Design de Interação na Escola
de Artes Visuais em Manhattan. Ela é coapresentadora do
podcast A Responsive Web Design Podcast com Ethan
Marcotte, e seu primeiro livro, Content Strategy for Mobile,2 foi
publicado em 2012 pela A Book Apart.

Jeremy Keith é cofundador e diretor técnico da Clearleft,3 um

estúdio de design digital com sede em Brighton, Reino Unido.
Quando não está fazendo sites, ele fala em conferências sobre
como fazer sites. Às vezes, ele até escreve livros sobre como
criar sites, como o livro da web em ResilientWebDesign.com ,
que você pode obter gratuitamente. Mas ele passa a maior parte
do tempo brincando na internet, documentando sua perda de
tempo em seu site adactio.com, onde escreve há mais de quinze
anos.

1 http://bondartscience.com/
2 http://smashed.by/contentmob
3 https://clearleft.com/
Machine Translated by Google

Prefácio

Se você tiver um momento, procure o trabalho da artista

EU Emily Garfield. Ela cria mapas primorosos e
intrincadamente detalhados em aquarela - cada um
deles deslumbrante e cada um deles representando um lugar que
não existe. Em vez de retratar a paisagem real de uma cidade,
ela começa criando um padrão único e complexo – uma estrada
com nós ou um rio sinuoso, ou uma grade compacta de quarteirões – e repetindo-o.
Garfield repete esse padrão, mudando-o ligeiramente a cada
vez, espiralando até que seu não-mapa termine. Como resultado,
sua arte tem uma qualidade generativa e fractal: é construída a
partir de padrões, sim, mas parece parte de um todo coeso.

Na verdade, Garfield disse certa vez: “Descrevo meu processo

como o crescimento do desenho”. Ao ler este livro maravilhoso,
pensei muito sobre essa linha. Talvez você também.

Nos últimos anos, os web designers começaram a adotar práticas

de design mais modulares e orientadas a padrões. E por um
bom motivo: estamos sendo solicitados a criar experiências
atraentes para mais telas, mais dispositivos, mais lugares, mais
pessoas do que nunca. Como resultado, começamos a dividir
nossas interfaces em módulos minúsculos e reutilizáveis e
começamos a usar esses padrões para criar produtos, recursos
e interfaces mais rapidamente do que nunca.
Machine Translated by Google

Mas sozinhos, os padrões de projeto não são suficientes. Eles

precisam viver dentro de um processo maior, que garanta que esses
pequenos módulos de interface pareçam unificados, coesos e conectados.

Parte de um todo. Em outras palavras, eles precisam de um sistema

de design para prosperar – e é aí que entra o livro de Alla.

Nestas páginas, Alla mostra-nos precisamente como criar sistemas

para suportar os nossos designs digitais. Com redação clara, estudos
de caso e exemplos detalhados, Alla nos mostra como estabelecer
uma linguagem comum e compartilhada entre nossas equipes, o que
nos permite colaborar de forma mais eficaz; ela contará histórias de
como diferentes organizações criaram seus sistemas de design e os
colocaram em prática; e ela discutirá diferentes modelos para a evolução
desses sistemas ao longo do tempo.

Em outras palavras, este não é apenas um livro. Alla desenhou um

mapa claro e brilhante para nós, que delineia um modelo mais
sustentável para o design digital. E se trilharmos os caminhos que
ela traçou para nós, aprenderemos a desenvolver sistemas de design
melhores - e com eles, designs melhores.

—Ethan Marcotte
Machine Translated by Google

viii Introdução

Sobre o que é este livro

mais complexo, pensar nisso em termos de

Como a web continua
páginas a mudar
estáticas rapidamente
tornou-se e se tornar
insustentável, e muitos de nós
começou a abordar o design de uma forma mais sistemática.

E, no entanto, nem todos os sistemas de design são igualmente

eficazes. Alguns podem gerar experiências de usuário coerentes,
outros produzem designs confusos. Alguns inspiram equipes a
contribuir com eles, outros são negligenciados. Alguns ficam
melhores com o tempo, mais coesos e com melhor
funcionamento; outros pioram, tornando-se inchados e incômodos.

Quais são as principais qualidades de um sistema de design

duradouro e que funcione bem? Essa questão me intrigou tanto
que passei muito tempo pesquisando e pensando a respeito.
Minha pesquisa e pensamentos fornecem a base deste livro.

Com base na experiência de empresas de vários tamanhos

e abordagens para projetar sistemas, propus-me a identificar o
que torna um sistema eficaz que pode capacitar as
equipes a criar ótimos produtos digitais.

Para quem é este livro

Este livro destina-se principalmente a equipes de produtos de

pequeno e médio porte que tentam integrar o pensamento de sistemas de design
Machine Translated by Google

ix

na cultura de sua organização. Todos na equipe de produto podem

se beneficiar com a leitura deste livro, mas principalmente designers
visuais e de interação, profissionais de UX e desenvolvedores
de front-end.

Escopo do livro
Este livro apresenta uma perspectiva sobre sistemas de design com
base em minha experiência como designer visual e de interação.
Não toco em outras áreas relacionadas, como arquitetura da
informação, estratégia de conteúdo ou pesquisa em design. Da
mesma forma, este não é um livro técnico. Você não encontrará
nenhum exemplo de código ou análise aprofundada de ferramentas
e técnicas de desenvolvimento, embora haja muita discussão
diretamente relacionada às práticas de front-end.

Este é um livro de design, mas não é sobre o que projetar.

Também não é uma tentativa de criar um guia abrangente para
projetar produtos digitais.1 É sobre como abordar seu processo de
design de maneira mais sistemática e garantir que seu sistema de
design ajude a atingir o objetivo de seu produto e se encaixe na cultura
de seu time.

1 Para isso, recomendo About Face: The Essentials of Interaction Design, de

Alan Cooper; Lean UX: Aplicando Princípios Lean para Melhorar a
Experiência do Usuário por Jeff Gothelf; e Projetando para a era digital:
como criar produtos e serviços centrados no ser humano, de Kim Goodwin.
Machine Translated by Google

x Introdução

Como Este Livro Está Organizado

O livro tem duas partes.

PARTE 1: FUNDAÇÕES

Na primeira parte falaremos sobre os fundamentos de um sistema de

design – padrões e práticas. Padrões de design são partes
repetíveis e reutilizáveis da interface, desde o concreto e funcional
(como botões e campos de texto) até o mais descritivo (como
estilos de iconografia, cores e tipografia).
Os padrões se interconectam e, juntos, formam a linguagem da interface
do seu produto.

Práticas compartilhadas são como escolhemos criar, capturar,

compartilhar e usar esses padrões – seguindo um conjunto de princípios
ou mantendo uma biblioteca de padrões.

PARTE 2: PROCESSO

Um sistema de design não pode ser construído da noite para o

dia – ele evolui gradualmente com o seu produto. Mas existem certos
princípios e práticas que podemos seguir para garantir que o sistema
se desenvolva na direção certa e nos forneça algum grau de controle
sobre ele. A segunda parte do livro enfoca as etapas práticas e
técnicas para estabelecer e manter um sistema de design, incluindo:
planejamento do trabalho; realização de um inventário de interface;
configurar uma biblioteca de padrões; criar, documentar, evoluir e
manter padrões de projeto.
Machine Translated by Google

XI

Terminologia
Antes de mergulharmos no assunto, vamos estabelecer os termos que
usaremos ao longo do livro.

PADRÃO OU PADRÃO DE DESENHO

Eu uso a palavra padrão para me referir a qualquer parte repetida e

reutilizável da interface (como botões, campos de texto, estilos de
iconografia, cores e tipografia, repetição de fluxos de usuário,
comportamentos interativos) que podem ser aplicados e reaproveitados
para resolver um projeto específico problema, atender a uma necessidade
do usuário ou evocar uma emoção. Ao longo do livro, faço a distinção
entre padrões funcionais relacionados a comportamentos e padrões
perceptivos relacionados à marca e à estética.

PADRÕES OU MÓDULOS FUNCIONAIS

Esses termos são usados de forma intercambiável ao longo do livro, para

se referir a blocos de construção tangíveis da interface, como um botão,
um cabeçalho, um elemento de formulário, um menu.

PADRÕES OU ESTILOS DE PERCEPÇÃO

Esses são padrões de design mais descritivos e menos tangíveis,

como estilos de iconografia ou cores e tipografia, normalmente usados
para criar um certo tipo de estética e fortalecer uma conexão
emocional com um produto.
Machine Translated by Google

xii Introdução

LINGUAGEM DE PADRÃO OU LINGUAGEM DE DESIGN

Um conjunto de padrões de design interconectados e compartilháveis

forma a linguagem da interface do seu produto. Uma linguagem padrão
combina padrões funcionais e perceptivos, bem como padrões
específicos de plataforma (como o menu de hambúrguer), padrões de
domínio (como módulos específicos para um site de comércio
eletrônico, software financeiro ou aplicativo social), UX e padrões
persuasivos, e muitos outros tipos combinados em uma interface para um
produto específico.

SISTEMA DE DESENHO OU SISTEMA

Não existe uma definição padrão de “sistema de design” na comunidade

da Web, e as pessoas usam o termo de maneiras diferentes – às vezes
de forma intercambiável com “guias de estilo” e “bibliotecas de padrões”.
Neste livro, por sistema de design entendo um conjunto de padrões
conectados e práticas compartilhadas, organizadas de forma coerente
para servir aos propósitos de um produto digital.

BIBLIOTECA DE PADRÕES E GUIA DE ESTILOS

Uma biblioteca de padrões é uma ferramenta para capturar, coletar e

compartilhar padrões de projeto e diretrizes para seu uso. A criação de
uma biblioteca de padrões é um exemplo de uma (boa) prática de
design. Tradicionalmente, um guia de estilo se concentra em estilos,
como estilos de iconografia, cores e tipografia, enquanto uma biblioteca
de padrões inclui um conjunto mais amplo de padrões.
Machine Translated by Google

xiii

Informações do sistema de design

Este livro é baseado em insights de produtos do mundo real.

A maioria deles vem da minha experiência de trabalho na
FutureLearn, uma empresa de educação aberta em Londres.
Durante meus três anos trabalhando lá como designer, tive a
oportunidade de observar e influenciar como um sistema de design
evolui, desde os conceitos iniciais até um sistema maduro.

Também acompanhei de perto outras cinco empresas de

diferentes tamanhos e abordagens para projetar sistemas: Airbnb,
Atlassian, Eurostar, Sipgate e TED. Ao longo de 18 meses,
entrevistei membros de suas equipes para entender os desafios
que eles enfrentam à medida que seus sistemas evoluem.

AIRBNB2

Roy Stanfield (designer de interação principal) me deu muitos

detalhes sobre o Design Language System (DLS)3 no Airbnb. O
aspecto distintivo do DLS é seu rigor.
Os padrões são especificados e usados com precisão, e as
regras são seguidas de perto. A equipe colocou uma série de
práticas e ferramentas para conseguir isso. Eles ainda têm alguns
desafios com a adoção, a velocidade de integração de novos
padrões e a manutenção da sincronia entre a direção de arte e a engenharia.

2 https://www.airbnb.com/
3 http://smashed.by/airbnblanguage
Machine Translated by Google

xiv Introdução

ATLASSIAN4

Jürgen Spangl (chefe de design), James Bryant (designer

principal) e Kevin Coffey (gerente de design) compartilharam
suas perspectivas sobre o ADG (Atlassian Design Guidelines)5
em novembro de 2016. Embora haja uma equipe dedicada que

cura os padrões, eles também têm um modelo de código aberto

para contribuições. Todos na empresa não são apenas
permitidos, mas incentivados a contribuir com o sistema. O
desafio desse modelo é encontrar um equilíbrio entre dar às
pessoas liberdade suficiente para contribuir e, ao mesmo tempo,
garantir que o sistema permaneça gerenciado e organizado.

EUROSTAR6

Dan Jackson (arquiteto de soluções) foi muito direto sobre o

que eles estão fazendo na Eurostar. No momento da redação, a
equipe estava no processo de construção de sua primeira
biblioteca de padrões.7 Inicialmente, eles enfrentaram alguns
desafios, principalmente em priorizar o projeto e incentivar todos
na equipe a contribuir. Depois de um ano, eles receberam recursos
para alocar uma equipe dedicada, que agora lidera o trabalho no
sistema.

4 https://www.atlassian.com/
5 https://atlassian.design/
6 http://www.eurostar.com/
7 https://style.eurostar.com/
Machine Translated by Google

Informações do sistema de design xv

SIPGATE8

Tobias Ritterbach (proprietário da experiência) e Mathias Wegenner

(desenvolvedor da web) me deram muitas informações sobre seu
trabalho. A biblioteca de padrões Sipgate9 foi criada em 2015, mas
depois de um ano a equipe descobriu que havia muitos padrões,
principalmente devido à falta de comunicação entre as equipes de
produto. Mais recentemente, eles estavam trabalhando em uma nova
biblioteca de padrões, com o objetivo de unificar a linguagem de design
em vários sites de produtos.

TED10

Michael McWatters (arquiteto de UX), Aaron Weyenberg (líder de UX)

e Joe Bartlett (desenvolvedor front-end) contribuíram para as discussões
no outono de 2016. Entre as pessoas que apoiam o TED.com , um
pequeno grupo de profissionais de UX e desenvolvedores de front-end
são responsáveis pelas decisões do sistema de design. A equipe tem
um profundo conhecimento compartilhado de seus padrões, que são
documentados de forma simples.11 Até agora eles não sentiram a
necessidade de estabelecer uma biblioteca de padrões abrangente.

8 https://www.sipgate.de/
9 https://design.sipgateteam.de/
10 http://www.ted.com/
11 http://ted.com/swatch
Machine Translated by Google

XVI Introdução

Reconhecimentos

Quero agradecer
apoio a todos
deste livro, no FutureLearn
em particular: por seus
Lucy Blackwell,
por revisar os primeiros rascunhos e por me guiar
e inspirar a fazer o meu melhor trabalho; Mike Sharples,
pelo feedback instigante sobre o rascunho inicial e por
me desafiar; Gabor Vajda, por me ajudar a moldar muitas
das ideias descritas no livro; Jusna Begum, por trazer
alguma ordem e estrutura aos meus pensamentos caóticos;
e Sam McTaggart, Dovile Sandaite, Kieran McCann,
Storm MacSporran, Katie Coleman, Nicky Thompson,
James Mockett, Chris Lowis e Matt Walton, por dedicarem
seu tempo para ouvir e compartilhar seus comentários.

Muito obrigado à equipe do Smashing e a todos que

me ajudaram a moldar este livro e fazê-lo acontecer.
Agradecimentos especiais a Karen McGrane, Jeremy
Keith e Vitaly Friedman, pelo feedback atencioso e
construtivo que tornou este livro muito melhor; Owen
Gregory, pela edição do livro; a Ethan Marcotte pelo
prefácio; e Espen Brunborg pelo belo design da capa.
Machine Translated by Google

xvii

Gostaria de agradecer particularmente às muitas pessoas

que gentilmente concordaram em compartilhar suas
experiências e perspectivas, muitas das quais contribuíram
para o material do livro: as equipes mencionadas em Design
Systems Insights, bem como Sarah Drasner, Laura Elizabeth,
Matt Bond, Trent Walton, Geri Coady, Joel Burges, Michal
Paraschidis, Heydon Pickering, Léonie Watson, Bethany
Sonefeld e Chris Dhanaraj (IBM), Amy Thibodeau (Shopify) e Joe Preston (Intuit).

Por fim, quero agradecer à minha família: meu marido, Hakan,

e minha filhinha, Alyona, pela paciência e compreensão que
me deram nos 18 meses que levei para chegar à versão
final. Escrever um livro enquanto trabalhava em tempo
integral dava muito trabalho e teria sido impossível sem o
apoio de meu marido. Me desculpe, Alyona, por todas as
vezes que não pude brincar com você porque estava
ocupada trabalhando. Eu te amo e prometo compensar!
Machine Translated by Google

18 Parte I

Capítulo 1

Sistemas de Projeto
Não existe uma definição padrão de “sistema de design” na comunidade
da web, e as pessoas usam o termo de maneiras diferentes. Neste
capítulo, definiremos o que é um sistema de design e em que ele consiste.

e práticas compartilhadas coerentemente organizadas para

Um sistemaalcançar
de design é um conjunto
o propósito de padrões
de produtos interconectados
digitais. Padrões são
os elementos repetidos que combinamos para criar uma interface:
coisas como fluxos de usuário, interações, botões, campos de
texto, ícones, cores, tipografia, microcópia. As práticas são como
escolhemos criar, capturar, compartilhar e usar esses padrões,
especialmente quando trabalhamos em equipe.

Dê uma olhada nessas duas telas de produtos não relacionados.

Um é da Thomson Reuters Eikon, um aplicativo de negociação e
análise de mercado; o outro é do FutureLearn, um site de aprendizado
social de educação aberta (consulte a página ao lado).

Em cada exemplo, os padrões trabalham juntos para atingir

diferentes propósitos. Para a Thomson Reuters, trata-se de
lidar com dados, utilitários, varredura rápida e multitarefa;
para o FutureLearn, trata-se de leitura cuidadosa, aprendizado
informal, reflexão e conexão com pessoas que pensam como
você. O propósito do produto molda os padrões de design que ele adota.
Machine Translated by Google

Sistemas de Projeto 19

Uma tela da Thomson Reuters Eikon (à esquerda) e uma tela do FutureLearn.

O layout da Thomson Reuters é baseado em painel e widget, para permitir

que os usuários realizem várias tarefas ao mesmo tempo. O design é
denso, cabendo grandes quantidades de informação na tela. A densidade
é obtida por meio de espaçamento reduzido, controles compactos,
layouts flexíveis e opções tipográficas, como um tipo de letra condensado
e cabeçalhos relativamente pequenos.

Por outro lado, o layout do FutureLearn é muito mais espaçoso. Cada

tela normalmente se concentra em uma única tarefa, como ler um artigo,
participar de uma discussão ou concluir um exercício interativo. O layout
aqui é principalmente uma única coluna; há tipografia de alto contraste
com cabeçalhos grandes, controles volumosos e espaço em branco
generoso.1

1 Os padrões do FutureLearn são escolhidos para apoiar a aprendizagem

reflexiva. O aluno precisa se concentrar na tarefa em mãos e não se distrair
com as atividades de deslocamento. O objetivo era criar uma atmosfera calma
e contemplativa.
Machine Translated by Google

20 Capítulo 1

A escolha dos padrões de projeto é influenciada por muitos fatores.

Alguns deles vêm do domínio ao qual o produto pertence e de sua
funcionalidade principal: são os padrões funcionais.
Para usar o software de negociação e análise de mercado, por exemplo,
você precisa estar acostumado a barras de tarefas, campos e grades
de dados, gráficos e ferramentas de visualização de dados. Para
um site de aprendizado online, podem ser artigos, vídeos, tópicos de
discussão, indicadores de progresso e atividades interativas. Um
site de comércio eletrônico provavelmente incluiria uma exibição de
produto, filtros de lista, carrinho de compras e checkout.

O espírito de um produto (ou da marca, dependendo da sua definição

de marca) também forma padrões que, juntos, moldam como um
produto é percebido; ao longo deste livro, vou me referir a eles como
padrões de percepção. Com isso, quero dizer coisas como tom de
voz, tipografia e opções de cores, estilos de iconografia, espaçamento
e layout, formas específicas, interações, animações e sons. Sem padrões
de percepção, você não sentiria tanta diferença entre produtos do
mesmo domínio, que possuem funcionalidades semelhantes.
Machine Translated by Google

Sistemas de Projeto 21

Embora o HipChat e o Slack tenham propósitos e funcionalidades semelhantes,

eles parecem bem diferentes, em grande parte devido à forma como a marca é
expressa em suas interfaces.

Os padrões também são moldados por convenções de plataforma. Um produto pode

parecer distintamente web-y ou distintamente app-y por causa de uma linguagem

de design específica da plataforma. Um aplicativo iOS para um produto pode se

comportar e parecer totalmente diferente de seu equivalente Android.

Existem muitos tipos de padrões em jogo quando se trata de criar produtos digitais.

É por isso que o design é difícil. Os padrões precisam interagir, conectar-se, mas

ainda funcionar perfeitamente juntos.

Vamos dar uma olhada mais de perto neles.
Machine Translated by Google

22 Capítulo 1

Padrões de design
A ideia de padrões de projeto foi introduzida pelo arquiteto Christopher
Alexander em seus livros seminais, The Timeless Way of Building e A

Pattern Language. Uma questão que permeia os livros é por que alguns
lugares parecem tão vivos e ótimos de se estar, enquanto outros parecem
monótonos e sem vida. Segundo Alexander, a forma como os lugares e
edifícios nos fazem sentir não se deve apenas a emoções subjetivas. É o
resultado de certos padrões tangíveis e específicos. Mesmo as pessoas

comuns podem aprender e usá-los para criar uma arquitetura humana.

Uma Linguagem de Padrões contém 253 padrões de projeto

arquitetônico, começando pelos maiores, como o layout de uma cidade
e sistemas rodoviários, até os menores, como iluminação e móveis em

uma casa familiar.

Um padrão é uma solução recorrente e reutilizável que pode ser

aplicada para resolver um problema de design.

Cada padrão descreve um problema que ocorre repetidamente em nosso

“ ambiente e, em seguida, descreve o núcleo da solução para esse

problema.”
— Christopher Alexander, Uma linguagem de padrões
Machine Translated by Google

Sistemas de Projeto 23

Da mesma forma, ao criar interfaces, usamos padrões de design para

resolver problemas comuns: usamos guias para separar o conteúdo
em seções e indicar qual opção está selecionada no momento; usamos
um menu suspenso para exibir uma lista de opções a pedido do
usuário.2

Alguns dos padrões do Bootstrap, um framework front-end para desenvolvimento de

websites responsivos.

Usamos padrões para oferecer feedback, para mostrar quantas etapas

faltam em um processo, para permitir que as pessoas interajam umas
com as outras, para visualizar e selecionar itens. Os padrões de design
podem intrigar e encorajar, tornar as tarefas mais fáceis, criar uma
sensação de realização ou uma ilusão de controle.

2 http://ui-patterns.com/ é uma grande fonte de padrões de projeto comuns, agrupados

por finalidade e pelo problema de projeto que resolve. Para uma leitura abrangente
sobre padrões de interface do usuário, também recomendo Designing Interfaces:
Patterns for Effective Interaction Design, de Jenifer Tidwell.
Machine Translated by Google

24 Capítulo 1

Exemplo de padrão persuasivo “reconhecimento sobre recordação” em Padrões de IU. 3

A maioria dos padrões de projeto é estabelecida e familiar.

Eles fazem uso dos modelos mentais das pessoas e permitem que o
design seja entendido intuitivamente. Padrões inteiramente novos
exigem que os usuários os aprendam e adotem primeiro — eles
são relativamente raros.4 O que torna um produto diferente de seus
concorrentes não é a novidade dos padrões que ele usa, mas como
esses padrões são executados e aplicados e como eles se
interconectam para alcançar um propósito de projeto.

3 http://smashed.by/patternsrecognition 4
Até que o gesto de deslizar surgisse como um padrão móvel, ninguém
saberia como se envolver com ele. Agora vemos produtos inteiros
construídos sobre esse padrão (como o Tinder). A transição para usar
o que as pessoas sabem e explorar algo novo é muito delicada; os
produtos vivem e morrem com base em quando e como eles fazem isso.
Machine Translated by Google

Sistemas de Projeto 25

Um conjunto de padrões interconectados forma a linguagem de

design da interface do seu produto.

Uma linguagem de design surge à medida que trabalhamos em

um produto. Nem sempre sabemos o que é essa linguagem.
Às vezes, designs eficazes e interessantes são baseados na intuição,
e lutamos para articular exatamente como e por que eles funcionam.
Designers e desenvolvedores podem saber disso instintivamente,
mas a intuição nem sempre é confiável ou escalável. Em seu
artigo “Researching Design Systems,”5 o designer Dan Mall
observou que um dos principais objetivos de um sistema de design
é “estender a direção criativa”. Se você precisa que um grupo de
pessoas siga uma direção criativa de forma consistente, confiável
e coerente, os padrões precisam ser articulados e compartilhados.

Quando você articula sua linguagem de design, ela se torna

acionável e reproduzível. Você começa a abordar o design com um
sistema em mente. Por exemplo, em vez de discutir como ajustar
um item para destacá-lo mais, você pode ter um conjunto de
padrões promocionais, cada um direcionado para atingir um nível
diferente de destaque visual. O guia de sonoridade visual6 por
Tom Osborne é um exemplo de como botões e links podem
ser abordados sistematicamente. Em vez de listá-los individualmente,
eles são apresentados como uma suíte, cada um com um “volume”
diferente correspondente ao seu destaque visual pretendido.

5 http://smashed.by/researchingsystems
6 http://smashed.by/visualloudness
Machine Translated by Google

26 Capítulo 1

O guia de sonoridade visual de Tom Osborne.

Fonte: http://smashed.by/visualloudness

Articular sua linguagem permite que você obtenha mais controle

sobre o sistema. Em vez de fazer pequenos ajustes, você pode
afetá-lo de maneiras muito mais profundas. Se você descobrir uma
pequena alteração de design que teve um impacto positivo na
experiência do usuário, poderá aplicá-la ao padrão em todo o
sistema, em vez de em um só lugar. Em vez de gastar horas
projetando um menu suspenso, você pode gastar esse tempo
com os usuários e especialistas de domínio, descobrindo se um
menu suspenso é necessário em primeiro lugar. Quando a
linguagem de design é conhecimento compartilhado, você pode
parar de se concentrar nos próprios padrões e, em vez disso, se concentrar mais no usuário.
Machine Translated by Google

Sistemas de Projeto 27

Ao longo do livro falaremos muito sobre como articular,

compartilhar e documentar uma linguagem padrão para um
produto digital. Em particular, veremos dois tipos de padrões de
projeto: funcionais e perceptivos. Os padrões funcionais são
representados como os módulos concretos da interface, como um
botão, um cabeçalho, um elemento de formulário, um menu.
Padrões perceptivos são estilos descritivos que expressam e
comunicam visualmente a personalidade do produto, como cor e
tipografia, iconografia, formas e animações.

Para ampliar a analogia com a linguagem, os padrões funcionais

são um pouco como substantivos ou verbos — eles são partes
concretas e acionáveis da interface; enquanto os padrões perceptivos
são semelhantes aos adjetivos - eles são descritivos. Por exemplo,
um botão é um módulo com uma função clara: permitir que os usuários

apresentar uma ação. Mas o estilo tipográfico no rótulo do botão,

sua forma, cor de fundo, preenchimento, estados interativos e
transições não são módulos. Eles são estilos; eles descrevem que tipo
de botão é. De uma perspectiva de front-end, os módulos sempre têm
uma base em HTML e os padrões de percepção são tipicamente
propriedades CSS.

Um sistema de design contém muitos outros tipos de padrões: fluxos de

usuários (como o preenchimento de formulários com erros e
mensagens de sucesso), padrões de design orientados ao domínio
(como padrões de aprendizado para sistemas EdTech e padrões
de comércio eletrônico) e padrões UX persuasivos. O foco deste
livro está nos padrões funcionais e perceptivos como os blocos
básicos de construção de um sistema de design.
Machine Translated by Google

28 Capítulo 1

Mas, claro, o que importa não são apenas os padrões em

si, mas como eles são desenvolvidos, compartilhados, conectados
e usados.

Idioma Compartilhado

A linguagem é fundamental para a colaboração. Se você trabalha

em equipe, sua linguagem de design precisa ser compartilhada
entre as pessoas envolvidas na criação do produto. Sem uma
linguagem compartilhada, um grupo de pessoas não pode criar
juntas de forma eficaz – cada pessoa terá um modelo mental
diferente do que está tentando alcançar. Voltemos ao exemplo do
botão. Mesmo essa unidade básica da interface pode ter
significados diferentes. O que exatamente é um botão? Uma área
delineada na qual você pode clicar? Um elemento interativo em uma
página com links para algum lugar? Um elemento de formulário que permite aos usuários
enviar alguns dados?

Em seu livro How to Make Sense of Any Mess, Abby Covert

sugere que uma linguagem compartilhada deve ser
estabelecida antes de você pensar em interfaces, discutindo,
examinando e documentando nossas decisões de linguagem.
Essa ideia pode ser aplicada para descrever conceitos de alto
nível, bem como a linguagem do dia-a-dia que usamos para falar sobre decisões de design.
Ter uma linguagem compartilhada significa que temos a mesma
abordagem para nomear elementos de interface e definir padrões
de design, ou que os mesmos nomes são usados em arquivos de
design e arquitetura de front-end.
Machine Translated by Google

Sistemas de Projeto 29

Mesmo isso pode não ser suficiente. Às vezes, as pessoas em

um grupo pensam que chegaram a um entendimento mútuo
porque compartilham o mesmo vocabulário e o usam de forma
expressiva, mas ainda mantêm diferenças fundamentais no
entendimento. Por exemplo, depois de um ano usando o termo
“Cenário” como um conceito-chave em um projeto, você pode
descobrir que pessoas diferentes o interpretam de maneiras totalmente
diferentes. Não se trata apenas de desenvolver uma linguagem
compartilhada - precisamos também desenvolver um uso compartilhado
da linguagem. Não basta ter um entendimento compartilhado do
termo botão. As pessoas também devem saber por que e como usar
um botão, em quais contextos e para que finalidade um botão pode servir.

Suponha que usamos um elemento chamado “Sequência” na

interface. Ao apresentá-lo como “Sequência” pretendemos comunicar
aos usuários que as etapas devem ser observadas em uma ordem específica.

Exemplo de módulo “Sequência”.

Idealmente, todos os envolvidos na criação do produto devem

saber o que é esse elemento: seu nome e propósito, por que foi
projetado dessa forma e como e quando
Machine Translated by Google

30 Capítulo 1

devem ser usados.7 Quanto mais forte for esse conhecimento

compartilhado, maiores serão as chances de que ele seja usado apropriadamente.

Designers e desenvolvedores front-end devem ter esse conhecimento, mas

ajuda se pessoas de outras disciplinas (conteúdo, marketing, gerenciamento

de produtos) também tiverem alguma ideia.

Deve ser conhecido por todos como “Sequência”, não “Controle do assistente”

ou “Bolhas sofisticadas”. Se os designers se referem a isso como “bolhas

sofisticadas”, os desenvolvedores o chamam de “controle do assistente” e os

usuários o interpretam como um conjunto de guias opcionais, então você sabe

que sua linguagem não funciona. Por que a interpretação do usuário é importante?

Podemos lembrar aqui da obra pioneira de Don Norman, The Design of

Everyday Things, onde ele fala sobre o abismo entre a imagem do sistema (a

interface) e o modelo do usuário (a percepção da interface formada pelo

usuário através da interação com ela). Se o usuário tiver um modelo mental

da interação que não se encaixe na imagem do sistema fornecida pela equipe

de design, ele será continuamente desafiado por um comportamento

inesperado do sistema.

Uma linguagem de design eficaz preenche a lacuna entre a imagem do

sistema e o (suposto) modelo do usuário.

7 O desafio também não é impor uma definição ou concepção de “Sequência”,

mas entender e trabalhar com seu contexto de uso para que, por exemplo, a
equipe de UX possa dar suporte a diferentes tipos de sequenciamento (para
FutureLearn, sequenciamento de cursos , execuções, etapas, ações do usuário,
etc.) dentro de uma estrutura coerente.
Machine Translated by Google

Sistemas de Projeto 31

À medida que seu idioma se torna mais rico e complexo, você precisa
de uma maneira eficiente de capturá-lo e compartilhá-lo. Na web de
hoje, uma biblioteca de padrões é um dos principais exemplos de
boas práticas no suporte a um sistema de design.

Bibliotecas de padrões e suas limitações

Um sistema de design consiste não apenas em padrões, mas

também em técnicas e práticas para criar, capturar, compartilhar e
evoluir esses padrões. Uma biblioteca de padrões é uma ferramenta
para coletar, armazenar e compartilhar seus padrões de projeto,
juntamente com os princípios e diretrizes de como usá-los. Embora as
bibliotecas de padrões tenham se tornado populares na web há
relativamente pouco tempo, o conceito de documentar e compartilhar
padrões de projeto em várias formas já existe há muito tempo.

Os Quatro Livros de Arquitetura de Palladio , publicado pela primeira

vez em 1570 em Veneza, é um dos livros mais importantes e influentes
sobre arquitetura. É também um dos primeiros exemplos de
documentação do sistema. Inspirando-se na arquitetura greco-romana,
Palladio forneceu regras e vocabulário para projetar e construir edifícios,
incluindo princípios e padrões, com ilustrações detalhadas e explicações
de como eles funcionam.
Machine Translated by Google

32 Capítulo 1

Tipos de escadas: espiral, oval e reta. Palladio descreveu como e quando

usar cada tipo; por exemplo, escadas em espiral são adequadas para
“locais muito restritos porque ocupam menos espaço do que escadas retas,
mas são mais difíceis de subir”.

No design gráfico moderno, os sistemas também foram

documentados há muito tempo, desde os primeiros sistemas
de tipografia e grade até os princípios de design da Bauhaus.
Nas últimas décadas, as empresas documentaram suas
identidades visuais na forma de manuais de marca, sendo o
Manual de Padrões Gráficos da NASA de 1975 um dos exemplos mais conhecidos.
Machine Translated by Google

Sistemas de Projeto 33

Diretrizes de layout no Manual de Padrões Gráficos da NASA.8

Na web, as bibliotecas de padrões começaram como documentos

de identidade de marca estendidos que se concentravam em
tratamentos de logotipo, valores corporativos e estilos de marca,
como tipografia e paletas de cores.9 Eles então se estenderam
para incluir módulos de interface, bem como diretrizes para seu uso.
A biblioteca de padrões do Yahoo foi um dos primeiros exemplos
de padrões de interface documentados.

8 http://smashed.by/nasastandards 9
Talvez seja assim que possamos distinguir os guias de estilo das bibliotecas
de padrões. Guias de estilo tradicionalmente focados em estilos, como cor e
tipografia. As bibliotecas de padrões podem incluir estilos, bem como
padrões funcionais e princípios de design, entre outras coisas.
Machine Translated by Google

34 Capítulo 1

A biblioteca de padrões do Yahoo foi um dos primeiros exemplos de padrões de

interface documentados.

Para empresas com menos recursos do que o Yahoo, uma biblioteca

de padrões geralmente residia em um PDF ou wiki, o que significava
que era estática e difícil de manter atualizada. A aspiração de muitos
designers e desenvolvedores hoje é uma biblioteca de padrões mais
dinâmica ou “viva” que contenha os padrões de design, bem como o
código ativo usado para construí-los. Um guia de estilo vivo ou uma
biblioteca de padrões é mais do que um documento de referência
— são os padrões de trabalho reais usados para criar uma interface
para um produto digital.
Machine Translated by Google

Sistemas de Projeto 35

Biblioteca de padrões do MailChimp10 é um dos primeiros exemplos mais influentes de bibliotecas

de padrões vivos na web.

AS LIMITAÇÕES DAS BIBLIOTECAS DE PADRÕES

Bibliotecas de padrões às vezes são consideradas intercambiáveis

com sistemas de design. Mas mesmo a biblioteca de padrões mais
abrangente e viva não é o próprio sistema. É uma ferramenta que
ajuda a tornar um sistema de design mais eficaz.

Uma biblioteca de padrões não garante um design mais coeso

e consistente. Pode ajudar a corrigir pequenas inconsistências ou
tornar uma base de código mais robusta, mas uma ferramenta
sozinha terá muito pouco impacto na experiência do usuário.

10 http://smashed.by/mailchimppatterns
Machine Translated by Google

36 Capítulo 1

Nenhuma biblioteca de padrões consertará um design ruim. Os padrões

ainda podem ser mal projetados, mal utilizados ou combinados de
maneiras que não funcionam como um todo. Como Michael McWatters,

arquiteto de UX do TED, observou em uma entrevista: “Até mesmo um

modelo do Squarespace pode ser arruinado por um design desleixado”.
E, inversamente, um produto com uma experiência de usuário coerente
pode ser criado sem uma biblioteca de padrões abrangente (como
veremos no capítulo 6 no exemplo com o sistema de design do TED).

Uma biblioteca de padrões vivos está associada a uma melhor

colaboração. No entanto, você pode acabar em uma situação em que
apenas um pequeno grupo de pessoas o usa ou pode haver muitos
padrões desconectados como resultado da falta de comunicação entre
as equipes. Quando atualizada, uma biblioteca de padrões é um glossário
para o idioma compartilhado. Mas isso não significa que ainda não haja
espaço para interpretação. São as discussões em torno da interpretação
que geralmente são a chave para o sucesso ou fracasso de uma
biblioteca de padrões.

Por outro lado, as bibliotecas de padrões às vezes são acusadas de

sufocar a criatividade, levando a sites de aparência genérica.
Mas, novamente, uma biblioteca de padrões reflete o sistema de
design por trás dela. Se o seu sistema for fundamentalmente rígido e
restritivo, a biblioteca de padrões pode revelar e enfatizar a rigidez. Se
permitir muita experimentação criativa, uma boa biblioteca de padrões
pode facilitar a experimentação.
Machine Translated by Google

Sistemas de Projeto 37

Com todas as ferramentas automatizadas e geradores de guia de

estilo disponíveis hoje, a configuração de uma biblioteca de
componentes pode ser feita muito mais rapidamente do que no
passado. Mas sem a base de um sistema de design coerente que integre
os padrões e práticas, seu impacto será limitado. Quando uma
biblioteca de padrões é usada para dar suporte a uma base sólida
de linguagem de design, ela se torna uma poderosa ferramenta de design e colaboração.
Até então, é uma coleção de módulos em uma página da web.

O que torna um sistema de design eficaz

A eficácia de um sistema de design pode ser medida pela forma
como suas diferentes partes trabalham juntas para ajudar a atingir o
objetivo do produto. Por exemplo, o objetivo do FutureLearn é
“inspirar a aprendizagem ao longo da vida em todos, em qualquer lugar”.
Poderíamos perguntar: quão eficaz é a linguagem de design da
interface para nos ajudar a conseguir isso e quão eficazes são as
práticas da equipe? Se a interface for confusa e as pessoas não
atingirem seus objetivos, a linguagem de design não será eficaz. Se
demorar muito para construir uma nova área do site porque os
padrões precisam ser recriados do zero todas as vezes, sabemos que
nossas práticas podem ser aprimoradas.

Um sistema de design pode ser considerado eficaz quando

combina custo-benefício no processo de design e eficiência e satisfação
da experiência do usuário em relação ao objetivo do produto.
Machine Translated by Google

38 Capítulo 1

PROPÓSITO COMPARTILHADO

Em Pensando em sistemas, Donella Meadows explica que uma das

qualidades mais importantes dos sistemas é como eles são conectados
e organizados: os subsistemas são agregados em sistemas maiores,
que por sua vez fazem parte de algo maior.
Uma célula em seu fígado faz parte de um órgão, que é parte de você
como um organismo. Nenhum sistema existe isoladamente. Seu
sistema de design pode ter um subsistema menor dentro dele: regras
editoriais para controlar o layout da página; ou pode incluir um método
para dimensionar seu logotipo responsivamente de uma determinada maneira.
Ao mesmo tempo, também faz parte de outros sistemas maiores: seu
produto, sua equipe, a cultura de sua empresa.

O logotipo do Whitney Museum of American Art, um “ W dinâmico”11, é um

sistema simples, mas notavelmente adaptável por si só. O W responde às
obras de arte e palavras ao seu redor, permitindo uma enorme gama de
possibilidades de layout flexível.

11 http://smashed.by/whitneyidentity
Machine Translated by Google

Sistemas de Projeto 39

Em sistemas altamente eficazes, vemos que os subsistemas estão

conectados e alinhados em direção a um propósito compartilhado:
uma abordagem de design é espelhada na arquitetura de front-end;
os padrões de design seguem os princípios orientadores; a linguagem
padrão é aplicada consistentemente em design, código e
biblioteca de padrões. Vemos harmonia na forma como esses sistemas
funcionam: seu fluxo de trabalho é mais eficiente e as experiências
do usuário que eles geram parecem mais significativas e coerentes.

IDENTIFICANDO PROBLEMAS

Quando há lacunas, também é fácil vê-las. Um sistema de

design fragmentado leva a uma experiência de usuário fragmentada,
cheia de mensagens conflitantes. Queremos que o usuário se inscreva
em nosso boletim informativo, mas também queremos que eles
confiram nossos produtos mais recentes. Queremos que eles progridam
nas etapas, mas também precisamos garantir que eles avaliem cada receita.
A “Sequência” é usada para visualizar as etapas em uma área do
site; em outro, de repente é uma navegação por guias. A interface está
repleta de vários tons da mesma cor e várias versões do mesmo botão.
A produtividade da equipe também é afetada: fazer a menor alteração
é demorado e trabalhoso por causa do código confuso e emaranhado.
Os designers gastam seu tempo copiando pixels e reinventando
soluções para os mesmos problemas, em vez de entender e resolver
as necessidades reais do usuário.
Machine Translated by Google

40 Capítulo 1

Como reduzimos as lacunas e tornamos nosso sistema de design

mais eficaz? Entendendo o que é e como funciona.
Começaremos observando como uma linguagem de padrões
evolui em um novo produto, tomando como exemplo um site
de receita fictício simples de dez minutos.

Exemplo: um site de receitas de dez minutos

Imagine que estamos criando um site para compartilhar receitas

com pessoas que adoram comida saudável, mas não querem
perder muito tempo cozinhando. Se fôssemos abordá-lo com um
sistema em mente e definir padrões de design desde o início, por
onde começaríamos? Antes de começarmos, vamos fazer
algumas suposições. Entendemos o domínio da culinária e
pesquisas suficientes já foram feitas para informar nossas
decisões de design. Portanto, o que estamos tentando fazer não
é descobrir qual deve ser a experiência, mas ver como podemos
estabelecer o pensamento do sistema de design para este novo site.

FINALIDADE E VALORES

Uma das primeiras coisas que faríamos é tentar entender quem

são nossos usuários, seus objetivos, necessidades e motivações.
Para simplificar, digamos que sabemos que eles são profissionais
ocupados e seu objetivo é obter uma refeição saborosa e saudável
sem complicações e horas gastas cozinhando. Há muitas maneiras
de ajudá-los a atingir esse objetivo: conectá-los com chefs,
entregar comida à sua porta, criar um aplicativo de conversação. Mas nós
Machine Translated by Google

Sistemas de Projeto 41

quer fazê-lo através de um site com receitas de dez minutos.

Se fôssemos expressar o propósito em uma única frase, seria
mais ou menos assim: Motivar e capacitar as pessoas a preparar
refeições deliciosas e saudáveis em não mais que dez minutos.
Essa finalidade é o núcleo do produto e deve informar as
decisões de design e desenvolvimento. A equipe deve reconhecer
esse propósito e acreditar nele — não deve parecer forçado.

Outro elemento importante é o ethos que capta os valores e o

espírito que tentamos retratar através do site. Para nós pode ser
comida simples e saudável e experimentação com ingredientes
comuns. Para outros locais de culinária, pode ser a alta gastronomia
e o domínio das habilidades culinárias.

PRINCÍPIOS DE DESIGN

Para garantir que o objetivo do produto seja expresso claramente

em tudo o que fazemos, precisamos estabelecer alguns princípios
e valores básicos. Eles podem ser discutidos informalmente ou
escritos como um manifesto - o importante é que as pessoas
envolvidas na criação do produto concordem com esses valores e
se comprometam com eles.

Por exemplo, todos na equipe do site de receitas culinárias de

dez minutos entendem o valor do tempo. Eles são motivados
por ter um limite de tempo nas receitas e, como resultado, todos
se esforçam para tornar as interações no site curtas, simples,
rápidas e suaves.
Machine Translated by Google

42 Capítulo 1

Esse princípio será expresso não apenas por meio de padrões de design, mas

pelo desempenho do site, seu tom de voz e até mesmo como a equipe opera.

Esses princípios podem não ser necessariamente oficiais ou mesmo escritos. Mas

ter um acordo e consciência na equipe sobre o que são é essencial para manter o

esforço e as prioridades de todos em sincronia. Também pode ajudar na tomada

de decisões: de qual recurso construir primeiro e qual abordagem usar, para

elaborar fluxos de UX ou como os botões devem ser e a escolha do tipo de letra.12

COMPORTAMENTOS E PADRÕES FUNCIONAIS

Elaboraríamos alguns dos principais comportamentos que queremos

incentivar ou habilitar em nossos usuários para ajudá-los a atingir seus objetivos.

• Queremos que as pessoas sempre escolham um lar saudável

refeição cozida sobre comida rápida ou preparada no micro-ondas. Isso significa

que nossas refeições precisam parecer deliciosas e saudáveis, além de serem

mais atraentes do que comida feita no micro-ondas. Boas imagens com alimentos

irresistivelmente deliciosos, mas de aparência simples, podem nos ajudar aqui.

12 No próximo capítulo, examinaremos com mais detalhes as qualidades

dos princípios de design eficazes e como eles podem formar a base de
sua linguagem de design.
Machine Translated by Google

Sistemas de Projeto 43

• Queremos capacitar as pessoas para alcançar bons resultados

em menos de dez minutos. Isso significa que precisaremos

apresentar as receitas em alguns passos simples. Os passos

devem ser curtos, claros e focados. Talvez possamos ter um
cronômetro em cada etapa, para garantir que cumpriremos a
promessa de dez minutos.

• Queremos encorajar as pessoas a serem espontâneas e

sentem que podem preparar algo sempre que quiserem.
Comece com o que você já tem, e não com o que precisa obter - não
há necessidade de comprar ingredientes extravagantes. Em termos
de interface do usuário, isso pode ser suportado por miniaturas de
ingredientes facilmente selecionáveis com rótulos claros.

• Queremos encorajar as pessoas a serem criativas e espontâneas

e a se divertirem. Mostre quais ingredientes são opcionais e pelo
que podem ser substituídos. Mostre combinações inesperadas que
podem ser interessantes de experimentar.13

Naturalmente, os detalhes do design mudarão conforme trabalhamos no

site, mas esses comportamentos-chave permaneceriam os mesmos. Esses
comportamentos informarão os principais módulos funcionais e
interações do site: miniaturas de ingredientes, cartões de receita, sequência
de etapas, cronômetro.

13 Para ler mais sobre como entender o que as pessoas querem e moldar
uma visão para um novo produto, consulte Não vendemos selins aqui por
Stewart Butterfield, CEO da Slack (http://smashed.by/saddles).
Machine Translated by Google

44 Capítulo 1

ESTÉTICA E PADRÕES DE PERCEPÇÃO

Ao mesmo tempo, precisaríamos descobrir como queremos ser

percebidos por alguém que usa o site de receitas culinárias de dez
minutos. Somos simples e realistas ou glamorosos e sofisticados?
Somos sérios ou brincalhões? Ousado ou subjugado? Utilitário
ou emocional? Quais são as estéticas

que capturam a personalidade e o ethos que queremos retratar

por meio da interface? Começaríamos a pensar na marca.

Somos apaixonados por alimentação saudável, por isso queremos

que ela passe pelo site. Talvez tivesse uma sensação orgânica,
quente e saudável. Também acreditamos que cozinhar não requer
muito planejamento e preparação; pode ser espontâneo e divertido,
e você pode experimentar e ser criativo no limite de dez minutos.

Nesse ponto, provavelmente montaríamos alguns moodboards e

começaríamos a experimentar os recursos visuais até que a marca
parecesse certa.14 Assim que conseguirmos isso, podemos definir
os principais elementos visuais da marca, como tipografia, paleta
de cores, tom de voz e quaisquer características distintivas da
marca; por exemplo, ilustrações, estilos de imagem, formas
específicas, interações únicas que captam a essência do nosso
serviço e apresentam o conteúdo da melhor forma.

14 Mais informações sobre o processo de definição de padrões perceptivos no capítulo 4.

Machine Translated by Google

Sistemas de Projeto 45

Digamos que criamos uma paleta de cores quentes e terrosas, ícones

desenhados à mão, tipografia com foco na legibilidade, fotografia de qualidade de

comida saudável e alguns elementos e controles de interface simples. Esses estilos

se tornarão nossos padrões de percepção.

LINGUAGEM COMPARTILHADA

Juntamente com esse processo, tomaremos decisões de linguagem ao escolher

referir-nos a conceitos de determinadas maneiras. O que é uma “receita”? O que

queremos dizer com “passos”? O que torna uma interação “deliciosamente simples”?

As palavras que escolhemos influenciarão como a equipe pensa. E indiretamente, eles

moldarão o design.

A princípio, os padrões e as escolhas de linguagem serão compartilhados

informalmente. Mas à medida que nossa equipe e o produto crescem, o idioma

também cresce. Eventualmente, precisaremos de uma maneira mais estruturada de

capturar, compartilhar e organizar nossos vocabulários de design.15

Agora que vimos o processo de design em poucas palavras usando um site

fictício, podemos ver como os sistemas evoluem, usando exemplos de

empresas e produtos digitais do mundo real.

15 No capítulo 5, veremos como nomes eficazes e um processo de nomenclatura

colaborativo podem se tornar parte da base de um sistema de linguagem de
design. No capítulo 10, veremos as bibliotecas de padrões como uma forma de
capturar escolhas de linguagem e estabelecer um vocabulário compartilhado.
Machine Translated by Google

46 Parte I

Capítulo 2

Princípios de design
Princípios sólidos são a base para qualquer sistema que funcione bem.
Neste capítulo, discutiremos as qualidades dos princípios de design eficazes

e examinaremos algumas das maneiras de defini-los.

com o propósito e espírito do produto quando

Anteriormente, falamos
projetando sobre aTer
a interface. importância
clareza dode começar
propósito é
fundamental, pois todas as demais decisões devem ser moldadas
por ele, mesmo que indiretamente.

Como podemos garantir que o propósito do produto se

manifeste por meio do design? Estabelecendo alguns
valores e princípios básicos.

Em algumas empresas, especialmente no início, pode ser

difícil tentar articular diretrizes compartilhadas. Os princípios
de design não são algo que possa ser medido e quantificado,
e defini-los pode levar algumas iterações.

Também pode haver alguma confusão sobre o que são exatamente os princípios.

Dependendo da empresa, eles podem estar mais focados na marca, na cultura da

equipe ou no processo de design. Os princípios do Pinterest1 são mais focados

na marca (“Lúcido”, “Animado”, “Inquebrável”),

1 http://smashed.by/pinterestredesign
Machine Translated by Google

Princípios de design 47

considerando que no Serviço Digital do Governo do Reino Unido2 (GDS) eles são

direcionados mais para a forma como a equipe opera (“Faça menos,”

"Iterar. Em seguida, itere novamente”).

Às vezes, os princípios são usados por um tempo limitado, para um

projeto específico. O designer Dan Mall gosta de escrever um “manifesto de

design” no início de cada projeto, para garantir que a direção e os objetivos

criativos sejam claramente expressos.3 Em outros casos, os princípios são mais

duradouros e sua herança se torna parte da empresa ethos. Veja os valores

de “confiança”, “independência” e “honestidade” de Jack Daniel, que

permaneceram os mesmos no século passado.4

Empresas maiores podem ter conjuntos separados de princípios para a

experiência do usuário, a marca e o sistema de design.5 Além disso, cada

equipe que trabalha em uma empresa também pode ter seus próprios

princípios de equipe. Embora isso funcione para alguns, outros podem

achar que ter vários conjuntos de diretrizes pode contribuir para a fragmentação

de um sistema de design.

2 http://smashed.by/govukprinciples 3
http://smashed.by/whatdoimake por Dan Mall 4 http://
smashed.by/jack por Avi Dan 5 O
Google tem princípios de design abrangentes bem conhecidos,
como “Foco no usuário e tudo o mais virá”, e um conjunto mais
específico de princípios para sua linguagem de design de material,
como “O movimento fornece significado”.
Machine Translated by Google

48 Capítulo 2

Na Atlassian, uma empresa de software empresarial, os princípios

de marketing e de produto eram inicialmente diferentes.
Com o tempo, a equipe os aproximou e agora eles estão
trabalhando em um conjunto unificado de princípios, com o objetivo
de ter uma filosofia compartilhada para preencher a lacuna entre
as disciplinas de marketing, produto e suporte.

É um sistema. Os princípios estão aí para ligar os pontos.”

“ — Jürgen Spangl, chefe de design, Atlassian

Em vez de ter um conjunto separado de princípios para

diferentes equipes e partes do sistema, a Atlassian pretende ter
alguns valores-chave – como “Ousado”, “Otimista” e “Prático,
com uma piscadela” – abrangendo todos os pontos de contato
em a jornada do cliente de produtos Atlassian. Embora esses
valores sejam os mesmos ao longo da jornada, eles não são
representados com o mesmo nível de intensidade em diferentes estágios.

Há muita “ousadia” nas áreas de vendas e marketing do site, para

mostrar os produtos e ajudar as pessoas a entender o seu valor.
Mas quando você chega ao produto em si e às áreas de suporte,
a experiência se torna mais sobre como fazer o trabalho e
garantir que as pessoas sejam o mais eficazes possível.
Assim, a ousadia é atenuada e o valor “prático” é elevado. Como
observou Kevin Coffey, gerente de design da Atlassian: “Ninguém
quer uma página de suporte ousada.”
Machine Translated by Google

Princípios de design 49

Qualidades de princípios de design eficazes

Abordagens aos princípios de design são únicas para cada
empresa e podem assumir muitas formas. Os princípios podem
ser abrangentes ou mais granulares, temporários ou duradouros.
O que importa é a eficácia deles em unificar o pensamento de
design e distribuir direção criativa na equipe. No contexto deste
livro, os princípios de design são diretrizes compartilhadas que
capturam a essência do que um bom design significa para a equipe
e conselhos sobre como alcançá-lo; em outras palavras, critérios
acordados para o que constitui um bom design em sua organização
e para seu produto.

Independentemente da sua abordagem, diretrizes eficazes

geralmente têm essas qualidades em comum.

1. ELES SÃO AUTÊNTICOS E GENUÍNOS

Tenho certeza de que você conhece estes princípios: “Simples. Útil.

Agradável." Eles são onipresentes, nós os ouvimos em todos os
lugares. Não há argumento de que os produtos bem projetados
seguem um certo conjunto de princípios comuns (veja os dez
mandamentos do bom design de Dieter Rams, por exemplo). Mas
qualidades como essas devem ser um dado - devem ser feitas por
design - junto com outras preocupações, como acessibilidade e
desempenho.
Machine Translated by Google

50 Capítulo 2

Ainda estou para ver um produto digital de consumo que

tenha entre seus princípios “Complexo”, “Inútil” e “Doloroso de
se trabalhar”.

Saber que seu produto deve ser útil e agradável não será muito útil
para orientar suas decisões de design, porque essas qualidades
podem ser interpretadas de várias maneiras. O que os tornaria
mais úteis é saber exatamente o que essas palavras significam
para sua equipe e seu produto. O que significa inovar ? Quando um
design é considerado útil? Como saber se é realmente delicioso?

Bons princípios de design definem qualidades que podem ser

interpretadas de diferentes maneiras e as fundamentam no contexto
de um produto específico.

Tomemos o TED como exemplo. Um dos princípios de design do

TED é “Seja atemporal, não inovador”. A palavra atemporal é
específica não apenas da interface do TED, mas de toda a sua
marca e abordagem de design. E isso significa que eles não vão
adotar uma nova tecnologia ou introduzir um elemento de design
para seguir uma tendência. Em primeiro lugar, ele deve servir a
um propósito e funcionar para o maior número possível de usuários.
Para o TED, atemporalidade significa não apenas simplicidade, mas
também estar consciente de recursos estilísticos que não têm
benefícios comprovados para os usuários. A equipe não introduziria
um efeito de paralaxe, por exemplo, mesmo que pareça muito atual,
a menos que resolvesse um problema real de design.
Machine Translated by Google

Princípios de design 51

2. SÃO PRÁTICOS E ACCIONÁVEIS

Um princípio deve oferecer orientação prática sobre como resolver um

problema de design no contexto de um produto específico. Compare

essas duas versões de um dos princípios do Future Learn:

Simplifique. Torná-lo tão simples que é quase invisível! Devemos sempre

trabalhar para remover o atrito na plataforma, criando uma experiência que

permita aos usuários liberdade real para o conteúdo. Se nossa plataforma for

fácil de entender, as pessoas podem e vão usá-la mais.”

Essa afirmação faz todo o sentido — ninguém pode contestar a

necessidade de ter uma interface simples e utilizável. No entanto, não está

claro neste conselho exatamente o que significa simplicidade e como alcançá-

la. Compare com esta versão:

Sem peças desnecessárias. Cada elemento de design, do maior ao menor,

deve ter um propósito e contribuir para o propósito de um elemento maior

do qual faz parte. Se você não consegue explicar para que serve um elemento,

provavelmente ele não deveria estar lá.”

Na prática, a pergunta “É simples?” é muito mais difícil de responder

objetivamente do que "Isso contém partes desnecessárias?"

O último pode ser executado passando pela interface e questionando o

propósito de cada elemento.

Machine Translated by Google

52 Capítulo 2

Para expressar os princípios de maneira mais prática, tente pensar

neles não como algo que deve apenas soar bem, mas como algo
que oferece conselhos práticos. Imagine que uma nova pessoa se
juntou à sua equipe e você foi solicitado a compartilhar cinco
coisas que são mais importantes ao projetar seu projeto.

Se você disser a eles “Gostamos que as coisas sejam deliciosas

aqui. Torná-lo delicioso! provavelmente não vai ajudá-los a fazer
seu trabalho. Você precisaria definir o que significa prazer e
compartilhar exemplos práticos de como é o prazer no contexto de
sua interface.

Vamos dar uma olhada em alguns exemplos de princípios de design

e como eles podem ser tornados mais práticos.

Vago: “Deixe claro.”

Prático: “Apenas uma prioridade número 1. O que você quer que
seus usuários vejam e façam primeiro?”

Vago: “Simplifique”.
Prático: “Torne-o inquebrável. Assim como um brinquedo de criança,

certifique-se de que ele foi projetado para exploração e impossível de

ser mal aproveitado.”6

6 princípios de design do Pinterest: http://smashed.by/pinterestredesign

Machine Translated by Google

Princípios de design 53

Vago: “Torne-o útil.”

Prático: “Comece com as necessidades. Se você não souber quais

são as necessidades do usuário, não construirá a coisa certa. Faça

pesquisas, analise dados, converse com os usuários. Não faça suposições.”7

Mas mesmo o princípio mais bem formulado ainda pode ser interpretado

de maneiras diferentes. Nada pode tornar um princípio mais prático do que

combiná-lo com um exemplo da vida real para mostrar como ele pode ser
aplicado na prática.

Encontre partes específicas de sua interface onde um princípio é

claramente representado e conecte os dois juntos. Você pode apontar para

um lugar que mostre claramente ter “apenas uma prioridade número 1”?
Você pode demonstrar como um padrão pode ser verdadeiramente

“inquebrável” apesar de ter interações ricas?

3. ELES TÊM UM PONTO DE VISTA

O design é moldado pelas escolhas que fazemos. Esta página deve ser
mais viva visualmente ou mais utilitária? É apropriado ser mais brincalhão

ou mais sério aqui? Podemos justificar tornar este módulo mais utilizável ao
custo de torná-lo menos flexível?

Ao conseguir algumas coisas muitas vezes temos que dizer não para outras.
Bons princípios de projeto ajudam a definir prioridades e equilíbrio,
mesmo que haja fatores conflitantes a serem considerados.8

7 princípios de design GDS: http://smashed.by/govukfirst

8 Consulte http://smashed.by/matterofprinciple por Julie Zhuo
Machine Translated by Google

54 Capítulo 2

Pegue o Salesforce Lighting Design System9 princípios como exemplo: “Clareza.

Eficiência. Consistência. Beleza." Ressalta-se que devem ser aplicadas na

ordem de prioridade acima. A beleza não deve ser promovida em detrimento da

eficiência ou consistência, e a clareza deve sempre vir em primeiro lugar.

Classificar os princípios dessa maneira comunica à equipe o que deve ser

prioridade ao tomar decisões de design.

Pode ser útil reconhecer os valores conflitantes e sugerir como

encontrar um equilíbrio. Um dos primeiros princípios de design do
Medium era “Direção sobre Escolha”. Este princípio foi
frequentemente referido enquanto a equipe estava projetando o
editor Medium. Eles propositadamente trocaram uma variedade de
opções de formatação por orientação e direção para permitir que
as pessoas se concentrassem na escrita.10

As poucas opções disponíveis no editor mínimo do Medium ilustram claramente um

dos princípios do Medium, “Direção sobre a escolha”.

9 http://smashed.by/lightning 10 http://
smashed.by/usefulprinciples por Dustin Senos
Machine Translated by Google

Princípios de design 55

Bons princípios não tentam ser tudo para todos.

Eles têm voz e encorajam ativamente um designer a ter uma perspectiva. Essa ideia foi

enfatizada por Dan Mall em “Researching Design Systems”:11

Um sistema de design deve ter diretrizes para: perspectiva, ponto

“ de vista, estendendo a direção criativa a todos que decidem construir

algo com o sistema de design. Essas coisas devem ser
incorporadas. Caso contrário, todos nós podemos usar o Material
Design e encerrar o dia.
— Dan Mall

4. ELES SÃO RELACIONADOS E MEMORÁVEIS

Aqui está um teste divertido. Tente perguntar às pessoas em sua

empresa quais são seus princípios de design. Se ninguém consegue
se lembrar deles, é provável que eles possam ser melhorados. Para
serem memoráveis, os princípios devem estar em uso constante. Eles
devem ser referidos em conversas cotidianas, incluídos em apresentações
e críticas de design, exibidos onde possam ser vistos. E para serem
usados, eles devem ser genuinamente úteis, possuindo as
qualidades acima.

Também ajuda a não ter muitos deles. A memória humana é limitada e

lembra-se de mais de quatro coisas ao mesmo tempo.

11 http://smashed.by/researchingsystems
Machine Translated by Google

56 Capítulo 2

o tempo pode ser difícil.12 O número ideal de princípios de design — se

você quiser que eles sejam usados — é entre três e cinco. Quando as equipes
do TED, Atlassian e Airbnb foram questionadas sobre seus princípios de

design durante as entrevistas para este livro, todas foram capazes de

relembrá-los instantaneamente. Não houve um momento de hesitação;

ninguém se confundiu ou tentou consultar os princípios em um manual de

marca. Como eles poderiam se lembrar deles tão bem? Seus princípios eram

simples, relacionáveis, úteis — e não havia muitos deles.

Mais importante ainda, as equipes os usaram diariamente para tomar decisões

de design. Os quatro princípios de design do Airbnb (“Unificado”,

“Universal”, “Icônico”, “Conversacional”) estão profundamente enraizados em

seu processo de design:

Quando projetamos um novo componente, queremos garantir que ele

“ atenda a todos os quatro. Se não tivéssemos um conjunto de princípios,

seria difícil chegar a um acordo sobre as coisas. Queremos garantir que

cada peça corresponda a isso.”13

— Roy Stanfield, principal designer de interação, Airbnb

12 Para mais informações sobre as limitações da memória de trabalho humana,

consulte “The Magical Mystery Four: How is Working Memory Capacity Limit
ed, and Why?” por Nelson Cowan (http://smashed.by/workingmemory)
13 Entrevista com Roy Stanfield, principal designer de interação, Airbnb,
agosto de 2016
Machine Translated by Google

Princípios de design 57

A equipe do Spotify criou o acrônimo TUNE (tom, utilizável, necessário,

emotivo) para tornar seus princípios de design mais memoráveis.
Perguntar se um design está “em sintonia” durante as críticas e sessões
de controle de qualidade tornou-se parte do processo de design do
Spotify.14

Certificar-se de que seus princípios possuam as qualidades acima

leva tempo, comprometimento e trabalho em equipe. Mas vale a

pena o esforço — um conjunto básico de princípios está no cerne

de qualquer sistema de design.

Definindo seus princípios

Expressar sua abordagem de design em cinco frases não é fácil.
Cada equipe chega aos seus princípios à sua própria maneira: algumas
passam por rodadas de workshops, outras podem obter informações de
seu CEO ou diretor de criação. Independentemente de como você
chegar lá, as dicas a seguir podem ser úteis para manter em mente.

COMECE COM O OBJETIVO

Os princípios de design devem apoiar o propósito maior do produto e

ajudar a expressar o espírito do produto. Se você não tem certeza por
onde começar, observe primeiro os valores abrangentes de sua empresa
ou uma visão de produto e, em seguida, tente descobrir como os
princípios de design podem contribuir para esse objetivo maior.

14 http://smashed.by/designscale por Stanley Wood

Machine Translated by Google

58 Capítulo 2

O principal objetivo do site do TED pode ser resumido em uma

frase: “Espalhe as conversas o mais longe possível”.
Em termos de ética e valores do TED, isso significa alcançar o
máximo de pessoas possível, diminuindo a barreira de entrada e
tornando o produto inclusivo e acessível. Significa priorizar o
desempenho e a acessibilidade em detrimento de recursos
chamativos, clareza de mensagem em detrimento de design
experimental ousado. Seu princípio de “atemporalidade” abrange isso.

ENCONTRE TEMAS COMPARTILHADOS

Se você ainda está definindo seus princípios, um exercício útil é

pedir a alguns membros da equipe (ou a todos, dependendo do
tamanho da equipe) que os escrevam individualmente. O que,
na opinião deles, significa um bom design para o seu produto?
Como eles explicariam em cinco frases para um novo membro da
equipe, de forma prática e fácil de entender?

Peça-lhes para encontrar um exemplo prático na interface do seu

produto e incluí-lo ao lado de cada princípio.

A comparação das respostas de sua equipe pode revelar quanta

unidade você tem em sua abordagem de design. Existem muitos
temas compartilhados e sobreposições? Disciplinas diferentes
acabaram com princípios semelhantes? É sempre interessante
ver as respostas de todos, em particular como elas diferem entre
as pessoas que acabaram de ingressar na equipe e as que já
Machine Translated by Google

Princípios de design 59

trabalhou no produto por algum tempo. Essas respostas podem ser um

ponto de partida valioso no trabalho posterior sobre os princípios, à
medida que você identifica temas comuns e concorda com as prioridades.

FOCO NO PÚBLICO CERTO

Uma maneira infalível de acabar com princípios de design vagos é não

ter ideia de para quem eles são. Você está escrevendo para um
folheto de identidade corporativa? Para o site da empresa? Um site de
carreiras? Potenciais parceiros e clientes? Tente escrever seus
princípios para você e para seus colegas, em primeiro lugar:
designers, desenvolvedores, produtores de conteúdo, profissionais
de marketing, especialistas de domínio - pessoas diretamente envolvidas
na criação do produto. Procure chegar a um acordo informal sobre o que
constitui um bom design para o seu produto e ofereça diretrizes práticas
para alcançá-lo.

TESTE E EVOLUA SEUS PRINCÍPIOS

À medida que seu produto evolui, seus princípios também evoluem.

Eles estarão moldando a linguagem de design, que por sua vez
estará moldando os princípios. Seus princípios podem ser muito vagos
e abstratos no começo, ganhando cada vez mais clareza. Ou eles
podem começar sendo claros e focados, mas com o tempo tornam-
se mais diluídos e perdem sua autenticidade. Para garantir que seus

princípios de design continuem a melhorar, eles precisam ser

constantemente testados, avaliados e refinados. Isso só pode ser feito
estando consciente deles
Machine Translated by Google

60 Capítulo 2

e aplicá-los em seu trabalho todos os dias. Ao tornar seus princípios

parte das críticas de design, por exemplo, você pode testar
continuamente se eles ajudam em seu processo de design e, se não,
continuar iterando-os.

Dos princípios aos padrões

Um dos desafios que tive em meu trabalho como designer foi
descobrir como materializar conceitos de alto nível, como
princípios de design e valores de marca, em elementos de interface
do usuário concretos. Como exatamente eles são incorporados nos
padrões de design que criamos?

Muito disso é sobre escolha e execução de padrões. Para

Medium, no nível funcional, era necessário um editor de rich
text. Poderia ter sido qualquer tipo de editor, com qualquer
grau de complexidade. Mas, de todas as possibilidades, o
Medium escolheu a mais simples, guiada por seu princípio,
“Direção sobre Escolha”.

Para o TED, a clareza da mensagem é mais valorizada do que a

estética. Tentar destilar uma palestra em uma única frase pode ser
difícil e, às vezes, os títulos podem ser longos. Seria mais fácil
recortar o título, mas para a equipe a mensagem da palestra deve
sempre ter prioridade. Em vez de optar por uma solução mais fácil,
eles garantem que seus padrões de design possam acomodar títulos longos.
Machine Translated by Google

Princípios de design 61

O padrão de banner de herói em uma tela de conversa

do TED.com pode acomodar títulos longos, o que está
de acordo com seus princípios de design.

Há um senso de priorização também do ponto de vista da marca. A

equipe do TED optou por não apresentar uma nova página inicial
rica em imagens até que desenvolvessem uma ferramenta de
compactação para minimizar o impacto que essas imagens teriam no desempenho.
mance.

Para a equipe da Atlassian, o princípio “otimista” está incorporado em uma

“interface otimista”.15 No JIRA, por exemplo, quando um usuário precisa mover um

cartão de “Em andamento” para “Concluído”, os cartões podem ser movidos

imediatamente, fornecendo uma resposta instantânea ao usuário, mesmo que no fundo

existam muitas verificações e validações e muitas coisas que podem dar errado.

Eles visam expressar o princípio “prático com uma piscadela” por meio da linguagem

amigável do texto, mensagens de feedback, integração e outros locais em todo o site.

15 http://smashed.by/truelies
Machine Translated by Google

Os padrões de projeto são moldados pela ideia central de como um

produto funciona. Pense em como um espírito de “transparência e
colaboração” é incorporado por meio de canais abertos no Slack; como a
ideia de “capturar os momentos únicos da vida” se traduz no feed de
fotos e nas interações do Instagram; ou como os cartões no Trello (uma
funcionalidade que remonta ao seminal sistema HyperCard) incentivam um
certo tipo de fluxo de trabalho.

A escolha e execução dos padrões e sua combinação única são

influenciadas pelo propósito, espírito e princípios de design de um
produto. Você pode visualizar os princípios de design como regras
gramaticais para criar padrões e combiná-los de maneira que façam sentido
intrínseco.

Da mesma forma, à medida que a marca e os padrões funcionais

evoluem e se tornam mais refinados, eles moldam os princípios de design.
Princípios e padrões são refinados e influenciados uns pelos outros
continuamente.

Nos próximos dois capítulos, falaremos sobre padrões de projeto com

mais detalhes, tomando produtos da vida real como exemplos. Veremos
como surgem os padrões de design e como eles são afetados pelo
propósito e ethos de um produto, comportamento do usuário, marca,
requisitos de negócios e outros fatores.
Machine Translated by Google

Parte I 63

Capítulo 3

Padrões Funcionais
Neste capítulo, discutiremos o papel dos padrões funcionais e por que

eles devem ser definidos no início do processo de design.

F
padrões unctional são os blocos de construção tangíveis de

a interface. Seu propósito é permitir ou encorajar

determinados comportamentos do usuário.

No site de culinária de dez minutos, alguns desses comportamentos

incluíam selecionar ingredientes, escolher uma receita e seguir etapas

dentro de um tempo alocado. Os padrões funcionais que projetamos serão

informados por esses comportamentos.

Padrões funcionais, ou módulos,1 são amplamente moldados pelo domínio

ao qual um produto pertence. Os padrões em nosso aplicativo de culinária

seriam bem diferentes de, digamos, software financeiro.

Em vez de cartões de receita, estaríamos lidando com barras de tarefas,

campos de dados, grades, tabelas e gráficos.

Os padrões funcionais podem ser simples ou combinados para criar

padrões mais complexos. Um cartão de receita é composto por um título de

refeição, imagem, ingredientes e um botão de ação. Cada módulo dentro do

cartão de receita tem seu próprio objetivo: o título nos diz qual é a refeição; a

imagem fornece uma prévia do resultado final; os ícones de ingredientes nos

permitem escanear as cartas com mais facilidade.

1 Vejo os padrões funcionais de forma mais genérica, como uma espécie de ideal
platônico, e os módulos como a personificação dos padrões funcionais, que podem ser
diferentes em diferentes interfaces.
Machine Translated by Google

64 Capítulo 3

Juntos, esses módulos ajudam a atingir um objetivo comum: incentivar

as pessoas a cozinhar a refeição indicada na receita.

À medida que o produto evolui, os padrões também evoluem.

Podemos começar a permitir que nossos usuários avaliem as receitas,
e a exibição de classificação se tornará parte do cartão de receita. Ou
podemos decidir que o layout do cartão pode ser melhorado, ou
que os ícones dos ingredientes devem ser mais claros, ou que
precisamos introduzir uma versão compacta do cartão. Testamos e
iteramos os padrões para tentar fazê-los funcionar melhor para
atingir seu propósito; isto é, encorajando os comportamentos de forma mais eficaz.

Articular a finalidade dos padrões no início do processo de design

pode ajudar a evitar a duplicação à medida que o produto cresce.
A princípio, pode não valer a pena o esforço; afinal, um produto
pode mudar muito rápido em seus primeiros dias para ser capaz de
identificar todas as partes da interface. Mas os padrões funcionais
centrais realmente mudam tanto assim? Vamos pegar o FutureLearn
como exemplo e ver como a interface evoluiu nos três anos desde
o projeto inicial.

Padrões Evoluem, Comportamentos Permanecem

Desde que foi fundada pela Open University em 2013, a visão

da FutureLearn tem sido “inspirar todos a aprender contando histórias,
provocando conversas e celebrando o progresso”. Para poder
fazer isso, no mínimo, tínhamos que garantir que as pessoas
pudessem descobrir e participar de um curso online,
Machine Translated by Google

Padrões Funcionais 65

motivá-los a progredir e tornar a experiência de aprendizagem

gratificante e estimulante. Essa visão informou os padrões funcionais
iniciais do FutureLearn.

Os cursos são organizados em unidades e há um fluxo linear

para eles - uma parte leva à outra. No nível da interface, isso
se traduz em uma estrutura semanal. Cada semana é dividida em
atividades e as atividades em etapas. O módulo de progresso
do curso é um dos principais padrões funcionais: ele permite
que os alunos naveguem pelo conteúdo do curso, mostre seu
progresso e onde o curso está ativo no momento.

Módulo de progresso do curso no FutureLearn

Esses padrões passaram por algumas mudanças depois de terem

sido projetados há mais de três anos. Seus estilos, e até mesmo
funcionalidade e interações, mudaram. No entanto, seu propósito
fundamentalmente permaneceu o mesmo, pois está conectado à
ideia central de como o FutureLearn funciona.
Machine Translated by Google

66 Capítulo 3

A página To Do passou por várias revisões ao longo de três anos, mas o objetivo
dos módulos principais permaneceu o mesmo.

Da mesma forma, os tópicos de discussão no FutureLearn

evoluíram ao longo do tempo, à medida que o volume
de participantes aumentou: o layout dos tópicos, as interações
e os recursos de filtragem evoluíram, mas seu objetivo
principal permanece praticamente o mesmo - envolver os
alunos em conversas e permitir que aprendam uns com os outros.

As páginas de discussão passaram por várias iterações depois de projetadas, mas

o objetivo dos módulos principais permaneceu inalterado.
Machine Translated by Google

Padrões Funcionais 67

A unidade principal para exibição de detalhes do curso também evoluiu ao

longo de três anos, para permitir que os usuários vejam uma seleção
maior de listagens de cursos antes de precisar rolar a página para baixo.
Mas, novamente, o objetivo do padrão permanece o mesmo - permitir
que as pessoas descubram e participem dos cursos nos quais estão
interessadas.

A lista de cursos evoluiu ao longo dos anos para permitir que os usuários vejam uma seleção

maior de listas de cursos.

Como costuma acontecer nos primeiros dias de inicialização, devido a

restrições de tempo e outras prioridades, muitos padrões funcionais
centrais não foram definidos. Como interface e educação do FutureLearn

a funcionalidade cacional cresceu, os padrões foram duplicados.

Acabamos com vários módulos de progresso do curso, variações de um
módulo de comentários e alguns blocos e cartões de curso diferentes em

todo o site. Talvez isso fosse inevitável. Ou algumas dessas duplicações

poderiam ter sido evitadas?
Machine Translated by Google

68 Capítulo 3

Quando um padrão não é definido e compartilhado na equipe,

você começa a recriá-lo para atingir objetivos semelhantes:
outro módulo promocional, outro feed de notícias, outro conjunto de
links de compartilhamento, outro menu suspenso. Antes que você
perceba, você acaba com 30 displays de produtos diferentes e
menus pop-over.

Os padrões são a personificação física dos comportamentos que

estamos tentando encorajar ou habilitar por meio da interface. Sua
execução, conteúdo, interações e apresentação podem mudar.
(Na verdade, os padrões nem precisam ser visuais - eles podem
ser lidos por uma voz ou incorporados de outra maneira). Mas os
principais comportamentos que eles devem encorajar permanecem
relativamente estáveis, pois derivam do propósito do seu produto
e da ideia de como ele funciona. Estar consciente do propósito de
seus padrões-chave pode ajudá-lo a entender como seu sistema
funciona e evitar que ele se fragmente à medida que evolui.

Definindo Padrões Funcionais

Definir padrões no início do processo de design não precisa levar muito
tempo. Existem técnicas que podem ser integradas ao seu
processo sem esforço extra. Aqui estão alguns que considero
particularmente úteis.
Machine Translated by Google

Padrões Funcionais 69

CRIE UM MAPA DE PADRÕES

Para mapear as necessidades, metas e motivações de seus clientes, você

pode ter feito o mapeamento da experiência do cliente,2 “tarefa a ser realizada”3

ou um exercício semelhante sobre as jornadas do cliente.

Os resultados normalmente alimentam as primeiras explorações de design

e protótipos. Nesse ponto, geralmente há uma compreensão bastante clara

dos comportamentos que queremos incentivar ou habilitar em nossos usuários:

aprender sobre um curso, ingressar em um curso, participar de uma

discussão.

Mas quando nos concentramos na interface, às vezes nos perdemos nos

detalhes. Gastamos tempo fazendo o cabeçalho de página mais

impressionante, esquecendo para que serve esse cabeçalho e como isso

afeta o usuário em diferentes partes de sua jornada. Em outras palavras,

perdemos a conexão entre os comportamentos do usuário e os padrões

exatos que incentivam ou permitem esses comportamentos.

Para ver como seus padrões se encaixam em uma imagem maior, tente mapear

alguns de seus módulos principais para as seções de uma jornada do usuário.

2 http://smashed.by/mappingxp 3
“Trabalho a ser feito” (JTBD) é um exercício que ajuda você a se
concentrar na motivação subjacente ao uso de um produto ou serviço, em
vez do produto em si. Por exemplo, mesmo que os clientes digam que
compram um cortador de grama para “cortar grama”, seu objetivo maior
pode ser “manter a grama baixa e bonita o tempo todo”, o que pode
indicar que um cortador de grama não é a ferramenta certa para o trabalho. em primeiro lugar.
Machine Translated by Google

70 Capítulo 3

Pense sobre para que serve cada seção e quais comportamentos são

projetado para encorajar. Você não precisa se preocupar em

capturar cada ícone ou botão neste ponto. Concentre-se no quadro
geral: entenda as partes do sistema e como elas funcionam juntas.
Para o FutureLearn, ele se concentrou principalmente em três áreas:
descobrir conteúdo, aprender em um curso e atingir uma meta.

Alguns dos padrões funcionais do FutureLearn mapeados para três estágios principais da
jornada do usuário.

Manter esse mapa em mente me ajudou a pensar em famílias de

padrões unidos por um propósito comum, em vez de páginas
individuais. Por exemplo, em vez de criar uma página de lista de
cursos, eu pensaria na área “Discovery” como um todo.
Machine Translated by Google

Padrões Funcionais 71

Quais são os comportamentos que precisamos encorajar nesta fase da

jornada do usuário? Quais são os padrões que podem apoiar esses
comportamentos? Onde mais eles existem no site e como eles
funcionam lá? Se for um novo padrão, como ele contribui para todo o
sistema? Pensar em todas essas questões faz parte do design
sistemático.

REALIZAR UM INVENTÁRIO DE INTERFACE

O processo de inventário de interface, 4 descrito por Brad Frost, tornou-se uma

maneira popular de começar a modularizar uma interface. A ideia é simples. Você

imprime as telas de sua interface em papel ou as coleta em Keynote ou Power

Point. Em seguida, você separa vários componentes recortando-os ou colando-

os no Keynote.

Um inventário de interface mostrando alguns dos elementos interativos.

4 http://smashed.by/uiinventory
Machine Translated by Google

72 Capítulo 3

Você acaba com uma coleção de partes que podem ser agrupadas
em categorias: navegação, formulários, guias, botões, listas e assim
por diante. Passar por esse processo permite que você veja padrões
duplicados e identifique áreas problemáticas que precisam de atenção.
É quando você descobre que tem dezenas de cabeçalhos ou menus
pop-over e começa a pensar em como trazer alguma ordem para
tudo isso.

Um inventário não precisa abranger tudo (embora o primeiro

que você fizer deva ser abrangente). Ele pode se concentrar em
um grupo de padrões por vez, como módulos promocionais,
cabeçalhos ou todos os módulos de exibição do produto. Você
pode fazer um inventário focado especificamente em tipografia, cor
ou animações.

Para ser mais eficaz, os inventários de interface devem ser feitos

regularmente. Mesmo que sua equipe mantenha uma biblioteca
de padrões, surgirão novos padrões que precisam ser incorporados
ao sistema. Se você adquirir o hábito de executar inventários a cada
poucos meses, cada vez não deve levar mais do que algumas
horas. E toda vez que você faz isso, você entende melhor o seu
sistema e pode melhorá-lo.5

5 Nos capítulos 7 e 8, veremos em profundidade o processo de

inventário de interfaces, partindo da finalidade do sistema e
descendo até os menores padrões, como ícones e cores.
Machine Translated by Google

Padrões Funcionais 73

VER PADRÕES COMO AÇÕES

Para entender o propósito de um padrão, tente se concentrar no que

ele faz, e não no que você pensa que é. Em outras palavras, tente encontrar
uma ação que melhor descreva o comportamento para o qual um
padrão foi projetado. Descrever um padrão com um verbo em vez de um
substantivo pode ajudá-lo a ampliar os possíveis casos de uso de um
padrão e definir sua finalidade com mais precisão.

Digamos que você tenha introduzido um módulo simples para

promover um curso online. Se você tentar descrever o que é, pode se
referir a ele como “cabeçalho da imagem” ou “banner do curso”.

Componente de IU que promove um curso online no FutureLearn.

Mas, ao descrever um padrão dessa maneira, você pode torná-lo muito

específico para sua apresentação ou conteúdo. Você pode acabar
limitando seu uso a um contexto específico. Por outro lado, se você
defini-lo em termos de ações — tanto do ponto de vista do usuário quanto
do seu próprio — você pode descobrir sua finalidade: “Promover um
curso” e “Descobrir um curso”; e “Inspire-se para participar de um curso”
e “Incentive as pessoas a participar”.
Machine Translated by Google

74 Capítulo 3

Ao focar na ação, você conecta o padrão ao comportamento e o mantém

aberto para vários casos de uso. O que mais esse padrão pode promover?

Uma discussão online? Um novo evento?

O nome que você dá também deve refletir isso. No exemplo acima,

nomeamos o módulo “Billboard” para refletir sua função promocional focada

na ação.

DESENHE A ESTRUTURA DE CONTEÚDO DE UM PADRÃO

Para obter uma compreensão compartilhada de como um padrão funciona,

desenhe sua estrutura: os principais tipos de conteúdo de que um módulo

precisa para ser eficaz.

Designers, desenvolvedores e estrategistas de conteúdo podem fazer

isso juntos ao trabalhar em um novo módulo ou ao refatorar um existente.

Comece listando os principais elementos de conteúdo de que um módulo

precisa para ser eficaz. Por exemplo, você pode concordar que em sua

interface um módulo promocional como “Billboard” precisa:

• um título • um

forte apelo à ação

• um fundo atraente (cor sólida ou imagem)

Em seguida, tente determinar a hierarquia dos elementos e decida como eles

devem ser agrupados; por exemplo: a imagem faz parte do conteúdo? Um

rótulo é sempre necessário? Enquanto faz isso, faça alguns esboços para
visualizar a estrutura.
Machine Translated by Google

Padrões Funcionais 75

Exemplo da estrutura de conteúdo para um item da lista de cursos no FutureLearn.

Para lhe dar uma ideia de como pode ser, veja acima um exemplo
da estrutura de conteúdo de um módulo de item de lista de
cursos no FutureLearn.

Nesse ponto, você pode estar pensando: “É apenas um esboço ou

um wireframe. Eu faço isso o tempo todo de qualquer maneira.
Mas é um pouco diferente. Este é um esboço focado especificamente
na estrutura de conteúdo de um módulo e na hierarquia e
agrupamento dos elementos.

Depois de ter um entendimento compartilhado da estrutura de um

padrão, é mais fácil garantir que a maneira como o módulo foi
projetado seja refletida na marcação. Um designer pode trabalhar nas
explorações visuais, enquanto um desenvolvedor pode começar a
montar um protótipo (ou ambos podem prototipar, dependendo
Machine Translated by Google

76 Capítulo 3

como você trabalha). Os designers entendem o quanto podem

forçar um padrão visualmente antes que ele se torne algo diferente.
Os desenvolvedores conhecem os motivos das escolhas de design e
não recebem designs inesperados jogados para eles por cima do muro.

Aqui está outro exemplo. No FutureLearn, costumávamos ter

quatro versões diferentes de um feed social em diferentes áreas

do site — duas versões de “Comentário”, uma “Resposta” e

uma “Notificação”.

Quatro versões diferentes de módulos de feed social no FutureLearn.

Embora à primeira vista parecessem semelhantes, não

compartilhavam os mesmos estilos; ou seja, se você alterasse
um deles, as alterações não se aplicariam aos outros, haveria
inconsistências visuais no espaçamento e tipografia e assim por
diante. Separá-los e desenhar suas estruturas nos permitiu ver se
eles poderiam ser unificados em um padrão e projetar esse padrão
de uma forma que funcionasse em todos os quatro casos de uso.6

6 No capítulo 8, discutiremos com mais detalhes quando unificar padrões, quando

separá-los e quando criar variantes.
Machine Translated by Google

Padrões Funcionais 77

A estrutura de conteúdo para um módulo “Item de alimentação” no FutureLearn.

A estrutura do conteúdo está intimamente ligada ao propósito

de um padrão, como esses exemplos mostraram. Saber como um
módulo está estruturado nos ajuda a entender como ele funciona.

COLOQUE OS PADRÕES EM UMA ESCALA

Tente colocar padrões semelhantes em uma escala, um em

relação ao outro. Por exemplo, pode haver alguns padrões
promocionais em seu sistema, com vários graus de intensidade.
Semelhante à escala de sonoridade visual7 Como mencionei no capítulo 1, os módulos

promocionais podem ser comparados entre si.

7 http://smashed.by/visualloudness
Machine Translated by Google

78 Capítulo 3

Os módulos promocionais podem ser colocados em uma escala de sonoridade visual imaginária.

Colocar padrões em uma escala pode ajudar a garantir que eles sejam usados

apropriadamente e não compitam por atenção em todo o sistema. Também

ajuda a evitar que os módulos sejam recriados sem necessidade, pois você

pode ver quando já tem um módulo no mesmo “volume”.

Outra maneira de pensar sobre isso é imaginar que sua interface não

é visual, mas que está sendo lida por uma voz.

Quando essa voz precisaria ficar mais alta e se transformar em nação? Pense
em como esse volume e entonação podem

ser expressa visualmente, através das relações entre os elementos dentro

dos módulos, bem como sua hierarquia no projeto geral. Pensando dessa

forma, é claro, também tem uma vantagem adicional de torná-lo mais acessível

aos leitores de tela.

TRATE O CONTEÚDO COMO UMA HIPÓTESE

Aqui está um paradoxo. Espera-se que projetemos o conteúdo primeiro,

mas, ao mesmo tempo, esperamos que construamos módulos de uma

maneira que se adapte a qualquer tipo de conteúdo. Uma maneira de fazer isso não é
Machine Translated by Google

Padrões Funcionais 79

necessariamente começando pelo conteúdo, mas pelo propósito.

Então podemos tratar o conteúdo não como um ativo conhecido, mas como um

hipótese. Isso nos permite testar se definimos bem a finalidade do

módulo e se o design funciona para essa finalidade.

Suponha que temos um módulo que foi projetado para exibir os

recursos do produto.

Um exemplo de um módulo projetado para apresentar os recursos do produto.

Poderíamos definir seu propósito como “Apoiar a mensagem

principal com bits adicionais de informações facilmente escaneáveis”.
Os “bits” podem ser recursos-chave, conselhos curtos ou etapas
rápidas. Podemos construir um padrão de conteúdo que se encaixe
nessa hipótese (conciso e escaneável, complementar em vez do
conteúdo principal da página) e depois testá-lo.

Se o conteúdo consistentemente acabar sendo inadequado

para esse padrão, geralmente é causado por um (ou mais)
destes três motivos:
Machine Translated by Google

80 Capítulo 3

• Não definimos corretamente a finalidade do padrão.

Volte a tentar entender os comportamentos para os quais ele foi
projetado.

• Não projetamos o padrão de uma maneira que melhor atenda ao seu

propósito. Tente um design diferente para este padrão.

• Estamos tentando forçar o conteúdo em um padrão que não é

adequado para ele. Considere revisar o conteúdo ou tente outro
padrão.

Quando não começamos com o propósito e a estrutura, podemos acabar

com módulos muito ligados ao seu conteúdo. Por exemplo, tivemos um
caso no FutureLearn em que a cópia empurrava guias importantes abaixo
da área visível.

Um exemplo de módulo frágil, muito específico para seu conteúdo.

As guias foram feitas para permanecer visíveis. Para contornar o problema,

quase introduzimos um cabeçalho personalizado de tamanho menor,
simplesmente para deslocar as guias um pouco para cima. Mas se
tivéssemos feito isso, teríamos acabado com um módulo que não era robusto.
Machine Translated by Google

Padrões Funcionais 81

Se o título ficasse mais longo ou se adicionássemos uma linha extra,

teríamos o mesmo problema. Se tivéssemos começado com o
objetivo do módulo e sua estrutura, as guias provavelmente teriam
sido colocadas no topo, já que são um elemento tão importante do
design.

Estas são apenas algumas das ferramentas e técnicas que você pode
experimentar para definir padrões funcionais em sua interface. O
mais importante é entender como os padrões se ligam aos
comportamentos para os quais foram originalmente projetados: seu propósito.

O propósito determina tudo o mais que se segue: a estrutura do

padrão, seu conteúdo, sua apresentação. Saber o propósito do
padrão (saber quais comportamentos ele foi projetado para
encorajar ou habilitar) pode nos ajudar a projetar e construir módulos
mais robustos.

Isso pode nos ajudar a saber o quanto um padrão pode ser

modificado antes de se tornar algo totalmente diferente. E pode
reduzir a duplicação, dando a toda a equipe um ponto de
referência comum e conectando-os com a intenção original do
projeto. Ser claro quanto ao objetivo também torna mais fácil testar
os padrões para ver o quão eficazes eles realmente são.

Se os padrões funcionais são objetos na interface, então os padrões

perceptivos são mais como estilos - eles descrevem que tipo de
objetos são e como se sentem. Vamos dar uma olhada mais de perto
neles.
Machine Translated by Google

82 Parte I

Capítulo 4

Padrões Perceptivos
Neste capítulo, discutiremos como funcionam os padrões perceptivos e seu

papel em um sistema de design.

Imagine que nós dois temos uma casa, com o mesmo conjunto de

EU móveis: uma mesa, algumas cadeiras, uma cama e um guarda-roupa.

Mesmo que os móveis sejam os mesmos, nossas casas podem

sentir-se distintamente diferente: pode ser por causa do estilo dos móveis,
dos materiais, cores, texturas, do tecido das colchas, do estilo dos enfeites,

de como dispomos o quarto, da iluminação ou mesmo da música que jogar

dentro.

Refiro-me a tais atributos como padrões perceptivos. Por causa deles, sua

casa pode parecer um covil boêmio e a minha, um armazém.6

Exemplos de padrões de percepção em produtos digitais incluem tom de voz,

tipografia, paleta de cores, layouts, ilustrações e estilos de iconografia,

formas e texturas, espaçamento, imagens, interações ou animações e todas

as formas específicas em que esses elementos são combinados e usados.

em uma interface.

6 Essa maneira de pensar pode tornar a visita a lugares uma experiência totalmente
diferente. Seja um café, uma nova cidade ou um local para piquenique, gosto de pensar

em como um lugar se sente e depois tentar determinar alguns dos padrões que se

combinam para criar essa atmosfera.

Machine Translated by Google

Padrões Perceptivos 83

Padrões perceptivos estão sempre presentes, mesmo que não sejam

intencionalmente projetados. Mesmo uma ferramenta puramente funcional

tem uma estética.

Às vezes, essas qualidades são vistas como estilo ou a pele de um produto

– uma camada por cima. Mas, para serem eficazes, devem viver não apenas

na superfície, mas também no cerne da marca, e devem evoluir com o

produto. Quando eficazes, os padrões perceptivos tornam-se poderosos

diferenciadores do produto.

PADRÕES DE PERCEPÇÃO AJUDAM A EXPRESSAR

IMAGEM DE MARCA

Os produtos podem parecer diferentes, mesmo que pertençam ao mesmo

domínio e tenham módulos semelhantes. Para escrever este livro eu tentei

dezenas de processadores de texto com funcionalidade muito semelhante.

Apenas alguns deles, incluindo o que estou usando agora, tinham o tipo de

ambiente de escrita que me ajudava a me concentrar e ser mais produtivo.7

Posso descrevê-lo como nítido e calmo, exibindo uma estética livre de

distrações com ênfase em coisas importantes, como a exibição do esboço do

documento ou os pequenos círculos que ficam verdes quando me aproximo

do meu “objetivo de escrita”. Este ambiente é criado através da

combinação de determinados padrões, embora à primeira vista não seja

fácil identificar quais são.

7 É http://smashed.by/ulysses, caso você queira saber.

Machine Translated by Google

84 Capítulo 4

Vamos pegar outro exemplo: Spotify. Para mim, parece caloroso e

pessoal. Quais são exatamente os padrões que criam a ambiência
de intimidade nessa interface de serviço de música digital com mais
de 100 milhões de usuários mensais? Além da funcionalidade, isso
se deve em grande parte aos estilos de imagens, combinações
de cores (particularmente a proporção de verde para preto), à
sensação sutil e calma das interações e às opções de tipografia.8

O ambiente de intimidade no Spotify é o resultado de uma combinação de

padrões de percepção, como interações sutis, imagens suaves e toques de cor.

Por outro lado, o caráter lúdico, criativo, abertamente entusiasmado

e levemente excêntrico da Smashing Magazine é transmitido por
meio de um conjunto diferente de padrões – desde a paleta de cores
e ilustrações ousadas até os mínimos detalhes, como um leve
ângulo em alguns dos elementos da interface.

8 A visão do Spotify, “A música certa para cada momento”, e seu princípio

de design “emotivo” estão alinhados com a sensação criada por meio de
padrões de percepção.
Machine Translated by Google

Padrões Perceptivos 85

O caráter da nova Smashing Magazine é transmitido por meio de uma variedade

de padrões de percepção – desde tratamentos tipográficos até o ângulo lúdico
das imagens e ícones.

Os padrões perceptivos expressam a marca através da interface

e ajudam a torná-la memorável. Observe as imagens da
próxima página: você consegue reconhecer quais produtos
elas representam?
Machine Translated by Google

86 Capítulo 4

Você consegue reconhecer quais produtos essas duas imagens representam?

Não há muita informação nessas imagens: estilos de tipografia,

algumas formas e cores e alguns ícones. Mas essas dicas visuais
são tão distintas que você ainda pode reconhecer a quais produtos
elas pertencem (Slack e TED).
Ao serem aplicados propositadamente e repetidamente, eles formam
padrões, e é por isso que podemos relembrá-los e associá-los,
mesmo quando aparecem fora de contexto.

A percepção é influenciada não apenas pelos blocos de

construção, como paleta de cores e tipo de letra, mas também
pelas relações entre eles. Não basta usar cabeçalhos e cores nos
módulos de forma consistente. Também devemos estar cientes
das proporções e combinações únicas que fazem o produto parecer
de uma certa maneira. Como as cores se relacionam entre si?
Como as imagens se relacionam com a tipografia?
Como a tipografia se relaciona com o espaçamento?
Machine Translated by Google

Padrões Perceptivos 87

Michael McWatters, arquiteto de UX do TED, compartilhou em

uma entrevista como é importante para a marca TED que a cor
vermelha apareça nas proporções certas: “O vermelho deve ser
usado com moderação e ponderação. Use-o nos lugares errados,
ou muito, e não parecerá mais com o TED.”9

PADRÕES DE PERCEPÇÃO CONECTAM O SISTEMA

Em sistemas modulares, alcançar coerência visual e perfeição

pode ser complicado. Os módulos são criados por pessoas
diferentes para objetivos diferentes. Como os padrões perceptivos
permeiam diferentes partes do sistema, eles conectam as partes.
Quando as conexões são efetivas, os usuários percebem a
unidade que une os módulos.

Veja como Vox e o Guardian aplicam padrões de percepção para

reunir diferentes elementos, integrando-os em um todo coeso. Na
Vox, imagens atraentes sobrepostas com cabeçalhos grandes,
pares de tipos de letra nítidos e generoso espaço em branco se
juntam para transmitir a sensação de uma revista de estilo de
vida sob a bandeira Vox - é espaçosa, informal e talvez até um
pouco rebelde. Em contraste, tipografia, espaçamento, imagens e
cores no Guardian criam uma sensação mais densa e credível,
mais adequada para uma fonte de jornalismo e opinião sérios.10

9 Entrevista com Michael McWatters, arquiteto UX, TED, agosto de 2016

10 Essas capturas de tela foram tiradas em março de 2017. Algumas
semanas depois, a Vox mudou seu design para uma sensação mais densa
de jornal, para parecer mais “credível e inteligente .” Veja http://smashed.by/behindvox
Machine Translated by Google

88 Capítulo 4

As conexões podem ser feitas não apenas entre os módulos, mas

também em diferentes plataformas e contextos. Os padrões
específicos da plataforma, como o design de materiais, têm uma
visão bastante confiável sobre como os padrões devem ser projetados e construídos.
Quando as empresas seguem estritamente as convenções da
plataforma nativa, elas dependem muito de padrões de percepção para
fazer o produto parecer parte da mesma marca.

Às vezes, são as menores coisas que podem ajudar a estabelecer

uma conexão. Embora existam diferenças entre os aplicativos do
Twitter para plataformas web, nativas e de terceiros, pequenos
detalhes como a interação “Curtir” do coração ajudam a propagar a
linguagem padrão do Twitter.
Machine Translated by Google

Padrões Perceptivos 89

Uma animação do coração do Twitter, lançada em 2015 no Twitter para

iOS, web, Android, TweetDeck, Twitter para Windows 10 e outras plataformas.

Explorando padrões de percepção

Se os módulos funcionais refletem o que os usuários desejam e

precisam, os padrões perceptivos se concentram no que eles

sentem ou fazem intuitivamente. Em vez de virem de comportamentos
e ações do usuário, eles são influenciados pela personalidade ou
ambiente que um produto se esforça para projetar.

Em Projetando para Emoção, Aarron Walter sugere como, de maneira

simples, as equipes podem capturar as principais qualidades de
personalidade criando uma “persona de design”, que incorpora os
traços que desejam incluir em sua marca. Walter recomenda basear
uma persona em uma imagem real de uma pessoa, para torná-la
menos abstrata. Se isso for difícil, às vezes acho útil pensar em um

lugar e seu ambiente, em vez dos traços de personalidade de alguém.

Por exemplo, qual é o ambiente que se adapta à escrita focada em
oposição à conversa social descontraída?
Machine Translated by Google

90 Capítulo 4

Quer você use uma pessoa ou um lugar como ponto de partida, o objetivo
é chegar a alguns (Walter recomenda cerca de cinco a sete)
características que melhor descrevam sua marca, juntamente com
as características a serem evitadas. Para MailChimp, essas características
incluem “Divertido, mas não infantil. Engraçado, mas não pateta.
Poderoso, mas não complicado. Hip, mas não alienante. Informal, mas não desleixado.”11

As equipes podem identificar maneiras de dar vida a essas

características por meio da interface: o tom de voz, visualmente
e de outras maneiras, como interações e sons. Para o MailChimp,
alguns dos padrões de percepção visual (ou um “léxico visual”, como
Walter se refere a ele) incluíam uma paleta de cores brilhante, mas
ligeiramente dessaturada, tipografia simples sem serifa e elementos de
interface plana com texturas suaves e sutis em alguns lugares, para
aquecer o espaço.

Aqui estão algumas das técnicas de design populares que podem

ajudar a explorar padrões de percepção.

11 Designing for Emotion por Aaron Walter (veja também “Personality

in Design” http://smashed.by/personality
Machine Translated by Google

Padrões Perceptivos 91

MUDANÇAS

Mood boards são uma ótima ferramenta para explorar diferentes temas visuais.

Eles podem ser criados digitalmente (Pinterest12 é uma ferramenta popular

para a criação de moodboards digitais) ou montados fisicamente em um

quadro grande, usando recortes de revistas e outros materiais impressos.

Algumas pessoas usam painéis de humor para pesquisar tendências

atuais ou reunir ideias, enquanto outras os geram para descobrir
como sua marca pode parecer. Os painéis de humor podem ser
amplos ou podem se concentrar em explorar partes específicas da
marca, como cores ou tipografia.

Um exemplo de moodboard que explora cores e gradientes.

12 https://pt.pinterest.com
Machine Translated by Google

92 Capítulo 4

TELHAS DE ESTILO

Uma vez definida a direção geral da marca, os blocos de estilo podem ser úteis

para explorar diversas variações com mais detalhes. O conceito de ladrilhos de

estilo foi introduzido por Samantha Warren, 13 que os descreve como “uma entrega

de design que consiste em fontes, cores e elementos de interface que comunicam

a essência de uma marca visual para a web.”14

The Washington Examiner 2012 Campaign Site (Imagem cortesia de

Samantha Warren: http://styletil.es/)

Como os painéis de humor, os blocos de estilo podem fornecer pontos de discussão

valiosos com usuários e partes interessadas e avaliar suas reações iniciais em relação

a direções de design específicas. Comparar e contrastar ladrilhos de estilo entre si pode

ajudá-lo a escolher uma direção em detrimento da outra.

13 http://samanthatoy.com 14

http://styletil.es/
Machine Translated by Google

Padrões Perceptivos 93

COLAGENS DE ELEMENTOS

Riffing em ladrilhos de estilo, Dan Mall15 sugeriu a ideia de uma colagem de

elementos: uma montagem de peças de interface que exploram como o branding funciona

na interface. Como uma entrega de design, eles podem parecer mais concretos e

tangíveis do que os ladrilhos de estilo; ainda colagens de elementos não vêm com

tantas expectativas quanto maquetes visuais completas. As colagens de elementos

exploram não apenas a direção geral da marca, mas também como a marca é expressa

por meio da interface.

Colagem de elementos para RIF. (Imagem cortesia de http://danielmall.com)

15 http://danmall.me
Machine Translated by Google

94 Capítulo 4

As diferenças entre essas técnicas nem sempre são óbvias e as pessoas

as usam de forma intercambiável. Para mim, a distinção reside na sua relativa

fidelidade. Os moodboards são mais soltos e abertos; eles combinam

materiais existentes de várias fontes para criar uma certa sensação visual.

Ladrilhos de estilo e colagens de elementos são mais focados em um produto

específico e na aplicação prática de padrões na interface. As colagens de

elementos fornecem o mais alto nível de fidelidade e podem ser usadas

como ponto de partida para a transição para composições completas.

Iteração e refinamento

O processo de evolução dos estilos continua quando eles são integrados ao

produto. Experimentar a marca em um cenário mais realista da interface, com

módulos e interações, muitas vezes resulta em refinamento dos padrões

perceptivos e funcionais. Este é tipicamente um processo iterativo, onde os

padrões influenciam uns aos outros, até que uma linguagem de design

comece a tomar forma.

Vamos dar uma olhada em como os estilos do FutureLearn foram desenvolvidos.

A imagem abaixo mostra as explorações iniciais de Wolff Olins16 para a

marca FutureLearn. Embora eles capturem um pouco da personalidade que o

FutureLearn estava tentando projetar (mini mal, ousado, brilhante, positivo,

comemorativo), há uma diferença entre a direção inicial e como ela evoluiu ao

longo do tempo.

16 http://www.wolffolins.com
Machine Translated by Google

Padrões Perceptivos 95

Explorações iniciais de marca para FutureLearn.

Aqui está como os principais padrões de percepção pareciam alguns

meses depois, depois que os recursos visuais foram passados para a equipe
de design interna da FutureLearn:
Machine Translated by Google

96 Capítulo 4

Colagem de elementos para FutureLearn.

Ao aplicá-los ao contexto real em que iriam viver, os

padrões tiveram que se tornar mais fundamentados, mais
específicos e mais práticos. Veja como a iconografia do
FutureLearn evoluiu de conceitos iniciais para os designs
que você pode ver no site hoje:
Machine Translated by Google

Padrões Perceptivos 97

Desenhos iniciais de ícones por Wolff Olins (à esquerda) e como eles foram desenvolvidos pela

equipe de design do FutureLearn. As lacunas nos ícones significam que um processo de aprendizagem

nunca está completo.

Na fase conceitual do desenvolvimento da marca, era

importante ser amplo e grande, e não se preocupar com cada
detalhe. Mas quando começamos a aplicar os conceitos, eles tiveram
que ser refinados, para que se sentissem adequados ao novo
ambiente que ocupavam. O foco mudou de uma exploração aberta
para refinamento e consistência.

Nesta fase o desafio é continuar evoluindo a marca, mantendo os

padrões consistentes. Como observou Lucy Blackwell, diretora
criativa da FutureLearn: “Quando você está totalmente focado
na consistência, algumas das sutilezas importantes do que faz um
produto parecer de uma certa maneira podem ser perdidas”.
Machine Translated by Google

98 Capítulo 4

EQUILÍBRIO DA MARCA COM CONSISTÊNCIA

Assim como introduzir muitas exceções pode enfraquecer

uma marca, muito foco na consistência também pode sufocá-la.
Paradoxalmente, tornar o design perfeitamente consistente não
garante que ele estará “na marca”. Às vezes pode ter o efeito
oposto – há uma linha tênue entre consistência e uniformidade.

Com sete designers trabalhando em vários fluxos, na Future Learn

tivemos que configurar processos que nos permitissem focar na
reutilização e utilidade. Mas em algumas áreas do site nos
vimos seguindo-os muito de perto, às vezes à custa do
enfraquecimento da marca. Veja como a página de cursos
mudou ao longo do tempo:

Página de cursos FutureLearn em 2015 e final de 2016

Machine Translated by Google

Padrões Perceptivos 99

Fazia sentido deixar o projeto mais prático, clean e organizado. Também foi

uma mudança positiva para SEO e métricas e foi mais consistente com outras

páginas do site. Mas, ao mesmo tempo, sentimos que, no processo, parte da

distinção visual presente no início foi perdida. Embora tenhamos aceitado esta

mudança em algumas áreas do site, em outras – particularmente em campanhas

de branded marketing – começamos a experimentar mais, na tentativa de

fazer uma afirmação de marca mais forte.

Se um sistema de design prioriza apenas a consistência perfeita, ele pode

se tornar genérico e rígido. A evolução dos padrões perceptivos requer espaço

fora dos limites do sistema, e os designers devem ser ativamente encorajados

a explorar. Um bom sistema de design atinge um equilíbrio entre consistência

e expressão criativa da marca.

UMA NOTA SOBRE MOMENTOS DE ASSINATURA

Os padrões perceptivos podem ser concentrados nos mínimos detalhes.

Em seu livro Microinterações, 17 Dan Saffer cunhou o termo “momentos de

assinatura” – pequenas interações que se tornam diferenciadores do

produto, como “uma elegante animação de 'carregamento' ou um som cativante

('Você recebeu um e-mail!')”. Os momentos marcantes são especialmente

poderosos quando têm significado ou uma história por trás deles. Por exemplo,

o sutil efeito cascata no botão play do TED foi inspirado na icônica animação

drop das introduções de seus vídeos.

17 http://smashed.by/microinteraction
Machine Translated by Google

100 Capítulo 4

A animação drop do TED das introduções de seus vídeos espelhada no efeito cascata no
botão de reprodução do vídeo.

Em produtos digitais, os momentos de assinatura nem sempre são vistos

como um requisito, e algumas equipes lutam para priorizá-los.18 Mas

são os pequenos detalhes que podem adicionar um valor adicional

camada de profundidade e significado para a experiência. Em nossos

esforços para sistematizar e estruturar o design, é importante estar ciente

dos detalhes que fazem algo parecer distinto. Em um sistema de design,

sempre precisa haver espaço para nutrir e desenvolver esses momentos.

EXPERIMENTOS DE PEQUENA ESCALA

Como podemos criar um espaço para explorações criativas? E como

então incorporamos os novos estilos no sistema? Na FutureLearn,

descobrimos que era mais eficaz experimentar primeiro em pequena

escala. Se alguns dos elementos funcionaram

bem, nós os integraríamos gradualmente em outras partes da interface.

18 Para ótimos conselhos práticos sobre como projetar microinterações e integrá-las a

um produto, consulte Microinteractions: Designing with Details por Dan Saffer (http://

microinteractions.com/).
Machine Translated by Google

Padrões Perceptivos 101

Por exemplo, sentimos que o botão de alternância puramente funcional

carecia da sensação de celebração e realização quando os alunos
concluíam uma etapa. Ele foi substituído por um estilo circular, uma
animação saltitante e um ícone de marca aparecendo.

Botão de progresso original (à esquerda) e botão redesenhado no FutureLearn.

Embora o novo botão tenha recebido feedback positivo de nossos

alunos, ele não parecia parte do sistema até que começamos a ecoar o
padrão circular, a animação saltitante e os tiques em outras áreas do
site. Sem essas adições, o elemento parecia desconectado.

Ocasionalmente, experimentamos novos padrões em áreas

promocionais, como a página inicial ou um site de campanha. A
marca da Future Learn costumava empregar principalmente formas quadradas.
Durante o redesenho da página inicial, introduzimos um padrão
triangular. Foi fortalecido quando outros designers começaram a
aplicá-lo em outras áreas, como estilos de imagem e designs de
certificados.
Machine Translated by Google

102 Capítulo 4

Os experimentos iniciais com triângulos na página inicial começaram bastante planos (à

esquerda), mas receberam uma nova reviravolta por outros designers que pegaram o padrão
e o aplicaram em seus projetos.

Ao experimentar os padrões de triângulo, estávamos cientes de

que eles estavam fora da estética quadrada típica do FutureLearn,
mas queríamos experimentá-los para ver o que aconteceria.
Aprendemos mais tarde que, embora os triângulos funcionassem
com a marca, eles tinham que ser usados com moderação e apenas
como um aprimoramento visual nas áreas de descoberta e
marketing do site, não nas páginas de experiência de aprendizado do curso.

Ao explorar novos estilos, experimente-os em uma pequena área do

site. Esteja ciente do que você está fazendo de diferente, dos
padrões que estão fora do sistema e das razões para experimentá-
los. Se funcionarem, dobre-os gradualmente no sistema, aplicando-
os em outras áreas do site. Esteja consciente do papel que eles
desempenham. Para o FutureLearn, os triângulos são usados para
criar um efeito dinâmico; os círculos são usados como uma
garantia positiva de progresso, geralmente em combinação com um carrapato.
Machine Translated by Google

Padrões Perceptivos 103

BALANCEANDO A MARCA COM OS REQUISITOS DE NEGÓCIOS

Como os padrões de percepção às vezes são vistos apenas como

estilo ou decoração, alterá-los pode ser menos controverso do
que, digamos, atualizar o fluxo de uma interação. Como resultado,
requisitos de negócios ad hoc podem levar à introdução de
elementos que não se encaixam confortavelmente com a marca.
Por exemplo, queríamos que nossos alunos soubessem quando
novos cursos estavam começando, então adicionamos banners
amarelos às imagens do curso.

Banner “Apenas iniciado” no FutureLearn para destacar os cursos

iniciados recentemente.
Machine Translated by Google

104 Capítulo 4

Mesmo que o banner não estivesse perfeitamente na marca, não

foi um problema, já que apenas alguns cursos estavam
acontecendo na época. O que não sabíamos era quantos outros
cursos começariam dentro de alguns meses. Quando isso
aconteceu, o equilíbrio do módulo do curso passou de um
destaque para um pouco extravagante e voltado para vendas,
uma sensação que tentamos evitar na marca FutureLearn.
Novamente, como isso era visto como parte do estilo, era difícil
priorizar e levar muito tempo para resolver.

Não importa o quanto protegemos a marca, essas coisas vão

acontecer – novos requisitos exigem padrões personalizados e
ajustes únicos. Se não estivermos conscientes delas, tais
exceções podem diluir ou enfraquecer a marca.

Padrões de assinatura: um exercício de equipe

Às vezes, mesmo uma pequena mudança pode alterar a

percepção. No FutureLearn, uma vez quase substituímos as
formas quadradas no módulo de progresso do curso por círculos,
antes de percebermos que isso mudaria completamente a
sensação da interface. Para controlar como algo se sente,
você precisa entender os padrões exatos que o influenciam.

Em sua equipe, tente executar um exercício rápido. Peça a

cada pessoa para anotar os padrões de percepção mais
distintos para o seu produto. Incentive as pessoas a olharem além do
Machine Translated by Google

Padrões Perceptivos 105

blocos de construção, como paleta de cores e tipo de letra, e, em vez

disso, pense em princípios, combinações e tratamentos de alto nível

específicos para sua marca. Pense não apenas nos elementos, mas no

significado por trás deles – as imagens que retratam e as histórias que

contam. Na interface do Future Learn, alguns desses padrões são:

• Tom de voz positivo e encorajador

• Paleta de cores predominantemente branca com detalhes em rosa

• Espaço em branco generoso

• Tamanho de tipo geralmente grande com foco na legibilidade

• Tipografia de alto contraste com tamanho proporcionalmente grande

títulos

• Gradiente vibrante de rosa para azul

• Interações sutis de passagem de rosa para azul

• 1px traços cinza claro

• Ícones quadrados de 1px com uma “quebra”

• Principalmente formas quadradas e ocasionalmente circulares,

triângulos em áreas promocionais

Machine Translated by Google

106 Capítulo 4

Como o exercício de encontrar temas compartilhados em seus

princípios de design descritos no segundo capítulo, comparar os
pensamentos de sua equipe pode trazer à tona diferentes
maneiras pelas quais você percebe sua marca. As qualidades
podem ser vagas e indistintas no início, mas são uma ótima base
para discussões. Alcançar uma compreensão compartilhada dos
padrões perceptivos mais distintos é um ponto de partida útil
para seu trabalho futuro em sistematizá-los.19

Padrões e princípios são uma parte importante de um sistema de

design. Mas, claro, se você trabalha em equipe, eles não são
suficientes. Uma seleção de palavras e regras não faz um
idioma. Ela só começa a se tornar uma linguagem quando você
atribui significado a essas palavras e outras pessoas começam
a compartilhar esse significado.

19 No capítulo 9, falaremos sobre a realização de um inventário de

interface sobre padrões perceptivos e como integrá-los ao sistema.
Machine Translated by Google

Parte I 107

capítulo 5

Idioma Compartilhado
Este capítulo descreve como estabelecer uma linguagem compartilhada, que

permite que um grupo de pessoas crie e use padrões de forma coesa para um

determinado produto.

têm seus próprios objetivos específicos a cumprir e

Produtos digitais
prazossão construídos
pessoais por equipes.
a cumprir. Todos irão
Inevitavelmente, isso significa
que padrões desleixados serão adicionados ou que os módulos
serão duplicados ou mal utilizados.

Podemos garantir que um produto ainda pareça coeso e completo,

mesmo quando muitas pessoas trabalham nele? Sim, se tivermos um
entendimento compartilhado na equipe sobre o que é nosso sistema
de design e como ele funciona. Isso significa que seguimos os
mesmos princípios orientadores, que nossa visão da marca se
alinha, que temos uma abordagem compartilhada para design e
arquitetura de front-end e que conhecemos nossos padrões
mais eficazes e o que os faz funcionar. Em outras palavras, criar
sistemas de design coesos requer uma linguagem compartilhada.

Em The Timeless Way of Building, Christopher Alexander

introduziu a ideia de uma “linguagem padrão” como uma
forma de criar edifícios que dão a sensação de vida e um prazer de
estar. No centro de seu livro está a observação de que muitos
grandes edifícios (Chartres , a Alhambra, a Cúpula de Brunelleschi)
não foram criados por um arquiteto mestre trabalhando laboriosamente no
Machine Translated by Google

108 capítulo 5

prancheta de desenho. Eles foram construídos por grupos de pessoas que

tinham um conhecimento profundo e compartilhado dos padrões de
projeto que eram capazes de dar vida a esses edifícios.

…grupos de pessoas podem conceber seus prédios públicos maiores, no

“ terreno, seguindo um padrão de linguagem comum, quase como se

tivessem uma única mente.”

— Christopher Alexander, The Timeless Way of Building

Uma ideia semelhante pode ser aplicada à criação de produtos digitais.

A linguagem pode capacitar as pessoas a criar produtos que pareçam
completos, mesmo quando vários colaboradores trabalham em partes
diferentes. Naturalmente, algumas pessoas estarão mais profundamente
imersas nisso do que outras, mas a ideia é que todos - designers,
desenvolvedores, pesquisadores, gerentes de produto, produtores de
conteúdo - devam ter algum grau de fluência e que a fluência melhore
com o tempo, conforme a equipe continua a aprender, usar e evoluir o
idioma.

Mas o que Alexander não menciona em seu livro é exatamente quanto

trabalho a abordagem de linguagem padrão leva para alcançar. As
catedrais medievais levaram décadas para serem construídas, e os

pedreiros passaram por anos de aprendizado para aprender a linguagem

dos padrões. Da mesma forma, pode exigir muito esforço estabelecer
uma linguagem compartilhada em uma equipe de produto e fazê-la
funcionar.
Machine Translated by Google

Idioma Compartilhado 109

Mas isso pode ser feito, mesmo em equipes maiores. Podemos começar
prestando atenção às decisões linguísticas que tomamos.

Padrões de nomenclatura

James Britton, um influente educador britânico, explica em Language

and Learning6 que ao atribuir nomes aos objetos, começamos a “trazê-
los à existência”, assim como as crianças usam a linguagem “para
tirar do nada” o mundo ao seu redor. Da mesma forma, se um objeto de
interface não tiver um nome próprio — um nome que seja conhecido e
faça sentido para as pessoas de sua equipe — então ele realmente
não existe em seu sistema como uma unidade acionável com a qual
trabalhar. Depois de nomear um objeto, você molda seu futuro; se
você lhe der um nome de apresentação, seu futuro será limitado porque
será confinado por seu estilo: um botão “rosa” só pode ser rosa.

Um nome bem escolhido pode se tornar uma ferramenta poderosa para

moldar seu sistema de design, pois os nomes afetam como os padrões
serão usados. E, claro, não se trata apenas dos nomes em si, mas
de uma abordagem compartilhada para nomear dentro de sua equipe.

6 http://smashed.by/languagelearning
Machine Translated by Google

110 capítulo 5

APRENDER O QUE FAZ UM BOM NOME PARA

SEU TIME

Um “bom nome” significa coisas diferentes para equipes diferentes.

Às vezes, é preciso experimentar para encontrar uma abordagem que

funcione. A equipe da Sipgate, 7 , uma empresa alemã de telecomunicações,

usou nomes de apresentação inicialmente. Mas eles descobriram que nomes

como “ladrilho proeminente” ou “círculo com

a dot” não foram eficazes e acabaram contribuindo para a fragmentação

de seu sistema.

O principal problema com a nomenclatura baseada em apresentação é que

“ você não consegue encontrar o que está procurando quando o número de

padrões em sua biblioteca aumenta. Também não fornece orientação ou

inspiração sobre onde usar um padrão específico. As pessoas começam a

construir cada vez mais novos padrões em vez de reutilizar e aprimorar os

existentes, o que torna o problema cada vez pior.”8

—Tobias Ritterbach, proprietário da experiência, Sipgate

Na Atlassian,9 os componentes são nomeados a partir da perspectiva do

usuário. Por exemplo, “Lozenges” e “Inline Edit” receberam seus nomes

porque é assim que seus usuários se referem a eles.

A princípio foi visto como polêmico e uma sobrecarga para

desenvolvedores. Mas a equipe sentiu que nomear os módulos dessa maneira

permitia que os engenheiros pensassem da perspectiva do usuário e

sempre tivessem os usuários em mente.

7 https://www.sipgate.de 8

Entrevista com Tobias Ritterbach, exp. proprietário, Sipgate, agosto de 2016 9 https://

www.atlassian.com/
Machine Translated by Google

Idioma Compartilhado 111

É uma sobrecarga para os engenheiros, mas, até certo ponto, estamos

“ gerando empatia com o usuário.” 10

— Jurgen Spangl, chefe de design, Atlassian

Na FutureLearn, 11 concordamos que um bom nome significa que é focado,

memorável e incorpora o propósito do módulo que representa. É o nome com

o qual as pessoas se relacionam e querem usar.

Como outras equipes, tentamos maneiras diferentes de nomear as coisas - de

mais precisos e descritivos, como “botão de alternância de progresso”, a

divertidos, como “Whisperbox”.

Tendo observado como a equipe usou os módulos, notamos que os nomes mais

eficazes em nosso sistema tinham uma ou mais dessas qualidades: eram

metafóricos, tinham personalidade e comunicavam o propósito do padrão.

BONS NOMES SÃO BASEADOS EM METÁFORAS

Uma metáfora de outras indústrias, como arquitetura ou publicação, pode

inspirar um bom nome. Também pode tornar o nome mais memorável para

a equipe, pois eles terão uma associação – algo para se imaginar – quando

pensarem naquele módulo.

10 Entrevista com Jurgen Spangl, chefe de design, Atlassian, novembro de 2016

11 https://www.futurelearn.com
Machine Translated by Google

112 capítulo 5

Os suportes na arquitetura são elementos que sustentam e

fortalecem uma estrutura; por exemplo, ajudando a sustentar um
telhado. Da mesma forma, na interface do FutureLearn, os
“colchetes” também suportam o conteúdo principal, apresentando
pequenos pedaços de informações adicionais.

Os “colchetes” dão suporte ao conteúdo principal da página, fornecendo

informações adicionais.

Outro exemplo é o “Spotlight”: um elemento promocional criado

para chamar a atenção para um conteúdo específico.

“Spotlight” é um elemento promocional projetado para chamar a atenção para um

conteúdo específico.
Machine Translated by Google

Idioma Compartilhado 113

“Bracket” e “Spotlight” são exemplos de nomes eficazes – as pessoas

da equipe os conhecem e os usam. Por outro lado, nomes que não
têm uma metáfora visual associada a eles acabaram sendo
menos eficazes.

Por exemplo, quase ninguém consegue se lembrar do que é um “botão

de alternância de progresso” ou como é um “botão de opção binário”.

Botão de alternância de progresso.

Botão de opção binário.

Machine Translated by Google

114 capítulo 5

O problema é que nem o “botão de alternância de progresso” nem o

“botão de opção binário” criam uma imagem em sua mente que facilita
a lembrança desses padrões. Mesmo que algumas pessoas
preferissem um nome mais preciso e descritivo como “botão de opção
binário”, o fato é que ninguém se lembrava dele. E se ninguém se lembrar,
há uma grande chance de as pessoas recriarem o padrão em vez de
reutilizá-lo.

BONS NOMES TÊM PERSONALIDADE

Alguns nomes para botões funcionaram muito melhor. Há

pequenos botões de função secundários que são usados em toda a

interface do FutureLearn. Eles são chamados de “Minions”.

Botões dos lacaios.12

E, claro, onde há lacaios também deve haver um chefe. O “Boss” do

FutureLearn é um botão grande, geralmente a chamada principal para

a ação em uma página.

12 Copyright Minions e Gru: Meu Malvado Favorito, ©Universal Pictures.

Machine Translated by Google

Idioma Compartilhado 115

botão chefe.

Também é divertido ver os nomes das classes .minion e .boss usados

em CSS.13

Nomes de classe .minion e .boss em CSS

13 Na interface do FutureLearn existem mais estilos de botão; os

exemplos mostrados aqui são alguns dos mais eficazes.
Machine Translated by Google

116 capítulo 5

Nomes com personalidade são mais fáceis de lembrar. Eles não

apenas permanecem, mas também inspiram outros nomes e podem até
estabelecer uma família de nomes. Um módulo “Whisperbox” no
FutureLearn foi projetado para ser promocional sem ser muito
perturbador. Quando outra equipe precisava de algo mais
proeminente, eles criaram um “Boombox”. “Whis perbox” e “Boombox”
são um par, o que ajuda a tornar o vocabulário mais conectado e
memorável.

BONS NOMES COMUNICAM O PROPÓSITO

Os melhores nomes oferecem orientação ou inspiração para onde usar

um padrão específico. É fácil lembrar que pode haver muitos lacaios
(em uma página), mas apenas um chefe. As pessoas gostam de usá-
los e não precisamos impor diretrizes porque elas vêm com o nome.
Mesmo alguns nomes como esse podem ajudar a tornar seu
vocabulário mais atraente, e a equipe terá mais chances de usá-lo e
contribuir com ele.

Os nomes nos permitem não apenas identificar e distinguir padrões,

mas também descrever para que servem. Nomear padrões é
especialmente difícil quando não entendemos completamente sua
finalidade. Se você está lutando para encontrar um nome, é provável
que algo não esteja certo. Talvez o propósito de um módulo não seja claro
ou se sobreponha ao de outro; de qualquer forma, é uma bandeira
vermelha que você deve notar.

Um dos módulos da nova interface do Eurostar foi a introdução

produzido especificamente para melhorar o SEO. Durante uma biblioteca de padrões

Machine Translated by Google

Idioma Compartilhado 117

workshop, a equipe lutou para encontrar um nome para ele: “É um

módulo de SEO! Não tem função. Não há

significado para sua existência!”

Um módulo introduzido na interface do Eurostar especificamente para melhorar o SEO.

O nome que deram no final foi “le blurb”. E o objetivo da sinopse era algo
como: fornecer informações potencialmente interessantes com o objetivo
de melhorar o SEO.

Abordar decisões difíceis de nomeação com humor pode ajudar. E,

no entanto, quase nunca é difícil sem motivo. Em algum momento
temos que nos perguntar: o que há de errado aqui?
Por que não podemos inventar um nome?
Machine Translated by Google

118 capítulo 5

NOMEANDO COLABORATIVAMENTE

Podemos entender melhor o propósito de um padrão se o processo

de nomenclatura em nossa equipe for colaborativo. Isso não significa
envolver toda a empresa: não se trata de número de pessoas, mas de
diversidade de perspectivas. Muitas vezes, a responsabilidade de
nomear módulos recai sobre os desenvolvedores quando eles escrevem
CSS, mas pode ser facilitado se o processo de nomeação for ampliado
para incluir mais pessoas da equipe.

Pessoas de diferentes disciplinas visualizarão um módulo de maneira

ligeiramente diferente. Alguém com experiência em conteúdo pode vê-
lo de maneira genérica porque precisa que seja flexível. Os
desenvolvedores podem ver detalhes técnicos, porque estão cientes de
como o módulo é construído — eles saberão que algo é um botão de
opção, mesmo que não pareça um botão de opção. Designers e
pesquisadores de usuários podem estar mais familiarizados com o
comportamento original que um padrão deve suportar. Envolver
pessoas com diferentes pontos de vista pode ajudar a tomar uma decisão
mais informada e objetiva sobre o propósito de um módulo. E uma vez
que você conhece o propósito, criar um nome é mais fácil.

A nomenclatura colaborativa também ajudará os membros da equipe

que não projetaram ou construíram os padrões a entender seu uso.
Envolver a equipe de conteúdo, por exemplo, pode ajudar a envolvê-
los como participantes desse processo, em vez de simplesmente
receber uma pilha de caixas para preencher.
Machine Translated by Google

Idioma Compartilhado 119

CRIE UM CANAL DEDICADO

Uma das maneiras mais fáceis de colaborar na nomeação é

configurar um espaço dedicado em seu aplicativo de comunicação
diário favorito (como um canal Slack de “Sistema de design”).
Compartilhe um modelo de design ou um módulo existente com a
equipe e descreva brevemente para que serve e o que o
distingue. Você pode dizer: “Isso normalmente representa
informações adicionais ou de suporte divididas em partes
menores”. Pode ser útil compartilhar os nomes que você criou até agora.

”Nuggets of joy” poderia ser um ótimo nome para um módulo, mas decidimos
escolher “Brackets” neste caso.
Machine Translated by Google

120 capítulo 5

Algumas pessoas participarão da discussão, farão perguntas e

sugerirão suas ideias. Algumas sugestões não serão muito corretas,
outras serão bem-humoradas ou inesperadas. Tudo bem — o objetivo
é gerar discussão. Falar sobre as decisões de design e o propósito dos
padrões ajuda a fortalecer e desenvolver a linguagem compartilhada.14
Se você criar um bom nome, lembre-se de elogiar as pessoas e
celebrá-lo. São esses momentos que ajudam a unir a equipe e tornam
a nomeação colaborativa parte de sua cultura.

TESTE SUA LINGUAGEM COM OS USUÁRIOS

Você pode querer ir ainda mais longe e envolver seus usuários nas
decisões de idioma. Tente testar módulos em cartões de papel. O
teste em cartões difere de outras técnicas de pesquisa do usuário,
que usam tarefas lineares e cenários para os usuários trabalharem.
Aqui, os participantes podem pegar os cartões, movê-los, discutir e
rabiscar neles, tornando-se ativamente parte do processo de design.
Isso pode lhe dar a chance de testar suas opções de idioma e garantir
que os módulos que você definiu estejam alinhados com os potenciais
comportamentos e modelos mentais de seus usuários. Em algumas
ocasiões, você pode descobrir que suas “guias proeminentes” são
completamente ignoradas ou que seu “controle do assistente” é
interpretado como um conjunto de guias opcionais.

14 Além disso, ao compartilhar um novo design, alguém pode perceber

que já existe um módulo semelhante e você pode evitar uma duplicação.
Machine Translated by Google

Idioma Compartilhado 121

Pesquisa de usuários com módulos recortados.

Por mais útil que seja envolver membros da equipe e usuários no

processo de nomeação, é importante manter o foco e não ficar

preso em um ciclo de discussões intermináveis. Às vezes, muita
entrada pode levar a nomes diluídos ou confusos. Para evitar isso,
no FutureLearn, aceitaríamos as sugestões, mas sempre deixaríamos
a decisão final para a dupla designer-desenvolvedor que trabalhou
em um módulo.

Imergindo sua equipe no

Linguagem de design

No entanto, nomear coisas juntas não é suficiente para estabelecer

uma linguagem compartilhada. Toda a equipe deve estar imersa
nisso. Torne-o onipresente. Se você criar as condições certas,
mesmo as pessoas que inicialmente não estão interessadas
aprenderão passivamente, por meio da exposição. Aqui estão
algumas dicas para criar tais condições.
Machine Translated by Google

122 capítulo 5

DEIXE OS PADRÕES DE DESIGN VISÍVEIS

Configure um espaço dedicado em uma parede para representar visualmente

seu sistema de design: uma parede padrão.

Uma parede padrão no escritório da FutureLearn.

Uma parede padrão oferece uma visão panorâmica do seu sistema.

Isso o torna um ótimo espaço para nomear conversas, pois você pode se

referir a coisas bem à sua frente - sem necessidade de pesquisar em todo o site

ou lembrar como elas são. Ter um espaço dedicado também torna seu sistema

mais aberto: as pessoas se sentem bem-vindas para participar, fazer perguntas

e contribuir.

Você não precisa de muito espaço para criar uma parede padrão, e nem

todas as telas do seu produto precisam aparecer lá.

Machine Translated by Google

Idioma Compartilhado 123

Comece com aqueles que são mais cruciais ou mais usados

freqüentemente. Imprima-os em folhas A3, coloque-os na parede

e rotule os padrões mais proeminentes. Pode ser útil posicionar as
impressões na ordem que segue suas jornadas de usuário mais
comuns; por exemplo: telas de descoberta, jornada de login,
comparação de produtos, realização de uma compra.

Você pode ser criativo ao tornar seus padrões de design visíveis.

A equipe da MOO, uma empresa de impressão e design digital,
imprimiu algumas das páginas de seu guia de estilo em cartões
postais da MOO como folhas úteis que os funcionários podem
pegar como referência.

Alguns postais do guia de estilo da MOO.

Machine Translated by Google

124 capítulo 5

Lembretes automatizados também podem ser úteis. Leva apenas alguns

minutos para configurar um bot do Slack que ocasionalmente lembrará
sua equipe de como são chamados os diferentes elementos.15

Um bot do Slack lembrando à equipe como é o “Signpost”.

REFERIR-SE AOS OBJETOS PELOS SEUS NOMES

Como acontece com qualquer idioma, você precisa usá-lo para mantê-lo
vivo. Precisa fazer parte das conversas do dia-a-dia. É por isso que é
importante fazer um esforço consciente para continuar se referindo aos
padrões pelos nomes que você concordou - não importa o quão bizarro
isso possa parecer.

15 Algumas ferramentas, como Brand.ai e https://frontify.com, também tem

integrações com Slack para canais de ping quando uma biblioteca de padrões
é atualizada. Mais sobre ferramentas no capítulo 10.
Machine Translated by Google

Idioma Compartilhado 125

“Whisperbox” é um módulo promocional do FutureLearn. Como o

nome sugere, é para ser sutil e não chamar muita atenção para si
mesmo.

“Whisperbox”: um módulo promocional sutil no FutureLearn.

Até darmos um nome próprio, continuávamos nos referindo a

ele como “aquela coisa com as linhas e um ícone no meio”.
Era fácil chamá-lo assim. Foi preciso mais esforço para começar
a chamá-lo de “Whisperbox”. Mas até que você comece a chamar
um padrão por seu nome real, ele não existe em seu sistema como
um bloco de ação sólido capaz de trabalhar. E toda vez que
você usa o nome, você fortalece o elemento que invoca e
desenvolve sua linguagem de design.

Fazer isso requer uma certa autodisciplina na equipe. Pode ser

difícil, especialmente se você não estiver acostumado (imagine
que você se juntou a uma equipe onde todos falam sobre
lacaios, chefes e caixas de sussurros!). Mas logo esses
nomes se tornam parte de uma conversa normal e as pessoas se
acostumam. O objetivo é chegar ao ponto em que todos saibam
exatamente do que você está falando apenas chamando um nome.
Machine Translated by Google

126 capítulo 5

Todos conhecem o propósito da navegação de sequência e se referem a

ela como “Navegação de sequência”, e não “Bolhas extravagantes” ou

“Controle de assistente”. Naturalmente, isso também significa que os

nomes no arquivo de design e no código correspondem.

FAÇA PARTE DO PROCESSO DE INDUÇÃO

É mais fácil apresentar novos funcionários ao seu sistema de design

se isso fizer parte do seu processo de indução. Os novos membros da

equipe da Atlassian são conduzidos pela história de como as diretrizes

foram criadas para que possam entender por que e como as decisões
foram tomadas. No FutureLearn, criamos um curso on-line interno de

indução, que inclui um capítulo dedicado à biblioteca de padrões, com

questionários e pequenas lições.

Um capítulo sobre a biblioteca de padrões no curso de indução online do FutureLearn.

Machine Translated by Google

Idioma Compartilhado 127

ORGANIZE RECUPERAÇÕES REGULARES DO SISTEMA DE PROJETO

Todo mundo odeia reuniões. Mas as atualizações do sistema de design

valem a pena se você quiser manter todos na mesma página ao evoluir
seu sistema. É o momento em que todos os designers e desenvolvedores
podem se concentrar totalmente no sistema juntos.

Os encontros podem funcionar com um grupo de cerca de 16 a 20

pessoas e, para grupos maiores, as pessoas podem se revezar para participar.
Eles não precisam demorar muito – meia hora geralmente é
suficiente, se você tiver uma agenda bem estruturada. Inicialmente, você
pode executá-los semanalmente e depois quinzenalmente quando a
equipe encontrar seu ritmo. As equipes podem usar esse tempo para
concordar com os padrões abrangentes, como ícones ou tipografia em todo
o produto. Também é uma boa oportunidade para compartilhar novos
módulos e discutir sua finalidade, uso e quaisquer problemas e dúvidas
que as pessoas possam ter.

INCENTIVAR A COLABORAÇÃO DIVERSA

Tente emparelhar em projetar e construir padrões, tanto quanto

possível. Todos os exercícios descritos nos dois capítulos anteriores
podem ajudar na colaboração e estabelecer uma linguagem
compartilhada entre as disciplinas:

• Criando um mapa padrão

• Realização de um inventário de interface focado em um

padrão específico
Machine Translated by Google

128 capítulo 5

• Estrutura do padrão de desenho

• Concordar com o propósito de um padrão e chegar

com um nome

• Articular os padrões que fazem seu produto parecer de uma certa

maneira

• Realização de experimentos em pequena escala com novos padrões

Em qualquer equipe, haverá pessoas mais fluentes em sua linguagem

de padrões e mais entusiasmadas para trabalhar no sistema, e elas

podem gravitar naturalmente para trabalhar umas com as outras. Mas

tente incentivá-los a trabalhar com todos, para que tenham a

oportunidade de compartilhar seu conhecimento e entusiasmo com

pessoas menos imersas no sistema. Ao espalhar o conhecimento por

toda a organização, um sistema de design se torna mais resiliente.

MANTENHA UM GLOSSÁRIO

Uma das práticas mais eficazes para compartilhar e desenvolver uma

linguagem de design é manter um glossário dos termos que você usa.

Criar e manter um glossário permite que você esteja consciente das

palavras que usa, pois é preciso articular as coisas para escrevê-las. Por

exemplo, na Intercom, uma plataforma de mensagens ao cliente, a equipe

mantém um glossário de termos para garantir que usem “a mesma

linguagem do código ao cliente”.

Machine Translated by Google

Idioma Compartilhado 129

Glossário de intercomunicação16

E, claro, uma biblioteca de padrões atualizada e de fácil

acesso também pode ser um glossário confiável de padrões de
projeto e um ponto de referência para toda a equipe (além de ser
o verdadeiro kit de ferramentas de padrões para projetar e
construir uma interface). .17

16 http://smashed.by/intercom 17
Discutiremos bibliotecas de padrões em detalhes no capítulo 10.
Machine Translated by Google

130 capítulo 5

O valor de um glossário não está apenas na ferramenta que fornece:

está também nas práticas de linguagem que cultiva. Ao estabelecer e
manter um glossário, você adquire o hábito de examinar, discutir e
articular suas decisões linguísticas como uma equipe — você
reconhece que as palavras são importantes.

Nem todas as equipes são igualmente colaborativas e abertas para

discutir princípios e padrões de design todos os dias. Estabelecer
uma linguagem compartilhada requer um certo tipo de cultura de equipe.
Mas também pode funcionar ao contrário – a integração de
processos com foco em linguagem pode levar a uma melhor colaboração.
Três anos atrás, na FutureLearn, não tínhamos uma linguagem de
design compartilhada funcional e não colaborávamos tanto quanto
hoje. Os designers estavam documentando os padrões em um
documento de marca em PDF e os desenvolvedores criaram seu
guia de estilo de front-end. Embora ambos os documentos fossem
úteis para cada uma das disciplinas, eles não forneciam uma base
de linguagem compartilhada para trabalhar. Mas, ao implementar
práticas e processos, gradualmente transformamos a forma como trabalhamos.

Estabelecer uma linguagem compartilhada é sempre um processo

gradual e gradual. Às vezes, será confuso e lento, mas se você
continuar, verá sua linguagem evoluindo e se fortalecendo.
Eventualmente, os efeitos se espalharão dentro de sua equipe, com
outras equipes e com as partes interessadas, à medida que eles
começarem a entender o que você está tentando alcançar e se
juntarem a você nesse processo.
Machine Translated by Google

Resumo 131

Resumo da Parte I
Nesta primeira parte do livro, falamos sobre o estabelecimento de fundamentos

para um sistema de design. Aqui está um resumo dos pontos-chave.

PROPÓSITO

O propósito de um sistema de design é ajudar a atingir o objetivo do produto:

“Cozinhe uma refeição saudável em dez minutos”; “Espalhe as negociações

o mais longe possível”; “A música certa para cada momento.” Tudo em um

sistema – desde como uma equipe opera até o menor padrão – deve ser

otimizado para esse propósito.

PRINCÍPIOS

As equipes escolhem como atingir o objetivo do produto por meio do design. Sua

abordagem e prioridades de design podem ser resumidas em um conjunto

de princípios: “Design para as primeiras impressões”; “Apropriado sobre

consistente”; “Atemporal, não de ponta.”

Quanto mais alinhada a equipe estiver em seus princípios, mais coesos serão

os padrões que eles criam.

PADRÕES

Através da interface pretendemos ajudar as pessoas a atingirem

determinados objetivos e a sentirem-se de determinada forma: aprender uma

nova receita; foco na escrita; sentir-se produtivo; sinta-se inspirado. Nossa

intenção de design é renderizada por meio de padrões de design.

Padrões funcionais suportam comportamentos e ações do usuário:

“selecionar ingredientes”, “escolher uma receita”, “seguir as etapas da receita”, “avaliar uma receita”.
Machine Translated by Google

132 Parte I

Os padrões de percepção se concentram em como um produto deve ser

percebido intuitivamente: “utilitário”, “parecido com jornal”, “abertamente

entusiasmado”. A finalidade dos padrões precisa ser totalmente compreendida pela

equipe. Só então podemos garantir que seja interpretado conforme pretendido por

nossos usuários.

LINGUAGEM COMPARTILHADA

Os padrões devem ser conectados por meio de uma linguagem compartilhada -

um conhecimento profundamente enraizado na equipe sobre como criar e usar

padrões de design para um determinado produto para criar experiências de usuário

eficazes e coerentes. Esse conhecimento é propagado por meio de uma abordagem

de design compartilhada, arquitetura de front-end, visão de marca e práticas diárias,

como nomenclatura colaborativa, emparelhamento interdisciplinar, tornar os

padrões visíveis, conduzir inventários regulares de interface e manter uma biblioteca

de padrões. A linguagem deve ser desenvolvida, fortalecida, iterada e continuamente

testada.

Entendendo como seu sistema funciona

Um sistema de design não é construído da noite para o dia, mas moldado gradualmente,

por meio de nossas práticas diárias. Se você estiver trabalhando em um produto

digital, provavelmente já existe a base do seu sistema. De uma forma ou de outra,

as interfaces são projetadas e construídas e acabam na frente dos usuários. A menos

que esse processo seja totalmente aleatório, você tem um sistema.

Machine Translated by Google

Resumo 133

A questão é: que tipo de sistema é esse? É flexível e adaptável, ou

é projetado para uma finalidade específica? É coeso ou
fragmentado? É fácil de trabalhar ou é demorado? Seu sistema
prospera com liberdade e autonomia ou é estritamente hierárquico?

Para tornar um sistema de design mais eficaz, precisamos saber

como ele funciona, em que consiste, o que o faz funcionar bem e
o que não funciona. Se não tivermos esse conhecimento, os mesmos
problemas continuam ocorrendo (sistematicamente!). Arrumamos
todos os botões e seis meses depois acabamos com botões demais
novamente. Podemos resolver um problema, mas se o mecanismo
que o criou permanecer, o mesmo problema continuará voltando.

Diferentes sistemas de design funcionam de maneiras diferentes.

Sua organização, cultura de equipe, abordagem de design, projeto
e até mesmo o espaço físico em que você se encontra moldarão
seu sistema. Na próxima parte do livro, começaremos examinando as
estruturas subjacentes que influenciam os sistemas de design. Em
seguida, focaremos nas técnicas para estabelecer e manter um sistema
de design, incluindo:

• Planejamento
• Realização de um inventário de interface funcional •
Criação de uma biblioteca de
padrões • Criação, documentação, evolução e manutenção
de padrões de projeto
Machine Translated by Google

134 parte II

Capítulo 6

Parâmetros do seu sistema

Este capítulo apresenta algumas das qualidades que um sistema de design

pode ter e as maneiras pelas quais riscos e desvantagens podem ser gerenciados.

e inconsistências em seus sites de produtos estavam

A equipediluindo
da Sipgate teve e
a marca um problema.
criando Duplicações
trabalho extra desnecessário
para toda a equipe. Eles decidiram resolver o problema
estabelecendo uma biblioteca de padrões. Depois de semanas
de workshops e inventários de interface, os padrões nos sites
de produtos foram padronizados. Alguns meses depois, a equipe
lançou uma nova biblioteca de padrões.

Em algumas empresas, você pode se esforçar para entusiasmar

as pessoas sobre sua biblioteca de padrões. Eles não verão seu
valor, não contribuirão. Este não foi o caso em Sipgate. Todas as
equipes de produto documentaram seus padrões de forma
diligente e eficiente.

Não faltou entusiasmo. Mas, um ano depois, eram tantos

módulos que ficou extremamente difícil encontrar o que
procuravam e entender qual usar. Tornou-se mais fácil
apenas adicionar um novo. Depois de um ano mantendo
uma biblioteca de padrões, seus sites de produtos
ainda estavam cheios de padrões duplicados, embora
completamente documentados.
Machine Translated by Google

Parâmetros do seu sistema 135

Um sistema de design não começa ou termina com a construção de

uma biblioteca de padrões. Existem muitos fatores que moldam
um sistema: a estrutura de sua organização, a cultura de sua equipe,
o tipo de produto em que você está trabalhando e sua abordagem
de design, entre outras coisas.

Para ver como esses fatores funcionam, acho útil caracterizar os

sistemas de design usando três atributos: rigidez das regras,
modularidade das partes e distribuição da organização.

Esses parâmetros não são binários e todas as empresas estão

em algum lugar em cada continuum. Ao olharmos mais de perto

com eles, usaremos exemplos de diferentes empresas para ver as

vantagens e desvantagens de cada direção.
Machine Translated by Google

136 Capítulo 6

Regras: rígidas ou flexíveis

Alguns sistemas são rígidos, outros se beneficiam de uma configuração

mais flexível. Vamos pegar duas equipes como exemplos: Airbnb e
TED.

AIRBNB
O Airbnb tem mais de 2.000 funcionários em todo o mundo e cerca de
60 designers de produtos trabalhando em vários fluxos de trabalho.
O sistema é gerenciado inteiramente por sua equipe de Design
Language System (DLS), que consiste em seis designers e seus
parceiros de engenharia para plataformas web, móveis nativas e React
Native.

O sistema de design do Airbnb é rígido: existem regras e processos

precisos que são rigorosamente seguidos.

Especificações padronizadas

Para minimizar desvios, os módulos no DLS do Airbnb são

especificados com precisão. Por exemplo, os tratamentos tipográficos
são estritamente definidos; há uma grade de oito pixels usada para
espaçamento; as interações são documentadas; as convenções de
nomenclatura são consistentes. Veja como um módulo chamado
“Marquee” é especificado no arquivo mestre do Sketch. Observe que há
dois exemplos de cada um, para mostrar algumas opções disponíveis aos projetistas.
Machine Translated by Google

Parâmetros do seu sistema 137

Módulo “Marquee” no arquivo mestre do Sketch do Airbnb.

O design é totalmente sincronizado com a engenharia

No sistema do Airbnb, design e engenharia são totalmente

sincronizados. Especificamente, isso significa três coisas:

• Os módulos de design no arquivo principal do Sketch têm um

equivalente exato no código e estão sincronizados.

• Os nomes no arquivo Sketch e no código correspondem.

• Todos os módulos são multiplataforma: cada componente

desenhado no arquivo Sketch tem um componente
correspondente que é o mais semelhante possível em iOS,
Android, React Native e bibliotecas responsivas da Web.
Machine Translated by Google

138 Capítulo 6

A sincronização é vista como uma prioridade. A equipe cria ferramentas

personalizadas, como plug-ins do Sketch, para conseguir isso.

Um gateway para todos os recursos DLS.

Processo rigoroso para introdução de novos padrões

A equipe DLS visa fornecer todos os padrões exigidos pelos designers

de produto em toda a empresa. Seu objetivo é reutilizar cerca de 90%
dos módulos existentes, portanto a criação de novos padrões é
relativamente pouco frequente. Há um processo rigoroso para a
introdução de novos componentes:
Machine Translated by Google

Parâmetros do seu sistema 139

1. Um designer envia uma proposta usando um modelo Sketch

com instruções sobre comportamento e regras relacionados.

Eles sugerem um nome adequado e fornecem um exemplo

de como o componente proposto pode ser usado em
contexto.

2. A proposta então vai para a equipe de suporte do produto

via JIRA, junto com o arquivo Sketch. Em muitos casos, a
equipe de suporte descobre que já existe um módulo
semelhante ou que um módulo existente deve ser atualizado.

3. Se a necessidade de um novo módulo for justificada, a

proposta segue para a equipe DLS, que considera o
requisito e decide se o projeto proposto funcionará. Às
vezes eles usam a solução proposta, às vezes a adaptam
ou redesenham, para garantir que ela se encaixe no sistema.

Documentação Detalhada Abrangente

A linguagem de design está documentada no site interno, DLS

Guidelines, gerado a partir do arquivo principal do Sketch. A
equipe de ferramentas do Airbnb criou um processo automatizado
que gera capturas de tela e metadados sobre os componentes
e os publica no site de diretrizes. Desnecessário dizer que a
documentação está totalmente sincronizada com o arquivo Sketch
e o código.
Machine Translated by Google

140 Capítulo 6

O site interno das Diretrizes DLS.

Estas são algumas das práticas que fazem o DLS funcionar bem
como um sistema estrito. No extremo oposto da escala de rigidez
temos empresas com estruturas mais flexíveis. Tais sistemas são
otimizados mais para experimentação e sensibilidade ao contexto. Eles
podem ser eficazes também.

TED

A equipe do TED é pequena, com apenas cinco ou seis pessoas-

chave responsáveis pelas decisões do sistema de design: dois
profissionais de UX e quatro desenvolvedores de front-end. O sistema
do TED é vagamente configurado. A sensação da marca e a utilidade
da página têm prioridade sobre a consistência visual perfeita.
Machine Translated by Google

Parâmetros do seu sistema 141

Por exemplo, introduzir uma cor adicional ou divergir do layout padrão como

exceção não é uma grande preocupação, desde que ajude a obter o efeito

certo:

Projete o que é certo, não o que é mais consistente. O melhor utilitário da

“ página é uma prioridade. Modificaremos a página para fazê-la funcionar.

Consistência dogmática e padrões estabelecidos não são o que deve orientar

as decisões de design.”1

—Michael McWatters, arquiteto UX, TED.

Há muito espaço para experimentação criativa com esse tipo de sistema.

Como cada página pode ser ajustada, ela pode se adaptar a contextos e

casos de uso específicos. Os projetos gerados por esse sistema podem ser

coerentes, mas não são necessariamente perfeitamente consistentes. Ao

contrário do Airbnb, os processos do TED também são mais descontraídos e

informais.

Esboço simples sobre especificações detalhadas

Em vez de especificações detalhadas, a equipe do TED geralmente pode

usar um quadro branco ou esboço de papel de baixa fidelidade com notas

rudimentares. Em seguida, é compartilhado pessoalmente ou postado no

Dropbox ou InVision, onde a equipe troca comentários e feedback. Designers

e desenvolvedores trabalham de forma colaborativa enquanto o trazem para

uma maior fidelidade.

1 Entrevista com Michael McWatters, arquiteto UX, TED,

agosto de 2016
Machine Translated by Google

142 Capítulo 6

No TED, um esboço simples com notas é frequentemente usado em vez de especificações de projeto detalhadas.

Documentação Simples

A documentação também é simples. A equipe não possui uma

biblioteca de padrões abrangente. Em vez disso, há uma
coleção simples do que eles chamam de amostras em uma
página da Web e em um arquivo Sketch, que contém alguns
de seus principais padrões de design - mas não tudo.
Machine Translated by Google

Parâmetros do seu sistema 143

Algumas das amostras do TED, salvas em um arquivo Sketch.

Talvez você esteja pensando que isso ocorre porque o TED é

pequeno e simplesmente não tem tempo e recursos para
configurar uma biblioteca de padrões abrangente. Mas não é bem
assim. Até agora, simplesmente não houve necessidade de
documentar tudo em detalhes. Se a equipe começar a crescer, isso
pode mudar, mas eles enfatizam que, mesmo com uma biblioteca de
padrões instalada, os padrões não vão conduzir o projeto. “A
perspicácia do design e a sensibilidade ao contexto sempre virão
em primeiro lugar, mesmo que isso signifique que, em alguns casos,
os padrões serão ignorados ou modificados”, diz Michael McWatters.
Machine Translated by Google

144 Capítulo 6

Embora os designs de interface do TED se adaptem a contextos

únicos, às vezes quebrando padrões estabelecidos, a equipe ainda
considera seu sistema eficaz na geração de designs que funcionam
para seus usuários.

O que faz esses sistemas funcionarem não são regras e

processos estritos — é o conhecimento de design compartilhado,
profundamente enraizado na cultura. A equipe está totalmente
sincronizada em sua visão de produto (“Espalhe as ideias o mais longe
possível”) e sua abordagem de design. O design de padrões é
guiado pelos princípios compartilhados (como “Atemporal, não de
ponta”), e há um profundo entendimento mútuo da finalidade dos
padrões e seu uso. Esse conhecimento compartilhado é a base
que torna esse sistema eficaz, mesmo que seja configurado de
maneira vaga.

Gerenciando Desvantagens e Escolhendo a Direção

Esses foram dois exemplos contrastantes, mas, claro, esses

parâmetros não são binários: todas as equipes estão em algum
lugar nessa escala. Pode parecer que o rigor está relacionado ao
tamanho da empresa - sistemas menores e mais jovens tendem
a ser (e podem se safar) mais flexíveis, para permitir mais liberdade
e experimentação. À medida que um sistema cresce, ele se
torna mais rigoroso. Mas talvez não seja tão simples assim. Certa
vez, trabalhei em uma pequena equipe com um diretor criativo brilhante,
mas autoritário, que monitorava de perto toda a produção de design.
Era um sistema pequeno, mas muito rígido. Por outro lado, você pode imaginar um maior
Machine Translated by Google

Parâmetros do seu sistema 145

empresa com um sistema vagamente configurado, para encorajar cada

equipe a experimentar e tomar suas próprias decisões. Talvez não
tenha tanto a ver com o tamanho, mas com a abordagem da equipe
e suas prioridades.

Em geral, sistemas mais rigorosos fornecem resultados precisos e

previsíveis e consistência visual. Mas, ao mesmo tempo, um sistema
estrito pode se tornar rígido, a ponto de você começar a comprometer
o UX em prol da consistência.

Para garantir que isso não aconteça, deve haver oportunidades fora
dos limites do sistema, como experimentos criativos e projetos paralelos.
As pessoas precisam entender as regras e serem capazes de desafiá-
las. Se não houver entendimento, as regras serão ignoradas ou
anuladas. É por isso que uma documentação clara, abrangente e
atraente é fundamental para esse tipo de sistema.

Os sistemas configurados livremente são adequados para

produtos que priorizam a sensibilidade ao contexto e à experimentação.
Mas um sistema frouxo, que funciona tão bem para o TED, pode
rapidamente se tornar muito confuso e fragmentado em outras empresas.

Para ter um sistema simples e flexível como o do TED, todos na

equipe precisam estar totalmente alinhados com o propósito do
produto e a abordagem de design, que precisam estar profundamente
enraizados em sua cultura. Mesmo um sistema mal configurado precisa
de uma base sólida.
Machine Translated by Google

146 Capítulo 6

Peças: modulares ou integradas

Todos os sistemas são feitos de peças. Mas, no contexto dos sistemas
de design, modularidade significa não apenas que um sistema é feito
de partes, mas que as partes são intercambiáveis e podem ser
montadas juntas de várias maneiras para atender a diferentes ou
variáveis objetivos do usuário.

Um design modular, como o icônico conjunto de construção Bauhaus Bauspiel,

pode se adaptar a diferentes requisitos.

Uma abordagem modular tem muitas vantagens conhecidas:

• É ágil, porque várias equipes podem projetar e construir

módulos em paralelo.

• É econômico, porque esses módulos podem ser reutilizados.

• É relativamente fácil de manter, pois você pode corrigir um

problema em um módulo sem afetar os outros.
Machine Translated by Google

Parâmetros do seu sistema 147

• É adaptável, pois os módulos podem ser montados de formas que

atendam às diferentes necessidades dos usuários.

• Pode ter uma qualidade geradora, o que significa que você pode criar

resultados totalmente novos introduzindo novos padrões ou combinando-

os de novas maneiras.

O oposto de uma estrutura modular é uma abordagem de design integrado.

Um design integrado também pode ser feito de partes, mas essas partes

não são intercambiáveis porque as conexões entre elas não são projetadas

para se ajustarem de maneiras diferentes.

O design integrado é otimizado para um objetivo específico.

Os projetos integrados também têm vários benefícios:

• Eles podem ser específicos para um determinado conteúdo, contexto,

história ou direção de arte.

• Elas tendem a ser mais coerentes e conectadas (ao contrário das

estruturas modulares que podem parecer desconexas).

Machine Translated by Google

148 Capítulo 6

• Eles podem ser construídos mais rapidamente como peças únicas, porque

não há necessidade de perder tempo tornando as peças reutilizáveis.

• São mais fáceis de coordenar, pois todos na equipe trabalham para um

propósito.

Nossas conversas sobre sistemas de design na web têm sido a favor da

modularidade e padronização de componentes. Falamos sobre como os

padrões devem ser modulares e reutilizáveis, como tudo deve ser igual ao

Lego. Mas a extensão da modularidade deve depender de sua equipe e de

seu produto.

MODULARIDADE E A EXPERIÊNCIA DO USUÁRIO

Além da eficiência e economia de custos, considere como uma

abordagem modular pode beneficiar seus usuários e aprimorar a experiência

de seu produto. Na arquitetura, há exemplos em que a modularidade não só

agrega experiência

mas se torna sua principal característica.

Puma City é uma loja de varejo composta por 24 contêineres de carga que

pode ser desmontado e remontado. O que permite esta construção

O desejo de viajar pelo mundo é a sua modularidade. Também é fundamental

para o seu design: os contêineres são montados de forma a moldar a

personalidade do edifício. Deslocar os contentores de diferentes formas pode

criar espaços exteriores e terraços,

Machine Translated by Google

Parâmetros do seu sistema 149

assim como o interior. Até mesmo a forma como o logotipo é

fragmentado como resultado da movimentação dos contêineres faz

parte da composição, parte da sensação única deste edifício.

Puma City, LOT-EK (crédito da imagem: “The Box” de Sibyl Kramer)

Agora vamos ver um exemplo de arquitetura integrada. O complexo de

apartamentos Greendo em Takamatsu, Japão, foi construído na
encosta de uma montanha e tem cinco níveis; o telhado de cada
unidade serve como jardim de outra. O edifício não está apenas
inserido na paisagem, mas também vive e respira com a terra,
aproveitando o isolamento natural e o calor da terra para manter
uma temperatura estável no interior.
Machine Translated by Google

150 Capítulo 6

“Greendo”, Keita Nagata (Crédito da imagem: http:// www.designboom.com)

Às vezes, a modularidade faz sentido no nível de implementação,

mas não no design ou vice-versa. Esta acomodação
estudantil em Paris foi feita para parecer modular, como se
fosse construída com cestos móveis girados em diferentes
ângulos.

“Apartamentos de cesta”, arquitetos

OFIS (Crédito da imagem: http:// www.archdaily.com e http:// www.ofis-a.si/)
Machine Translated by Google

Parâmetros do seu sistema 151

Mas, na verdade, é a disposição das varandas e a forma como se

projetam do edifício que lhe dá essa sensação. Nesse caso, não fazia
sentido tornar o edifício totalmente modular, mas a estética modular
ainda se adequava a esse edifício em particular. O oposto também
pode acontecer.

Resumindo, mais modular nem sempre é melhor. A extensão da

modularidade deve depender do que você está tentando alcançar.

EXTENSÃO DA MODULARIDADE E NECESSIDADES DO PROJETO

Em geral, a abordagem modular é adequada para produtos que:

• precisa escalar e evoluir

• precisa se adaptar a diferentes necessidades

do usuário • precisa de um grande número de
peças repetidas • tem várias equipes trabalhando nelas simultaneamente
e independente

Os exemplos podem incluir sites de grande escala para e-commerce,

notícias, e-learning, finanças, governo – qualquer coisa que precise
escalar, evoluir e lidar com diferentes necessidades do usuário.

Acho especialmente interessante quando a modularidade se torna

parte da marca e da experiência do produto. Na Flip board, por exemplo,
os layouts modulares estão no centro do design e da marca. Foi isso
que ajudou a tornar a marca
Machine Translated by Google

152 Capítulo 6

distinto: “Cada layout de página de revista parece feito à mão e bonito, como

se editores e designers o tivessem criado apenas para você.”2

Os layouts modulares do Flipboard estão no centro de sua experiência.

Por outro lado, os sistemas integrados são adequados para produtos que:

• são projetados para uma finalidade específica • não

precisam ser dimensionados ou alterados

• exigem direção de arte fora dos limites do

sistema •

tem poucas peças repetidas compartilhadas •

são itens únicos que provavelmente não serão reutilizados

2 “A automação de layouts traz o estilo de revista do Flipboard para a Web e o Windows”

por Charles Ying. http://smashed.by/flipboard

Machine Translated by Google

Parâmetros do seu sistema 153

Exemplos de uma abordagem integrada podem incluir sites de

conferências criativas, campanhas de marketing pontuais, portfólios
criativos e vitrines.

Circles Conference é uma conferência para designers e outros criativos. Seu site apresenta um
design arrojado, com vários módulos exclusivos que podem fazer com que a modularização
total não valha a pena. (KIKK.be, 2016)

As campanhas do Spotify apresentam designs totalmente diferentes ao

promover eventos musicais específicos.

Exemplos de campanhas de eventos musicais do Spotify.

Machine Translated by Google

154 Capítulo 6

Embora você possa identificar alguma reutilização de alguns estilos

de marca (como formas, cores e tipografia), é menos comum ver
blocos de construção maiores dos principais produtos de consumo
nessas campanhas. Para permitir mais flexibilidade e expressão
criativa, fazia mais sentido criar esses designs fora de seu sistema
modular para produtos de consumo.3

GERENCIANDO DESVANTAGENS E ESCOLHENDO

UMA DIREÇÃO

Uma abordagem modular é adaptável, escalável e econômica a

longo prazo. Mas a modularidade vem com algumas desvantagens.

Em primeiro lugar, a construção de módulos reutilizáveis normalmente

consome mais tempo do que a criação de uma solução única
projetada para atingir um objetivo específico. Você precisa pensar
em diferentes casos de uso e planejar como eles funcionarão no sistema.
Para se tornarem econômicos, os módulos precisam ser reutilizados,
o que pode levar tempo. Algumas equipes lutam por um tempo
para ver o retorno do investimento em um sistema modular, o que
torna difícil justificar o investimento em primeiro lugar.

3 A equipe de marca e criação do Spotify, que gerencia as campanhas,

possui um sistema simples que permite uma combinação muito flexível de
estilos de marca. É assim que eles podem criar toda uma gama de
campanhas que se encaixam na marca Spotify.
Machine Translated by Google

Parâmetros do seu sistema 155

Em segundo lugar, os módulos geralmente precisam ser

bastante genéricos para acomodar uma variedade de casos. O
resultado pode ser designs genéricos previsíveis, onde o poder da
composição e da história são perdidos em favor da eficiência. Quando
as equipes escolhem uma abordagem modular, precisam encontrar
outras formas de inovar — conteúdo ou serviço diferenciado, voz
forte ou uso eficaz de padrões de percepção.

Em terceiro lugar, para fazer a modularidade valer a pena, as equipes

às vezes forçam a reutilização dos módulos. Na FutureLearn, acabamos
sacrificando ocasionalmente o impacto potencial que uma página
poderia ter em prol da reutilização. Para evitar que isso aconteça, a
eficiência técnica deve sempre ser equilibrada com os benefícios que a
modularidade traz para a experiência do usuário.

Por fim, um dos principais desafios é fazer com que os módulos

se conectem perfeitamente. Com o design modular, a expectativa é
que você possa misturar e combinar as peças, e elas devem se encaixar
perfeitamente. Mas às vezes as pessoas combinam módulos de
maneiras que não funcionam como um todo. E, paradoxalmente,
embora haja muita consistência entre os módulos, há pouca
coerência na experiência geral.

Para evitar isso, devemos nos concentrar não apenas nos módulos,
mas também nas conexões entre eles: as regras de como

eles se relacionam entre si, sua importância relativa (como volume

visual), seu papel na jornada geral do usuário, sua hierarquia na
composição geral.
Machine Translated by Google

156 Capítulo 6

Os projetos integrados podem ser mais específicos porque são

otimizados para uma finalidade. Eles também tendem a ser mais coerentes
e funcionam melhor como um todo. Mas eles não escalam bem.
Os designs integrados não são adaptáveis ou reutilizáveis, o que
geralmente é exatamente o que precisamos na web.

O grau de modularização pode mudar ao longo do tempo. Seu sistema

pode começar com alguns estilos e princípios compartilhados. À medida
que cresce, você pode notar padrões cada vez mais repetidos, e o
aumento da modularidade se torna uma progressão lógica para o seu
produto.

Da mesma forma, pode se desenvolver na direção oposta. Na Future

Learn, temos um sistema amplamente modular. Mas percebemos que
ter que trabalhar com padrões reutilizáveis em páginas de vendas de alto
impacto pode parecer limitante. Desde que a FutureLearn começou a
fazer mais campanhas de marketing de marca, trabalhamos com mais
seções personalizadas, para fazer uma declaração de marca mais forte.
Machine Translated by Google

Parâmetros do seu sistema 157

Organização: Centralizada ou Distribuída

Outro aspecto importante de um sistema de design é como ele é
organizado.

MODELO CENTRALIZADO

Em um modelo centralizado, regras e padrões são gerenciados

principalmente por um grupo de pessoas. Normalmente, isso significa que:

• eles definem os padrões e regras • eles

têm poder de veto sobre o sistema • eles
gerenciam a biblioteca de padrões ou outros recursos onde os
padrões são armazenados

A vantagem mais óbvia dessa estrutura é a propriedade do navio.

Se alguém for responsável por isso, é mais provável que o sistema
seja curado, mantido e evoluído. Também ajuda a direção criativa a
ser focada e opinativa, porque vem de uma fonte. Provavelmente é
por isso que às vezes encontramos esse modelo em empresas
lideradas pelo design, como Apple ou Airbnb.

MODELO DISTRIBUÍDO

Uma abordagem alternativa é um modelo distribuído, onde cada um

que usa o sistema também é responsável por mantê-lo e evoluí-lo.
Machine Translated by Google

158 Capítulo 6

Esse tipo de estrutura proporciona autonomia aos indivíduos e os

capacita para a tomada de decisões. Ele tende a ser mais ágil e
resiliente – se uma equipe perde alguma coisa, outra pode pegar. O
conhecimento de design e a direção criativa são distribuídos, em vez de
concentrados nas mentes de algumas pessoas.4

Essa é a abordagem usada no TED e também é a estrutura que

tentamos estabelecer no FutureLearn. Para uma pequena empresa
como a FutureLearn, era impraticável ter uma equipe de sistemas
de design dedicada. Todos os designers e desenvolvedores front-end
que trabalham no produto também contribuem ativamente para o
sistema. E como cada um contribui um pouco, executar um sistema
dessa maneira não leva muito tempo. Essa é a única maneira de
manter a biblioteca de padrões nos últimos três anos.

DESAFIOS ORGANIZACIONAIS

Embora uma abordagem distribuída funcione para o FutureLearn, não é

para todos. Muitas empresas com quem conversei tiveram uma
experiência diferente ao experimentá-lo. As pessoas ficaram
entusiasmadas no início, mas sem alguém no comando, o trabalho
poderia desacelerar ou parar completamente.

4 Conforme discutimos no capítulo 5, essa abordagem funciona por meio de estreita

colaboração e conhecimento compartilhado. Christopher Alexander refere-se a um
conceito semelhante como uma abordagem de “linguagem padrão” em The Timeless
Way of Building.
Machine Translated by Google

Parâmetros do seu sistema 159

A equipe da Eurostar não é grande: é composta por quatro designers,

quatro gerentes de produto e dez desenvolvedores front-end. Uma
abordagem distribuída inicialmente fazia sentido prático para uma equipe
desse tamanho. Mas depois de um ano, eles ainda lutavam para
fazer com que todos contribuíssem igualmente.

Queríamos ver todos contribuindo um pouco. Mas, em vez disso, vimos

“ algumas pessoas contribuindo muito”.

—Dan Jackson, arquiteto de soluções, Eurostar

Depois de mudar para uma abordagem centralizada, a equipe fez um

progresso muito melhor.

Biblioteca de padrões do Eurostar, 2017 https://style.eurostar.com/

Machine Translated by Google

160 Capítulo 6

Uma abordagem totalmente distribuída parece exigir um certo tipo

de cultura de equipe para funcionar. Da mesma forma, um
sistema estrito também falha sem uma cultura para apoiá-lo. Na
BBC, uma abordagem centralizada não funcionou muito bem com o
GEL. Ben Scott, líder técnico da BBC, compartilhou em uma
entrevista que, apesar da investigação para centralizar seu sistema,
não valeu a pena porque cada equipe de produto sempre teve
suas próprias opiniões sobre como deveria ser seu design.
Portanto, a abordagem distribuída funcionou muito melhor.5

GERENCIE AS DESVANTAGENS E ESCOLHA A DIREÇÃO

Uma abordagem centralizada fornece propriedade e confiabilidade.

Ao mesmo tempo, pode funcionar contra a equipe. Como a
responsabilidade recai sobre um grupo de pessoas, elas podem se
tornar um gargalo, retardando todo o ciclo de vida do produto.6
Para equipes menores, também pode ser impraticável afastar
alguém do produto para permitir que dediquem a maior parte de
seu tempo para focar no sistema.

Uma abordagem distribuída promove mais autonomia e

capacita toda a equipe para criar. É mais ágil, mais resistente,
porque não depende de um pequeno grupo de pessoas. Mas é
um desafio fazê-lo funcionar de maneira sustentável e que não
dilua a direção criativa.

5 Entrevista informal com Ben Scott, maio de 2017 6

No Airbnb, o processo de adição de um novo módulo pode levar até duas
semanas. Esta é uma das coisas que a equipe está tentando melhorar.
Machine Translated by Google

Parâmetros do seu sistema 161

Assim como o rigor relativo das regras de um sistema e seu grau de modularidade, as formas

de organização de um sistema não dependem do tamanho da equipe. Em uma pequena

empresa, a direção criativa pode vir de uma única fonte, como o CEO ou um diretor

criativo.

Em empresas maiores, um sistema distribuído também pode funcionar.

Por exemplo, a Atlassian é uma organização relativamente grande com mais de 2.000

funcionários. Há uma equipe dedicada que faz a curadoria dos padrões, mas também há um

modelo de código aberto para contribuições. Todos na empresa não só têm permissão, mas

também são ativamente encorajados a contribuir.

Queremos que as pessoas não apenas concordem com a linguagem do design, mas também

“ a adotem e a levem adiante.”

— Jürgen Spangl, chefe de design, Atlassian

As diretrizes de design da Atlassian executam um modelo de código aberto em que

todos podem contribuir, mas as contribuições são gerenciadas e selecionadas.
Machine Translated by Google

162 Capítulo 6

Na BBC, o GEL fornece versões de padrões “ideais platônicos” e,

então, cada departamento tem sua própria implementação.

RESUMO

Neste capítulo, examinamos várias equipes, com diferentes

abordagens para projetar sistemas. Aqui está como eu os
colocaria nas três escalas apresentadas anteriormente.

O sistema Airbnb é estrito, modular e centralizado. Atua por

meio de regras e processos que são seguidos à risca. Há
muita certeza e consistência com esse tipo de sistema.

Quase no extremo oposto da escala, temos sistemas como o

TED, que são muito mais frouxos e onde a direção criativa é
distribuída por toda a equipe. Esses sistemas geralmente
permitem mais experimentação, ajuste fino e sensibilidade ao
contexto.
Machine Translated by Google

Parâmetros do seu sistema 163

Em algum lugar no meio entre os dois, temos equipes como o

FutureLearn. Como uma empresa jovem e em crescimento, o
sistema de design da FutureLearn mudou ao longo das escalas.
Começou como mais centralizado e integrado, tornando-se
gradualmente mais distribuído e mais modular. As regras do
sistema também se tornaram mais rígidas ao longo do tempo, uma
vez que passamos a focar na consistência.
Machine Translated by Google

164 Capítulo 6

O SISTEMA CERTO PARA VOCÊ

Outro aspecto importante é, claro, a cultura da equipe, que

inevitavelmente se reflete no sistema de design que eles produzirão.
Como afirma a lei de Conway:7

Organizações que projetam sistemas [...] são obrigadas a produzir

“ projetos que são cópias das estruturas de comunicação dessas

organizações”.

A equipe da Sipgate agora está reconstruindo sua biblioteca de padrões.

O interessante não é que eles mudaram seu modelo de distribuído
para centralizado, mas que, para fazer o modelo centralizado
funcionar, eles primeiro tiveram que demonstrar à empresa como seria
a autonomia total. A princípio, as equipes de espírito livre e
entusiasmadas da Sipgate não conseguiam imaginar seus projetos
sendo “controlados” por outra pessoa.
Mas com uma cultura autônoma como a deles, eles perceberam que
era exatamente disso que precisavam para manter seu sistema
coerente e unificado.

7 A lei de Conway surgiu de uma observação feita em 1967 por

Melvin Conway, um cientista da computação e programador.
Machine Translated by Google

Parâmetros do seu sistema 165

Para fazê-lo funcionar, eles tiveram que fazer algumas mudanças

no processo de design e na forma como colaboram. A equipe agora
coloca mais ênfase em ter uma metodologia compartilhada e uma
abordagem de design, em vez de uma documentação eficiente dos
padrões. Para eles, não foi apenas uma mudança de direção - foi
também uma mudança cultural.

O sistema certo para você não é o sistema de outra pessoa. O

que funciona para uma equipe pode não funcionar para outra.
Às vezes pensamos que outras equipes acertaram e aspiram construir
um sistema como o Airbnb. Mas toda abordagem tem suas
desvantagens. O sistema certo para você é aquele em que você
consegue gerenciar as desvantagens.

No centro de todo sistema de design eficaz não estão as

ferramentas, mas o conhecimento de design compartilhado sobre o
que torna um bom design e UX para sua equipe específica e
seu produto específico. Se esse conhecimento for claro, todo o
resto se seguirá.
Machine Translated by Google

166 parte II

Capítulo 7

Planejamento e praticidade
Neste capítulo, veremos como encontrar suporte para estabelecer
um sistema de design em sua organização e planejar o trabalho.

uma equipe começa a pensar em design de forma mais

sistemática? Normalmente, quando eles percebem problemas
Como com seu fluxo de trabalho atual. Designers ficam
frustrados sempre resolvendo os mesmos problemas, ou não sendo
capazes de implementar seus projetos adequadamente. Os
desenvolvedores estão cansados de estilizar cada componente e
lidar com uma base de código confusa. Ambos lutam para cumprir
os prazos e exigências de um produto em crescimento. Sem
linguagem e práticas de design compartilhadas, a colaboração é difícil.

Algumas pessoas começam a fazer melhorias - padronizando

botões, configurando um arquivo mestre do Sketch, criando uma
biblioteca simples de componentes existentes. Outros percebem
os benefícios e unem seus esforços. A equipe pode padronizar
mais padrões, alinhar o vocabulário de design, configurar novas
ferramentas e processos. Depois de algumas tentativas e erros,
eles verão melhorias no funcionamento do sistema. Essas primeiras
iniciativas contêm lições valiosas. Mas para fazer uma diferença
real, trabalhar em um sistema de design como um projeto paralelo não é suficiente.
Você precisa de amplo apoio - não apenas de seus colegas,
mas também dos principais interessados no negócio.
Machine Translated by Google

Planejamento e praticidade 167

Obtendo apoio de partes interessadas sênior

Conseguir adesão nem sempre é fácil. Algumas equipes
começam coletando exemplos de inconsistências visuais no produto.
Uma imagem de botões inconsistentes pode ser um gráfico atraente,
mas nem sempre é suficiente para fazer um CEO ou seu gerente ver
o valor das mudanças que você está propondo.

Para obter suporte da empresa, você precisa demonstrar que um

sistema de design eficaz ajudará a atingir as metas de negócios
com mais rapidez e menor custo. Em outras palavras, você precisa
fazer um caso de negócios para isso.

Às vezes, ajuda usar uma linguagem familiar em seu discurso.

Se a ideia de um “sistema de design abrangente” soa muito ampla
e abstrata para o seu público, tente apresentá-lo como “uma
interface modular”. A modularidade tem muitos benefícios práticos
comprovados, que discutimos no capítulo anterior. Desde que seja a
direção certa para você, esses benefícios podem ser demonstrados
em relação à sua equipe e ao seu produto. Aqui estão alguns
exemplos.

1. ECONOMIA DE TEMPO NO PROJETO E CONSTRUÇÃO

MÓDULOS

Naturalmente, reutilizar um elemento existente, em vez de

construir um do zero, é mais rápido. Você pode até calcular
aproximadamente quanto tempo pode economizar. No futuro
Machine Translated by Google

168 Capítulo 7

Saiba que criar um componente personalizado relativamente simples

pela primeira vez pode levar cerca de três horas. Construir o mesmo
componente de forma modular (acertar a estrutura, torná-la flexível para
vários casos de uso, criar um bom nome, adicioná-lo à biblioteca de
padrões) pode levar o dobro do tempo. Mas quando o mesmo
componente é usado novamente, é quase de graça. A longo prazo,
isso pode economizar muito tempo, se você trabalhar de maneira a
enfatizar escolhas repetíveis.

Mesmo elementos aparentemente simples, como botões, levam

tempo e esforço para serem projetados e construídos. Para fazer com que
os principais interessados entendam o valor da reutilização de componentes,
o consultor de sistemas de design e autor de Modular Web Design, Nathan
Curtis, usa uma história sobre a complexidade dos botões. Em alguns
slides, ele demonstra como os botões podem custar centenas de milhares

de dólares para projetar e construir.

Se sua empresa tiver 25 equipes, cada uma fazendo botões, custará

“ US$ 1.000.000 para sua empresa ter bons botões.”1

— Nathan Curtis

Quantificar e demonstrar o custo da ineficiência costuma ser a maneira

mais eficaz de obter adesão dos executivos.

1 http://smashed.by/goodbuttons
Machine Translated by Google

Planejamento e praticidade 169

2. ECONOMIA DE TEMPO AO FAZER ALTERAÇÕES EM TODO O SITE

Um sistema inchado e ineficiente significa que mesmo as menores

mudanças são demoradas e difíceis de fazer.

Em seu artigo “Designed for Growth”2 Marco Suarez, da Etsy, descreveu como as

dívidas técnicas e de design desaceleram sua equipe. Ele compartilhou um exemplo

de diferença do trabalho de Jessica Harllee para atualizar o estilo dos botões no

etsy.com. O código excluído é mostrado em vermelho e o código escrito em verde.

Evidentemente, muito código foi alterado para fazer uma simples alteração

visual.

Um arquivo diferente para atualizar o estilo dos botões no etsy.com , onde o código
excluído é mostrado em vermelho e o código escrito em verde.

As alterações não são apenas demoradas para serem feitas, mas às vezes
a mesma alteração precisa ser aplicada em locais diferentes.
Por outro lado, um padrão reutilizável será atualizado automaticamente
em todos os lugares em que esse padrão for usado. Isso torna as
atualizações em todo o site mais rápidas.

2 http://smashed.by/designforgrowth
Machine Translated by Google

170 Capítulo 7

A longo prazo, os módulos devem melhorar à medida que são

usados. Diferentes equipes apresentam diferentes casos de uso e
soluções para atendê-los. Ao melhorar os componentes
individuais, todo o sistema se torna mais robusto e fácil de manter.
E quanto menos tempo uma equipe gasta corrigindo bugs e
desvendando códigos confusos, mais tempo eles têm para trabalhar
em coisas que agregam valor aos usuários e aos negócios.

3. LANÇAMENTO MAIS RÁPIDO DO PRODUTO

Se você visitar uma confeitaria e pedir uma seleção de doces

prontos, obterá uma cotação totalmente diferente de pedir um bolo
feito sob medida. No FutureLearn, os gerentes de produto entendem
as diferentes escalas de tempo para desenvolver um recurso feito de
módulos existentes versus novos. Construir uma página usando
os padrões da biblioteca normalmente leva alguns dias; um novo
design pode levar semanas. Portanto, se precisarmos testar um
conceito ou pilotar um novo recurso, às vezes os módulos existentes
são usados para liberar um recurso rapidamente. Pode não ser
perfeito, mas dá tempo à equipe para testar, coletar feedback e
elaborar uma solução melhor.

Tobias Ritterbach observou como as equipes da Sipgate que usam

sua nova biblioteca de padrões são muitas vezes mais rápidas ao
fornecer novos recursos do que as que não usam:
Machine Translated by Google

Planejamento e praticidade 171

Ter uma biblioteca de padrões para sipgate.de nos permite criar páginas 10

“ a 20 vezes mais rápido do que para outros sites de produtos que não estão

conectados à biblioteca.”

— Tobias Ritterbach, proprietário da experiência, Sipgate

Esses exemplos mostram que um sistema modular ajuda a atender às demandas

de um produto em crescimento, permitindo que as equipes criem protótipos

e enviem recursos mais rapidamente.

OUTROS BENEFÍCIOS

Ao defender um sistema de design, os argumentos vencedores tendem a se

concentrar em demonstrar e quantificar o custo da ineficiência. Mas, claro,

existem outros benefícios importantes, que podem ser valorizados em algumas

organizações.

Unidade de marca em escala

Não é incomum que as empresas acabem em uma situação em que seus

diferentes produtos (ou às vezes até partes do mesmo produto) parecem

pertencer a marcas diferentes. Unificar um produto ou linha de produtos em

crescimento sob a mesma marca requer um sistema de design eficaz.

Consistência visual

O design é uma forma de linguagem – por meio do design, comunicamos um

modelo mental do produto. Uma representação visual consistente ajuda as

pessoas a aprender a interface mais rapidamente e

Machine Translated by Google

172 Capítulo 7

reduzir a carga cognitiva tornando as coisas familiares e previsíveis. Isso

ajuda a tornar a interface intuitiva.

Criar consistência é como fazer pequenas promessas através da interface (quando

você vê um botão rosa é sempre uma ação; o botão “Cancelar” sempre vem

antes de “Enviar”).

Quando as pessoas podem ter certeza do que vai acontecer, elas podem confiar

no produto. A consistência ajuda a construir confiança.

Trabalho em Equipe e Colaboração

Uma linguagem compartilhada é fundamental para a colaboração e é

exatamente isso que um sistema de design eficaz oferece.

Dá às pessoas as ferramentas e processos para criar coisas juntas. Eles

podem desenvolver o trabalho um do outro, em vez de recriar as mesmas coisas

do zero. Mesmo depois de simplesmente coletar os componentes em um só

lugar, os designers do Airbnb começaram a ver melhorias na produtividade.

Coletamos os componentes em um arquivo mestre do Sketch. Depois de uma ou

“ duas semanas, começamos a ver grandes saltos na produtividade usando a

biblioteca ao iterar nos designs.”3

— Karri Saarinen, líder de design, Airbnb.

3 Veja “Criando o Airbnb Design System” por Karri Saarinen

(http://smashed.by/airbnbsystem)
Machine Translated by Google

Planejamento e praticidade 173

Apresentar esses casos de maneiras específicas para suas situações ajudou as

equipes a obter o suporte de que precisavam. Usar um projeto de teste para

demonstrar os benefícios também pode ser eficaz, como a designer Laura Elizabeth

aconselhou em uma de suas palestras:4

Experimentar um sistema de design em um pequeno projeto de teste permite que

“ você veja o efeito que ele pode ter em seu trabalho e demonstre quanto tempo

está economizando.”

Nem todos podem estabelecer uma equipe de sistema de design dedicada ou

formalizar seus planos imediatamente, mas mesmo passar um sprint com algumas

pessoas dedicadas pode ser um ponto de partida útil para demonstrar o que pode

ser alcançado.

O sucesso dessas primeiras etapas pode ser usado para obter mais suporte

posteriormente.

4 Veja “Selling Design Systems” por Laura Elizabeth

(http://smashed.by/sellingsystems)
Machine Translated by Google

174 Capítulo 7

Onde começar

Como vimos no capítulo anterior, cada equipe terá requisitos

diferentes e diferentes estratégias funcionarão para elas. Mas aqui
estão algumas dicas que foram úteis para a maioria das pessoas,
independentemente da situação.

CONCORDE COM SUAS METAS E OBJETIVOS

Quais são os principais resultados que você espera alcançar com

este trabalho? Ter objetivos claros dá direção e motivação à
equipe. Isso os ajuda a organizar seu tempo e equilibrar
prioridades. Uma meta deve incluir alguns objetivos - etapas
mensuráveis específicas para alcançá-la.

Se você, como eu, vê os sistemas de design em relação a

padrões e práticas compartilhadas, seus objetivos podem
refletir isso. Por exemplo, um deles pode ser focado na interface e
o outro na forma como a equipe opera.

1. Sistematizar a(s) Interface(s)

• Definir princípios orientadores de

design • Definir e padronizar padrões de design reutilizáveis
• Estabelecer uma biblioteca de
padrões • Configurar arquivos de design mestre com padrões
atualizados • Refatorar código e arquitetura front-end para suportar
a abordagem modular
Machine Translated by Google

Planejamento e praticidade 175

2. Estabelecer processos compartilhados e governança

• Estabeleça processos de compartilhamento de conhecimento por meio de

conversas, colaboração, emparelhamento, treinamento

• Promover a biblioteca de padrões e incentivar seu uso em toda a

empresa

• Promover linguagem de design compartilhada entre equipes e disciplinas

• Faça da introdução ao sistema de design parte do

processo de indução

Os objetivos podem ser divididos em tarefas e histórias menores. Para

planejar como seus objetivos serão alcançados ao longo do tempo, nesta fase

também é útil criar um roteiro simples para seu sistema de design. Isso pode ser

feito em um software como o Trello, ou mesmo em um quadro branco com post-

its. O que importa é que o roteiro dê à equipe uma compreensão coletiva de suas

prioridades e de como o sistema deve evoluir ao longo do tempo.5

No FutureLearn, também integramos as histórias do sistema de design no

roteiro do produto principal. Isso ajudou a conscientizar o restante da equipe

sobre o trabalho que estávamos fazendo e equilibrá-lo com outras prioridades.

5 Veja “Roteiros para Sistemas de Design” por Nathan Curtis

(http://smashed.by/systemsroadmap)
Machine Translated by Google

176 Capítulo 7

Ter metas e marcos claros também ajuda a gerenciar as expectativas no restante da

empresa. Um sistema de design é um investimento de longo prazo – seu valor aumenta

gradualmente ao longo do tempo.

É importante que as pessoas esperem ver melhorias graduais e constantes, em vez de

rápidas e dramáticas.

FAÇA SEU PROGRESSO TRANSPARENTE

Em minhas observações, as equipes que tornaram público parte de seu trabalho nos

sistemas de design tendem a progredir mais rapidamente do que aquelas que

mantiveram tudo em segredo. Dan Jackson, da Eurostar, explicou em uma entrevista a

importância de tornar público seu guia de estilo desde o início, mesmo quando não era

perfeito. Saber que outras pessoas podem estar aprendendo com seu trabalho

forneceu motivação adicional:

Eu queria que o guia de estilo fosse um produto público do qual nos orgulhamos.

“ Outras pessoas podem estar olhando para ele e usando-o como um recurso.

Faz-nos sentir que temos de nos manter atualizados.”

— Dan Jackson, arquiteto de soluções, Eurostar

Algumas equipes escrevem postagens de blog curtas sobre seu sistema à medida

que ele evolui. Isso é especialmente útil se você descrever não apenas seus sucessos,

mas também seus erros, obstáculos e coisas que faria diferente na próxima vez.

Documentar seu progresso de maneira aberta e honesta é uma maneira poderosa

de ajudar sua equipe a aprender e se manter motivada.

Machine Translated by Google

Planejamento e praticidade 177

Fazer isso também torna transparente o trabalho feito nos bastidores.

Escrever e falar regularmente sobre nosso sistema de design no
FutureLearn foi inestimável para fazer com que mais pessoas
entendessem o valor do trabalho que estávamos fazendo.

CRIE UMA CULTURA DE COMPARTILHAMENTO DE CONHECIMENTO

Como vimos no exemplo do Sipgate no capítulo anterior, uma equipe

pode ter uma biblioteca de padrões atualizada, mas ela não fornecerá
tanto valor sem uma colaboração eficaz entre as equipes. Fazer com
que sua equipe pense de maneira mais sistemática requer práticas
poderosas de compartilhamento de conhecimento. Discutimos
alguns deles no capítulo 5, “Linguagem Compartilhada”:

• Configure um canal Slack dedicado para colaborar

definir e nomear padrões de projeto e discutir questões
relacionadas ao sistema.

• Crie uma parede padrão para tornar o processo aberto e

transparente para o resto da empresa e incentivar mais pessoas
a participar.

• Faça da introdução ao sistema de design parte do

processo de indução.

• Organize atualizações regulares para manter todos na mesma

página à medida que seu sistema evolui.

• Incentivar a colaboração não apenas dentro do indivíduo

equipes, mas entre equipes e disciplinas. Em particular,
encoraje as pessoas que têm mais conhecimento sobre
Machine Translated by Google

178 Capítulo 7

o sistema de design para trabalhar com todos, para que eles

tenham a oportunidade de compartilhar seu conhecimento e
entusiasmo com pessoas que estão menos imersas no sistema.

• Organizar workshops e tutoriais para introduzir o

equipe às mudanças à medida que o sistema evolui. Na
Future Learn, as apresentações mais eficazes tinham um
formato de “problema-solução”. Primeiro, conversamos com
as pessoas sobre os problemas atuais e depois explicamos como
as mudanças que estávamos propondo ajudariam a resolver o
problema. Por exemplo: “A tipografia atual significa que o texto
é muito pequeno em telas grandes e muito grande em telas
pequenas; a experiência de leitura é afetada; não está claro
quais títulos usar e há muitos estilos, o que cria inconsistências
e assim por diante. Veja como o novo sistema de tipografia
resolve esses problemas.”

• Uma das táticas de guerrilha que Vitaly Friedman e sua equipe

vêm aplicando é dedicar cada dia a um componente da
interface. Eles teriam um dia de carrossel, um dia de caixa de
luz, um dia de acordeão e assim por diante. Todos receberiam
uma impressão destacando o componente e suas variantes,
incluindo código de front-end e estilos relacionados.

Colocamos ao lado da pia da cozinha e no banheiro. Um mês

“ depois, todos se lembram da nomenclatura de todos os

componentes, incluindo o pessoal da limpeza!”

— Vitaly Friedman, editor-chefe, Smashing Magazine

Machine Translated by Google

Planejamento e praticidade 179

MANTENHA A MORAL DA EQUIPE

Trabalhar em um sistema de design é um processo de longo prazo.

Sua equipe pode não ver as recompensas do que você está fazendo
por algum tempo.

Você nem sempre consegue a satisfação pessoal de imediato — a

“ recompensa vem quando você vê outras pessoas usando o módulo que

você criou em seu trabalho, ou quando alguém comenta como a

informação foi útil para eles.”

— Jusna Begum, desenvolvedora front-end, FutureLearn

Há algumas coisas que você pode fazer para ajudar a manter o moral da
equipe elevado durante o processo.

Em vez de eliminar uma lista interminável de tarefas, tente concluir a maior

parte do trabalho de uma só vez e, em seguida, continue o restante
como parte do trabalho contínuo. Na Atlassian, o progresso inicial foi
feito por meio de picos de design por duas ou três pessoas. Matt Bond,
um designer de produto que liderou o trabalho inicial nas Diretrizes de
Design da Atlassian (ADG), explicou em uma de suas postagens no blog
que ter uma abordagem em duas fases permitiu que a equipe passasse
pelos estágios iniciais rapidamente e mantivesse o ímpeto:
Machine Translated by Google

180 Capítulo 7

Foi um alto rendimento, obtendo muitos novos padrões com 80% de conclusão

“ em um curto período de tempo. Em seguida, passávamos a próxima semana

ou mais dedicando pequenas quantidades de tempo para refinar um padrão

e obter as diretrizes e o código para incluir no ADG.6 ”

Para parte do trabalho, como conduzir uma auditoria de interface ou configurar

uma biblioteca de padrões, é útil envolver toda a equipe (ou representantes

de várias equipes), pelo menos nos estágios iniciais. Fazer isso fornece um

senso compartilhado de propriedade. Se não for possível devido a outras

prioridades, deixe um grupo menor fazer o trabalho de base e envolver

outros conforme necessário. No FutureLearn, dois de nós (um designer e um

desenvolvedor front-end) passamos um sprint totalmente focados no

sistema, envolvendo outras pessoas conforme necessário, uma vez que

descobrimos como ele deveria funcionar.

Também ajuda a planejar as tarefas de forma a proporcionar o máximo de

benefícios com o mínimo de esforço. Na FutureLearn, nosso objetivo era

tornar todos os componentes vivos. Isso significava que o código dos

módulos no site e na biblioteca de padrões precisaria ser o mesmo. Mas

conseguir isso envolveu a refatoração de cada módulo. À medida que

os refatorávamos, os adicionávamos à biblioteca de padrões, um por um. Foi

um processo dolorosamente lento e a equipe começou a perder a

motivação.

6 Consulte “Como criamos as diretrizes de design da Atlassian”, de Matt Bond.

(http://smashed.by/makingofatlassian)
Machine Translated by Google

Planejamento e praticidade 181

Então percebemos que poderíamos fornecer valor mais rapidamente

adicionando todos os padrões de uma só vez e exibindo-os como
capturas de tela em vez de código. Isso permitiu que a equipe começasse

usando a biblioteca de padrões para referência imediatamente. Nos

meses seguintes, gradualmente substituímos as capturas de tela por
módulos vivos, enquanto continuávamos refatorando-os. Se não
tivéssemos feito isso, provavelmente levaria mais um ano até que todos
os padrões fossem documentados.

Pratique o Pensamento em Sistemas

Uma de nossas primeiras experiências com modularidade no Future

Learn foi uma tentativa de redesenhar a página inicial. Um designer
visual criou fatias modulares e, em seguida, realizamos uma oficina
onde tentamos organizá-las em composições completas.
É assim que pensamos (talvez ingenuamente) um processo de design
modular.

Uma de nossas primeiras experiências com modularidade.

Machine Translated by Google

182 Capítulo 7

Acabamos com três projetos que eventualmente se tornaram

protótipos totalmente funcionais. Mas, embora tenha sido um exercício
útil, o resultado não foi verdadeiramente modular:

• Os módulos não tinham um propósito claro. As diferenças entre

eles eram principalmente de apresentação.

• Não os definimos nem os nomeamos.

• Não pensamos muito em como seriam

reutilizado.

• Seu papel no sistema geral não era claro.

Os protótipos nunca chegaram à produção. Mas são esses tipos de

experimentos que ajudaram a tornar nosso processo de design mais
sistemático. Ao tentar coisas diferentes, percebemos que o design
modular é muito mais do que cortar a interface e juntar as peças
novamente. Se sua equipe é nova nesse modo de pensar, é útil primeiro
explorar o que modular significa experimentando em um projeto
paralelo ou em uma pequena área de seu produto primeiro.

Depois de experimentar algumas abordagens diferentes, chegamos a

um exercício de equipe mais estruturado para sistematizar uma interface.
Machine Translated by Google

Planejamento e praticidade 183

Os próximos dois capítulos descrevem esse exercício em detalhes.

Resumidamente, seguirá três etapas:

1. Identificar comportamentos-chave ou qualidades

estéticas 2. Auditar elementos
existentes 3. Definir padrões

As etapas são ligeiramente diferentes para padrões funcionais e

perceptivos. Com padrões funcionais, o foco estará nos
comportamentos do usuário, na definição de módulos individuais e
nomenclatura para eles. Veremos os padrões perceptivos como um
todo, focando na sensação e na estética, e nos princípios gerais de
como eles funcionam juntos.

A ordem que você faz não é crítica. Algumas equipes acham útil examinar
primeiro os estilos fundamentais, como tipografia; outros começam
com módulos funcionais centrais. Também é possível olhar para ambos
simultaneamente em paralelo.

Em ambos os casos, consideramos primeiro o quadro geral e depois

desconstruímos a interface em partes menores. Abordá-lo dessa maneira
nos ajuda a pensar não apenas em módulos individuais, mas também
em como eles funcionam juntos e como ajudam a atingir o objetivo do
produto.
Machine Translated by Google

184 parte II

Capítulo 8

Sistematizando Padrões Funcionais

O exercício deste capítulo descreve uma abordagem para sistematizar
padrões funcionais, começando com a finalidade de um produto.

você entra, vê algumas prateleiras com capas de livros.

N a cidade
Algunsonde moro temnotas
têm pequenas uma manuscritas
pequena livraria. Como
anexadas a eles:

comentários das pessoas que os lêem. Mesmo que você

não saiba o que gostaria de ler, há uma boa chance de se
deparar com algo intrigante. Depois de fazer isso, há uma
área tranquila com sofás para folhear os livros durante o café.
Você pode decidir comprar algo ou não, não há
pressão. O ethos da loja é descoberta e leitura; as
vendas parecem secundárias. Seus padrões - notas,
áreas silenciosas, sofás e mesa de centro - refletem isso.

Da mesma forma, os produtos digitais incentivam ou permitem certos

comportamentos. Considere como o Slack suporta formas de trabalho que

são mais colaborativas em comparação com e-mail ou outros aplicativos de

bate-papo. Ou pense em como o Tinder promove relacionamentos casuais

e sem compromisso com sua interação de deslizar. Os produtos podem ser

projetados em torno de objetivos e necessidades de usuários semelhantes,

ao mesmo tempo em que incentivam comportamentos totalmente diferentes.

Machine Translated by Google

Sistematizando Padrões Funcionais 185

É por isso que pensar em comportamentos pode ser útil ao

conectar padrões com a intenção do design e o espírito do produto.1

A intenção do projeto pode ser renderizada de inúmeras maneiras — os

padrões não precisam ser visuais. Eles podem ser representados em
objetos físicos (como o interior de uma livraria) ou podem ser lidos por
uma voz. Articular os comportamentos ajuda a definir padrões de uma
forma mais preparada para o futuro, porque os comportamentos são
neutros em relação à plataforma.

UM INVENTÁRIO DIRECIONADO A UM PROPÓSITO

O inventário de interfaces2 é um exercício popular para começar

a sistematizar uma interface. Envolve tirar screenshots de vários
elementos da interface do usuário e, em seguida, agrupar itens de
aparência semelhante.

Mas, embora a ideia seja direta, ela pode ser feita de várias maneiras.
Às vezes, os inventários se concentram na consistência visual da
interface; por exemplo, certificando-se de que todos os botões tenham
a mesma aparência, todos os menus sejam consistentes e assim por diante.

1 Da mesma forma, os padrões de design podem ser usados para criar comportamentos
que sequestram a atenção do usuário ou manipulam as pessoas para gastar
tempo e dinheiro em algo de que se arrependerão mais tarde (https://darkpatterns.org/).
Permanecer consciente dos comportamentos pode ajudar a garantir que os
interesses do usuário estejam sempre no
centro do design. 2 http://smashed.by/uiinventory
Machine Translated by Google

186 Capítulo 8

O principal objetivo do processo descrito neste capítulo não é dar

conta de todas as inconsistências visuais; é definir os padrões de
design mais essenciais e obter entendimento mútuo na equipe sobre
como eles devem funcionar no sistema.
Passar por esse processo dará à sua equipe uma ideia de quais
áreas precisam de mais atenção. Um resultado típico seria uma lista
de elementos que precisam ser padronizados, juntamente com alguns
esboços e ideias de como os padrões devem ser definidos.

Embora um inventário visual normalmente agrupe coisas por

aparência e tipo (botões, controles de guia e assim por diante), no
exercício a seguir você pode acabar com coisas no mesmo grupo que
parecem diferentes, porque você as está agrupando por finalidade
(os comportamentos que eles são projetados para encorajar ou habilitar.)

Em um inventário direcionado a um propósito, as coisas da mesma categoria

podem parecer diferentes porque são agrupadas por propósito e não visualmente.
Machine Translated by Google

Sistematizando Padrões Funcionais 187

Isso significa que, em vez de focar em fazer com que todos os

botões pareçam consistentes, primeiro tentaremos entender
quando usar um determinado tipo de botão, quando usar um link em
vez de um botão e quando não usar um botão e, em vez disso, clicar
diretamente no objeto. É claro que, ao fazer isso, melhoraremos a
consistência visual, mas não será o foco.

PREPARAÇÃO

Tempo

Para ser mais eficaz, esse processo deve ser executado após o
trabalho fundamental de UX - pesquisa do usuário, estratégia de
conteúdo, arquitetura da informação, direção do design - ter sido
elaborado. Se o design tiver falhas fundamentais e problemas de
usabilidade, eles seriam distrativos e contraproducentes de se lidar.
Por motivos semelhantes, se sua interface estiver prestes a passar
por uma grande reformulação, é melhor obter clareza sobre a nova
direção do design primeiro.

Pessoas

Ter perspectivas diferentes pode ajudá-lo a ser mais objetivo e

levar em conta mais casos de uso. É importante que designers e
desenvolvedores front-end participem, mas o ideal é envolver um
desenvolvedor back-end, alguém com experiência em conteúdo
e um gerente de produto. O tamanho ideal do grupo é de cerca de 4 a
8 pessoas. Se for necessário envolver um grupo maior, considere
executar o exercício inicial com alguns representantes.
Machine Translated by Google

188 Capítulo 8

ativos de diferentes disciplinas e, em seguida, realizar sessões de

acompanhamento para interrogar mais pessoas.

Impressões de interface

Identifique as principais telas e fluxos de usuários que são absolutamente

fundamentais para o seu produto, sem os quais o produto não existiria.

Normalmente, cerca de 10 a 12 telas são suficientes, às vezes menos.

Eles podem ser modelos de design ou capturas de tela de uma interface

existente.

Digamos que você esteja trabalhando em um site de biblioteca pública.

O objetivo do site é ampliar a experiência da biblioteca física, talvez

garantindo que os leitores possam reservar livros com antecedência e

assim evitar filas e espera por materiais quando estiverem na biblioteca.

As telas principais ajudam a atingir esse objetivo, permitindo que você

encontre livros específicos, descubra novos livros, reserve materiais
para coleção e baixe os materiais. Claro, há muito mais em um site de

biblioteca: eventos e exposições, associações, coleções online. Embora

devamos tomar nota das outras áreas, geralmente não é necessário

cada visualização para começar.

Imprima duas cópias de cada tela. Coloque o primeiro conjunto na parede,

na ordem de uma jornada típica do usuário. O segundo conjunto será

usado para recortar padrões e agrupá-los.

Machine Translated by Google

Sistematizando Padrões Funcionais 189

Você estará constantemente mudando do sistema como um todo para

padrões individuais ao longo do exercício. Ter dois conjuntos de
impressões ajudará você a se concentrar nos detalhes e no quadro
geral, sem perder o contexto de onde vêm os padrões depois de cortá-
los.

Você também precisará de tesouras, marcadores, post-its e bastante

espaço na parede e na mesa para trabalhar.

1. Identifique os principais comportamentos

Comece identificando as principais necessidades e comportamentos

do usuário que você deseja oferecer suporte em cada segmento da
jornada do usuário. Para um aplicativo pequeno com apenas algumas
telas, você verá as telas individuais ou diferentes estados na mesma tela.

Para produtos maiores, ajuda a agrupar as páginas em segmentos da

jornada do usuário.

Para retornar ao exemplo do site da biblioteca pública, você pode

agrupar algumas de suas páginas com base nestes comportamentos:

• Descoberta: Incentive as pessoas a descobrirem livros nos quais

possam se interessar. Para fazer uma analogia com uma
livraria, esta área é como as escolhas da equipe ou novas
prateleiras de vitrine de livros. Se alguém não sabe o que

que estão procurando, podem se inspirar na seleção em exibição.

Machine Translated by Google

190 Capítulo 8

• Catálogo: Encontre livros específicos. Pesquisar um log de gato é como

abordar um membro da equipe e fazer

um pedido.

• Lista de desejos: permitir que as pessoas visualizem e gerenciem seus

livros selecionados. Em uma loja física, você colocaria alguns dos livros

de lado para poder decidir mais tarde quais deles manter.3

Algumas das telas principais agrupadas pelos comportamentos que suportam durante a

jornada do usuário.4

3 Se você tiver muitas páginas nos mesmos segmentos que suportam

comportamentos semelhantes, é uma indicação de que sua arquitetura de informações

pode precisar de ajustes.

4 As páginas de exemplo são retiradas de https://www.nypl.org, para fins

ilustrativos.
Machine Translated by Google

Sistematizando Padrões Funcionais 191

Observe as páginas com comportamentos conflitantes: situações em que

incentivamos as pessoas a procurar novos livros, baixar algo, assinar um boletim

informativo e verificar os últimos eventos, tudo ao mesmo tempo. Mesmo que

uma tela suporte vários comportamentos, as ações mais importantes devem ser

claras e não conflitantes entre si. Ao lidar com vários comportamentos, concentre-

se primeiro nas principais jornadas do usuário e nos comportamentos mais

importantes. Neste exemplo: descobrindo, encontrando e reservando livros.

A redação é fundamental
As palavras que escolhemos importam. Eles influenciam a forma como pensamos.
Por alguns meses, a equipe em que trabalhei na FutureLearn

tinha “retenção” como nossa métrica. Ele se concentrou em fazer com que mais

pessoas continuassem aprendendo em um curso depois que ele começou.

Projetar para retenção foi difícil. Também não ficou claro como exatamente a

retenção beneficiou nossos usuários. Se a métrica tivesse sido chamada de

“engajamento”, poderia ter levado a diferentes resultados de design. E talvez

ainda mais, se a métrica estivesse centrada na qualidade e na satisfação do

aprendizado, e não no tempo gasto no site. (Alguém poderia ter passado meia hora

no FutureLearn e aprendido o que precisava, mas isso não contaria como sucesso.)
Machine Translated by Google

192 Capítulo 8

Os comportamentos devem ser significativos e funcionar na perspetiva

do utilizador, bem como da empresa.5 A “promoção” dos livros
beneficia apenas a biblioteca, mas a “descoberta” de novos livros também
tem valor para o leitor. Isso o torna uma escolha de idioma melhor e pode
influenciar a seleção dos livros exibidos, bem como a forma como
eles são exibidos.

Divida os comportamentos em ações

Depois de definir os comportamentos de alto nível, divida-os em ações

mais específicas que alimentam esses comportamentos.
Anote-os ao lado de cada tela. Por exemplo, as ações que suportam

a “descoberta de livros” são:

• Procure livros inspiradores ou interessantes

• Refinar a lista de livros recomendados

• Controle como a lista é apresentada

• Ver e aprender sobre um livro

• Faça uma seleção de livros que você pode gostar

• Lista restrita e reserva de livros

5 As empresas de sucesso unem os objetivos do usuário aos objetivos de negócios.

Se você realmente luta para unir os dois, seu produto pode ter problemas mais
profundos que um sistema de design não será capaz de resolver.
Machine Translated by Google

Sistematizando Padrões Funcionais 193

As ações alimentam os comportamentos de nível superior.

Você pode perceber que algumas das ações são repetidas

em toda a interface. Mas os elementos que os representam
nem sempre são os mesmos. Em algumas ocasiões, refinamos
uma lista de livros clicando nas guias; em outros, selecionando
um item de um menu. Para revelar essas inconsistências,
podemos auditar os elementos existentes.
Machine Translated by Google

194 Capítulo 8

2. Agrupar elementos existentes por finalidade

Tomando um comportamento de cada vez, examine todas as páginas
para encontrar os elementos que o suportam. Por exemplo, para
“Visualizar um livro”, podemos usar diferentes itens nas páginas
promocionais, nos resultados da pesquisa do catálogo e na lista de desejos.

Corte os elementos relacionados usando o segundo conjunto de

impressões. Organize-os em grupos e rotule cada grupo: “Exibir um livro”,
“Refinar uma lista” e assim por diante. Eles são os candidatos a serem
definidos como padrões. Os elementos devem ser agrupados no mesmo
nível de granularidade, assim você não terá um módulo “Lista de livros”
e um botão “Reservar” no mesmo grupo.

Grupos de itens: candidatos a definir como padrões.

Machine Translated by Google

Sistematizando Padrões Funcionais 195

3. Definir padrões

Agora que você tem grupos de elementos, decida como lidar

com os itens de cada grupo. Eles devem ser mesclados em
um padrão ou mantidos separados? Normalmente, isso é
resolvido caso a caso. Mas há duas técnicas que considero
particularmente úteis: colocar um padrão em uma escala de
especificidade e mapear sua estrutura de conteúdo.

ESCALA DE ESPECIFICIDADE

O mesmo padrão pode ser definido como mais específico ou

mais genérico. Digamos que precisamos exibir eventos e
exposições no site da biblioteca. Se os definirmos como dois
padrões separados, podemos tornar cada um mais
específico. Por outro lado, unificá-los em algo como um “bloco
de conteúdo” tornaria o padrão mais genérico.

Escala de especificidade.

Embora pareça um conceito simples, decidir o nível de

especificidade é uma das coisas mais complicadas do design
modular. Quanto mais específico algo é, menos reutilizável ele
é. E, inversamente, para tornar algo mais reutilizável, você
Machine Translated by Google

196 Capítulo 8

também precisa torná-lo mais genérico. Com peças mais específicas, o

sistema torna-se mais difícil de manter e manter consistente. Mas muitos
módulos genéricos levam a projetos genéricos.
Como em muitas coisas, não há uma maneira certa de definir padrões
e tudo depende do que estamos tentando alcançar.

Queremos que os visitantes do site percebam as exposições de forma

diferente dos eventos? Há algo sobre eventos que possa entrar em
conflito com o design das exposições? Nesse caso, devemos
considerar dividi-los. Por exemplo:

• O desenho de um módulo expositivo pode ser centrado em torno

de uma imagem da arte. Como as exposições são únicas,
elas podem apresentar títulos personalizados que complementam a
arte para dar uma sensação de pôster. A data pode ser colocada
em letras menores e posicionada no canto, para não desviar a
atenção do pôster.

• Os eventos são mais simples. Poderíamos centrar o design em torno de um

data de destaque e um ícone do evento.

Se não há razão para diferenciar entre os dois tipos, devemos unificá-

los em um padrão: coisas para fazer na biblioteca. Fazer isso
tornará o padrão mais genérico porque teria que funcionar para ambos
os casos. Mas seria

também significa que todas as alterações que fizermos nos eventos serão
aplicadas às exposições. A consistência será mais fácil de alcançar, mas
às custas da flexibilidade.
Machine Translated by Google

Sistematizando Padrões Funcionais 197

ESTRUTURA DE CONTEÚDO

Outra ferramenta que considero útil é mapear a estrutura de conteúdo de um

padrão. Cobrimos isso brevemente no capítulo 4 sobre padrões funcionais.

Aqui está um lembrete do que isso envolve:

1. Liste os slots de conteúdo principal de que um módulo precisa para ser eficaz

tivo. Este módulo pode funcionar sem a imagem ou a imagem é essencial

para o seu propósito? Um rótulo é sempre necessário? Marque os elementos

opcionais.

2. Determine a hierarquia dos elementos e decida como eles devem ser

agrupados: o ícone faz parte da informação principal ou faz parte da imagem?

3. Faça esboços para visualizar a estrutura. O mesmo

o padrão pode ser apresentado de inúmeras maneiras e o esboço ajuda a

encontrar o design ideal.

Normalmente, os elementos que podem ser mesclados em um padrão

compartilham a mesma estrutura subjacente. Por outro lado, se você luta para

unificar as estruturas de vários elementos sem comprometer seu propósito, é uma

indicação de que eles não devem ser mesclados.

Às vezes, os elementos têm uma estrutura semelhante, mas devido ao contexto

ou à nossa intenção de design, eles precisam ter uma aparência ou um comportamento

diferente. Neste caso, podemos criar variantes. Uma variante é uma versão modificada

do mesmo padrão.
Machine Translated by Google

198 Capítulo 8

Pegue o site da biblioteca novamente. Digamos que você acabou com

esses itens em seu grupo "Visualizar livro".

Itens de livros agrupados: candidatos a definir como padrões.

Você pode decidir que os itens A e B compartilham o mesmo propósito:

ambos aparecem em listas e permitem que as pessoas visualizem um
livro e aprendam sobre ele. Eles também compartilham o mesmo conteúdo
estrutura:
Machine Translated by Google

Sistematizando Padrões Funcionais 199

Estrutura de conteúdo para item de livro.

Embora ações e miniaturas estejam faltando no item B, não

há nenhuma razão óbvia para isso. As miniaturas são úteis para
digitalizando os livros e você poderá reservar um sem
precisar sair da sua lista de desejos.

Por outro lado, os itens D e E são diferentes. Seu principal

objetivo é fornecer inspiração e apresentar itens novos e
notáveis. Se desenharmos sua estrutura, pode ser assim:

Estrutura de conteúdo para vitrine de livros.

Machine Translated by Google

200 Capítulo 8

Você pode verificar isso pensando em como espera que as

mudanças aconteçam. Pergunte-se: se eu mudar este módulo,
quero que os outros mudem da mesma forma? Por exemplo, mesmo
que “capa” e “miniatura” pareçam semelhantes, podemos decidir tratá-
los como coisas totalmente diferentes. Talvez o design das páginas de
descoberta envolva algumas interações e animações específicas
para chamar a atenção para o exibido

livros. Não queremos que o mesmo efeito se aplique a um item de

livro padrão em uma lista.

Agora vamos dar uma olhada no item C. É semelhante a A e B e

compartilha sua estrutura de conteúdo. Mas é mais proeminente

por causa de seu contexto: as partes de descoberta e exibição do
site. Também é mais detalhado e fornece mais informações do
que um item de livro em uma lista. Nesta situação seria
faz sentido tornar esse elemento uma variante do item de livro.
Machine Translated by Google

Sistematizando Padrões Funcionais 201

Com variantes, você normalmente teria um padrão padrão com os

estilos principais. As variantes teriam estilos adicionais.
É importante saber quais recursos são essenciais para o padrão e
quais são específicos das variantes. Então você pode prever como
uma mudança em um deles afetará os outros.

No exemplo acima, alguns dos elementos do padrão principal

padrão variam em escala, fazendo com que o padrão pareça bem
diferente:

• título grande
• miniatura grande •
layout mais espaçoso

Sabemos que podemos alterar o título sem afetar o item do livro, mas
se alterarmos o estilo do autor, por exemplo, a alteração será
aplicada em ambos os locais.

Observar a relação entre a estrutura do conteúdo e os estilos pode

aumentar a reutilização de mais padrões. Tente passar por todos
os seus padrões e combinar o conteúdo subjacente (“título do livro”)
com nomes de estilo (“título grande”, “título pequeno”, “metadados
pequenos”). Da mesma forma, este seria um bom lugar para
começar a olhar para contagens de caracteres ou variações de
tamanho de imagem. Um padrão funcionará com mais tipos de
conteúdo se tamanhos diferentes forem padronizados.
Machine Translated by Google

202 Capítulo 8

NOMEAÇÃO

Conforme discutimos no capítulo 5 sobre linguagem compartilhada, os

nomes afetam como os padrões são usados. Um nome bem escolhido é

uma ferramenta poderosa para moldar seu sistema de design.

Tente encontrar um nome que reflita a posição de um padrão na escala de

especificidade. Em caso de dúvida, comece com um nome mais

específico. Por exemplo, costumávamos ver o processo de aprendizagem

em um curso no FutureLearn como um tipo especial de experiência, que

vinha com seu próprio conjunto de módulos, específicos para o

área do curso.

Guias do curso na área de visão geral do curso no FutureLearn.

Nesse caso, fazia sentido usar o nome “Guias do curso” —

não queríamos reutilizá-los em nenhum outro lugar. Esse nome também

sinalizou para o restante da equipe que não eram apenas guias genéricas

— eram específicas para a área do curso. Mais tarde

Machine Translated by Google

Sistematizando Padrões Funcionais 203

decidimos que este módulo também poderia ser útil em outras

lugares e alterou o nome para "Guias de página". O novo nome era mais
genérico, e voltou a sinalizar para a equipe que já estava disponível para
ser utilizado em outras áreas.

Às vezes, os módulos são nomeados no front-end, mas a nomeação

também é uma decisão de UX e deve ser feita de forma colaborativa na
fase de design. Os nomes precisam levar em consideração o tipo de
conteúdo, mas não devem ser baseados apenas no conteúdo.
Nomes eficazes orientam o uso e reduzem as chances de padrões
duplicados.

Repita o processo em uma escala menor

Depois de agrupar as partes independentes, repita o processo com outros
elementos. Normalmente, isso envolveria várias sessões: uma para
discutir os comportamentos gerais do usuário e outras separadas para
observar padrões mais granulares, como:

• botões e links

• títulos • listas

• guias e menus

• botões de opção, botões de alternância e caixas de

seleção • mensagens de
feedback •
navegação
• imagens • ícones
Machine Translated by Google

204 Capítulo 8

Se você tiver elementos com propósitos semelhantes, pense neles em

relação uns aos outros, em vez de independentemente. Como os
botões são diferentes dos links? Como a navegação por guias é
diferente de um menu de lista? Como um menu suspenso é diferente
de um conjunto de botões? Como uma caixa de seleção é diferente de um

botão de alternar? 6

Aqui estão alguns pontos a serem considerados ao auditar links

e botões.

CONSISTÊNCIA DE AÇÕES

Botões e links

Tradicionalmente no desenvolvimento web, links e botões são

diferentes. Um link leva o usuário para longe da página atual. Um
botão envia uma ação e alterna algo na interface.7 Mas, na prática,
não é fácil tomar decisões de design com base apenas nesse critério.

6 Existem diretrizes gerais e práticas recomendadas (para obter um excelente

recurso, consulte Designing Web Interfaces, de Bill Scott e Theresa Neil; e
Designing Interfaces: Patterns for Effective Interaction Design, de Jenifer
Tidwell), mas algumas coisas podem ser específicas para sua situação. Mesmo
que sejam de conhecimento comum para algumas pessoas, vale a pena
verbalizá-los para que o restante da equipe possa aprender.

7 Consulte http://smashed.by/linksvsbuttons por Marcy Sutton; e http://

smashed.by/properbuttons por Dennis Lembrée.
Machine Translated by Google

Sistematizando Padrões Funcionais 205

Suponha que temos um item de livro com um botão "Ver livro".

Clicar no botão expande o módulo, revelando mais informações sobre o

livro. Agora imagine que a mesma informação seja aberta em uma página

diferente. Isso significa que a ação deve ser apresentada como um link?

Tal como acontece com muitas outras coisas, a confusão muitas vezes

reside na linguagem. Algumas pessoas (desenvolvedores, geralmente) definem

um botão como um gatilho que envia dados. Portanto, um link marcado

como um botão de botão não seria considerado um botão verdadeiro por

eles. Outros (geralmente designers) veem um botão como uma chamada à

ação distinta e autônoma. Eles se refeririam a um elemento autônomo

"Visualizar livro" como um botão, mesmo que estivesse marcado como link.

Diferentes sistemas também abordam isso de maneira diferente. No Carbono da

IBM , 8 links são um elemento de navegação. Os botões são usados apenas se a

ação do usuário for alterar ou manipular dados.

No Shopify Polaris, 9 por outro lado, os botões podem representar qualquer

tipo de ação, inclusive a navegação. Os links são usados para ações

incorporadas e para navegação.

8 http://smashed.by/ibmcarbon
9 http://smashed.by/polaris
Machine Translated by Google

206 Capítulo 8

Uso de links no Carbon da IBM.

Para mim, o aspecto mais importante é uma expressão consistente

de propósito. Os usuários (tanto aqueles que acessam a interface
visualmente quanto por meio de leitores de tela) precisam saber o
que esperar. Se mas tons forem sempre usados apenas para enviar
dados, seria confuso ter uma situação em que eles se
comportassem como links. Mas se houver um uso consistente
de links estilizados como mas toneladas (como para chamadas de
ação independentes) em toda a interface, isso seria apropriado.

Para evitar confusão e uso indevido desses elementos essenciais,

é importante concordar com suas definições. Quais são os
significados compartilhados de “botão” e “link” em sua equipe? Quais
são as diretrizes básicas para seu uso?
Machine Translated by Google

Sistematizando Padrões Funcionais 207

Uma das distinções mais simples e eficazes que encontrei

foi sugerida por Heydon Pickering em Inclusiv Design
Patterns. 10 A ideia é diferenciar links e chamadas para
ação (CTAs), em vez de botões e links. Uma ação autônoma
importante pode ser apresentada como um botão, mas
pode ser marcada como um link ou um botão, dependendo
da interação. A questão de saber se é um link ou um botão é
uma questão de variantes — antes de mais nada
é um CTA.

Um exemplo de classificação de botões e links. Além disso, ajuda a

fazer uma sutil diferença no estilo dos CTAs, para indicar uma diferença
na interação.

Se a ação ocorrer na página atual, use um botão CTA. Se a

ação tirar o usuário do contexto atual, use um link CTA. As
chamadas para ação são diferentes dos links padrão, que
representam caminhos para informações opcionais e
geralmente são incorporadas ao conteúdo: corpo do texto, títulos, imagens.

10 http://smashed.by/inclusivedesignpatterns
Machine Translated by Google

208 Capítulo 8

Fazer uma distinção dessa maneira permite atender à

necessidade de design de manter proeminentes as chamadas
à ação importantes e, ao mesmo tempo, manter o código simples
e acessível.

HIERARQUIA VISUAL

A maioria das interfaces possui equivalentes de botões primários

e secundários. Mas o que significa “primário” exatamente?
Significa a ação mais importante no contexto de toda a interface
ou de uma tela ou seção específica? Por exemplo, um botão
“Reservar livro” deve sempre ter um determinado estilo devido à
importância da ação em um site de biblioteca?

No sistema de design da Marvel, 11 botões “planos” são usados para significar

“ações necessárias ou obrigatórias”; Botões “fantasmas” são usados para

significar “ações opcionais, pouco frequentes ou sutis”. Os botões planos podem

ser usados lado a lado, quando as ações são igualmente importantes. Gosto

dessa distinção porque é simples, clara e específica para a finalidade do botão.

Mas para interfaces mais complexas com um número maior de

botões, fica difícil manter suas funções tão específicas. Você
também pode precisar ver como os botões se relacionam quando
usados juntos. No sistema da Atlassian12 e Polaris da Shopify, 13

11 http://smashed.by/marvel
12 http://smashed.by/atlassian
13 http://smashed.by/polaris
Machine Translated by Google

Sistematizando Padrões Funcionais 209

os botões principais representam “as ações mais importantes em

qualquer experiência” e, portanto, devem aparecer apenas uma vez
por tela.

Alguns dos tipos de botão no Polaris, organizados pelo nível de destaque

Eles possuem um botão “básico”, usado por padrão. Outros estilos

são usados apenas “se um botão exigir mais ou menos importância”.
Pense desta forma: se a interface fosse lida por uma voz, qual ação
seria lida primeiro? Quais ações seriam

ser anunciado mais alto ou com uma entonação diferente?

CASOS ESPECIAIS

Sempre haverá casos especiais. No exemplo do site da biblioteca,

o botão “Reservar” pode ser tratado de forma diferente.
Pode incluir estados específicos para a ação; por exemplo, seu rótulo
pode mudar para “Cancelar reserva” se o livro ainda não tiver sido
retirado.
Machine Translated by Google

210 Capítulo 8

O botão “Alternar progresso” do FutureLearn também pode ser visto como

um caso especial. É usado apenas em etapas de aprendizado, para
indicar se uma etapa foi concluída. Uma animação saltitante e um ícone
de marca aparecendo foram projetados para dar uma sensação de
comemoração. Não serve para mais nada.

Botão de alternância de progresso.

Talvez seja por essa especificidade que nos esforçamos tanto para
nomeá-lo — tentamos criar um nome genérico (“Pro gress toggle”)
quando, na verdade, poderia ter um nome específico para sua função — até
mesmo “Mark complete” poderia ter sido um nome mais apropriado e
memorável neste caso.

Tanto o botão “Alternar progresso” quanto o botão “Reservar” da biblioteca

são coisas que podemos querer tornar mais memoráveis.
São funções-chave da marca e talvez oportunidades para momentos
marcantes.
Casos especiais como este devem ser ocasionais, tanto para que
pareçam distintos, mas também para que as regras gerais de padrão
sejam mantidas.
Machine Translated by Google

Sistematizando Padrões Funcionais 211

Resumo
Neste capítulo, examinamos a sistematização de uma pequena seção de uma

interface. Após acompanhar este processo em sua equipe, você terá um melhor

conhecimento do seu sistema e das áreas que precisam de atenção.

Para as próximas etapas, as equipes podem mergulhar no código e no Sketch

para trabalhar na finalização dos designs dos padrões – certificando-se de que

funcione para todos os casos de uso necessários, definindo estados e

comportamentos, refatorando o código.

A primeira vez que fizer este exercício, você pode ficar impressionado

com o número de elementos e padrões. Você não precisa fazer tudo de uma vez.

Comece com os padrões centrais, fundamentais para a experiência, depois

passe para outra área. Mais importante ainda, este exercício precisa ser feito

regularmente, à medida que seu sistema evolui. É um pouco como jardinagem -

quanto mais tempo você deixa, mais difícil é deixá-lo em boa forma.

Agora, vamos olhar para os padrões de percepção.

Machine Translated by Google

212 parte II

Capítulo 9

Sistematização de padrões de percepção

O exercício deste capítulo descreve como definir
padrões de percepção e integrá-los ao sistema.

produtos que eu estava usando - o design de controles de

Algo chamou minha
acordeão. atenção
Em ambas recentemente
as interfaces nos dois
os acordeons pareciam semelhantes

e tinha funcionalidade (padrão) idêntica: expandir e recolher

seções de conteúdo. Ambos seriam considerados “esteticamente
agradáveis” pela maioria das pessoas. Mas de alguma forma
um deles não parecia tão robusto quanto o outro. O estado de foco
era muito sutil, as transições eram um pouco lentas, o estado
selecionado não se destacava e não parecia haver contraste
suficiente entre os títulos e a cópia do corpo.

O design do outro acordeão parecia acertar todos os

detalhes. Além disso, os mesmos padrões - cores,
transições, contraste, tipografia - foram aplicados em
toda a interface, o que ajudou a torná-la robusta e bem
construída. Embora os dois produtos tivessem utilidade
semelhante, um deles transmitia uma percepção de
qualidade e confiabilidade, enquanto o outro parecia frágil e frágil.

Às vezes pensamos que se a beleza não é o que procuramos,

não devemos dar importância à estética: “É apenas uma
ferramenta funcional. Não precisa parecer nada em particular.”
Mas então perdemos uma oportunidade chave para influenciar
Machine Translated by Google

Sistematização de padrões de percepção 213

como um produto é percebido. O que é importante, claro, não são os

estilos em si, mas o efeito que eles têm. Uma ferramenta funcional
deve ser útil e utilizável, mas também deve parecer simples, segura e

robusta.

Para influenciar a percepção de maneira confiável e escalável,

precisamos estar cientes dos padrões que a criam.

Olhando além das propriedades de estilo

A maneira mais óbvia de pensar em cor, tipografia, espaçamento e outros

estilos é em termos de suas propriedades: valores de cores, tamanhos de
texto, unidades de medida.

Veja a cor, por exemplo. Em muitas bibliotecas de padrões é representado

por um conjunto de valores.

Pivotal's (http:// smashed.by/ pivotal) variáveis de cores demonstram uma abordagem

comum para representar informações de cores.
Machine Translated by Google

214 Capítulo 9

Mas mesmo com uma paleta de cores padronizada, ainda há muito espaço
para interpretação. O que os valores representam?
Qual variação de verde você deve usar? Como as cores funcionam juntas?

Aqui está um pensamento contra-intuitivo, para um entusiasta de

sistemas de design: pequenos desvios de cor não são problemáticos.
Na verdade, ter vinte tons de azul não é um problema, se o azul tiver
um significado consistente em toda a interface. Mas se o azul
representa links em algumas partes do site e em outras há títulos azuis
nos quais os usuários não podem clicar, isso pode causar problemas de
usabilidade. Um conjunto de cores compartilhadas não é suficiente —
você também precisa de um uso compartilhado de cores no contexto do produto.

Da mesma forma, uma escala tipográfica bem definida por si só não

tornará sua tipografia mais coesa. Mesmo depois de padronizarmos todos
os tamanhos de texto no FutureLearn e introduzirmos um sistema unificado

escala de tipos, os cabeçalhos ainda não eram usados de forma

consistente - designers e desenvolvedores não tinham certeza de qual
tamanho escolher na escala. O uso compartilhado da tipografia exigia
diretrizes claras e padrões de uso que todos pudessem entender.
Machine Translated by Google

Sistematização de padrões de percepção 215

A escala tipográfica no FutureLearn forneceu uma base para toda a tipografia.

Como definimos os estilos de uma forma que comunique seu

propósito e encoraje seu uso consistente? Como antes,
começaremos em um nível mais alto e depois entraremos nos
detalhes. Com os padrões funcionais, examinamos primeiro os
comportamentos do usuário. Com padrões perceptivos,
começaremos com qualidades estéticas.
Machine Translated by Google

216 Capítulo 9

Qualidades estéticas e padrões de assinatura

Cada interface tem uma certa sensação, mesmo que seja
representada apenas por texto ou voz. Os estilos mais eficazes não são
aplicados na superfície, mas evoluem com o produto — eles se
vincularão ao seu ethos e aos princípios básicos de design (“Atemporal,
sem vanguarda”, “Direção acima da escolha”). Pense em como essas
qualidades são incorporadas. O que faz seu produto parecer menos
demorado, ou utilitário, ou tradicional, ou moderno, ou quente, ou
robusto?

Se o design já existe há algum tempo, definir esses padrões nem

sempre é fácil. Vimos (com os exemplos do FutureLearn no
capítulo 4) que, à medida que seu produto cresce, sua estética central
pode mudar. Ao olhar para os estilos, você pode perceber que alguns
deles são mais eficazes do que outros e têm associações mais fortes
com sua marca.

Padrões de assinatura1 é um exercício inicial útil para colocar toda

a equipe (não apenas os designers) na mesma página, especialmente se
eles não estiverem acostumados a pensar em padrões de percepção.

1 Veja o capítulo 4
Machine Translated by Google

Sistematização de padrões de percepção 217

Peça a cada pessoa para escrever os elementos mais

memoráveis e distintos que fazem seu produto parecer de uma certa maneira.

• Quais são os estilos e tons que primeiro vêm à mente quando

as pessoas pensam em seu produto?

• Como seus usuários descrevem a estética?

• Existem momentos frequentemente lembrados no feedback do

usuário (“Aquele tique rosa sempre me faz sorrir”)?

Também é útil identificar onde o design está fora da marca; por

exemplo, “Pequenas animações sutis, não saltitantes rápidas”.

Pense não apenas nas propriedades, mas também nos

princípios de alto nível, nas combinações de diferentes
elementos e nas relações entre eles. Por exemplo, em vez de
simplesmente listar as cores, descreva as proporções entre elas:
“Principalmente branco com detalhes em rosa e azul”. Inclua
exemplos de uma representação típica do padrão.

Aqui está a aparência da sua lista:

Machine Translated by Google

218 Capítulo 9

Notas do exercício de padrões de assinatura para o FutureLearn.

Acho que capturar padrões de assinatura como uma equipe pode

fornecer orientação e inspiração para todo o processo. Ao olhar para
as formas, digamos, se os círculos são uma característica distintiva
em sua interface, você pode querer questionar por que você usa
quadrados em alguns casos.

Identificando padrões de percepção

Baseando-se no exercício de padrões de assinatura, você deve
fazer sua própria lista de estilos individuais para trabalhar.
Aqui estão alguns dos tipos de coisas que podem aparecer em
sua lista:
Machine Translated by Google

Sistematização de padrões de percepção 219

• cor

• estados interativos

• animações

• tipografia

• espaçamento

• estilos de iconografia

• formas e bordas

• ilustrações

• fotografia

• voz e tom

• sons e dicas de áudio

Com cada estilo individual que você escolhe focar, há um processo

simples para sistematizá-los:

1. Comece com o propósito.

2. Colete e agrupe os elementos existentes.

3. Definir padrões e blocos de construção.

4. Concorde com os princípios orientadores.

Machine Translated by Google

220 Capítulo 9

Você não conseguirá passar por todos os estilos de uma só vez.

Cada um precisará de seu próprio inventário (e possivelmente um
sprint ou mais para integrar as alterações posteriormente).

Ao percorrê-los, haverá sobreposições: entre tipografia e espaço,

cor e texto, formas e bordas, bordas e iconografia. Isso é bom,
porque você pode desenvolver as propriedades definidas
anteriormente e pode ver como elas se relacionam entre si. Por
exemplo, as cores definidas serão usadas em estados interativos;
estados interativos serão usados nas animações. Ao observar a
tipografia e o espaçamento, você pode ver como o tamanho do texto
afeta o espaçamento ao redor dele.

Cor
O objetivo da primeira etapa é tornar o uso da cor mais consistente.
Para fazer isso, começaremos listando as funções que as cores
desempenham em sua interface.

COMECE COM O OBJETIVO

O fraseado é importante. Como expressamos um propósito não deve

ser vago e óbvio. Uma declaração como esta, do Web Experience
Toolkit do governo do Canadá,2 não seria particularmente útil: “Use a
cor como um elemento de apresentação para fins decorativos ou para
transmitir informações”.

2 http://smashed.by/wetoolkit
Machine Translated by Google

Sistematização de padrões de percepção 221

Seja específico. Por exemplo, a cor pode ser usada para:

• Exibir diferentes tipos e hierarquia de texto (corpo, cabeçalhos,

citações).

• Destaque links e ações (CTAs principais, CTAs de apoio, links).

• Chame a atenção para as mensagens e diferencie entre

eles (afirmação, advertência).

• Separe o conteúdo ou crie ênfase (fundos,

fronteiras).

• Diferencie os tipos de dados (em tabelas, gráficos).

As funções que você definir determinarão as categorias do seu inventário.

COLETE E AGRUPE AS CORES EXISTENTES

Embora eu prefira inventários de papel por causa de sua tangibilidade,

é complicado auditar estilos recortando-os no papel. Um Google doc3
pode funcionar melhor, assim como Keynote, PowerPoint ou Sketch - o
que for mais adequado para você.

Configure um documento em branco com as categorias. Ao passar

pela auditoria, você pode ajustar os títulos ou adicionar novos, mas
ajuda a não começar com uma página em branco.

3 http://smashed.by/coloraudit
Machine Translated by Google

222 Capítulo 9

Exemplo de categorias iniciais para auditoria de cores em um documento do

Google (http:// smashed.by/ coloraudit).

Para cada categoria, adicione:

• Tipo: Especifique o tipo de objeto ao qual a cor é aplicada, como uma

chamada para ação, um cabeçalho, uma mensagem de feedback e assim

por diante.

• Exemplo: adicione uma captura de tela do elemento, para mostrar

onde a cor é usada.

• Valor: Especifique o valor hexadecimal.

• Sensação: se o objetivo da cor é criar um certo clima ou sensação,

especifique isso.
Machine Translated by Google

Sistematização de padrões de percepção 223

Você terminará com uma lista de ocorrências de cores agrupadas

por finalidade. Aqui está um exemplo de auditoria para links e botões
na interface da biblioteca pública. Da mesma forma, eu coletaria e
agruparia cores de texto, mensagens de feedback, fundo, bordas
e assim por diante.

Auditoria de links e botões, realizada em um documento do Google.

Algumas cores terão uma sensação específica associada a elas.

Na interface do TED, cabeçalhos pretos são usados para criar uma
sensação mais cinematográfica (e menos informativa). No
FutureLearn, um gradiente completo de azul a amarelo ajuda a criar
um clima de comemoração quando um aluno conclui um marco.
Machine Translated by Google

224 Capítulo 9

Uso de gradiente completo no FutureLearn para uma comemoração de marco.

Se houver qualidades emocionais específicas que a cor pretende

trazer para o seu produto, é importante capturá-las.
O uso indevido pode enfraquecer a finalidade a que as cores foram destinadas.

Usar um gradiente completo em módulos promocionais no

Future Learn, por exemplo, enfraqueceria sua associação
com celebração.

DEFINIR PADRÕES

Em seguida, você pode definir padrões de uso com base no

propósito da cor (e sensação, se apropriado). Quando você
usa links azuis e quando cinza? Qual é o significado das
chamadas à ação vermelhas? Por que alguns planos de fundo
são cinza e outros coloridos? Qual é a diferença entre preto e vermelho
títulos?
Machine Translated by Google

Sistematização de padrões de percepção 225

Não se preocupe com os valores hexadecimais exatos ainda. O

que importa é que você concorde com o uso de cores na interface.
Aqui está um exemplo de como os padrões podem ser definidos
para links e botões.

Como os padrões de cores para links e botões podem ser definidos para o site da biblioteca.

Objetivo primeiro significa que às vezes você está mudando a

maneira como a cor é usada. Por exemplo, quando os elementos
interativos são vermelhos, esperamos que todos os elementos
vermelhos sejam interativos (como na imagem acima). Mas no
exemplo da página seguinte, você não pode clicar no título
“Recomendações” para ver as recomendações. Nesse caso, podemos
considerar mudar a cor do título para preto ou torná-lo interativo.
Machine Translated by Google

226 Capítulo 9

Um cabeçalho vermelho no site da

biblioteca que não é interativo.

É importante observar que essas decisões podem alterar a estética

geral do site. Podemos decidir que links e chamadas para ação
devem ser vermelhos em vez de azuis, mas isso pode resultar em
uma mudança geral mais perceptível — de repente haveria muito
mais elementos vermelhos em proporção ao azul.

Na interface do FutureLearn, consideramos mudar as formas

quadradas usadas no módulo de progresso do curso para círculos,
antes de percebermos que a navegação do curso era um
padrão de natureza de sinal e substituir as formas alteraria a
sensação da marca.

Compreender os padrões de assinatura pode ajudá-lo a

encontrar o equilíbrio certo entre fazer melhorias e garantir que
você não enfraqueça ou dilua a estética existente. Se seu
objetivo é alterar o projeto atual, isso deve ser feito antes do
exercício de sistematização.
Machine Translated by Google

Sistematização de padrões de percepção 227

ESPECIFICAR BLOCOS DE CONSTRUÇÃO

Durante um inventário de cores, não é incomum descobrir dezenas de

variações da mesma cor (Marcin Treder descobriu 62 tons de cinza
ao fazer o inventário de cores para UXPin4 ). A maioria deles é
desnecessária e cria complexidades desnecessárias em design e código.

O objetivo desta etapa é tornar a paleta de cores mais focada,

precisa e acessível. Normalmente, isso envolve a redução do
número de variáveis para cada cor.

Aqui estão algumas dicas que podem ser úteis neste processo.

Comece apenas com o que você precisa

A vantagem de um inventário direcionado a um propósito é que ele

ajuda você a orientar e limitar as escolhas de cores. Quando você
começa com o papel e o significado da cor, você tem uma ideia de
quantas opções você realmente precisa. Ao considerar onde e como
eles serão usados, você saberá, por exemplo, que só precisa de
três variações de azul.

4 http://smashed.by/colorinventory
Machine Translated by Google

228 Capítulo 9

O número de tons e matizes irá variar, dependendo das

circunstâncias. Na interface do FutureLearn, propusemos tons e matizes
totalmente evitados (variedades mais escuras e mais claras da mesma
cor) para manter a paleta nítida. Isso nos ajudou a tornar o sistema
de cores simples e focado.

Por outro lado, o UXPin, uma ferramenta de prototipagem, possui

modos claro e escuro, o que significa que a paleta de cores precisa
de vários tons da mesma cor para fornecer contraste suficiente em
ambas as configurações.

As cores primárias e secundárias do FutureLearn (esquerda) e algumas das cores UXPin

mostram como a necessidade de variação de cor é diferente em diferentes interfaces.
Machine Translated by Google

Sistematização de padrões de percepção 229

Às vezes, você precisa ter mais opções, principalmente se houver

vários temas ou se estiver lidando com a visualização de dados. Mas
é importante evitar incluir as cores apenas para adicionar mais
variedade à sua paleta. Quanto mais opções houver, mais complexo
será o sistema e mais difícil será obter um uso consistente da cor.
Comece com apenas o que você precisa e construa a partir disso.

Se você tiver mais de duas variações da mesma cor, é útil

especificar um valor base e, em seguida, adicionar sombras e matizes
adicionais: 20% mais claro que a base, 20% mais escuro que a base
e assim por diante. Os valores de cor base fornecem padrões
consistentes. Quando há muitas opções a serem consideradas, os
padrões e incrementos significativos são mais fáceis de lembrar
e trabalhar. Especificar a cor base e os incrementos também
funciona para outros padrões perceptivos, como tipografia
(tamanho base da fonte), espaçamento (unidade base de medida)
e animações, como veremos mais adiante.

Certifique-se de que o contraste de cores esteja acessível

Teste o contraste de cores entre o texto e o fundo.

Ajustar ou remover os valores conforme necessário limitará sua paleta.
Por exemplo, entre várias variações de cinza claro usadas para
oferecer suporte a links no site da biblioteca, um dos valores
usados com frequência passa pelos padrões WCAG 2.0.
Isso tornaria uma escolha óbvia para o valor padrão

de links de apoio.
Machine Translated by Google

230 Capítulo 9

Existem muitas ferramentas para verificar o contraste de cores, como Lea

Taxa de contraste de Verou,5 que é rápida e direta
usar.

Verificador de taxa de contraste de Lea Verou.

Vale a pena mencionar que ajustar os valores das cores

requer um equilíbrio cuidadoso dentro da estética geral. Mude
o azul para um tom mais escuro, por exemplo, e toda a interface
pode repentinamente parecer diferente, talvez menos
vibrante. Se sua paleta de cores foi criada sem considerar a
acessibilidade de cores em primeiro lugar, obter o equilíbrio
certo exigirá algum requinte.6

5 http://smashed.by/contrastratio 6 Em
um projeto em que a acessibilidade de cores era um fator desde o início, você
não acabaria com paletas tão diferentes.
Machine Translated by Google

Sistematização de padrões de percepção 231

Você pode introduzir diferentes cores de destaque para fundos claros e

escuros ou alterar o texto em fundos coloridos de claro para escuro ou vice-

versa. Há também muitas ferramentas para gerar combinações de cores

compatíveis com contraste ou para encontrar alternativas acessíveis para

a cor original, como Color Safe7 e Tanaguru8 Contrast Finder.9

ACORDE SOBRE OS PRINCÍPIOS ORIENTADORES

Por fim, concorde com alguns princípios básicos para o uso de cores. Os

princípios orientadores ajudam você a abordar as cores de forma holística

e podem ser consultados quando algo não funciona bem. Alguns princípios

podem ser gerais (como “sempre use contraste de cores acessível”); outros

serão mais específicos para sua marca (e podem ser definidos durante o

exercício de padrões de assinatura).

Por exemplo, no toolkit10 da Sky, a equipe explica os motivos de uma paleta

de cores mínima:

Permitimos que nosso ótimo conteúdo seja a cor que dá vida à página.

“ Não codificamos com cores nossos sites ou seções dentro de nossos sites.”

7 http://colorsafe.co/ 8
http://smashed.by/contrastfinder 9
Para leitura adicional sobre equilíbrio com estética, recomendo vivamente
Color Accessibility Workflows de Geri Coady. http://smashed.by/
colora11y 10 http://smashed.by/skytoolkit
Machine Translated by Google

232 Capítulo 9

A Universidade de Oxford explica claramente como e por que usar suas cores:11

O azul Oxford (escuro) é usado principalmente em mobiliário de página geral, como

“ os planos de fundo no cabeçalho e no rodapé. Isso contribui para uma forte

presença da marca em todo o site. Por ser tão forte nessas áreas, não é

recomendado usá-lo em grandes áreas em outros lugares. No entanto, é usado com

mais moderação em elementos menores, como ícones de data de evento e barras

de pesquisa/ filtragem.”

Animações

Mesmo com padrões mais complexos, como animações, podemos seguir o mesmo

processo: começar com o objetivo, coletar e agrupar estilos existentes, definir

padrões e blocos de construção. Vamos usar o FutureLearn como exemplo

desta vez.

PROPÓSITO E SENTIMENTO

Especifique as funções que a animação desempenha. Por exemplo:

• Suavize as transições entre estados interativos, como

estados de pairar.

• Adicionar ênfase a uma informação ou ação específica; para

por exemplo, um empurrãozinho para encorajar os usuários a avançar para a

próxima etapa.

11 http://smashed.by/oxfordstyle
Machine Translated by Google

Sistematização de padrões de percepção 233

• Oculte e revele informações extras, como um menu oculto ao lado,

uma lista suspensa ou popover.

A sensação da animação é outro aspecto importante a considerar.

Em Designing Interface Animation, 12 Val Head explica como os
adjetivos que descrevem as qualidades da marca podem ser usados
para definir o movimento. Um movimento rápido, suave e saltitante
pode ser percebido como animado e enérgico, enquanto saídas suaves
constantes parecem certas e decisivas.

Para serem significativas e eficazes, as animações devem ter uma

sensação de propósito em toda a interface.

AUDITORIA DE ANIMAÇÕES EXISTENTES

Uma vez que você tenha uma ideia do papel que a animação
desempenha em sua interface e como ela deve ser, a próxima etapa
é auditar as animações existentes. Colete as animações e agrupe-as em
categorias, como fizemos anteriormente com as cores. Os exemplos
podem ser capturados com o QuickTime ou outro aplicativo de
gravação de tela.

12 http://smashed.by/designingia
Machine Translated by Google

234 Capítulo 9

A página “State Change” da auditoria de animação do FutureLearn, realizada em um

documento do Google.
Machine Translated by Google

Sistematização de padrões de percepção 235

DEFINIR PADRÕES

Defina padrões de uso com base no propósito e sensação.

Na interface do FutureLearn, notamos que as animações de
ênfase geralmente parecem mais divertidas e que as transições
de mudança de estado são mais sutis e calmas.

Se esses são os tons que você deseja atingir em todo o sistema,

tente alinhar todas as animações a eles. Assim como o exercício
de padrões de assinatura, pegue os exemplos que funcionam
bem (ou seja, alcance o propósito de forma eficaz e tenha a
sensação certa) e experimente suas propriedades com outras
animações da mesma categoria. Você vai acabar com um punhado
de padrões:

Padrões de animação no FutureLearn, agrupados por propósito e sensação.

Machine Translated by Google

236 Capítulo 9

ESPECIFICAR BLOCOS DE CONSTRUÇÃO

Existem dois conceitos importantes em animação, que andam de

mãos dadas: temporização e easing. Timing é quanto tempo leva uma
animação. Em combinação com a distância, determina a velocidade.
Easing define como algo é animado: começa devagar e aumenta a
velocidade (ease-in) ou começa rápido e diminui gradualmente
(ease-out)? Além disso, definiríamos as propriedades que estão
sendo animadas, como cor, opacidade, escala e assim por diante.

O tempo, especialmente, é crucial na animação. Acertar o timing não

é tanto uma questão de consistência técnica perfeita, mas sim
garantir que o timing pareça consistente. Dois elementos animados
na mesma velocidade podem parecer completamente diferentes se
tiverem tamanhos diferentes ou percorrerem distâncias diferentes.

Gosto da ideia de Sarah Drasner13 de lidar com o tempo de

animação da mesma forma que lidamos com títulos na tipografia.14
Em vez de apenas um único valor, comece com uma base e
forneça várias etapas incrementais. Por exemplo, se o tempo base
for 0,5 segundo, itens menores que percorrem uma distância menor
(como um ícone aumentando) levariam menos tempo. Itens que
percorrem distâncias maiores (como um menu pop-up) exigiriam mais
tempo. Uma transição de tela inteira seria um ou dois incrementos
acima do valor base.

13 http://sarahdrasnerdesign.com/ 14 http://
smashed.by/animationdesignsys
Machine Translated by Google

Sistematização de padrões de percepção 237

ACORDE SOBRE OS PRINCÍPIOS ORIENTADORES

Se sua equipe ainda não está confiante com a animação, pode valer
a pena definir princípios gerais, como “Reserve a animação para os
momentos mais importantes da interação” e “Não deixe a animação
atrapalhar a conclusão de uma tarefa. ”

Os princípios mais úteis geralmente são específicos de como sua equipe

aborda a animação. Por exemplo, os princípios do Salesforce
Lightning Design System15 recomendam manter o tempo curto e o
movimento sutil.

Os princípios orientadores também podem incluir metáforas

espaciais, que podem fornecer um modelo mental útil para os animadores.
O Material Design16 do Google é um ótimo exemplo de como visualizar
uma interface como materiais físicos pode fornecer uma referência comum
para designers e desenvolvedores ao pensar em movimento em seus
aplicativos.17

15 http://smashed.by/salesforcemotion
16 http://smashed.by/materialmotion
17 Para uma visão geral mais detalhada do processo, veja meu artigo
“Integrating Animation into a Design System”. (http://smashed.by/animationala)
Machine Translated by Google

238 Capítulo 9

Voz e Tom
A voz e o tom na cópia da interface do usuário desempenham um papel
fundamental em como um produto é percebido. Este é particularmente o

caso de interfaces baseadas em voz, mas também para pessoas que

experimentam produtos digitais através de outros sentidos além da
visão. Em uma conversa recente com Léonie Watson,18 uma especialista

em acessibilidade que também é usuária de leitores de tela devido à

cegueira, ela observou que sua experiência com produtos digitais “muitas
vezes se manifesta na forma de estilo de escrita”.

No entanto, os membros da equipe que definem as interações e os

padrões geralmente não são as mesmas pessoas que trabalharão na voz e

no tom. Isso pode levar a um estilo de escrita irregular e menos pensado
em toda a experiência. Para garantir que a voz e o tom sejam expressos
de forma consistente e proposital, as equipes de design, marca e marketing

precisam coordenar seus esforços ao definir padrões.

AUDITORIA DE PADRÕES DE VOZ E TOM

Além de coletar toda a cópia da interface do usuário em um documento

do Google, existem maneiras mais criativas de auditar a voz e o tom. Em

sua postagem no blog,19 a estrategista de conteúdo Ellen de Vries

compartilhou como ela “colheu” os padrões de linguagem durante o Clearleft's20

18 https://tink.uk/
19 “Dê uma olhada nos padrões de nossa língua” por Ellen de Vries.
(http://smashed.by/voicetoneinventory)
20 https://clearleft.com/
Machine Translated by Google

Sistematização de padrões de percepção 239

atualização de voz e tom: desde frases que as pessoas usam em

reuniões e apresentações de pitch até conversas informais com
os fundadores. Eles até criaram um painel de humor para ver
como a linguagem e as imagens funcionam juntas no site da Clearleft.

Inventário de padrões de voz e tom para Clearleft.

DEFINIR PADRÕES

Depois de reunir a cópia e outros materiais, defina os padrões

e formule diretrizes de como eles podem ser aplicados na
interface. O Voice & Tone21 do MailChimp é um dos exemplos
mais eficazes de como os padrões de linguagem podem ser
definidos. O tom muda para responder à condição emocional
do usuário: quando é apropriado ser bem-humorado e
despreocupado (“Belo trabalho”), e quando o texto precisa ter
um tom sério e prático (“Estamos esperando um problema no um
de nossos centros de dados”).

21 http://voiceandtone.com/
Machine Translated by Google

240 Capítulo 9

Da mesma forma, o Salesforce detalha os casos de uso

comuns e sugere padrões de cópia para usar com cada um.
O objetivo da mensagem afeta o tom emocional, como
“sugerir uma solução usando linguagem leve”.

Exemplo de padrões de voz e tom nas diretrizes de voz e tom do Salesforce

Machine Translated by Google

Sistematização de padrões de percepção 241

ACORDE SOBRE OS PRINCÍPIOS ORIENTADORES

Como os princípios de design abrangentes (consulte o capítulo 2), os

princípios orientadores para estilos individuais não devem ser vagos
e gerais. O Harmony22 da Intuit não apenas lista os princípios de voz
e tom (“lidere o caminho”, “mantenha a simplicidade”, “divirta-se”), mas
também explica como fazer todas essas coisas.

As diretrizes de voz e tom da Intuit explicam como aplicar os princípios.

22 http://smashed.by/intuit
Machine Translated by Google

242 Capítulo 9

Resumo
Cada estilo deve ser abordado como um sistema próprio — sistema de

tipografia, sistema de layout, sistema de cores e assim por diante. Eles

devem estar interligados e direcionados para atingir um propósito maior:

ajudar a moldar a forma como um produto é percebido.

Para fazer isso, olhe primeiro para o quadro geral. Capture as

qualidades estéticas como um todo e identifique os padrões que são

particularmente eficazes para expressá-las. Em seguida, você pode seguir

um processo semelhante para todos os estilos: comece com as principais

funções de um estilo no contexto do seu produto, audite instâncias

existentes e, em seguida, defina padrões e blocos de construção. Os princípios

orientadores ajudam a conectar tudo e ligá-lo de volta ao propósito.

Vamos agora ver as bibliotecas de padrões como uma ferramenta para

documentar e compartilhar os padrões.

Machine Translated by Google

parte II 243

Capítulo 10

Bibliotecas de padrões
Neste capítulo, veremos algumas técnicas práticas para estabelecer
as bases de uma biblioteca de padrões duradoura e multidisciplinar.

e construir produtos digitais é quase impensável

Para algumas equipes,
sem uma uma de
biblioteca abordagem sistemática
padrões. Mas, para projetar
como discutimos
ao longo do livro, uma biblioteca de padrões não é o sistema
em si, é uma ferramenta para documentar e compartilhar
padrões de projeto. Para ser eficaz, ele precisa de uma base
de sistema em sua raiz. No capítulo 7, examinamos algumas
das estratégias gerais para estabelecer tal fundação:

• Acordar sobre as principais metas e objetivos, relacionados com

as interfaces e como as equipes operam, como
“Definir e padronizar padrões de design
reutilizáveis”, “Definir princípios orientadores de design”,
“Estabeleça uma biblioteca de padrões.”

• Divida os objetivos em histórias gerenciáveis e

crie um roteiro simples para o seu sistema.

• Torne seu progresso transparente ao documentá-lo e

compartilhá-lo. Para muitas equipes, tornar sua
biblioteca de padrões pública fez uma grande diferença
em seu progresso e na confiança da equipe no trabalho
que estavam realizando.
Machine Translated by Google

244 Capítulo 10

• Criar uma cultura de compartilhamento de conhecimento tornando

a linguagem de design visível e acessível para toda a equipe.

• Pratique o pensamento em sistemas por meio de experimentos,

workshops e exercícios em grupo.

Na experiência de todas as equipes com as quais conversei, as bibliotecas de

padrões multidisciplinares são mais resilientes e duradouras. Eles facilitam

uma linguagem compartilhada em toda a organização e agregam valor a

todos. Por outro lado, uma biblioteca de padrões criada para atender às

necessidades de uma disciplina é mais frágil.1

A complexidade técnica da primeira biblioteca de padrões da Sipgate

impediu que os designers se envolvessem totalmente. Sem o

conhecimento de quais padrões existiam no sistema, eles às vezes

criavam uma página do zero no Photoshop, onde os padrões existentes

podiam ser usados.

Freqüentemente, cabia aos desenvolvedores ajustar o design aos padrões

“ existentes, que precisavam ajustá-los até que se encaixassem. Isso levou

a inúmeras instruções if, exceções e padrões duplicados.

— Mathias Wegener, desenvolvedor front-end, Sipgate

1 Existem muitos outros tipos de documentação de design, como documentos de

identidade de marca, guias de estilo de front-end para clientes e assim por diante.
Neste capítulo, estamos falando apenas sobre bibliotecas de padrões criadas por
equipes internas para dar suporte a um sistema de design.
Machine Translated by Google

Bibliotecas de padrões 245

Embora os desenvolvedores estivessem determinados a tornar uma

biblioteca de padrões abrangente e atualizada, isso era impossível
sem o envolvimento ativo dos designers.

Da mesma forma, padrões projetados sem a perspectiva da

disciplina de conteúdo podem desmoronar no uso diário. Acabamos
projetando padrões que estão muito ligados a um conteúdo
específico, como um módulo em que uma linha extra de texto colocaria
uma chamada à ação importante abaixo da área visível. Ou forçamos
o conteúdo em padrões que não foram projetados para isso,
comprometendo o conteúdo e o design.

Neste capítulo, vamos nos concentrar em estabelecer as bases

para uma biblioteca de padrões que pode suportar os objetivos de
várias disciplinas.

Contente
Olhando para trás, no FutureLearn, passamos muito tempo
pesquisando ferramentas e elaborando como a biblioteca de padrões
deveria ser. Não havia acordo total sobre como deveria ser
projetado e construído, e o trabalho progredia lentamente.
Mudar nosso foco para o conteúdo da biblioteca fez uma grande
diferença - tanto para nosso progresso quanto para o moral da equipe.
Machine Translated by Google

246 Capítulo 10

Passar pelo processo descrito nos dois capítulos anteriores lhe dará uma
boa noção do que pode entrar em sua biblioteca de padrões. Pode ser
documentado de forma simples, usando o Google Docs ou outro aplicativo
de escrita colaborativa. Existem dois benefícios principais disso:

•
Primeiro, todos da equipe podem acessar o conteúdo para
revisar, fazer edições e fornecer feedback. Ao usar uma ferramenta

familiar e de fácil acesso, você oferece a mais pessoas a

oportunidade de se envolver.

• Em segundo lugar, uma pasta no Google Docs é como um MVP

biblioteca de padrões — a equipe pode começar a usar at
como referência imediatamente. Depois de ter o conteúdo,
será mais fácil descobrir como o site deve ser projetado e
construído.

Veja como Andrew Couldwell na WeWork2 capturou alguns dos padrões

para o sistema de design Plasma3 usando o Google

Documentos:

2 https://www.wework.com/
3 http://smashed.by/plasmads
Machine Translated by Google

Bibliotecas de padrões 247

Documentação de padrões no Google Docs para o sistema de design Plasma.3

A equipe foi capaz de obter todos os padrões principais e suas

definições rapidamente, em vez de ser impedida por restrições de
construção e design.

Organização de Padrões
Ao documentar o conteúdo, provavelmente surgirá a questão de
como os padrões devem ser organizados. A estrutura de navegação
é uma das coisas sobre as quais as equipes tendem a lutar para
chegar a um acordo. Os botões devem ser separados ou
agrupados com elementos de formulário? Onde vai o rodapé? A
paginação deve fazer parte da seção de navegação?
Machine Translated by Google

248 Capítulo 10

A estrutura não precisa ser perfeita no início — você pode (e

provavelmente irá) alterá-la mais tarde. O importante é que a
equipe esteja na mesma página. Ter uma metodologia comum para
organizar padrões tornará mais fácil adicionar e encontrar coisas à
medida que sua biblioteca de padrões cresce. O mesmo raciocínio
pode ser aplicado não apenas à biblioteca de padrões, mas também
à arquitetura de front-end e aos arquivos de design.

Vamos dar uma olhada em algumas das abordagens comuns.

ABSTRAINDO PADRÕES DE PERCEPÇÃO

A maneira mais simples de pensar sobre a estrutura é em termos de

componentes e estilos (padrões funcionais e perceptivos).
Como vimos no capítulo anterior, os padrões perceptivos estão
conectados e trabalham juntos. Abstraí-los torna mais fácil estar
ciente de seu papel no sistema. Aqui estão alguns exemplos de como
os padrões perceptivos e funcionais são referidos.
Machine Translated by Google

Bibliotecas de padrões 249

Biblioteca de padrões Padrões funcionais Padrões perceptivos

Airbnb DLS Componentes Fundação

atlassiano Componentes Fundações

BBC GEL Padrões de design Fundações

IBM Carbon Componentes Estilo

Componentes de IU do Lonely Planet Rizzo Elementos de design

Maravilha Componentes Projeto

tecido de escritório
Componentes estilos

Salesforce Lightning
Componentes Marcas de design
Sistema de Design

Shopify Polaris Componentes Visuais

Parece haver um consenso geral para se referir a padrões funcionais como

“componentes”, mas há mais diversidade na terminologia usada para padrões perceptivos.

ORGANIZANDO PADRÕES FUNCIONAIS

Embora o número de estilos seja limitado, a lista de padrões funcionais pode continuar crescendo. A

facilidade de encontrar módulos é uma das maiores barreiras para a adoção de bibliotecas de

padrões. Se os membros da equipe não souberem que existe um padrão ou não conseguirem

encontrar o que precisam, provavelmente criarão um novo ou sairão do sistema de padrões.

As equipes organizam os módulos em ordem alfabética, hierárquica, por tipo (navegação,

elementos de formulário e assim por diante), por finalidade ou de maneiras totalmente diferentes.
Machine Translated by Google

250 Capítulo 10

alfabética

No sistema de design Carbon da IBM, os componentes Sky

Toolkit e Rizzo da Lonely Planet (entre outros) são mantidos em
uma lista e organizados em ordem alfabética.

A maioria dos componentes são organizados em ordem alfabética no Rizzo do Lonely Planet

4 (embora os elementos de navegação e formulário estejam em grupos separados).

Uma única lista facilita a tomada de decisões — evita os

debates sobre como as coisas devem ser categorizadas.
Se a lista crescer e se tornar incontrolável, as equipes
começam a experimentar outras opções para tornar os
componentes mais detectáveis.

4 http://smashed.by/rizzo
Machine Translated by Google

Bibliotecas de padrões 251

hierárquico

Outra maneira de classificar padrões funcionais é em termos de

sua complexidade. Algumas equipes separam elementos
granulares dos mais complexos. Os níveis de granularidade variam
em número e complexidade percebida.

projeto atômico, 5, cujo pioneiro foi Brad Frost, é um exemplo popular de

categorização hierárquica. Os átomos são os blocos de construção básicos, que se

combinam para criar elementos autônomos mais complexos: as moléculas. Por

exemplo, um rótulo de formulário, entrada e botão se combinam em um formulário

de pesquisa. Moléculas se juntam em organismos (como um cabeçalho de site)

e organismos em modelos e páginas.

Componentes organizados hierarquicamente em https://style.eurostar.com/

5 http://smashed.by/atomicdesign
Machine Translated by Google

252 Capítulo 10

Como metodologia, o design atômico pode trazer muitos benefícios.

Pensar em padrões como bonecas matryoshka aninhadas pode
ajudar a reutilizar os elementos, já que você está ciente de como os
níveis se complementam. Definir as regras para combinar e
encapsular os padrões pode promover consistência em todo o
sistema. Para a equipe do FutureLearn, a analogia com a química
forneceu um ponto de referência compartilhado quando éramos
novos no pensamento de design modular.

Mas é importante lembrar que o design atômico (ou qualquer outra

metodologia) pode não ser adequado para você imediatamente. No
FutureLearn, lutamos para encontrar um uso para “placas de
modelo” e “páginas”. A equipe preferiu trabalhar com elementos
menores, para que pudéssemos ter maior flexibilidade sobre como
eles foram combinados.

Além do mais, passamos muito tempo debatendo se algo era uma

molécula ou um organismo. Como a equipe não viu distinção
suficiente entre os dois tipos, eles foram fundidos. Acabamos com
dois níveis de hierarquia: átomos e moléculas.

Mais de dois tipos de padrões funcionais podem ser confusos, mas

separar os elementos granulares dos mais complexos faz sentido —
tanto na biblioteca de padrões quanto no código.
As equipes fazem isso em graus variados, seguindo ou não a
nomenclatura do projeto atômico.
Machine Translated by Google

Bibliotecas de padrões 253

Projeto Atômico átomos moléculas Organismos Modelos

- -
Elementos de cessar-fogo Oregon Componentes
ClearFractalName Unidades - -
Grupos
GE Predix Fundamentos
Modelos de componentes Características

Elementos Lewis+Humphreys Componentes composições

- -
Padrões de componentes de plasma da WeWork

O que acho interessante é que o rigor de um sistema (discutido no

capítulo 6) pode ser refletido em como a biblioteca de padrões é
estruturada. Quanto mais granulares forem os padrões, mais solto e
flexível será o sistema.

Em um sistema rígido, como o Predix da Airbnb ou da GE, 6 os

padrões maiores são documentados: fluxos de usuários, modelos e páginas.
Em um sistema como o TED ou o FutureLearn, você documentaria
partes menores e deixaria que os projetistas individuais as combinassem
como bem entendessem.

Por Finalidade ou Estrutura

No FutureLearn, nunca paramos de experimentar maneiras de

organizar os módulos: em uma longa lista, hierarquicamente (seguindo
a metodologia de design atômico), por função de composição na
página (“introduções”, “outros”, “heróis” e “pontes”).
Mas tudo era muito restritivo ou muito complexo para trabalhar.

6 http://smashed.by/predix
Machine Translated by Google

254 Capítulo 10

Após dois anos de tentativa e erro, decidimos classificar os elementos por

finalidade - módulos promocionais, módulos focados em incentivar o

progresso do aluno, módulos relacionados à comunicação com o usuário,

módulos sociais e assim por diante.

Módulos organizados por finalidade na biblioteca de padrões do FutureLearn. 7

A organização de padrões por propósito fornece à equipe alguma orientação

e inspiração sobre onde usar um módulo específico.

Essa estrutura também se encaixa em nossa abordagem direcionada ao

propósito para definir padrões.

No Shopify Polaris, 8 componentes também são categorizados com base nos modelos

mentais da equipe. O agrupamento inicial foi o resultado de uma classificação de cartão

aberto e testes de usabilidade.

7 http://smashed.by/futurelearn
8 http://smashed.by/polaris
Machine Translated by Google

Bibliotecas de padrões 255

Mesmo que não haja um alinhamento perfeito entre as diferentes disciplinas, a

pesquisa interna do usuário está continuamente moldando como os padrões são

organizados:

Os designers tendiam a pensar em termos de estrutura. Os desenvolvedores tendiam

“ a usar como padrão a funcionalidade. Os estrategistas de conteúdo tendem a

combinar ambos. Estamos conduzindo uma série de estudos de usabilidade para

entender como o agrupamento de componentes está funcionando para as pessoas.”

— Selene Hinkley, estrategista de conteúdo, Shopify Polaris 9

Os componentes no Shopify Polaris são organizados por estrutura e função.

9 Da correspondência por e-mail com Amy Thibodeau, líder de UX na

Shopify, agosto de 2017

Machine Translated by Google

256 Capítulo 10

Essas são apenas algumas das maneiras pelas quais as equipes organizam os padrões.

O importante é que a escolha seja fundamentada em como as

pessoas que o usam pensam. Encontre uma estrutura adequada
para sua equipe. Se não funcionar, se as pessoas lutam para
encontrar o que procuram, continue experimentando diferentes
abordagens. Isso pode levar tempo. A frase que mais ouço de todas
as equipes com bibliotecas de padrões eficazes é que seu “trabalho
nunca termina”.

Documentação do Padrão

Embora muitas coisas possam ser documentadas ao lado de cada

padrão, tentar cobrir tudo de imediato não é viável, especialmente
para equipes menores.

Para ver benefícios tangíveis mais cedo, comece com uma visão
geral leve dos principais padrões. Depois de ter uma base
simples, você pode melhorar a biblioteca de padrões ao longo do
tempo, adicionando recursos e informações de que a equipe
precisa. Aqui estão alguns dos pontos a serem considerados ao
documentar padrões funcionais e perceptivos.

DOCUMENTANDO PADRÕES FUNCIONAIS

Para tornar a documentação focada e facilmente escaneável, comece

com o básico:
Machine Translated by Google

Bibliotecas de padrões 257

• nome
• finalidade
• exemplo (visual e código) •
variantes

Nome

Ao longo do livro, tentei enfatizar a importância de um

nome bem escolhido. Um bom nome é focado e memorável
e incorpora o propósito do padrão.
Idealmente, alguém deve ser capaz de entender o propósito
do nome, sem precisar ler a descrição. Para ajudar a tornar a
página mais escaneável, os nomes devem ser destacados e
se destacar do restante do conteúdo.

O nome de cada padrão é exibido com destaque no IBM's

Carbon (http:// smashed.by/ ibmcarbon).
Machine Translated by Google

258 Capítulo 10

Propósito

Ao navegar em uma biblioteca de padrões, a maioria das pessoas pula

as descrições, especialmente as longas. É por isso que eles
devem ser focados e direto ao ponto: normalmente, uma ou duas
frases explicando o que é um padrão e para que serve é o suficiente.

Embora pareça uma tarefa simples, na prática, capturar o objetivo de um

padrão de forma concisa e precisa não é fácil.
Muitas vezes, criamos descrições vagas que não têm muito valor
prático.

Dê uma olhada em como a equipe da Sipgate inicialmente descreveu

um componente chamado “Showcase”:

“Use o Showcase para apresentar vários tipos de informações com um

arquivo de mídia.”

Mesmo sendo factualmente correto, ele não comunica o propósito de

“Mostra”, o que aumenta a probabilidade de ser mal utilizado ou
duplicado. Mais tarde, a equipe adotou uma nova prática para definir o
propósito de um padrão e escrever descrições. Veja como foi aplicado
a outro exemplo:

“Fact Grid é uma lista de fatos ou informações interessantes.

Use o Fact Grid para dar ao leitor uma impressão imediata sobre o
próximo conteúdo.”
Machine Translated by Google

Bibliotecas de padrões 259

Essa segunda descrição é muito mais eficaz em comunicar

para que serve o padrão. Você pode até visualizar a “Grade de
Fatos” apenas lendo essas duas frases.

Além disso, existem recomendações de design e conteúdo

para fazer com que o padrão atinja seu objetivo da maneira mais
eficaz, como “Máximo de 3 linhas por fato” ou “Máximo de
12 fatos”. Colaborar com uma disciplina de conteúdo pode ser
inestimável para definir essas regras.

Grade de fatos em https://design.sipgateteam.de/

Exemplo
Um bom exemplo ajuda a melhorar a compreensão do propósito
do padrão. No guia de estilo da Marvel, 10 exemplos são
autodocumentados e mostram várias variantes e casos de uso.
A cópia da interface do usuário no padrão ajuda a orientar ainda mais o uso.

10 http://smashed.by/marvelds
Machine Translated by Google

260 Capítulo 10

O guia de estilo da Marvel facilita a visualização de como diferentes pop-overs se comportam.

Um exemplo menor não ajuda a comunicar o propósito.

Nada na forma como “Billboard” é apresentado na
biblioteca do Future Learn sugere que seja um “elemento
promocional proeminente”. Fazer pequenos ajustes, como
alterar a cópia padrão e a imagem de fundo, pode ajudar a
expressar sua finalidade com mais clareza.

“Billboard” na biblioteca de padrões do FutureLearn é menos do que inspirador.

Machine Translated by Google

Bibliotecas de padrões 261

Uma instância viva de um padrão, com código de componente ao lado,

geralmente é preferida — pode mostrar capacidade de resposta,
interações e animação. Mas em alguns casos uma estática

imagem ou um GIF é mais útil, especialmente quando você precisa

mostrar um comportamento específico ou um estado que não pode ser
recriado em um exemplo vivo.

Carbon usa uma combinação de exemplos vivos e estáticos para ilustrar comportamentos
específicos.11

variantes

Apresentar variantes lado a lado, como um conjunto, torna mais fácil ver
rapidamente o que está disponível dentro do propósito. Além disso,
precisamos saber como as opções são diferentes umas das outras.

11 http://carbondesignsystem.com/
Machine Translated by Google

262 Capítulo 10

Embora o Office Fabric12 apresenta prestativamente todas as variantes, não explica

as diferenças entre elas.

Compare com a apresentação de Carbon13, que afirma

claramente o objetivo de cada variante.

Tipos de selecionadores de datas e as diferenças entre eles explicados em Carbon.

12 http://smashed.by/fabric
13 http://smashed.by/ibmcarbon
Machine Translated by Google
Bibliotecas de padrões 263

Da mesma forma, as diretrizes de design da Atlassian14 descreva quando usar cada

tipo de botão (embora, do meu ponto de vista, algumas das cópias, como “Use

quando não tiver nada a provar”, poderiam se beneficiar por serem mais precisas).

Variações de botões explicadas nas diretrizes de design da Atlassian.

14 http://smashed.by/atlassian
Machine Translated by Google

264 Capítulo 10

Existem muitos outros aspectos que podem ser importantes para documentar,
tais como:

• Versionamento de componentes. Se os produtos suportados por uma

biblioteca de padrões obtiverem atualizações importantes, alguns

componentes podem se beneficiar da documentação de alterações na

API ou nos elementos da interface do usuário, em relação às versões

anteriores. O mesmo vale para elementos obsoletos e suas substituições.

• Membros da equipe. Listando as pessoas envolvidas no crea

A implementação do padrão, como o exemplo Sky Toolkit15 abaixo, pode

dar às pessoas um senso de propriedade e também ajuda no

desenvolvimento futuro.

• Padrões relacionados. Shopify Polaris16 mostra alternativas se o

padrão não for exatamente o que você está procurando. Isso pode

reduzir a chance de padrões serem duplicados.

15 http://smashed.by/skytoolkit
16 http://smashed.by/polarisnav
Machine Translated by Google

Bibliotecas de padrões 265

Dependendo das necessidades de sua equipe, muitas outras

informações podem ser incluídas. Em seu artigo Levando a biblioteca
de padrões para o próximo nível, Vitaly Friedman compartilhou duas
listas de verificação: uma para os padrões a serem documentados e
17
outra para as coisas a serem incluídas ao lado de cada padrão.

DOCUMENTANDO PADRÕES DE PERCEPÇÃO

Ao documentar padrões de percepção, o foco tende a estar nos

blocos de construção — paleta de cores, escala tipográfica e assim
por diante. Mas, como vimos no capítulo anterior, também é importante
saber como essas propriedades são usadas e como funcionam juntas.
Aqui estão algumas dicas e exemplos.

Especifique o uso, não apenas os blocos de construção

A representação da cor não precisa ser limitada a uma lista de variáveis.

O guia de estilo GOV.UK18 especifica de maneira útil o uso de cores
para texto, links, planos de fundo e outras funções.

O guia de estilo GOV.UK mostra padrões de uso em sua paleta de cores.

17 http://smashed.by/pattern2doc
18 http://smashed.by/govuk
Machine Translated by Google

266 Capítulo 10

O formato do que fazer e do que não fazer também pode ser útil, principalmente

quando há um uso indevido esperado. No Shopify Polaris, 16 tanto o índigo quanto

o azul são cores primárias usadas para elementos interativos. Afirmar

explicitamente que o azul não deve ser usado para botões é útil nesse caso, pois

seria razoável presumir o contrário.

A seção de tipografia dos padrões da web do governo dos EUA19 mostra pares

de tipos e seu uso recomendado.

Exemplos expansíveis demonstram tratamentos tipográficos no

contexto.

Padrões da web do governo dos EUA 19 incluem emparelhamentos e seu uso recomendado.

19 http://smashed.by/usgov
Machine Translated by Google

Bibliotecas de padrões 267

Estilos de Referência Cruzada

Embora separemos estilos e componentes para torná-los mais fáceis de

trabalhar, na prática eles estão intimamente interligados.
Mesmo se houver duplicações, é útil fazer referência a estilos no nível do
módulo, bem como separadamente. Um botão tem muitos estilos que
definem que tipo de botão é (cor, forma, estilo de legenda,
transições, espaçamento e assim por diante). Ao mesmo tempo,
alguns desses estilos podem ser aplicados a outros objetos — menus,
links, controles de alternância. Compartilhar estilos é o que faz com que
esses objetos pareçam pertencer ao mesmo sistema.

No Carbon, os estilos de um módulo específico, como cor, são mostrados

em uma guia separada. O uso de cores também é documentado
separadamente.

No Carbon, as cores são referenciadas no nível do módulo e todas juntas.

Machine Translated by Google

268 Capítulo 10

Veja outro exemplo: estados interativos. Normalmente, nós os vemos

documentados apenas no nível do módulo: aqui está um botão e seu
estado de foco. Mas também é útil ver todos os estados

juntos, de relance. Como o estado de foco se aplica a links

secundários? Para botões de ícone? Para botões fantasmas? Para
controles de tabulação? Por que em alguns casos o contorno muda
para sólido e em outros o valor da cor muda?

A exibição de estados interativos para o FutureLearn em uma

grade nos permitiu definir as regras abrangentes para estados
interativos e aplicá-las de forma consistente à medida que mais
elementos interativos foram adicionados.

Alguns dos estados interativos na biblioteca de padrões do FutureLearn são

mostrados juntos.20

20 http://smashed.by/flstates
Machine Translated by Google

Bibliotecas de padrões 269

Mostrar relações entre os elementos

Para serem eficazes, os padrões perceptivos devem se interconectar e

trabalhar juntos. Ao mostrar as relações (entre cores, entre tipografia e
espaçamento, entre voz e tom e visual), você ajuda a tornar todo o sistema
mais conectado.

Os mesmos valores de cor podem ter efeitos totalmente diferentes quando

aplicados em proporções diferentes. Como observou Michael McWatters , com muito

ou pouco vermelho, o TED pode parecer uma marca diferente. As fichas de cores

no guia de estilo Open Table21 tornar a hierarquia de cores clara.

Tipografia e espaçamento também estão intimamente interligados. A

tipografia grande e de alto contraste requer mais espaço em branco.
Textos menores podem se perder na mesma quantidade de espaço se

21 http://smashed.by/opentable
Machine Translated by Google

270 Capítulo 10

você não compensa reduzindo o preenchimento. Mesmo se você tiver

uma seleção limitada de opções de espaçamento predefinidas (como
unidades de 8px ou 16px), designers diferentes podem ter preferências
diferentes - alguns preferem um espaço em branco mais generoso,
outros preferem um espaço mais aconchegante. Os valores podem ser
consistentes, mas isso não significa que a densidade visual será.

Para ajudar a orientar a densidade e o contraste em todo o produto, no

FutureLearn tentamos mostrar a relação entre tipografia e espaçamento.

• Módulos espaçosos com alto contraste tipográfico (título grande

em proporção ao tamanho da fonte do corpo) e espaçamento
generoso para equilibrar a tipografia de alto contraste.

• Módulos regulares formam a maioria das seções do FutureLearn.

Eles têm o cabeçalho e o espaçamento padrão.

• Os módulos compactos têm títulos apenas um pouco maiores do

que a cópia do corpo.
Machine Translated by Google

Bibliotecas de padrões 271

Alguns dos tipos de seção para FutureLearn.

Essas configurações também refletem a finalidade dos módulos.

As seções promocionais de alto impacto se beneficiam da tipografia
de alto contraste. Por outro lado, os módulos com função de
suporte tendem a ser mais compactos.

Finalmente, na grande maioria das bibliotecas de padrões atuais,

os estilos são exibidos em páginas separadas. Vejo isso como uma
limitação. Talvez a próxima geração de bibliotecas de padrões possa
mostrá-los de maneiras mais conectadas.

Como painéis de humor ou colagens de elementos, os estilos

podem ser apresentados de uma forma que mostre como eles
funcionam juntos e que destaque os padrões de assinatura e as
relações entre vários elementos.
Machine Translated by Google

272 Capítulo 10

fluxo de trabalho

As equipes com bibliotecas de padrões eficazes têm abordagens

sistemáticas arraigadas em seu fluxo de trabalho. Como, exatamente, varia
entre as empresas. Algumas equipes, como o Airbnb, têm processos
rigorosos e precisamente especificados com ferramentas poderosas.
Outros são muito mais informais.

PROCESSO PARA ADICIONAR NOVOS PADRÕES

Um dos aspectos fundamentais a serem acordados é como os novos

padrões serão adicionados ao sistema. A equipe da Nordnet segue um
processo simples de três etapas:22

1. Envie um design para a pasta UI kit no Dropbox.

2. Discuta a inclusão do padrão como uma equipe.
3. Documente todos os designs incluídos no kit de interface do usuário.
Adicione o novo design à Biblioteca de Artesanato, que será
distribuído automaticamente para toda a equipe.

A equipe se reúne quinzenalmente para discutir novas submissões.

Eles passam por um backlog do Trello e decidem se um módulo deve
ser aprovado para inclusão ou arquivado.

22 Consulte “Documentação superfácil do Atomic Design com o aplicativo Sketch”

de Ross Malpass. (http://smashed.by/nordnet)
Machine Translated by Google

Bibliotecas de padrões 273

Um fluxo de trabalho semelhante é adotado pelas equipes do

Shyp23 (usando o GitHub para adicionar e revisar os
padrões), Future Learn e muitos outros. O processo não precisa
ser rigoroso, mas é importante ter algo em vigor que imponha,
de alguma forma, uma revisão regular dos padrões.

Para garantir que o formato dos envios seja consistente,

algumas equipes consideram útil ter um modelo padrão com
diretrizes simples, como nome, descrição, autor e data.
No FutureLearn, os envios vêm diretamente para a biblioteca
de padrões em vez do arquivo mestre de design, e há um
guia informal para escrever uma descrição para um padrão.
Consiste em três perguntas: O que é? Para que serve? Como
ele atinge seu propósito?

23 http://smashed.by/shyp
Machine Translated by Google

274 Capítulo 10

CRITÉRIOS PARA ADICIONAR NOVOS PADRÕES

Um problema comum que as equipes têm é a falta de acordo sobre o

que constitui um padrão de projeto. Uma maneira de gerenciar isso é
ter critérios compartilhados para adicionar (e também atualizar e
remover) padrões.

As duas abordagens mais comuns são:

• Cada novo elemento no site também é adicionado automaticamente

à biblioteca de padrões. Isso funciona se você for rigoroso em
aceitar padrões para o sistema. Deve haver um processo que
verifique se já existe um padrão semelhante ou se um existente
pode ser modificado (como revisão regular de novos padrões como
uma equipe). Sem esses processos, o risco é acabar com padrões
duplicados.

• Os elementos são adicionados apenas quando são reutilizados.

Algumas equipes adicionam módulos apenas no segundo ou até
no terceiro uso. A ideia é que um elemento tenha que provar a si
mesmo como um padrão antes de ser adicionado ao sistema, o
que ajuda a manter a biblioteca de padrões enxuta. Com essa
abordagem, é importante ter visibilidade de tudo que está sendo
criado e uma comunicação eficaz entre as equipes. Um registro de
padrões não documentados também deve ser mantido, para que
a equipe tenha total visibilidade do que está disponível, mesmo
que não esteja na biblioteca de padrões.
Machine Translated by Google

Bibliotecas de padrões 275

Também é possível basear sua decisão na potencial reutilização. No

FutureLearn, a especificidade da finalidade de um componente é
usada como critério. Se um elemento for definido de forma genérica, é
mais provável que seja reutilizado no futuro. Nesse caso, ele é
adicionado à biblioteca de padrões. Se um novo componente tiver uma
finalidade específica (como uma promoção sazonal, um módulo
relacionado a um evento específico e assim por diante), ele poderá ser tratado como único.

Ao seguir esta regra, toda a equipe deve tomar cuidado em como eles
definem os componentes e não fazer algo específico, a menos que
seja absolutamente necessário. Se alguém apresentar algo único, deve
compartilhá-lo e explicar por que é específico.
Ocasionalmente, outra pessoa achará o módulo útil para suas
necessidades. Nessa situação, redefiniríamos o padrão como mais
genérico e o adicionaríamos à biblioteca.

PESSOAS E RESPONSABILIDADES

Outro aspecto a considerar são os aspectos práticos da atualização da

documentação, principalmente se não houver uma equipe dedicada.
Se as contribuições vierem de todos, você deve ser rigoroso em
garantir que elas sejam adicionadas à biblioteca. Por exemplo,
adicionar um componente pode fazer parte da história para criá-lo. O
designer e o desenvolvedor que criam um padrão são responsáveis
por adicioná-lo à biblioteca de padrões. Como vimos no capítulo 6, esse
modelo não funciona para todas as equipes. Algumas vezes você
precisa de uma pessoa ou grupo de pessoas responsáveis pela
curadoria e manutenção da biblioteca de padrões, mesmo que todos
contribuam para ela.
Machine Translated by Google

276 Capítulo 10

Se houver uma equipe de sistemas de design dedicada, é importante

concordar com sua função, bem como com o processo de
gerenciamento de contribuições. Uma equipe de sistemas pode ter o
papel de curador ou produtor, e muitas empresas têm uma combinação de ambos.

• Curador. As contribuições para novos padrões vêm de toda a

organização. A equipe de sistemas define como as equipes
internas contribuem, incluindo a definição de requisitos e o
processo de revisão. Se um padrão enviado não atende aos
padrões, a equipe incentiva os designers e desenvolvedores
que o criaram a alterá-lo, em vez de fazer a alteração por
conta própria. A equipe da Atlassian segue esse modelo.

• Produtor. Com essa abordagem, a equipe de sistemas de

design cria a maioria dos padrões. Eles normalmente
trabalham em estreita colaboração com os designers de
produtos em diferentes equipes e realizam reuniões abertas onde
outras pessoas podem fazer perguntas, dar feedback ou propor
padrões ausentes. A equipe de sistemas aceita envios de toda
a empresa, mas tem a palavra final sobre o que é incluído,
ajustado ou removido. O Airbnb usa essa abordagem.

Ao escolher uma direção, considere sua estrutura organizacional,

cultura de equipe e necessidades específicas do produto. O papel
de curador geralmente é adequado para equipes distribuídas
com estruturas de sistema mais flexíveis, enquanto os produtores
são mais comuns em sistemas mais rígidos e centralizados.
Machine Translated by Google

Bibliotecas de padrões 277

Em ambos os casos, é importante que a equipe de sistemas seja vista

como parceira, e não como polícia.

Queremos colaborar com as equipes o mais cedo possível quando estiverem

“ pensando em desenvolver novos padrões e componentes. Nosso

relacionamento com as equipes de produto deve ser uma parceria, em vez
de uma situação em que alguém vai embora e faz um monte de trabalho e
depois aprovamos ou vetamos. Se isso acontecer, não estamos fazendo
nosso trabalho muito bem.”

— Amy Thibodeau, líder de UX, Shopify.

ALINHANDO AS FACETAS DO SISTEMA

Código, design e a biblioteca de padrões são facetas do mesmo sistema.

Tratá-lo dessa forma o torna mais robusto, pois o sistema é sustentado
por vários ângulos. Isso não significa necessariamente que os padrões
devem ser totalmente sincronizados. O importante é que a equipe
pratique a mesma abordagem em todas as facetas — nomeação,
estrutura e compreensão do propósito.

A equipe de design da Carbon tenta ser o mais consistente possível em

seu kit de design Sketch, na biblioteca de componentes e no código.
Machine Translated by Google

278 Capítulo 10

No sistema de design do Carbon, os nomes e a estrutura de pastas são

consistentes nas três facetas do sistema.

Os designers da Nordnet usam o design atômico para organizar as pastas em seu kit Sketch.

Eles até seguem as convenções de nomenclatura BEM para seus arquivos de design24

para ajudar desenvolvedores e designers a falarem a mesma linguagem.

Quando o design e o código estão conceitualmente alinhados, a sincronização entre eles é

mais fácil de ser alcançada. Também é mais fácil

encontre as ferramentas que se ajustam ao seu fluxo de trabalho.

24 Consulte http://smashed.by/atomicflow por Ross Malpass.

Machine Translated by Google

Bibliotecas de padrões 279

Ferramentas

Manter a biblioteca de padrões sincronizada com o código de

produção é um dos principais desafios. As equipes usam abordagens
diferentes — desde copiar e colar manualmente até tornar uma
biblioteca de padrões parte do ambiente de produção (o Rizzo da
Lonely Planet é um exemplo do último). Muitas ferramentas ajudam
a alcançá-lo. Aqui estão alguns dos mais populares.

MANTENDO A BIBLIOTECA DE PADRÕES ATUALIZADA

Algumas das mais fáceis de implementar são as ferramentas de análise de

documentação CSS, como KSS. 25 Todos eles funcionam de maneira semelhante:

os comentários no CSS fornecem uma descrição (que é inserida na documentação

programaticamente); a execução de um script gera a marcação para a biblioteca de

padrões. As ferramentas de análise são relativamente simples, mas limitadas em

funcionalidade. Eles também podem levar a marcações duplicadas, o que pode

tornar a manutenção mais demorada.

Entre as ferramentas mais poderosas estão os geradores de guias de estilo,

como o Pattern Lab26 por Brad Frost, Dave Olsen e Brian Muenzenmeyer. O

Pattern Lab vem com muitos recursos úteis, como visualização responsiva e

suporte para vários idiomas. É predominantemente adequado para sites maiores

com vários modelos, especialmente aqueles que praticam a metodologia de

design atômico.

25 http://warpspire.com/kss/
26 http://patternlab.io/
Machine Translated by Google

280 Capítulo 10

Fractal27 por Mark Perkins é uma das ferramentas mais leves e flexíveis que

está ganhando popularidade. O Fractal ajuda a construir e documentar uma

biblioteca de padrões e integrá-la ao seu projeto. Uma de suas principais vantagens

é que é flexível e sem opinião — o Fractal pode trabalhar com qualquer linguagem

de modelagem e estrutura organizacional.

A sincronização total entre a biblioteca de padrões e o código é

extremamente difícil de ser alcançada e as empresas a gerenciam com

vários graus de sucesso. As formas como as equipes priorizam a sincronização

também variam:

É sempre um pouco fora de sincronia. Se for muito perfeito, não vai funcionar.

“ Nossa linguagem de design, como qualquer linguagem, está em constante

evolução. Mudamos detalhes e padrões e adicionamos padrões. Nós

constantemente construímos produtos. Portanto, a qualquer momento, existem

muitas versões da linguagem de design. Nós abraçamos esse fato e projetamos

um sistema que pode lidar com essas imperfeições.”

— Jürgen Spangl, chefe de design, Atlassian

Em sistemas mais rígidos e organização centralizada ela é mais importante,

enquanto empresas com estruturas mais flexíveis são mais tolerantes com a

dessincronização.

27 http://smashed.by/fractal
Machine Translated by Google

Bibliotecas de padrões 281

MANTENDO OS ARQUIVOS DE DESIGN MASTER ATUALIZADOS

Atualmente, designers que praticam uma abordagem sistemática tendem a usar o

Sketch28 como sua principal ferramenta (em grande parte graças aos recursos

como estilos de texto, símbolos e pranchetas, que parecem ser adequados para um

fluxo de trabalho do sistema de design). As equipes geralmente têm um arquivo

mestre que contém um kit de interface do usuário com alguns ou todos os

componentes e estilos principais. Os designers de produto tendem a trabalhar a

partir de seus próprios arquivos, extraindo elementos do mestre conforme

necessário.

O desafio é garantir que o kit mestre sempre tenha os padrões mais

recentes. Existem muitas ferramentas para ajudar a conseguir isso, desde
soluções leves até soluções mais abrangentes.

Resumo29 é um hub com controle de versão para seus arquivos de design.

Você pode criar ramificações, confirmar explorações e mesclar

alterações. Abstract torna mais fácil manter uma única fonte de verdade
para seus arquivos de design, incluindo um kit mestre de interface do usuário.

Outra ferramenta popular é o Craft da Invision. 30 Craft é um conjunto de plug-ins

para Sketch que sincroniza o kit de interface do usuário com qualquer pessoa

que tenha o plug-in instalado. Uma biblioteca Craft pode ser salva no Dropbox.

28 https://www.sketchapp.com/
29 https://www.goabstract.com/
30 http://smashed.by/craft
Machine Translated by Google

282 Capítulo 10

Opções mais abrangentes incluem UXPin, 31 Marca.ai32 e Lingo. 33

Essas ferramentas permitem que você crie e gerencie uma biblioteca
de padrões sem precisar usar código. Naturalmente, eles não fornecem
tanta flexibilidade quanto uma biblioteca de padrões personalizada, mas
muitos deles têm recursos úteis, como interatividade de componentes,
plug-ins do Sketch para manter os arquivos atualizados,34 integração
com o Slack que faz ping de um canal quando a biblioteca é atualizada e
muito mais.

BIBLIOTECA DE PADRÕES COMO A FONTE DA VERDADE

Com as bibliotecas de padrões ganhando o status de “fonte da

verdade”, em algumas empresas tornou-se um pouco menos importante
manter os kits mestres de interface do usuário perfeitamente atualizados.
No FutureLearn, o arquivo mestre do Sketch (atualizado e
compartilhado via GitHub) contém apenas os principais elementos
granulares que não tendem a mudar (tipografia, botões, navegação e assim por diante).

Os designers usam a biblioteca de padrões como a principal

referência para padrões atualizados; Sketch ou Photoshop são
usados principalmente para trabalhos exploratórios. Como a maioria
dos componentes é definida e nomeada, cada vez mais a equipe pode
se virar com esboços em papel, sem precisar de especificações de
projeto detalhadas.

31 http://smashed.by/uxpin
32 https://brand.ai
33 https://www.lingoapp.com
34 http://smashed.by/lingoapp
Machine Translated by Google
Bibliotecas de padrões 283

Graças aos sistemas de design e bibliotecas de padrões, os

fluxos de trabalho de design e engenharia estão se aproximando.
Existem muitas experiências nesta área, 35 como ferramentaspara gerar arquivos

Sketch diretamente de uma página da web e importar dados reais. Em um futuro

próximo, talvez não precisemos nos preocupar em manter os kits de interface do

usuário sincronizados, pois eles podem ser gerados a qualquer momento a partir da

biblioteca de padrões.

O futuro das bibliotecas de padrões

As ferramentas devem acomodar o fluxo de trabalho natural do

equipe inteira. Só então todos assumirão a propriedade e as

contribuições para a biblioteca de padrões serão distribuídas
uniformemente. A biblioteca do FutureLearn não permitia que
os designers atualizassem as descrições dos módulos, o que de
alguma forma reduzia sua responsabilidade. Os desenvolvedores
front-end estavam sob mais pressão para manter a documentação
atualizada, o que às vezes parecia um fardo.

No futuro, espero ver as bibliotecas de padrões acomodarem

fluxos de trabalho multidisciplinares. Eles poderiam se tornar
ambientes onde todas as disciplinas poderiam contribuir para
discussões sobre padrões de projeto e ajudar a definir seu propósito.

35 http://smashed.by/airbnbds
Machine Translated by Google

284 Capítulo 10

Com as ferramentas cada vez melhores, as bibliotecas de padrões

e uma abordagem sistemática para o design continuarão afetando
profundamente os designers e desenvolvedores. Muitas equipes já estão
vendo as mudanças. Algo que costumava levar dias de trabalho manual
pode ser feito em minutos - sem mais especificações de design detalhadas,
sem mais a construção dos mesmos padrões repetidas vezes.

A princípio, isso pode parecer ameaçador (teremos empregos nos

próximos anos? Isso tira a criatividade e o artesanato na web?). Mas
talvez o oposto seja o caso. Os sistemas de design liberam nosso tempo
e energia para resolver problemas maiores e mais significativos, como
entender melhor nossos usuários e tornar as linguagens de design mais
inclusivas.
Machine Translated by Google

Conclusão 285

Conclusão
Em programação e design, a disciplina padrão de Christopher
Alexander tornou-se uma das ideias mais amplamente aplicadas
e importantes. Agora está influenciando quantos de nós pensamos
sobre sistemas de design. Mas há uma característica essencial
que ainda pode estar faltando na ideia original de Alexander: o
imperativo moral de criar sistemas que façam uma diferença
positiva nas vidas humanas.

Em seu discurso de abertura para a OOPSLA em 1996,

Alexander enfatizou que na raiz da linguagem de padrões
arquitetônicos há uma questão fundamental: esses padrões tornarão
a vida humana melhor como resultado de sua injeção no sistema?
Mesmo que nem todos tenham essa capacidade, deve haver pelo
menos um esforço constante para alcançá-la.1

Muitos aspectos de nossas vidas agora podem ser gerenciados

on-line, desde comprar mantimentos e pagar contas até encontrar
um namorado ou concluir um curso. A linguagem dos padrões nos
deu um formato para pensar sobre design – e também nos deu um
desafio: os padrões que criamos têm um impacto positivo na vida
humana? Como sabemos se o fazem? Como testamos isso
continuamente?

1 Veja “Padrões em Arquitetura” de Christopher Alexander.

(http://smashed.by/archpatterns)
Machine Translated by Google

286

É difícil considerar cuidadosamente essas questões, quando

você recebe uma tarefa para otimizar o número de cliques ou
incentivar as pessoas a passar mais tempo em um site. Mesmo
com as melhores intenções, muito do que criamos na web é
projetado para benefício comercial de curto prazo, em vez de
trazer valor real para a vida cotidiana: padrões projetados para
atrair usuários,2 padrões tendenciosos para alguns grupos
populacionais, padrões que encorajar as pessoas a gastar tempo e
dinheiro de maneiras que possam se arrepender mais tarde.

Por outro lado, nem sempre consideramos, por exemplo, o que

acontece com todas as nossas contas e informações digitais
quando alguém morre, como os designs que criamos melhoram
a qualidade de vida de alguém ou o quão inclusivos e
empáticos nossos sistemas realmente são.

A linguagem padrão para a web que estamos criando é poderosa.

Tem a capacidade de influenciar não só o mundo digital, mas o
físico. Devemos isso a nós mesmos e às pessoas que usam nossos
produtos, constantemente considerar e desafiar a forma que essa
linguagem assume e ser atenciosos com o que contribuímos para
ela.

2 “Como a tecnologia está sequestrando sua mente — de um mágico e

especialista em ética do design do Google” por Tristan Harris http://smashed.by/techhijack
Machine Translated by Google

Leitura adicional 287

Leitura adicional e recursos

Esses três livros são uma grande fonte de conhecimento e inspiração para

qualquer pessoa interessada em sistemas de design. Continuei me referindo a

eles várias vezes enquanto escrevia este livro.

• A Forma Atemporal de Construir3 por Christopher Alexander

• Pensando em Sistemas: Uma Cartilha4 por Donella Meadows

• Como os edifícios aprendem: o que acontece depois que são construídos5 por
Marca Stewart

Veja também:

• Como entender qualquer confusão6 por Abby Covert

• Guias de estilo front-end7 por Anna Debenham

• Projeto Atômico8 por Brad Frost

• Design Responsivo: Padrões e Princípios9 por Ethan Marcotte

• Padrões de Design Inclusivos 10 por Heydon Pickering

3 http://smashed.by/timeless
4 http://smashed.by/thinksys
5 http://smashed.by/howlearn
6 http://smashed.by/makesense
7 http://smashed.by/fesg
8 http://smashed.by/atomic
9 http://smashed.by/rwdpatterns
10 http://smashed.by/inclusivedesignpatterns
Machine Translated by Google

288

Outros recursos
• Canal Slack da Design Systems ,11 criado por Jina Anne

• Artigos do sistema de design 12 por Nathan Curtis

• Podcast do Guia de Estilo, 13 apresentado por Anna Debenham e

Brad Frost

• Boletim de Sistemas de Design, 14 com curadoria de Stuart Robson

• Podcast de web design responsivo, 15 hospedado por Karen

McGrane e Ethan Marcotte

• Recursos do guia de estilo do site 16

Obrigado por ler. Este livro é realmente apenas o começo de uma

conversa sobre sistemas de design. Estou ansioso para continuar
além do livro e ficaria feliz se você me enviasse um e-mail para
alla@craftui.com com seus pensamentos e histórias.

11 http://smashed.by/dslack
12 http://smashed.by/nathan
13 http://smashed.by/sgpc
14 http://smashed.by/dsnl
15 http://smashed.by/rwdpc
16 http://styleguides.io/