O Android veio evoluindo por vários anos, e o Material Design não é como o Metro ou o Modern UI do Windows Phone nem como o iOS 7, que foram totalmente repaginados. Portanto, para entender o Material Design, é importante entender a história do Android, particularmente na visão do design.

Outubro, 2008 –  T-Mobile G1 é lançado

Um ano após o lançamento do iPhone, em um movimento ousado, o Google, como todos já esperavam há muito tempo, lançou seu SO para telefones em um HTC com tela de 3.2 polegadas.

Produzido pela HTC, com uma tela de 3.2 polegadas, o T-mobile G1 foi o primeiro celular a rodar Android, em 2008

Já na primeira versão, podemos contar com notificações e Widgets na Home Screen, diminuindo assim o caminho do usuário até a função desejada e Atualizações OTA, permitindo que pudéssemos instalar e manter atualizado o SO sem precisar de cabos para sincronizar o que foi baixado com o aparelho.

Setembro, 2009 – a era do pixel independente da densidade

Consistência nos layouts com independência da rede de pixels

O Android 1.6, ou Donut para os íntimos, foi pioneiro em conseguir que seus layouts ficassem consistentes independentemente do tamanho do aparelho, problema esse que não acontecia com o iOS, já que só tínhamos que dispor de um tipo de dispositivo.

Com essa barreira quebrada, podíamos ter o SO em qualquer tipo de celular com solidez. Aqui começamos a expansão rápida do Android nos mais variados preços do mercado. Além disso, foi incorporada a barra de busca rápida na Home Screen, que evitava a necessidade de abrir o navegador para encontrar algo na Internet.

Outubro, 2009 – os Droids invadem

Telas maiores, interações diferenciadas. Bem-vindo à era Android

Na versão 2.0 (Eclair) e na seguinte 2.2 (Froyo), podemos já ver incorporados o Text to Speech, Wallpapers animados, acesso rápido para contatos, uma nova tela de bloqueio e tudo isso disponível em vários aparelhos (inclusive com telas maiores).

Dezembro, 2010 – o toque do Matías Duarte começa a aparecer

Sobriedade e conforto na navegação

Você é designer de interação e não conhece o Matías Duarte? Ele é um designer chileno com um histórico profissional que passa por várias empresas com viés mobile (entre elas, a pioneira Palm) e que, em 2010, foi contratado pelo Google para assumir a Vice-Presidência de Design da empresa. Junto com ele, foi herdado um conhecimento de mais de 10 anos em usabilidade para os novos modelos do Android.

No Gingerbread, sutilmente, a interface foi escurecida para ajudar no gerenciamento de energia dos aparelhos. As barras acinzentadas deram lugar a um classudo preto, tanto nos menus quanto na área de notificação. Os espaçamentos da grid foram modificados para dar mais respiro no teclado e em toda a interação do SO. E tivemos também um grande update na parte de renderizações de imagens em 3D, além de interações com os novos sensores dos aparelhos modernos.

Fevereiro, 2011 – Honeycomb e o novo visual do Android

Layout otimizado para telas grandes, melhor agrupamento de informações e widgets

Foram apresentadas as novas barras de ações em telas maiores, aproveitando melhor toda a área disponível. Mais otimizações gráficas para manter o mesmo gasto de energia em telas de AMOLED, redesenho de todos os ícones dos produtos Google já dando um vislumbre do visual esqueumórfico que eles, mais tarde, adotariam com toda a força. Mais dinamismo na configuração dos widgets também é a marca dessa versão. Tecnicamente falando, tivemos incorporado o Fragments, e a apresentação formal do primeiro tema batizado para Android, o Holo.

Outubro, 2011 – #YoloHOLO

Otimizando fontes e leitura, condensando ícones e interações

Com a nova atualização, o HOLO UI passa de opcional a obrigatório, inclusive atrelado à exibição do Google Play. Foi também implementada a nova fonte do sistema que veio substituir a família Droid, a Roboto Font.

Acontece o fenômeno dos aparelhos sem o botão de ação, mas isso não é problema nenhum para o Ice Cream Sandwich, que emula a barra de ação completa logo abaixo na tela caso os botões físicos não existam no seu aparelho.

Julho, 2012 – a Era Contextual

Com tela mais clean, eficácia e suavidade em primeiro lugar

Precedido por Siri, em 2011, temos introduzido em nossa experiência mobile, como usuários, o conceito de “Assistente Pessoal” ou, basicamente, um app que entende suas solicitações, entende os seus dados e retorna funções que eventualmente você poderá fazer com tudo isso sem que precisemos interagir necessariamente com o aparelho. A hora e a vez do Google aconteceu no Google I/O de 2012, no qual, além de apresentar a nova versão do Android, o Jelly Bean, ele também nos deliciou com o Google Now. Paralelo a isso, tivemos modificações significativas no sistema que o deixaram mais suave e mais ágil, tivemos a melhoria do sistema de notificação que permite notificações “expansíveis”, com botões de ação, e outras mudanças internas como suporte para multiusuários nos tablets e widgets na tela de bloqueio.

Outubro, 2013 – perdendo as gordurinhas

Cada vez mais limpo e objetivo. O dispositivo ficava mais leve e mais otimizado

Com o KitKat chegando no mercado (nome de batismo da versão conhecida como Key Lime Pie, inicialmente) vimos a minimização do estilo HOLO, com cores menos “radioativas” e barras pretas abolidas. As barras de ação e bandeja ostentavam um gradiente suave e transparente. Essa foi a primeira ação tomada para começar a empregar o “Immersive Mode” que vemos em abundância no Material Design. Nessa versão também tivemos incorporado o modo Tela Cheia, em que as barras ficavam ocultas e as aplicações tomavam todo o espaço do ecrã. Mais uma vez foi mexido no aspecto visual das grids do sistema operacional. Ainda mais respiros e espaços.

Junho, 2014 – Android L Preview

O parto do maior projeto de Design de Interação para mobile dos últimos tempos

Aconteceu no Google I/O de 2014, quando eles mostraram, em um Keynote transmitido ao vivo para o mundo inteiro, o novo conceito visual do Lollipop. Eu, particularmente, tinha sido acometida por um misto de êxtase e apreensão quando assisti àquilo com aquelas cores berrantes e estranhamente harmonioso. Foi de chorar, literalmente.

Tínhamos progredido ao lado futurista e, de repente, voltamos ao papel, voltamos às sobreposições, aos sombreados. E tudo tinha um sentido lógico, já pré-estabelecido no nosso córtex, no nosso modo de enxergar a realidade. Foi muito fácil entender o Material Design, mas o Google tinha muito a dizer sobre ele. A equipe fez, tal qual uma junta médica, um keynote separado para explicar cada principio do projeto e sua evolução gradativa.

Um resumo do vídeo:

Material é uma metáfora

Metáforas são histórias muito pequenas, cheias de significados e elas comunicam melhor do que qualquer linguagem verbal. É uma forma de transferência de conhecimento que depende de experiências compartilhadas, e essa história de experiências é o que une todos os campos do design. É a mesma que cria semelhança com o usuário, que faz com que ele se identifique com uma funcionalidade, que ele consiga entender com mais facilidade a função dos seus elementos. É o estreitamento do design digital ao limiar do design industrial fazendo com que as tais metáforas funcionem não só para os usuários, mas também para o time de desenvolvimento.

Superfícies são intuitivas e naturais

A proximidade gráfica que o usuário tem com o comportamento do papel faz com que todas as ações que remetam a esse elemento já sejam naturalmente interpretadas como atos de comunicação. Criar esse tipo de correlação de interfaces faz com que, naturalmente, pulemos a etapa da familiarização e consigamos acessar mais rapidamente o caminho do entendimento.

Dimensionalidade proporciona interação

Superfícies são intuitivas e organizar a interface com base em superfícies faz com que, de novo, sejamos remetidos a conhecimentos pré-adquiridos de organização. E é importante preservar essa ordem, não no sentido de artifício, mas sim para pensarmos menos em que ação temos que tomar. Toda ação gera uma reação igualmente corriqueira e já esperada, diminuindo a frustração.

Conteúdo é ousado, gráfico e intencional

Apresentando o novo conceito de Roboto, com as adaptações necessárias para a nova UI, trazendo mais proximidade ao que o usuário já conhece e criando uma linha sólida de comunicação dentro da linguagem. A tipografia foi redesenhada, em vários pesos diferenciados, poder comunicar tanto em ambiente mobile como em ambiente desktop, para proporcionar diferentes hierarquias dependendo do seu uso agrupando os espaços em branco e os contrastes corretos, fazendo com que os usuários possam encontrar no seu conteúdo o que realmente importa. As mudanças dos espaçamentos das grids e respiros, bem como a nova paleta de cores pensada e escolhida para ser muito mais próxima dos usuários e, assim, conectá-lo com a marca direcionada na interface trabalhada. Foram incorporadas também algumas animações no UI para transformar o ambiente em algo mais intuitivo. Cores com alto contraste para dar destaque a ações relevantes.

Cores, superfícies e iconografia para enfatizar ações

Uma abordagem didática de como deixar seus ícones e imagens mais parecidos com a realidade faz com que o usuário se encontre melhor, visualmente falando, dentro da sua interface, introduzindo a grid universal para ícones de aplicativos que suporta formas geométricas primárias.

Usuários iniciam mudanças

As pequenas animações de UI que geram mudanças de estado na interface e mostram ao usuário o sentido da navegação. O feedback tátil tem o poder de mostrar ao usuário que ele foi ouvido, quando por exemplo é acionada uma tecla, e que ele foi atendido, quando a ação é executada.

Animações são coreografadas em um palco compartilhado

Entende-se como palco compartilhado o ambiente onde o Material Design vive, ou seu ecrã. É importante sempre lembrarmos que se trata de, basicamente, interações em papel. O Material se move e se expande para revelar seu conteúdo de forma fluida e, mesmo tendo elementos “surgindo” na interface, ainda se faz claro cada função que a mesma tem, qual sua origem e como se interage com ela.

Movimento para prover significado

A animação é crucial para reforçar a metáfora do mesmo jeito que a disposição das sombras faz com que se entenda mais fácil o nível dos planos da interface. O jeito que os elementos se movem dão pista de como eles funcionam e suas propriedades. É importante que cada ação se mostre contínua e crie uma timeline lógica na mente dos usuários e, mesmo sem ter manipulado uma vez sequer a aplicação, que ele entenda claramente o sentido daquilo só por observar a interação dela com o ambiente por meio da ação dele.

Um design adaptável

Material Design foi concebido para padronizar e transformar a experiência de navegar em vários dispositivos diferentes, seja tablet, desktop, celular e o Wear com as devidas interações para cada dispositivo.

Um processo de criação unificado

É importante também focar em produtividade, na tarefa do designer como agente transformador da expêriencia de navegar.

1. Design de interação com uma clara hierarquia e novas permissões mostrando onde o usuário deve focar sua atenção;
2. Design visual com expressões gráficas simplificadas facilitando a hierarquia dos elementos dependendo da sua disposição e tamanho;
3. Motion Design, que é um dos mais importantes aspectos, precisa refletir significado e refinamento, precisa ser consistente e intuitivo e precisa obedecer à realidade física e se comunicar melhor com o usuário.

Uma breve introdução ao design.google.com para falar sobre os specs dessa release e depois um fireside com perguntas e dúvidas.

Maio, 2015 – #HappyBirthdayMaterial

Matías veio ao Google I/O 2015 liberar a nova release do Material Design e falar de updates importantes como um novo FAB (Floating Action Button) incorporado no core, uma nova biblioteca de ícones (disponível em WebFont) e um guia de referencia métrica para trabalhar dom variados dispositivos, além de terem dado uma arrumada no website oficial do produto. Foram adicionadas novas especificações na documentação oficial para auxiliar na implementação do Material Design aos apps desenvolvidos para Android TV, Auto Android e Google Cardboard. E, não podia ficar de fora, foi lançada a primeira versão estável do Polymer.

Já tem seus palpites sobre o que nós, designers, temos que aguardar nesse Android N?