Unicorn Utterances é um site comunitário que ensina conceitos de programação. Seus artigos vão do back-end ao front-end, bem como princípios mais primitivos da ciência da computação. Fui contratado para refazê-lo do zero, com o objetivo de alinhar sua nova estética com o produto final para criar uma experiência coesa.

Construindo o novo Unicorn Utterances

O principal objetivo desse redesenho era pegar algo que era tradicionalmente chato e estéril - sites de programação - e transformá-lo em um ambiente alegre e divertido. Com isso, o foco tornou-se em pegar sua marca e reimaginá-la.

Abordamos primeiramente a tipografia.

Unicorn Utterances estava usando três fontes diferentes: Work Sans como fonte display, Archivo como body e Inconsolata , uma fonte uniwidth - de largura consistente - para alguns components. Uma das coisas que queríamos alcançar era reduzir o tamanho da página de todo o site. As fontes são uma boa parte disso, então com o redesign, escolhemos apenas uma: Figtree!

Figtree foi a escolha perfeita para Unicorn Utterances, pois manteve as qualidades de uma fonte sans serif geométrica - legibilidade em tamanhos pequenos, bom ritmo - ao mesmo tempo em que era expressiva e divertida.

Nossa escala tipográfica consiste em duas configurações, desktop e mobile , o que também se aplica a tablets. Isso acabou funcionando muito bem para nosso caso de uso, reduzindo o número de estilos que precisávamos.

Expandimos enormemente nossa paleta de cores.

O design anterior era monocromático, aderindo apenas ao esquema de cores azul, em diversas tonalidades. Para o novo, sabíamos que precisávamos de uma cor de destaque para fornecer mais opções para diferenciar e destacar diferentes componentes e estados. O rosa foi facilmente escolhido, pois sempre fez parte do logotipo e da identidade da Unicorn Utterances.

O novo sistema define as cores da marca em duas configurações: padrões e variantes. A seguir, temos superfícies, que são valores translúcidos que podem ser empilhados para criar hierarquia; essas cores são usadas para estados, contêineres, sobreposições, bordas e muito mais.

Conseguimos construir um conjunto robusto de componentes que atendessem aos requisitos de acessibilidade, mantendo a clareza visual e a diversão de Unicorn Utterances.

Um dos aspectos mais divertidos do novo site foi trazer alguns temas de desenvolvedores para o processo de design. Se você já esteve perto de um desenvolvedor antes, sabe que eles adoram seus adesivos. Eles adoram colecioná-los e colá-los em seus dispositivos. Assim, para o redesenho, o estilo do adesivo foi aplicado aos logotipos das plataformas e idiomas onde quer que aparecessem; um bom exemplo é nossa nova experiência de pesquisa:

Construindo para desenvolvedores, com desenvolvedores.

Refazer um site do zero exigia estratégia e planejamento. Com a ajuda de dois desenvolvedores incríveis, Corbin Crutchley e James Fenn, eu pude ficar tranquilo sabendo que minhas especificações seriam respeitadas.

Developer hand-off

Decidi então criar o sistema de design mais bem documentado e estruturado que pudéssemos. Cores, larguras de borda, arrendondamento, tamanhos de alvos e larguras máximas são todos tokenizados para que possamos padronizar o processo de design e fazer com que as telas pareçam consistentes e personalizáveis ​​a partir de uma única fonte de verdade.

Tive total liberdade na hora de criar o sistema de tokens, o que me permitiu definir a estrutura e a profundidade que poderíamos chegar ao utilizá-los. Empregamos tokens específicos de componentes para facilitar aos desenvolvedores e futuros designers o rastreamento de valores e alterações. As especificações foram feitas junto com seus tokens e seus valores foram especificados por ponto de interrupção, para permitir um dimensionamento responsivo. Os desenvolvedores só precisaram copiar um arquivo de texto e foram bons em implementar as alterações nos respectivos componentes.

Abaixo está um exemplo real de um conjunto de tokens de componentes e como eles foram aplicados nas especificações.

Acessibilidade era nossa maior prioridade.

Unicorn Utterances se orgulha de ser inclusivo, mas os esforços anteriores de acessibilidade foram insuficientes para cobrir todos os casos de uso necessários. Com o novo design, a acessibilidade foi o foco desde o início.

É claro que, como acontece com qualquer sistema de design, o nosso suporta todos os estados de componentes que você esperaria.

Nossos estilos de texto estão todos vinculados a rem, permitindo que sejam dimensionados com a propriedade font-size do navegador.

Também empregamos elementos ocultos para auxiliar os usuários na navegação pelo teclado. A página de pesquisa contém um botão oculto que permite focar a barra de pesquisa instantâneamente antes de navegar para as opções de filtragem.

Elementos também usam aria-labels para tornar sua função conhecida pelos usuários com leitores de tela.

Realizamos diversas auditorias.

Em seguida, realizamos diversas auditorias de acessibilidade onde problemas como falta de contexto para leitores de tela, contraste insuficiente para cores de texto secundárias e elementos sobrepostos de maneira errada em configurações de zoom e tamanho de texto mais altos foram observados e prontamente corrigidos.

Mas não há tamanho que sirva para todos e, tal como o próprio design, a acessibilidade nunca está concluída; não afirmamos ter acessibilidade perfeita, e ninguém pode. Unicorn Utterances continuará a ser atualizado, focando sempre nessa área.

Este foi o projeto mais ambicioso em que embarquei. Projetar para tantas situações e situações extremas foi divertido e desafiador. Acabamos com mais de 150 componentes, 215 estilos e dezenas de telas.

Eu não poderia estar mais orgulhoso do esforço da equipe envolvido nesta reformulação e os usuários parecem ter sentido o mesmo – o feedback foi unanimemente positivo; as métricas do site dobraram e, em alguns casos, triplicaram, como resultado de seu novo visual.

Quer saber mais de Unicorn Utterances? Clique no botão abaixo!