Principais Lições
1. Sistemas de design são padrões interconectados e práticas compartilhadas que servem ao propósito de um produto digital
Um sistema de design é um conjunto de padrões interconectados e práticas compartilhadas, organizados de forma coerente para atender aos propósitos de um produto digital.
Padrões e práticas. Sistemas de design são compostos por dois elementos fundamentais: padrões e práticas. Os padrões são os elementos repetitivos que formam uma interface, como fluxos de usuário, interações, botões, campos de texto, ícones, cores e tipografia. Já as práticas dizem respeito a como as equipes criam, capturam, compartilham e utilizam esses padrões ao trabalharem em conjunto.
Design orientado por propósito. O objetivo final de um sistema de design é ajudar a alcançar o propósito do produto digital que ele serve. Por exemplo, o propósito do FutureLearn é “inspirar o aprendizado ao longo da vida em todos, em qualquer lugar”. Esse propósito deve guiar todas as decisões de design, desde os princípios mais amplos até os menores elementos da interface. Um sistema de design eficaz combina custo-benefício no processo de criação com eficiência e satisfação na experiência do usuário, sempre em relação ao propósito do produto.
Elementos interconectados. Os padrões de design não existem isoladamente — eles formam uma linguagem interligada que molda toda a experiência do usuário. Essa linguagem combina padrões funcionais (elementos tangíveis da interface), padrões perceptuais (qualidades estéticas) e outros tipos específicos do domínio e da plataforma do produto. As conexões entre os padrões são tão importantes quanto os próprios elementos para criar uma interface coesa e significativa.
2. Princípios de design eficazes oferecem orientações práticas e têm um ponto de vista claro
Bons princípios de design não tentam agradar a todos. Eles têm uma voz própria e incentivam o designer a assumir uma perspectiva.
Qualidades dos princípios eficazes. Princípios de design devem ser autênticos, práticos, opinativos e memoráveis. Frases genéricas como “Faça simples” são menos úteis do que conselhos específicos e acionáveis. Por exemplo, “Sem partes desnecessárias. Cada elemento de design deve ter um propósito e contribuir para o propósito de um elemento maior do qual faz parte” oferece uma orientação clara para os designers.
Equilíbrio de prioridades. Bons princípios ajudam as equipes a definir prioridades e equilibrar fatores conflitantes. Por exemplo, os princípios do Salesforce Lightning Design System são classificados assim: “Clareza. Eficiência. Consistência. Beleza.” Isso comunica que a clareza deve sempre vir em primeiro lugar, enquanto a beleza não deve ser priorizada em detrimento da eficiência ou consistência.
Princípios em evolução. Princípios de design não são imutáveis — eles devem evoluir junto com o produto e ser regularmente testados e refinados. Tornar os princípios parte das conversas e críticas diárias de design ajuda a garantir que permaneçam relevantes e eficazes. As equipes devem avaliar continuamente se seus princípios estão ajudando o processo de design e iterar sobre eles caso contrário.
3. Padrões funcionais possibilitam ou incentivam comportamentos específicos do usuário
Padrões funcionais são os blocos tangíveis da interface. Seu propósito é possibilitar ou incentivar determinados comportamentos do usuário.
Design orientado ao comportamento. Ao definir padrões funcionais, comece identificando os comportamentos-chave do usuário que deseja apoiar. Por exemplo, em um site de receitas, os comportamentos centrais podem incluir selecionar ingredientes, escolher uma receita e seguir os passos dentro de um tempo determinado. Os padrões funcionais que você criar (como cartões de receita ou instruções passo a passo) devem possibilitar diretamente esses comportamentos.
Propósito e estrutura. Cada padrão funcional deve ter um propósito claro relacionado ao comportamento do usuário. Documentar esse propósito ajuda a evitar duplicações e usos indevidos à medida que o produto cresce. Além disso, mapear a estrutura do conteúdo de um padrão (elementos centrais, hierarquia e agrupamentos) pode ajudar a decidir se os padrões devem ser unificados ou mantidos separados.
Evolução e consistência. Embora a execução e apresentação dos padrões funcionais possam mudar com o tempo, seu propósito central ligado aos comportamentos do usuário geralmente permanece estável. Ter consciência do propósito de um padrão ajuda as equipes a entender como o sistema funciona e evita fragmentações durante sua evolução. Inventários regulares da interface e auditorias de padrões são essenciais para manter a consistência e identificar pontos de melhoria.
4. Padrões perceptuais moldam a sensação e a percepção de um produto
Padrões perceptuais estão sempre presentes, mesmo que não sejam projetados intencionalmente. Até uma ferramenta puramente funcional tem uma estética.
Além do estilo visual. Padrões perceptuais incluem elementos como cor, tipografia, espaçamento, animações e tom de voz. Esses padrões atuam em conjunto para criar a estética geral e o impacto emocional de um produto. Mesmo produtos com funcionalidades semelhantes podem parecer muito diferentes devido às combinações únicas de seus padrões perceptuais.
Expressão da marca. Padrões perceptuais eficazes tornam-se poderosos diferenciadores do produto ao expressar a marca por meio da interface. Eles ajudam a tornar o produto memorável e influenciam como os usuários percebem sua qualidade, confiabilidade e personalidade. Por exemplo, a sensação calorosa e pessoal do Spotify é criada por uma combinação de estilos de imagem, proporções de cor, interações sutis e escolhas tipográficas.
Abordagem sistemática. Para influenciar a percepção de forma confiável e em escala, as equipes precisam estar cientes dos padrões que a criam. Isso envolve:
- Identificar padrões característicos que sejam os mais distintos e memoráveis
- Auditar estilos existentes e agrupá-los por propósito
- Definir padrões claros de uso e princípios orientadores
- Especificar blocos de construção (como paletas de cores ou escalas de tempo de animação)
- Equilibrar consistência com expressão criativa para evitar designs genéricos
5. Uma linguagem compartilhada é crucial para sistemas de design coesos e colaboração em equipe
Sem uma linguagem compartilhada, um grupo de pessoas não consegue criar efetivamente junto — cada um terá um modelo mental diferente do que está tentando alcançar.
Nomeação colaborativa. Nomear padrões em conjunto ajuda as equipes a entender melhor seu propósito e cria um vocabulário comum. Nomes eficazes costumam ser metafóricos, ter personalidade e comunicar o propósito do padrão. Por exemplo, o FutureLearn usa nomes como “Whisperbox” para um elemento promocional sutil e “Boss” para o botão principal de chamada à ação.
Visibilidade e uso. Para estabelecer uma linguagem compartilhada:
- Torne os padrões de design visíveis (por exemplo, criando um mural de padrões)
- Refira-se consistentemente aos padrões pelos nomes acordados
- Inclua o sistema de design no processo de integração de novos membros
- Organize encontros regulares sobre o sistema de design
- Incentive a colaboração diversa entre disciplinas
- Mantenha um glossário de termos
Mudança cultural. Criar uma linguagem compartilhada é um processo gradual que requer uma cultura de equipe favorável. Envolve não apenas nomear coisas juntos, mas também estabelecer práticas para validar, discutir e articular decisões linguísticas em grupo. Esse processo pode levar a uma colaboração melhor e a uma abordagem de design mais coesa.
6. Sistemas de design podem variar em rigor, modularidade e estrutura organizacional
O sistema certo para você não é o sistema de outra pessoa. O que funciona para uma equipe pode não funcionar para outra.
Espectro de rigor. Sistemas de design podem variar desde os mais rígidos (como o do Airbnb), com regras e processos precisos, até os mais flexíveis (como o do TED), que permitem um design mais sensível ao contexto. Sistemas rígidos oferecem consistência, mas podem se tornar inflexíveis; sistemas flexíveis oferecem liberdade, mas correm o risco de fragmentação.
Compromissos da modularidade. Sistemas modulares são adaptáveis e econômicos, mas podem resultar em designs genéricos. Designs integrados são mais coerentes e específicos, porém não escalam tão bem. O grau de modularidade deve depender das necessidades e objetivos do produto.
Modelos organizacionais. Sistemas podem ser centralizados (gerenciados por um grupo específico) ou distribuídos (mantidos por todos). Modelos centralizados oferecem propriedade focada, mas podem se tornar gargalos; modelos distribuídos são mais ágeis, porém difíceis de manter coesos.
Ajuste cultural. A eficácia de um sistema de design depende de quão bem ele se alinha à cultura da equipe e às estruturas de comunicação. As equipes devem escolher uma abordagem que permita gerenciar os pontos negativos de forma eficaz, em vez de tentar copiar diretamente o sistema de outra empresa.
7. Defina padrões sistematicamente começando pelo propósito e comportamentos do usuário
A intenção do design pode ser expressa de inúmeras formas — padrões não precisam ser visuais. Podem estar presentes em objetos físicos (como o interior de uma livraria) ou serem transmitidos por uma voz.
Inventário orientado por propósito. Em vez de focar apenas na consistência visual, faça um inventário baseado nos comportamentos do usuário e no propósito dos elementos da interface. Essa abordagem ajuda a conectar os padrões à intenção e à essência do design do produto.
Passos para um inventário orientado por propósito:
- Identifique os comportamentos-chave para cada segmento da jornada do usuário
- Divida esses comportamentos em ações específicas
- Agrupe os elementos da interface existentes conforme as ações que suportam
- Defina padrões com base nesses agrupamentos
Definição de padrões. Ao definir padrões:
- Use uma escala de especificidade para decidir se elementos devem ser fundidos ou mantidos separados
- Mapeie estruturas de conteúdo para entender as relações entre elementos
- Crie variantes para padrões que compartilham estrutura, mas precisam de apresentações diferentes
- Escolha nomes que reflitam o propósito do padrão e orientem seu uso
Processo contínuo. Sistematizar uma interface é um processo iterativo. Comece pelos padrões centrais fundamentais para a experiência e, aos poucos, expanda para outras áreas. Auditorias e inventários regulares ajudam a manter o sistema em boas condições conforme ele evolui.
8. Padrões perceptuais devem ser definidos de forma holística para criar uma estética coesa
Para influenciar a percepção de forma confiável e escalável, precisamos estar atentos aos padrões que a geram.
Padrões característicos. Comece identificando os elementos mais memoráveis e distintos que fazem seu produto transmitir uma sensação específica. Esse exercício ajuda a capturar a essência estética e orienta todo o processo de definição dos padrões perceptuais.
Abordagem sistemática. Para cada padrão perceptual (cor, tipografia, animações etc.):
- Defina seu propósito e a sensação desejada no seu produto
- Audite as instâncias existentes e agrupe-as por propósito
- Defina padrões de uso baseados no propósito e na sensação
- Especifique os blocos de construção (por exemplo, paleta de cores, escala tipográfica, tempo de animação)
- Combine princípios orientadores para o uso
Perspectiva holística. Considere como os diferentes padrões perceptuais atuam juntos para criar a estética geral. Por exemplo, escolhas de cor afetam a legibilidade da tipografia, e o tempo das animações influencia a percepção de interatividade. Equilibrar esses elementos cria uma linguagem de design coesa e intencional.
9. Bibliotecas de padrões exigem envolvimento multidisciplinar para serem realmente eficazes
Bibliotecas de padrões multidisciplinares são mais resilientes e duradouras. Elas facilitam uma linguagem compartilhada em toda a organização e trazem valor para todos.
Criação colaborativa de conteúdo. Comece documentando os padrões em um formato simples e acessível, como Google Docs. Isso permite que membros de diferentes disciplinas contribuam, revisem e deem feedback com facilidade. O conteúdo deve incluir nomes dos padrões, propósitos, exemplos e diretrizes de uso.
Organização flexível. Não existe uma única forma correta de organizar padrões. Métodos comuns incluem:
- Separar padrões perceptuais e funcionais
- Listagem alfabética
- Categorização hierárquica (como design atômico)
- Agrupamento por propósito ou estrutura
Experimente diferentes esquemas organizacionais e esteja aberto a ajustes conforme o feedback da equipe e testes de usabilidade.
Documentação em evolução. Comece com documentação leve dos padrões centrais e expanda gradualmente. Foque em tornar a informação fácil de escanear e relevante para diferentes disciplinas. Inclua exemplos claros, visuais e de código, para demonstrar o uso correto. Revise e atualize regularmente a biblioteca para que ela permaneça um recurso valioso e vivo para toda a equipe.
Resumo das Resenhas
Design Systems, de Alla Kholmatova, tem recebido avaliações maioritariamente positivas graças à sua abordagem abrangente sobre os conceitos de sistemas de design. Os leitores valorizam os conselhos práticos, os exemplos reais e a atenção dedicada às filosofias subjacentes. Este livro revela-se especialmente útil para quem está a dar os primeiros passos no universo dos sistemas de design ou a iniciar a sua implementação. Embora alguns considerem que, por vezes, o conteúdo se torna repetitivo e que faltam análises mais profundas em determinados temas, no geral é visto como um recurso valioso para designers e programadores que trabalham com produtos digitais, oferecendo perspetivas essenciais para criar sistemas de design coesos e eficazes.
Outros Também Leram
Perguntas Frequentes
What’s "Design Systems: A practical guide to creating design languages for digital products" by Alla Kholmatova about?
- Focus on design systems: The book explores how to create, maintain, and evolve design systems for digital products, emphasizing both patterns and shared practices.
- Practical, real-world approach: It draws on case studies and interviews with companies like Airbnb, Atlassian, TED, and FutureLearn to illustrate effective design system strategies.
- Two-part structure: The book is divided into "Foundations" (covering principles, patterns, and shared language) and "Process" (covering planning, systemizing, and pattern libraries).
- Not a technical manual: While it discusses front-end practices, it’s not focused on code or development tools, but rather on systematic design thinking and team collaboration.
Why should I read "Design Systems" by Alla Kholmatova?
- For practical guidance: The book offers actionable advice for small and medium-sized teams looking to integrate design systems into their workflow.
- To improve team collaboration: It emphasizes the importance of shared language and practices, helping teams work more cohesively.
- To avoid common pitfalls: Real-world examples highlight both successes and challenges, helping readers anticipate and manage issues in their own organizations.
- To create sustainable systems: The book provides strategies for building design systems that evolve and remain effective over time.
What are the key takeaways from "Design Systems" by Alla Kholmatova?
- Purpose-driven systems: Effective design systems are built around the core purpose and ethos of the product.
- Patterns and practices: A design system is more than a pattern library; it’s a combination of reusable patterns and the practices for creating, sharing, and evolving them.
- Shared language is essential: Teams need a common vocabulary and understanding to create cohesive products.
- Continuous evolution: Design systems are not static; they require ongoing refinement, collaboration, and adaptation to changing needs.
How does Alla Kholmatova define a "design system" in "Design Systems"?
- Set of interconnected patterns: A design system is a collection of reusable, repeatable interface patterns (both functional and perceptual).
- Shared practices: It also includes the practices and processes teams use to create, capture, share, and use those patterns.
- Organized for purpose: The system is coherently organized to serve the specific goals and culture of a digital product.
- Not just a pattern library: While pattern libraries are tools within a design system, the system itself is broader and more holistic.
What are "functional patterns" and "perceptual patterns" in "Design Systems" by Alla Kholmatova?
- Functional patterns: These are tangible, actionable building blocks of the interface, like buttons, forms, menus, and navigation modules.
- Perceptual patterns: These are more abstract, relating to brand and aesthetics—such as color palettes, typography, iconography, spacing, and animation.
- Role in user experience: Functional patterns support user behaviors and actions, while perceptual patterns shape how a product feels and is perceived.
- Both are essential: A robust design system requires clear definitions and documentation of both types of patterns.
How does "Design Systems" by Alla Kholmatova recommend establishing effective design principles?
- Authentic and context-specific: Principles should be genuine, reflecting the unique ethos and goals of the product and team.
- Practical and actionable: They must offer clear, actionable guidance for design decisions, not just sound good.
- Point of view: Good principles help teams prioritize and balance conflicting values, providing a clear perspective.
- Memorable and relatable: Principles should be few in number, easy to remember, and regularly referenced in daily work.
What is the importance of shared language in "Design Systems" by Alla Kholmatova, and how can teams achieve it?
- Foundation for collaboration: Shared language ensures everyone on the team understands and uses patterns consistently.
- Naming matters: Effective, memorable names for patterns (often metaphorical or with personality) help teams remember and use them correctly.
- Collaborative process: Naming and language decisions should involve multiple disciplines and perspectives for better understanding and buy-in.
- Make it visible: Use pattern walls, glossaries, and regular discussions to immerse the team in the design language.
How does "Design Systems" by Alla Kholmatova suggest teams systemize and document functional patterns?
- Purpose-directed inventory: Start by identifying key user behaviors and mapping interface elements to those behaviors.
- Group by purpose: Organize elements not just by appearance, but by the actions and behaviors they support.
- Define structure and variants: Sketch the content structure of patterns and identify when to create variants versus new patterns.
- Regular audits: Conduct interface inventories regularly to prevent duplication and maintain consistency as the system evolves.
What process does "Design Systems" by Alla Kholmatova recommend for systemizing perceptual patterns?
- Start with signature patterns: Identify the most distinct and memorable aesthetic qualities of your product as a team.
- Audit by purpose: Collect and group existing styles (color, typography, animation, etc.) based on their roles and emotional impact.
- Define usage patterns: Specify not just the properties, but how and when each style should be used for consistency.
- Establish guiding principles: Agree on principles for each style to ensure they work together and support the product’s ethos.
What are the main parameters that shape a design system, according to "Design Systems" by Alla Kholmatova?
- Strictness of rules: Systems can be strict (with precise rules and documentation) or loose (allowing more experimentation and context sensitivity).
- Modularity vs. integration: Systems can be highly modular (with interchangeable parts) or more integrated (optimized for specific contexts).
- Centralized vs. distributed: Ownership and contribution can be centralized (managed by a core team) or distributed (everyone contributes).
- Team culture matters: The right balance depends on the organization’s size, culture, and product needs.
How does "Design Systems" by Alla Kholmatova advise teams to plan, implement, and maintain a design system?
- Secure stakeholder buy-in: Make a business case by quantifying time and cost savings, and demonstrating benefits like brand unity and faster launches.
- Set clear goals and roadmaps: Define objectives for both the interface and team processes, and create a transparent roadmap.
- Foster knowledge sharing: Use Slack channels, pattern walls, workshops, and regular catch-ups to encourage collaboration and learning.
- Maintain momentum: Complete foundational work in focused sprints, then integrate ongoing system work into regular team activities.
What are the best quotes from "Design Systems" by Alla Kholmatova and what do they mean?
- “A design system is a set of interconnected patterns and shared practices coherently organized to serve the purpose of a digital product.”
This highlights the holistic nature of design systems, emphasizing both patterns and the practices that connect them. - “Patterns are the physical embodiment of the behaviors we’re trying to encourage or enable through the interface.”
Reminds teams to focus on user behaviors and goals when defining patterns, not just visual consistency. - “Shared language is fundamental to collaboration.”
Stresses that without a common vocabulary, teams cannot create cohesive products together. - “The right system for you is not someone else’s system. Whatever works for one team might not work for another.”
Encourages teams to tailor their design system to their unique culture, needs, and product context, rather than copying others blindly.
