Semantix Design System (versão em Português)
Velocidade, agilidade e flexibilidade
You can see the English Version here.
O que é um Design System?
“Um Design System é basicamente a história de como uma organização cria um produto digital” — Brad Frost, Brad Frost em Let’s Work Together! na SmashingConf Barcelona 2017
Não é apenas design digital. Design System é feito de muitas partes, não apenas UI toolkits, padrões de UX, guidelines e código, mas também são os processos. Documentação, processo de design, ferramentas usadas no dia a dia, além de como organizar seus arquivos, como nomeá-los.
Tudo isso é muito importante para construir uma base sólida de design, é como documentamos e compartilhamos o sistema com nosso time de UX/UI e Desenvolvedores.
“Um Design System não é um projeto. É um produto, servindo produtos. ” Nathan Curtis
Com o Semantix Design System queremos permitir que os produtos funcionem com o mínimo esforço do time de UX e Dev para realizar seu trabalho em escala para vários produtos e públicos-alvo mantendo a experiência, a flexibilidade do projeto e usando a mesma linguagem com a identidade da marca.
Os benefícios de um Design System
Criar Design System tem vários benefícios que fazem com que valha a pena se dedicar a ele antes de criar telas para o produto. Aqui estão os principais:
Consistência. A maneira como os componentes são criados e gerenciados segue um padrão documentado de código e melhores práticas. Desenvolvedores são capazes de implementar a UI mais facilmente, eles podem pensar na página em particular como um conjunto de componentes.
Melhor comunicação entre times. Design System é a única fonte de verdade. Quando o desenvolvedor e o designer discutirem a página, eles usarão os mesmos nomes dos componentes. Menos erros de comunicação serão cometidos.
Independente. Seu design system é tratado como completamente autônomo e livre de dependência.
Reutilizável. Componentes pensados para que possam ser reutilizados em muitos contextos e produtos diferentes.
Acessível. Os aplicativos criados são utilizáveis pelo maior número possível de pessoas, não importa como eles acessem a Web.
Robusto. Independentemente do produto ou plataforma em que o Design System é aplicado, ele deve funcionar com graça e com o mínimo possível de erros.
Focar mais em UX, menos no visual. Usando a biblioteca de UI criada no Design System significa que não temos que descobrir qual deve ser a aparência de um componente colocado em uma página — pois ele já está definido. Com isso, a equipe de UX pode focar mais em melhores experiências e usabilidade.
Atomic Design
“Um Design System é a história oficial de como sua organização projeta e constrói produtos digitais” Brad Frost
Para criar o Semantix Design System, usamos como base o Atomic Design que é um conjunto de princípios baseados em uma forma de pensar e documentar método de design para web nos componentes com os quais os usuários interagem e como eles se encaixam em um sistema holístico. Para resumir o Design System em poucas palavras:
Átomos: elementos da interface que não podem mais ser divididos e servem como os blocos de construção elementares de uma interface.
Molécula: coleções de átomos que formam componentes de interface do usuário relativamente simples.
Organismos: componentes relativamente complexos com coleções de Moléculas.
Templates: coloca os componentes dentro de um layout e demonstra a estrutura do design subjacente.
Pages: Aplica conteúdo real em templates para testar a resistência do Design System.
“Atomic Design é sobre projetar o core do sistema." Joe Toscano
Um dos motivos de trabalharmos com o Atomic Design é por usarmos o Sketchapp e React. Com Sketch e React criamos interfaces de usuário usando componentes, como botões, caixa de seleção, lista, e até itens mais complexos como um header ou um menu.
Além disso, podemos reutilizar um único componente em várias interfaces e os componentes podem conter outros componentes como peças de lego que se encaixam entre elas. O uso de um conjunto de elementos em símbolos e camadas com estilos compartilhados permite criar um sistema que se renova rapidamente.
O Sketch e React são ótimos para o Atomic Design e vice-versa.
Design System V2
Library no Sketch
Quando entrei na Semantix, parte dos componentes já estavam programados em React, mas não havia algo além do código documentando o Semantix Design System.
Juntamente com o Felipe Ruiz, criamos uma library no Sketch, um arquivo com todos os componentes organizados separadamente e que é usado para alimentar outros arquivos de sketch onde possuem o projeto de fato.
Com isso toda a equipe de UX/UI pode usar os componentes da biblioteca, evitando o retrabalho de desenhar eles a cada projeto.
Grid base 8px
Mudamos o Grid que usava base 10px para outro com base 8px.
Porque trocar um grid de base 10px para 8px?
Ao redimensionar os componentes na base 10px podemos acabar com algo inesperado como 10/2=5px, 5/2=2,5px, 2,5/2=1,25px.
Com uma base 8px, ao redimensionar componentes temos 8/2=4px, 4/2=2px e 2/2=1px, números inteiros.
Um grid na base 8px (8px / 16px / 24px / 32px / 40px / 48px / 56px), com todos os componentes como fontes, ícones, botões, imagens e espaçamentos é escalonável para todas as resoluções de telas existentes atualmente.
Grid base 8 dá mais flexibilidade que 10.
Novos Componentes
Além de redesenhar tudo para base 8px e redesenhar para aperfeiçoar antigos componentes, contribuí com novos componentes listados abaixo:
Cor
Criamos um padrão de nomes para organizar melhor as cores. Para níveis de cores usadas frequentemente, nomes como Primary. Para níveis de tons cinzas, Grey.
Troquei o tom de Azul para um tom conhecido como azul clássico (nomeado como Primary 1), que harmoniza melhor com a paleta de cores. Segundo a empresa Pantone Color Institute, é uma cor que traz confiança, passa a mensagem de ser duradouro e resiliente.
Adicionei novas cores ao design system, (Primary 5 ao Primary 8 e Grey 1 ao 6)
Sparkline
Trocamos a Visão Geral (overview metrics) por um Gráfico Sparkline dos processos.
Sparkline é uma representação visual de dados para mostrar tendências numa série de valores e realçar valores máximos e mínimos.
Input: Card
Adicionei um novo input type chamado Card a lista existente.
Table element
Recriei a tabela, com marcação de seleção e 3 graus de stroke para marcar nível de importância
Ícone de Erro no Form
Para indicar estado error o componente form ficava vermelho. Pensando em pessoas com daltonismo, foi adicionado um ícone de exclamação para sinalizar que algo não ocorreu como deveria.
O código do Semantix Design System pode ser visto aqui e a versão Sketch está aqui abaixo:
Obrigado por ler. Se tiver algo a acrescentar, por favor escreva um post abaixo.
Ficha técnica Semantix Design System:
Head of Design: Felipe Ruiz
UX/UI Designers: Idevã Batista, Miki Ojima e Maria Vitória Brito
Front-End Engineers: Hilquias Rodrigues, Ivan Eijy e Eder Fleming
Referências sobre Design System e Atomic Design:
Atomic Design de Brad Frost
Idevã Batista
Interaction Designer, UX/UI, Semantix
UX Lead at Semantix. Almost two decades of experience in the area, worked in agencies as Young & Rubicam, DDB Brasil, Gringo, VML and startups as Semantix. Diana’s father.
