Um guia passo a passo para criar um sistema de design

Introdução

Nesta era de acesso em todos os lugares e em qualquer lugar, a ubiquidade se tornou uma norma. No entanto, também é sabido que consistência é credibilidade. Os usuários agora estão mais conscientes. Uma experiência rápida e tranquila é uma expectativa básica, independentemente da interface.

Além disso, o tempo é um ativo que você não pode se dar ao luxo de desperdiçar. Tudo isso deve ser suficiente para que você se esforce para fazer mais com seu site ou interface. Entretanto, tentar ser consistente com 50 componentes diferentes no design sem erros é uma tarefa difícil.

Comece a tocar os tambores, pois o "Design System" está aqui para facilitar sua vida.

O que é um sistema de design?

Um sistema de design é um arquivo extenso de componentes reutilizáveis claramente documentados que a equipe de produtos pode aproveitar para criar experiências digitais. Em outras palavras, considere os sistemas de design como a única fonte de verdade para uma empresa no que se refere a design.

Mais do que guias de estilo ou bibliotecas de padrões, um sistema de design está em constante evolução. Esse ecossistema de diretrizes relacionadas a várias entidades, incluindo o design de UX, pode ser usado como uma estrutura de blocos de construção para qualquer projeto, a fim de garantir que todos os componentes sejam consistentes e correspondam à marca.

Embora seja útil para start-ups, negócios em crescimento e empresas, um sistema de design se torna um ativo essencial e inegociável à medida que um produto se desenvolve. Ele também pode influenciar positivamente as metas comerciais, o fluxo de trabalho, o trabalho em equipe, a experiência do usuário e a experiência geral da marca.

alt_text

Quais são os benefícios de um sistema de design?

Alguns dos méritos da implementação de um projeto de sistema são

Aumenta a eficiência e reduz o tempo - Um dos principais benefícios de qualquer sistema de design é a capacidade de criar e recriar rapidamente o trabalho de design e desenvolvimento. As equipes podem usar elementos pré-fabricados para diminuir a necessidade de reinventar constantemente a roda e reduzir o risco de inconsistência.
Melhora a consistência visual entre páginas e canais - A falta de um sistema de design em toda a organização pode levar a visuais inconsistentes, a uma experiência de usuário fragmentada ou ao isolamento da marca. Um conjunto coeso de padrões também ajuda a gerenciar grandes reformulações ou reformulações visuais em escala.
Promove uma linguagem unificada - Uma linguagem de design compartilhada diminui a possibilidade de perda de tempo de design ou desenvolvimento devido à falta de comunicação dentro e entre equipes multifuncionais.
Permite um melhor foco em problemas mais complexos - as equipes podem resolver melhor problemas complexos, como priorização de informações, gerenciamento de jornada etc., quando componentes simples da interface do usuário são criados e inequívocos.
Serve como referência e ferramenta educacional para colaboradores - Um sistema de design facilita o processo de integração em caso de mudanças de pessoal. Ele também ajuda a facilitar a entrada de novos colaboradores individuais no design de UI UX ou na criação de conteúdo.
Contribui para uma marca forte e atemporal - O objetivo de um sistema de design é comunicar uma identidade e um design específicos por trás dos produtos que ele transporta. Ele ajuda a criar marcas impactantes e auxilia as pessoas a se lembrarem da experiência com a marca. Isso faz com que as pessoas se sintam mais conectadas a uma marca e confiem mais nela.

Um guia de dez etapas para criar um sistema de design

Elaboramos um processo de dez etapas para ajudar sua empresa a criar um sistema de design.

1. Analise minuciosamente seu processo de design atual.

A primeira etapa para criar estratégias e iniciar qualquer processo é entender onde você está atualmente. A revisão e a análise do processo de design atual da sua organização podem ajudá-lo a entender melhor o design do sistema mais adequado para a sua marca. Faça a si mesmo as seguintes perguntas:

Qual é a abordagem atual de design de sua organização?
Quais são as ferramentas existentes que sua organização utiliza?

Certifique-se de avaliar o nível de maturidade do projeto da equipe do produto. Isso o ajudará a calcular o tempo necessário para implementar o novo sistema em sua organização.

2. Determine o alfabeto de sua marca

Determine your Brand's Alphabet

O alfabeto de uma marca levaria à identidade da marca, ou seja, os valores da marca e do produto e a linguagem da marca. A linguagem da marca inclui formas, fontes, cores, animações, voz e tom.

Os designers empregarão uma linguagem visual definida pelo alfabeto da marca. Analisar as diretrizes da marca e conversar com as partes interessadas pode ajudá-lo a entender a identidade e a linguagem da marca.

3. Conduzir auditoria para a IA do produto atual

A realização de uma auditoria da interface do usuário do produto atual o ajudará a enfrentar um grande desafio de design de produto: a duplicação do design. A auditoria visa a atingir dois objetivos

Chame a atenção para as áreas do produto com inconsistências significativas.
Discernir os elementos mais usados e essenciais do produto.

Uma auditoria de IU é um processo de várias etapas. É fundamental identificar e analisar as principais propriedades da interface do usuário e sua utilização nos componentes. Você pode usar as ferramentas disponíveis para ver o número de cores e tipos de letra exclusivos em suas folhas de estilo. Em seguida, você pode dividir cada design de site em elementos individuais.

4. Estabeleça os princípios de design do seu sistema

Para criar uma excelente experiência de usuário, é fundamental entender os motivos por trás das decisões de design. Além disso, um conjunto claro de metas facilita a definição dos princípios de design e a coordenação com as equipes.

Deseja ter um processo de sistema de design? Comece com estas perguntas:

O que você está criando
Por que você está fazendo isso
Como você o construirá

Os princípios de design precisam refletir os valores e a visão de sua marca.

5. Criar uma biblioteca de componentes

Também conhecida como Pattern Library (Biblioteca de padrões), ela deve incluir todos os elementos funcionais e decorativos da interface do usuário. Avalie os componentes de acordo com o projeto, as necessidades do usuário e as metas comerciais e mantenha os que forem necessários.

Build a Component Library

6. Estabelecer regras

Os sistemas de design não são criados para restringir os designers a uma direção de design específica. Pelo contrário, eles devem apenas fornecer aos designers e desenvolvedores uma estrutura fundamental que amplie a direção criativa e dê espaço para a inovação.

São duas abordagens para as regras do Design System, conforme mencionado no livro de Alla Kholmatova:

Regras rígidas - Os designers e desenvolvedores seguem um processo rigoroso para introduzir novos padrões ou componentes.
Regras flexíveis - Essas regras permitem que os designers e desenvolvedores criem sem aderir a restrições rígidas se acreditarem que isso resultará em um design melhor.

Como em muitos outros aspectos da vida, é essencial encontrar o equilíbrio certo entre essas regras para que o produto possa ser consistente e, ao mesmo tempo, criativo.

7. Escolha seu modelo de governança

Sistemas de design dinâmicos e em constante evolução exigem um processo direto de aprovação e implementação de mudanças. Há três modelos de governança:

Modelo solitário - Um indivíduo ou um grupo de indivíduos "comanda" diretamente o processo do sistema de design.
Modelo centralizado - Uma equipe é responsável e orienta a evolução do sistema.
Modelo federado - Várias pessoas de vários grupos lideram o processo de design do sistema.

Embora cada um desses modelos tenha seus prós e contras, o modelo solitário, em especial, pode fazer com que o indivíduo responsável se torne um gargalo para a execução de muitas tarefas. A melhor aposta é usar uma combinação de diferentes modelos alinhados com suas necessidades.

8. Definir a estrutura do componente

A duplicação de componentes funcionais é um desafio significativo nos sistemas de design. Isso resulta em um sistema inflexível e exige que os designers (e desenvolvedores) criem novos elementos sempre que houver um novo cenário.

Os projetos de sistemas bem-sucedidos são altamente reutilizáveis e permitem que os usuários os utilizem como base para seus produtos. Portanto, recomenda-se o desenvolvimento de elementos que possam ser reutilizados em diferentes conteúdos.

Critérios para componentes reutilizáveis e dimensionáveis:

Modular - Componentes independentes e elementos intercambiáveis.
Compossível - funde componentes existentes para criar novos componentes
Personalizável - componentes personalizáveis que funcionam em vários contextos.

9. Certifique-se de que todas as equipes usem uma linguagem unificada

A finalidade de um sistema de design inclui a facilitação do trabalho em equipe contínuo. Portanto, a integração do sistema ao fluxo de trabalho das equipes é vital. Isso aumenta a produtividade e agrega valor aos membros da equipe.

Obter uma melhor compreensão de como várias pessoas usam o sistema de design no processo de integração inicial pode ajudá-lo a modificar o sistema adequadamente.

10. Transmitir mudanças regularmente

Um processo de sistema de design evolui com a organização e não pode ser estático. Portanto, após a introdução do sistema em sua organização, é essencial comunicar todas as alterações e manter a organização atualizada.

Um changelog conciso e bem mantido pode ajudar os usuários a entender várias atualizações e como elas afetarão seu trabalho.

Três exemplos para você começar

Sistema de design da Atlassian

Atlassian Design System (https://atlassian.design/)

O Atlassian Design System, uma famosa empresa australiana de software corporativo, tem como objetivo proporcionar uma colaboração perfeita entre equipes ágeis e dispersas em todo o mundo.

O Trello e o Jira, duas das ferramentas de colaboração amplamente usadas pela Atlassian, capturam totalmente a filosofia de design da empresa. Essa filosofia consiste em aproveitar a experiência digital para aumentar a produtividade e o potencial geral das equipes e de cada membro da equipe.

Dito isso, o Atlassian Design System oferece técnicas ágeis e acompanhamento eficaz de cada etapa de um projeto, desde o planejamento do produto até a entrega. Em última análise, isso produz resultados benéficos na criação e na entrega de produtos. Seu sistema de design inclui principalmente:

Diretrizes de design
Padrões de marca
Produto
Ilustração
Prototipagem
Marketing
Personalidade

Sistema de design IBM

IBM Design System (https://carbondesignsystem.com/migrating/guide/design)

A IBM é um excelente exemplo de uma grande empresa de TI que opera globalmente e segue seu próprio sistema de design.

Seus recursos incluem tudo, desde consultoria de negócios e financiamento até a criação de software, hospedagem/gerenciamento de TI e soluções que conectam software a hardware.

O princípio fundamental da IBM é impulsionar constantemente o progresso, seja da sociedade humana ou de uma marca, usando a ciência, a razão e o intelecto.

De acordo com a IBM, ter um bom design não é apenas uma necessidade, mas também um compromisso com os usuários. Aqui estão alguns dos recursos de destaque do Carbon Design System, que oferece aos desenvolvedores e designers que trabalham com Adobe, Axure e Sketch uma grande variedade de ferramentas e recursos:

Visualização de dados
Padrões
Componentes
Diretrizes
Tutoriais

Sistema de design da Uber

Uber Design System (https://baseweb.design/)

Todos nós já pegamos um Uber pelo menos uma vez. A empresa americana de tecnologia se baseia no movimento, incluindo entrega de alimentos, carona, compartilhamento de carona entre pares e micromobilidade usando scooters e bicicletas elétricas.

A Uber precisa de um projeto de sistema eficiente para que esse tipo de serviço funcione sem falhas em todas as submarcas, produtos e projetos internos.

Os principais atributos do Uber Design System são:

Arquitetura da marca
Composição
Tom de voz
Movimento
Ilustração
Fotografia
Iconografia
Cor
Logotipo
Tipografia

Dicas para saber antes de criar seu primeiro sistema de design

1. A comunicação clara e antecipada é sua nova melhor amiga

Pode ser complicado envolver seus consumidores internos imediatamente. Na verdade, o feedback deles pode atrapalhar o processo se for ambíguo, fornecido muito cedo em um ciclo de lançamento alfa ou beta ou se não for útil.

Informe aos seus clientes, os usuários do sistema de design, o que você precisa para garantir o recebimento de feedback construtivo. Se você estiver em um ciclo inicial de pré-lançamento, seja honesto e claro sobre a contribuição exata que deseja. Isso indica que você está procurando as falhas mais significativas do produto e não críticas de alta fidelidade.

Tenha cuidado com o excesso de pensamentos, diminuindo sua mente, mas não hesite em se comunicar em excesso.

2. Seus passos não são a única coisa que você precisa rastrear

Uma parte crucial que falta na priorização é o rastreamento do uso dos sistemas de design. É imperativo entender onde o sistema está sendo usado, por quem, com que frequência e a frequência das atualizações.

A implementação de alguma coleta estatística diária sobre quais equipes estavam utilizando exatamente quais versões da biblioteca permite uma compreensão justa da taxa de adoção, atualização e downgrade.

Ao identificar as equipes que raramente atualizam, você pode conhecer os problemas que bloqueiam a atualização e, posteriormente, corrigi-los.

3. Os mecanismos de feedback são tão subestimados quanto o Rhaeghal de GOT

Para garantir que o seu sistema não seja apenas valioso para os usuários, mas também algo do qual eles se sintam parte e para o qual tenham contribuído ativamente, ter maneiras simples e diretas para que as pessoas deem feedback (Slack, e-mail etc.) e contribuam com o sistema será uma peça fundamental.

Sempre forneça instruções sobre como e onde fornecer feedback no maior número possível de áreas e nunca presuma nada, especialmente que o usuário o encontrará no local que você considera mais óbvio.

Um sistema de design é a estrela-guia de que sua organização precisa

A Design System is the North Star Your Organization Needs

Um sistema de design bem-sucedido e bem elaborado torna-se parte da própria espinha dorsal de uma empresa, resultando em experiências consistentes e ampliadas. Além disso, os designers e desenvolvedores têm a oportunidade de comunicar melhor a finalidade do produto, em vez de ficarem presos à montagem de blocos de construção básicos.

Qualquer generalista pode ser seu parceiro na entrega de um projeto, mas somente um especialista em design identifica os problemas, os desafios e as aspirações atuais para criar um sistema de design, especialmente para você. Agora não é hora de esperar. Com este guia abrangente sobre como criar um sistema de design, você está a apenas uma iniciativa de uma transformação completa do seu processo de produção.