Uma receita para projetar animações – sem sacrificar o desempenho

Para um novo design da página inicial do Google Chrome, aceitei o desafio de produzir animações de alta qualidade sem contribuir para a latência

Neil Shankar em Google Design Segue 4 de junho · 6 min ler

No ano passado, o Google Chrome comemorou um grande marco e fez 10. Eu trabalho em design de interface do usuário, design visual e estratégia de conteúdo para melhorar continuamente a presença na Web do Google Chrome e, em setembro de 2018, minha equipe – a divisão de crescimento do Chrome da Creative Engineering— lançou uma reformulação abrangente da página inicial do Chrome para celebrar o aniversário.

Para o redesenho, concentramos muito do nosso esforço na educação de produtos. O Chrome é um navegador rápido e poderoso, e as nuances de como ele funciona são inerentemente técnicas. Mas você não precisa de um diploma de informática para apreciar os benefícios do Chrome. Por isso, trabalhei com Laura Polkus, Melissa Castaño e Lydia Weber para criar uma nova linguagem visual para o Chrome, que visa engajar todos os usuários, mesmo aqueles que podem não ter conhecimentos técnicos.

Nossa estrutura foi fundamentada em geometria básica e na principal paleta de marcas do Google. Nos baseamos no trabalho da equipe de produtos do Chrome, na equipe de hardware do Google e nas diretrizes internas de ilustração para dar ao Google Chrome uma identidade única que incluía um conjunto de animações para as páginas de treinamento do produto. Cada animação é destinada a contar uma história para comunicar de forma sucinta um benefício do Chrome.

Dito isso, as animações e o desempenho do site nem sempre são agradáveis. Temos o compromisso de garantir que todos possam fazer o download do Chrome de maneira rápida e fácil, mesmo em áreas com baixa largura de banda. (Nossas conquistas no desempenho foram recentemente apresentadas no Google I / O '19 .) Mas, mesmo após a compactação, os GIFs e MOVs tendem a ser muito grandes, e várias solicitações de rede para arquivos grandes prejudicariam o desempenho do site. Eu sinto fortemente que um bom design não deve vir à custa de um bom desempenho, então assumi o desafio de produzir animações de alta qualidade sem contribuir para a latência. Aqui está meu fluxo de trabalho: