Viva UI Kit: a consistência contra-ataca

Unificando a identidade visual dos produtos do VivaReal

Um UI Kit é um conjunto coeso de componentes simples e complexos (como botões, campos de formulário, etc) que servem de referência para montar soluções de design para web e mobile.

Este guia propicia dois benefícios principais para um time de produto: agilidade e consistência.

O processo de criação se torna mais ágil, afinal, uma vez que você tem componentes bem definidos, basta muitas vezes os copiar e colar para usar de acordo com sua necessidade. O tempo que seria gasto para pensar em aspectos do layout diminui e você pode focar mais tempo apenas na solução do problema em si. Caso um componente precise ser modificado por algum motivo, fica mais fácil e rápido de substituir o antigo por um novo também. Isso vale tanto para a etapa de design quanto para a etapa de desenvolvimento.

A consistência, por sua vez, é ainda mais valiosa numa estrutura como a do VivaReal: onde temos produtos multiplataforma diversos porém conectados entre si, e onde cada time de produto possui um UX designer. Não importa o quão parecidos sejam dois designers: cada um sempre terá um estilo visual próprio. A linguagem visual de uma empresa é única, portanto, definir uma base ajuda a garantir que os produtos não destoem entre si, e que, assim, fortaleçam a linguagem visual da empresa.

O último UI Kit do VivaReal era limitado e contemplava apenas a plataforma web. Por conta disto, e pela pluralidade de designers que possuímos, as soluções foram gradativamente perdendo consistência, mesmo havendo comunicação constante entre nós. Até que o Chapter de UX decidiu finalmente dar um basta nisso e criar um UI Kit mais completo, organizado e multiplataforma.

Antigo UI Kit do VivaReal.

Iniciando os trabalhos

Primeiramente, coletamos todos os componentes e estilos que conseguimos encontrar espalhado pelos nossos produtos, dividindo-os por plataforma (Web, Android e iOS) e os organizando-os por tipo (Botões, componentes de seleção, cards, etc). Com isso conseguimos deixar evidente a grande inconsistência que enfrentávamos (não só entre produtos e plataformas, mas também inconsistências intra-produto e intra-plataforma). Reunir estes elementos também serviu como ponto de partida para começar a unificá-los. Nossa idéia foi preferencialmente reaproveitar (ou no máximo modificar) o que já tínhamos ao invés de sair criando elementos totalmente novos, evitando, assim, prejudicar tanto o branding do VivaReal quanto os usuários, o quais iriam se assustar com a diferença brusca.

Para decidir quais entre os diversos estilos iriam prevalecer (ou até mesmo se um estilo totalmente novo seria necessário), definimos 3 regras básicas:

1. Respeitar preferencialmente as guidelines já existentes de cada plataforma. É importante que o produto seja parecido entre plataformas para facilitar o aprendizado no caso de um usuário mudar de uma plataforma para outra. Porém é mais importante ainda não desrespeitar padrões já bem estabelecidos de cada plataforma para não prejudicar a experiência e aprendizado daqueles que já estão acostumados a utilizar outros apps delas.
2. Tamanhos e espaçamentos devem ser múltiplos de 4. Por ser a base mais comum dos grids mobile (4dp, 8dp, 16p, 32p, etc), resolvemos utilizá-la em todas as nossas plataformas, inclusive a Web, para garantir uma proporção e harmonia entre os elementos.
3. Menos é mais. Isso se aplica tanto para o estilo dos componentes, garantindo que não sejam tão rebuscados, quanto para manter a quantidade de estilos enxuta. Porque apesar de querermos deixar o UI Kit o mais completo possível, não queríamos definir componentes ou estilos que não veríamos ser logo aplicados. Queríamos justamente deixar o kit o mais minimalista possível para que ele atendesse as necessidades atuais e evoluísse naturalmente com as futuras. Se você der 20 botões diferentes na mão de um designer ele vai acabar inconscientemente usando todos, quando podia ter feito soluções igualmente ou mais elegantes com apenas 3 ou 4. E não é exagero: tínhamos mais de 20 estilos diferentes de botões.

Botões antigamente encontrados nos aplicativos do VivaReal no Android e no iOS, respectivamente. Alguns botões até parecem iguais, mas diferem sutilmente de arredondamento, altura, fonte ou cor.

A partir das regras 1 e 2 já conseguimos eliminar ou alterar boa parte dos estilos que não condiziam com sua plataforma (especialmente Android e iOS) ou que não eram múltiplos de 4. E, com base na regra 3, qualquer estilo que não tinha um papel único e diferenciado com relação aos demais foi removido para manter o UI Kit mínimo.

Novo UI Kit Android e iOS.

Importante mencionar que, como no caso da Web não existe uma guideline forte como no Android e iOS, tivemos que revisar muito mais os elementos, e, para evitar que existissem estilos novos à toa (regra 3), “importamos” para a Web componentes e estilos tanto do Android quanto do iOS. Apesar de menos frequente, também tiveram casos de importações para Android e iOS das demais plataformas.

3 exemplos de “importação” entre as plataformas Android, iOS e Web: os botões menores na Web se assemelham aos do Android enquanto os maiores se assemelham aos do iOS; Os cards no iOS e na Web se inspiram nos do Android por esta ser a única plataforma com um estilo de cards bem definido; e finalmente, na falta de um Segmented Control que nem no iOS, um novo componente similar foi criado para a Web e reutilizado no Android.

Novo UI Kit Web.

Um pouco de cor pra completar

Após organizar os elementos específicos de cada plataforma, ainda precisávamos organizar os elementos compartilhados entre todas elas: as cores e as ilustrações. Estes elementos são de suma importância, porque representam as principais conexões entre os produtos e plataformas.

Com exceção do azul da marca VivaReal e do laranja de ação de lead, a quantidade de cores, tons e usos era muito variada e sem padrão algum. Os aplicativos, por exemplo, tinham um azul mais claro para ação, enquanto no portal web o azul utilizado para ações era o mesmo da marca VivaReal.

Uma amostra da variedade de cores e tons encontrados nos produtos do VivaReal.

Para definir melhor quais cores utilizar, decidimos primeiro quais seriam as situações principais em que elas precisariam ser utilizadas. E com isso chegamos a 4 grupos: cores de texto e fundo, cores da marca e de ação, cores de categorias e status e cores para ilustração.

De cima para baixo: cores de texto e fundo, cores de marca e de ação, cores de categorias e status e cores para ilustração.

As cores de texto seguiram o padrão do Material Design, ou seja, são variações de transparência da cor preta e da cor branca. Além disso existe apenas um tom de cinza agora para ser utilizado em fundos no geral (quando o mesmo não for colorido ou branco) e uma cor preta 50% para ser utilizada quando a tela for escurescida por modais.

As cores de marca e ação simplesmente herdaram as mesmas já utilizadas antigamente: o azul VivaReal, o laranja do Call-to-Action, o azul utilizado para ações no apps (que agora também serve para ações no portal web) e o azul VivaReal em tom mais escuro (utilizado em rodapés, breadcrumbs e barras ou seções secundárias no geral). Seguindo a regra 3 (menos é mais) novamente, decidimos descartar os demais tons de azul, uma vez que eles poderiam ser obtidos aplicando transparências de preto ou branco das cores de texto e fundo. O laranja escuro também foi descartado, reservando as alterações de tons mais escuros ou claros apenas para o azul VivaReal.

Um mesmo conjunto de cores foi escolhido para ser utilizado tanto em status dos sistemas quanto para esquemas de categorização (como as faixas nos cards de lançamentos e os tópicos no blog de produto do VivaReal). Além de cores óbvias como vermelho (status de erro) e verde (status de conclusão ou aprovação), mais 6 cores foram adicionadas neste primeiro momento. Novamente, a ideia é começar com poucas opções e adicionar novas cores apenas conforme forem se mostrando necessárias. Todas elas foram baseadas nas cores padrão do flat design. E tomamos muito cuidado para escolher uma tonalidade tanto de azul quanto de laranja que diferisse totalmente das tonalidades já utilizadas nas cores de marca e de ação.

Nossas ilustrações eram muito diferentes entre si: umas eram complexas e cheias de detalhes, outras eram simples e monocromáticas, e ainda tinham algumas apenas em tons de cinza. Como nossos produtos costumam já ter bastante imagens e textos informativos, quisemos que as ilustrações fossem menos detalhadas e que não competissem visualmente com os demais elementos. Logo, resolvemos repaginá-las com traços fortes e simples e com poucas cores pouco chamativas. Para não adicionar um conjunto totalmente novo de cores ao UI Kit, as cores novas são apenas variações desaturadas e claras das cores de status e categorias.

Algumas das antigas ilustrações e suas respectivas novas versões.

Nunca termina, mas vale a pena

Tão importante quanto criar um UI Kit, é garantir que o mesmo seja aplicado. Afinal, o UI Kit vai sendo criticado e revisado na mesma medida em que vai sendo aplicado em produtos atuais e soluções futuras. E, como já dito antes, a ideia é que ele cresça e evolua cada vez mais com o passar do tempo. Ou seja, é um processo de construção que nunca termina de fato.

Mas calma, fica mais fácil com o passar do tempo! Além disso, os benefícios da agilidade e da consistência mencionados se notam logo de início.

O trabalho é sempre mais árduo no começo, pois existem muito mais inconsistências ou falhas para se tratar. E quanto mais tempo se espera para começar, pior.

Então se você também acha que precisa de um UI Kit novo, não espere. Comece agora mesmo! Seus produtos, time e usuários agradecerão.