Você gerencia várias interfaces digitais para sua empresa? Quer retrabalhá-los, harmonizá-los? E gastar o mínimo de tempo possível gerenciando mudanças…? O método Design System é a solução para atender às suas necessidades.
A digitalização das empresas está abalando os métodos de design , a organização das equipes e os índices de produção . As plataformas digitais e suas funcionalidades são colocadas online rapidamente para atender aos requisitos de usuários finais cada vez mais exigentes.
Várias equipes (desenvolvedores web, designers de UX , etc.) estão envolvidas em projetos web e muitas vezes em momentos diferentes. Inconsistências, lacunas de design, duplicatas… quanto mais stakeholders houver, mais complexo será centralizar as informações e padronizar o uso .
O Design System responde a uma lógica de industrialização do design . Este repositório de UX e UI serve como base para a criação de dispositivos digitais. Como ? Foco no sistema de design…
O que é um Sistema de Design?
O Design System (ou design system ) pode ser comparado a uma biblioteca de componentes para usar ao projetar o desenvolvimento de um projeto web. Inclui “bibliotecas” (bibliotecas) e “guias de estilo” (guias de estilo) . O Design System reúne o que se chama de carta ergonômica e carta gráfica.
O Design System traduz a identidade da marca da empresa. São elementos gráficos , tipografia, visual, branding …
Seja um aplicativo de negócios ou um site de comércio eletrônico, o Design System pode ser usado como uma biblioteca de referência e guia . Além disso, em um artigo anterior, vimos como usar UX para tornar um site de e-commerce mais eficiente .
Graças ao Design System, as equipes técnicas e de design podem desenhar componentes prontos para uso escritos em uma linguagem comum . À medida que a equipe e a empresa crescem, o Design System deve ser considerado, desenvolvido e aplicado de forma consistente. Isso ajuda uma equipe a ser mais produtiva e a atingir um nível mais alto de consistência do produto .
Vários Design Systems já surgiram. Por exemplo, o Mozilla Firefox já projetou seu próprio Design System , o Photon Design System :
Quer otimizar sua experiência do usuário (UX)? Aprofunde suas habilidades com nosso dossiê dedicado a métodos e práticas de UX!
Como fazer um Design System?
O papel do design atômico
Construir um Design System requer tempo, rigor e sobretudo uma boa metodologia. É aí que entra o Design Atômico.
Atomic Design é uma maneira de projetar um dispositivo dividindo-o em seu menor componente. Isso é chamado de ” design modular “.
Os átomos/componentes (botões, paleta de cores, etc.) montados formam moléculas ou módulos (bandas, formulários, etc.). A associação dessas moléculas possibilita a constituição de organismos (conjuntos de blocos), que uma vez ligados formam moldes ou moldes . Estes templates tornam finalmente possível desenhar as páginas do site !
Aqui está um exemplo específico para ilustrar o conceito de Design Atômico :
Fonte: fabernovel.com
Não se trata mais apenas de construir páginas, mas de projetar sistemas de componentes para se adaptar a mudanças rápidas.
Atomic Design também é um excelente método para federar o trabalho em equipe. A equipe compartilha uma linguagem comum e documentação exclusiva, que são a base para um trabalho colaborativo de qualidade.
Os elementos e ferramentas para criar um Design System
O conceito de Design System ainda é relativamente desconhecido hoje e não há realmente um guia explicando os diferentes passos a seguir.
Uma coisa é certa, você tem que pensar bem antes de começar. Mesmo que um dos objetivos do Design System seja economizar tempo, sua implementação é bastante longa.
A primeira coisa a fazer é organizar um encontro entre designers de UX/UI e desenvolvedores web para pensar juntos em soluções para implementar a metodologia certa e usar as ferramentas certas .
Diferentes elementos e ferramentas entram em jogo:
Le guide de style (STYLE GUIDE)
Todo projeto deve ter um guia de estilo . O guia de estilo é muito semelhante à carta gráfica de uma empresa. Ele lista todos os elementos úteis relativos ao web design de um site . Por exemplo, ele permite que você saiba qual cor e tipografia usar ou qual aparência os botões devem ter.
Um guia de estilo eficaz deve ser detalhado o suficiente para que cada elemento do seu Design System seja descrito e documentado.
Aqui está um exemplo de um guia de estilo :
Quando você precisa começar a construir um Design System , você precisa ter certeza de que ele pode ser dimensionado em vários projetos. De fato, deve, portanto, ser acessível por diferentes equipes da empresa .
Para criar um guia de estilo , é possível usar a ferramenta de maquete online InVision . Para realizar este projeto, devemos pensar em adicionar uma página de título, na qual listamos todos os tipos de átomos , moléculas e organismos do Design Atômico . Cada tipo de item deve ter uma página separada.
No entanto, projetar designs para web e dispositivos móveis não é para todos. Se lhe falta inspiração, convidamos você a ler nosso artigo sobre tendências de UI/UX .
O ACORDO DE NOMES
A convenção de nomenclatura também é algo a ser considerado ao projetar um Design System . Para uma melhor comunicação entre as equipes de design e desenvolvimento, a convenção de nomenclatura deve ser consistente e clara.
A convenção de nomenclatura é escrita em letras minúsculas e separadas por hífens. Torna-se fácil de usar para o designer e o desenvolvedor, porque é visível no código-fonte e é útil para nomear arquivos. Esse nome também possibilita localizar rapidamente uma camada ou um grupo documentado em um modelo.
A primeira letra representa uma categoria de elemento: átomo , molécula , organismo . A segunda palavra é um tipo de item . O restante é usado para descrever variações de um elemento . Cada grupo de átomos , moléculas e organismos nos modelos gráficos deve ser nomeado de acordo.
A convenção de nomenclatura pode desempenhar um papel importante no sucesso de um Design System . Veja o exemplo de um desenvolvedor revisando uma maquete. Este vê um organismo chamado “o-popup-alert-exit” . Ele pode examinar uma pasta de código-fonte, encontrar facilmente um arquivo chamado “o-popup-alert-exit.html” e adicioná-lo rapidamente a um local necessário em um projeto. Isso economiza um tempo considerável ao projetar o Design System .
Aqui estão algumas outras dicas a serem consideradas:
- Considere tornar os nomes distintos e claros e evite usar índices. Os nomes devem ser significativos para evitar confusão e erros. Portanto, preferimos “a-dropdown-main” em vez de “a-dropdown-1” ;
- Durante uma nomenclatura, deve-se focar no papel do elemento no Design System . Você não deve nomear um botão em sua forma (a cor, a forma geométrica, …). O botão deve ter um nome de acordo com sua função : se for um botão vermelho principal, deve ser indicado no nome que é um botão principal e não um botão vermelho. Se a cor desse botão principal precisar mudar, não precisaremos renomear cada botão. Então, olhando apenas para o nome do elemento, é possível saber o papel que ele desempenha no Design System .
As bibliotecas de esboços
As bibliotecas são uma grande parte da funcionalidade do Sketch . Sketch App é um software que permite projetar interfaces de sites ou aplicativos móveis . Graças aos plugins, a funcionalidade do Sketch pode ser estendida. Não se preocupe: Sketch é fácil de usar e rápido de instalar!
A funcionalidade Sketch permite conectar um arquivo .sketch usual nas preferências do software e utilizar os símbolos deste arquivo em todos os modelos. Mais informações sobre o uso de bibliotecas podem ser encontradas na documentação do Sketch .
Modelos gráficos (maquetes de design)
Uma vez que o guia de estilo foi criado, é hora de começar a fazer as páginas em 4 etapas:
- Passo n°1: Você deve começar criando o modelo de uma página. Os elementos desta página virão eventualmente do seu guia de estilo . Em seguida, as camadas devem ser estruturadas em grupos apropriados;
- Passo 2: Uma vez que a página é montada, ela geralmente passa por algumas iterações e discussões com o cliente antes de ser desenvolvida;
- Passo 3: O projeto é aprovado pelo cliente. Portanto, é hora de “atomizá-lo”. Certifique-se de que seus grupos estejam estruturados e nomeados de acordo com o Atomic Design . É possível adicionar novos elementos ao guia de estilo ;
- Passo 4: Finalmente, a página pode ser desenvolvida. Cada elemento é documentado graças ao Design System . Ao mesmo tempo, isso significa que menos perguntas serão feitas pela equipe de desenvolvimento e o trabalho será mais produtivo!
No InVision, o código do desenvolvedor se parece com a estrutura da camada:
Quais são as vantagens do Design System?
O Design System tem muitas vantagens notáveis:
- A criação de um Design System em uma estrutura atômica ajuda os desenvolvedores a criar os componentes básicos e, assim, reduz o número de retrabalhos durante o desenvolvimento. Eles podem facilmente montar componentes básicos para fazer componentes mais complexos;
- Ao construir um Design System de acordo com o Atomic Design , torna-se fácil para os designers projetar e gerenciar arquivos com eficiência. Ao dividir todo o Design System em átomos , moléculas e organismos , o compartilhamento e a atualização de arquivos são facilitados;
- O Design System ajuda a documentar claramente todos os componentes e padrões de projeto. A colaboração é facilitada e a equipe pode se concentrar nas complexidades do projeto;
um Design System é baseado no trabalho em equipe entre designers e desenvolvedores. Cabe à equipe trabalhar mais de perto.
Configurar um Design System pode ser longo, mas prático. Além do trabalho substancial que traz, o Design System é uma das melhores formas de padronizar seu trabalho e garantir um bom entendimento e coesão por parte da equipe de UX e desenvolvimento. Em conexão com o Atomic Design , o Design System permite que você organize seu design e responda a problemas de UX. Se você quiser saber mais sobre os métodos de design de UX , convidamos você a assistir ao nosso webinar.
