Design System

O que é?

Design System é um conjunto de bibliotecas de design e conteúdo de uma empresa, criado e mantido pelas equipes de Design e Tecnologia.

Quando aplicar?

Podemos aplicar um Design System quando uma empresa possui um ou mais produtos com inconsistências de identidade e interface. Isso pode prejudicar os objetivos do negócio uma vez que os usuários finais daquele produto (seja ele site ou aplicativo) terão dificuldade de utilizá-lo e entendê-lo.

Também podemos aplicar um Design System quando os profissionais responsáveis por cuidar do design e desenvolvimento do produto levam uma grande quantidade de tempo para realizar mudanças simples. Em vez disso, esses profissionais poderiam passar muito mais tempo entendendo as necessidades dos usuários finais.

Objetivos do projeto

Antes do início de um projeto de Design System, é importante ter claro qual será o objetivo do projeto.

O objetivo do projeto pode ser desde diminuir o retrabalho dos desenvolvedores e designers até melhorar a padronização dos produtos.

A definição do objetivo é importante porque um projeto inicial de Design System pode durar entre 4 a 6 meses e envolve muitos profissionais.

Os elementos de um Design System

Cada empresa pode construir a estrutura do seu Design System de acordo com as suas necessidades. De forma geral, um Design System é formado por 4 partes principais:

  1. Design Principles: Também conhecido como Princípios de Design (em português), são um conjunto de definições de um projeto de Design System e que devem refletir a filosofia de Design da empresa e sustentar como os produtos digitais devem ser concebidos.
    Devem servir como base para os esforços de melhoria dos produtos, ajudando pessoas e equipes nas tomadas de decisões de design e a serem mais eficazes, além da constante evolução do ecossistema de produtos.
  2. Design Tokens: São variáveis que armazenam atributos visuais de design, que podem conter cores (hex, RGBA ou outros valores), unidades de dimensionamento (pixels, rems, etc.) e muito mais, independente de tecnologia. Eles são essenciais para criar e manter um sistema visual consistente em diferentes plataformas (sites, intranets, aplicativos, totens e outros produtos digitais da empresa).
  3. Componentes: Os componentes incluem uma variedade de elementos comuns da interface do usuário para criar experiências e garantir interação e estilo consistentes, além de otimizações de acessibilidade. Geralmente, estes componentes ficam disponíveis nas linguagens aplicadas nos sites ou aplicativos da empresa.
  4. Conteúdo da marca: Além dos componentes de design, um Design System pode contemplar conteúdos da marca, como Manual de Tom de Voz, Branding e recursos para download, como os arquivos de componentes do Design System.

Quais são as etapas?

Um projeto de Design System contempla 5 etapas:

  1. Entrevista com stakeholders: O objetivo desta etapa é entendermos as dores e necessidades dos stakeholders envolvidos no projeto, elencando suas dificuldades e objetivos no projeto.
  2. Inventário de Conteúdo: O objetivo desta etapa é um mapeamento de todos os componentes e styleguides já produzidos pelas equipes da empresa para entendimento aprofundado do contexto e identificação de padrões.
  3. Design Principles: O objetivo desta etapa é alinharmos o conhecimento e a expectativa de todos os stakeholders envolvidos no projeto e criarmos os Design Principles da empresa.
  4. Definições: O objetivo desta etapa é definirmos os fluxos de atualização e manutenção do Design System, assim como as ferramentas a serem utilizadas tanto para design como para desenvolvimento e o formato e a equipe de manutenção.
  5. Design System: O objetivo desta etapa é a criação do Design System em si. Geralmente, as empresas começam com uma versão inicial do projeto, chamada de MVP ou v1, focada nas principais necessidades.

Manutenção / Adoção

Tão importante quanto a criação de um projeto de Design System, é a sua manutenção e a adoção pelas diferentes equipes da empresa.

Para que o projeto tenha continuidade e adoção, é importante a participação de todos stakeholders desde o início do projeto e uma ampla divulgação para todas as equipes da empresa.

Benefícios

  • Mais velocidade do protótipo até o resultado final
  • Agilidade para realizar modificações em features já existentes
  • Consistência de identidade e interface dos produtos
  • Melhor alinhamento em equipe e colaboração entre as áreas de produto e desenvolvimento

Cipreste

Com o objetivo de mostrar de forma didática um projeto de Design System, o Cipreste foi criado pela nossa equipe com base em nosso último website, lançado em Janeiro de 2020.

Projetos

Projetos recentes que aplicamos este serviço

Cliente

Cliente

Cliente

Webinar

Conheça mais sobre um projeto de Mapeamento da Jornada neste webinar ministrado por nosso Fundador Gilmar Gumier

Outros serviços

Conheça outros dos nossos serviços

Contato

Quer melhorar seu
produto ou serviço?
Escreva pra gente!

Rua Estados Unidos, 1570

Jardim América - São Paulo / SP

ola@tuia.me

Facebook-f
Instagram
Linkedin
Entre em contato