Inchurch
ux ui
design thinking
design system
princípios de design
governança
Junto com o time de mobile, desenvolvemos um novo design system para o produto whitelabel da empresa. Iniciamos com um estudo definindo os princípios de design do DS, manual de utilização e boas práticas, fluxo de governança para tomada de decisão e criação de novos componentes. A partir o resultado desses estudos, partimos para a definição de tokens, componentes e templates do design system.
Princípios de design do DS
Os princípios refletem o espírito com que trabalhamos, nos posicionamos no mercado e nos relacionamos com as pessoas. Os princípios de design ajudam as equipes a tomarem decisões de design em conformidade com a cultura e estratégia da empresa.
Confiável
Transparência, ética e compromisso com o ser humano.
Escalável
Desenvolvimento dos produtos de forma ágil, robusta e rentável.
Racional
Entregas de valor, úteis, operáveis e eficientes.
Atraente
Produtos funcionais, agradáveis e com experiências inesquecíveis.
Boas práticas
do DS
Otimize as complexidades seguindo estas diretrizes de design:
Escala
A escala se refere ao uso do tamanho relativo para sinalizar a importância e a classificação em uma composição. Um design visualmente agradável geralmente usa não mais do que 3 tamanhos diferentes. Ter uma gama de elementos de tamanhos diferentes não apenas criará variedade em seu layout, mas também estabelecerá uma hierarquia visual.
Hierarquia visual
A hierarquia visual refere-se a orientar o olhar sobre a página para que atenda aos diferentes elementos do design na ordem de importância. A hierarquia visual pode ser implementada por meio de variações de escala, valor, cor, espaçamento, posicionamento e uma variedade de outros sinais. A hierarquia visual controla a entrega da experiência.
Equilíbrio
O equilíbrio se refere a um arranjo ou proporção satisfatória de elementos de design. O equilíbrio ocorre quando há uma quantidade igualmente distribuída de sinal visual em ambos os lados de um eixo imaginário passando pelo meio da tela. O eixo imaginário que você estabelece em seu visual será o ponto de referência de como organizar seu layout e o ajudará a entender o estado atual de equilíbrio em seu visual. O tipo de equilíbrio que você usa em seu visual depende do que você deseja transmitir. A assimetria é dinâmica e envolvente, ele cria uma sensação de energia e movimento. A simetria é silenciosa e estática. O equilíbrio radial sempre levará o olho ao centro da composição.
Minimalismo
O minimalismo no design é uma abordagem estética que se concentra em simplificar e reduzir elementos ao mínimo necessário para alcançar um objetivo ou transmitir uma mensagem. Conduzir o processo de criação com clareza e objetividade reduzindo elementos e componentes para que o projeto se torne simples, moderno, e com muito valor aos detalhes.
Contraste
O contraste fornece ao olho uma diferença perceptível entre dois ou mais objetos, a fim de enfatizar que eles são distintos. É frequentemente aplicado por meio da semântica das cores por exemplo. Use algum verificador de contraste para garantir que seu conteúdo possa ser lido por todos os usuários.
Contexto
Os usuários podem escolher individualmente entre uma variedade de interesses, posições e objetivos diferentes. Para criar uma experiência positiva, é importante compreender e incorporar as necessidades e objetivos do usuário no design.
Consistência
Usamos uma linguagem visual clara para os usuários em todos os contextos e oferecemos soluções recorrentes. Conjuntos inteiros de conteúdo, hierarquias e funções são estruturados de forma idêntica em todo o produto. Desta forma, tornamos mais fácil para os usuários realizarem tarefas complexas e criamos uma experiência geral uniforme.
Transparência
Transparência e proteção de dados são muito importantes para o usuário. Uma vez que mais e mais serviços estão interconectados em diferentes sistemas e dispositivos, o usuário deve ser capaz de confiar em cada elemento do ecossistema. Ao comunicar claramente os estados do sistema, podemos dar ao usuário a oportunidade de visualizar todas as informações relevantes. Em caso de problemas, notificamos o usuário imediatamente e oferecemos suporte na solução do problema, além de tratar as informações do usuário como confidenciais.
Governança
do DS
Desenvolvemos uma governança para garantir a manutenção do nosso Design System. Basicamente seguimos fluxos a fim de decidir, criar ou editar e finalizar componentes. O objetivo de cada um deles é questionar necessidades ou apresentar as etapas a serem executadas.
Fluxo para tomada de decisão
Muitas vezes a criação de um novo componente pode ser necessidade de apenas uma feature que não reflete um uso global. Com esse fluxo, é possível identificar se uma necessidade converge para a criação de um novo componente, a edição de um componente que já existe, ou para usar um componente que já existe, mas sem edição.
Fluxo para criação de novo componente
Exemplos
Grids
Button
entrega de valor
A criação desde produto interno gerou muita sinergia entre os times de produto e desenvolvimento, como também deixou muito mais dinâmica a esteira de entrega de novas features.