em #Design
Lean Redesign UI – Episódio 04: Atmosfera visual
Avançamos no percurso para a criação do novo site da Taller.
Temos a arquitetura da informação em mãos e um caminho em mente. Esse foi o tema do episódio anterior.
**
Estamos em órbita. Nos aproximando.
Mas apenas isso não basta.
Queremos ver,
tocar,
sentir o que está por vir.
Preparem-se: vamos pousar!
Um novo olhar para um velho problema
Existe uma sensação desconfortável que aflige muitos designers mundo afora: o bloqueio criativo. O bloqueio se manifesta em momentos em que estamos sob pressão, ou diante de muitas expectativas.
“Como superar essa inércia diante de uma tela em branco?”
Fomos investigar.
Cercado de mistérios, o processo criativo é encarado como um momento de inspiração repentina.
Essa aura de genialidade atribuída aos designers, na maioria das vezes, nos isola. E isolamento não combina com ser ágil.
Queremos fazer junto.
Integrar.
Misturar.
Dividir a responsabilidade de criação.
Todos podemos ser criativos. Mas para isso precisamos de um método.
Muito já foi escrito sobre criação de produtos digitais e, mesmo assim, ainda sentimos falta de uma proposta alinhada com a filosofia ágil.
A pergunta-chave evoluiu:
“Como podemos traçar um caminho enxuto e seguro entre o esboço abstrato e o protótipo vivo?”
Busca pela metáfora
Ao pesquisar por referências e inspirações que pudessem facilitar o entendimento da nossa metodologia para o redesign, recorremos às sutilezas do universo. Ao chegarmos ao conceito da atmosfera tudo fez sentido.
Tratamos o progresso do projeto como uma missão, e temos o nosso novo site como ponto de chegada. A atmosfera representa essa fase de transição do conceito para a prática. Do invisível para o palpável. Do desenho para o código.
“Para alguns isso pode parecer um pôr-do-sol. Mas é um novo amanhecer.”
— Chris Hadfield, astronauta.
Criando a atmosfera visual
Camada 1 – Referências filtradas
A dinâmica que fizemos no começo do projeto de redesign evidenciou a expectativa visual que seguiríamos.
Agora é a hora de consumir conteúdo inspiracional em busca dos detalhes que queremos.
Uma boa base de referências é o combustível mais poderoso para a criatividade. Se queremos produzir com excelência, devemos – antes – consumir conteúdo de excelência.
Montamos um grande mosaico com o que mais nos chamou a atenção.
Sugestão: Comece a separar as referências em recortes e agrupe-as de acordo com o contexto onde elas serão usadas. Menu, rodapés, formulários, botões, tipografia, ícones…
Camada 2 – Colagem
Com as referências separadas começamos a combiná-las, como se brincássemos de LEGO™.
Por ter esboçado a estrutura do site anteriormente, ficou fácil montar um esqueleto usando apenas os elementos das referências.
Quando a composição da página fez um “click” foi um sinal: achamos a veia visual do projeto!
Não hesitamos em puxar, encolher, recortar, mudar de cor, inverter. Alteramos o que já existia para que brotasse a singularidade que tanto procurávamos.
Sugestão: Numere cada bloco de conteúdo e relacione-o com a Matriz de Conteúdo, assim já é possível ter noção do espaço que cada texto exige no layout.
Camada 3 – Guia de estilo atômico
A essa altura, nosso arquivo de colagens estava uma salada de fontes, cores e espaçamentos. Foi preciso selecionar o que seguiria adiante.
Consistência foi a palavra de ordem.
Quando trabalhava no Google, Marissa Mayer, atual CEO do Yahoo, estimulava a consistência dos aplicativos pedindo para que os designers contassem um ponto para cada fonte e cores diferentes que apareciam em uma página. Se a contagem passasse de cinco, era hora de repensar tudo.
Um guia de estilo, com consistência, é o que procurávamos nessa etapa. Ele é a pedra fundamental de tudo que virá pela frente, pois mostrará os elementos que se repetirão, e como se comportarão quando o tamanho de tela aumentar ou diminuir.
De todos os elementos de um site, três são essenciais. É por onde recomendamos começar:
Tipografia: Momento de escolha das famílias tipográficas que usaremos no site, o tamanho que devem ter, e quando serão utilizadas.
Cores: A paleta cromática define quais serão as cores de fundo, a de destaque, e as de interação.
Botões: Uma boa variação de botões contempla não apenas seu comportamento em fundos claros e escuros, mas também indica hierarquia. Nem todos os botões precisam do mesmo destaque.
São esses os elementos básicos da teoria do design atômico.
A ideia é que voltemos a esse guia de estilo todas as vezes que novos elementos forem criados.
Sugestão: Para definir os tamanhos dos textos, utilize o padrão de tamanho de camisas (PP, P, M, G, GG) ao invés das marcações de cabeçalho H1 ~ H6. Isso evita a confusão semântica no futuro.
Camada 4 – Composições
Se as pessoas do seu time conseguirem visualizar as páginas do site a partir da abstração do guia de estilo, do wireframe, e da matriz de conteúdo, isso é ótimo – e raro.
Para facilitar a conversa entre designers e desenvolvedores, criamos pequenas composições para ajudar na compreensão de como os elementos do guia de estilo atômico podem se combinar.
Ótima hora para uma rodada de feedbacks.
Sugestão: Quando sentir que as composições comunicam a identidade visual do projeto, sinal verde para avançar para a etapa de criação do protótipo vivo no processo de redesign.
**
Uma metodologia aberta e complementar
Essa abordagem por camadas foi criada para ser expandida e adaptada. Sinta-se livre para se apropriar dela e adaptá-la às suas necessidades.
A atmosfera visual é complementar ao design atômico, proposto pelo Brad Frost. Também nos inspiramos no inventário visual, sugerido pelo Dan Mall. Outra referência essencial nesse processo foram os style tiles, da Samantha Warren.
Enquanto isso…
Desenvolvedores começavam, simultaneamente, a dar vida ao site. Eles não precisaram esperar os designers finalizarem a atmosfera visual para codar.
Como isso foi possível?
Esse é o tema do próximo episódio.
Até!
