Material Design

Material Design (codinomeado Quantum Paper)^[1] é uma linguagem de design livre desenvolvida pela Google com o objetivo de unificar e padronizar as interfaces gráficas dos sistemas da empresa (conjunto de diretrizes ou guidelines),^[2] anunciado em 2014 como uma melhoria no "card" do assistente pessoal Google Now do sistema Android, que usa layouts mais liberal baseados em grids, minimalismo e clean, com animações e transições responsivas, preenchimentos, e efeitos de profundidade como luzes e sombras. O designer Matías Duarte explicou que "diferente do papel real, o nosso material digital pode se expandir e se modificar de forma inteligente. O Material tem bordas e superfícies físicas. Costuras e sombras dão um sentido com o que você pode tocar." Conforme a Google a linguagem de design é baseada em papel e tinta e,^[3][4] pode ser usado a partir da versão 2.1 do Android através da biblioteca v7 appcompat library (presente nos dispositivos Android criados depois de 2009).

Alguns componentes típicos da interface de usuário do Material Design

O Material Design será progressivamente implementado ao portfólio de produtos de web e móveis da Google, fornecendo uma experiência consistente em todas as plataformas e aplicações. A Google também lançou uma interface de programação de aplicações (APIs) para desenvolvedores terceiros incorporarem a linguagem de design em seus aplicativos.^[5][6][7]

Implementação

Exemplo de material design

A Google anunciou o Material Design em 25 de junho de 2014 na conferência Google I/O. Como em 2015^[update], a maioria dos aplicativos móveis da Google para Android já aplicaram a nova linguagem de design, incluindo o Gmail, YouTube, Google Drive, Google Documentos, Planilhas e Apresentações, Google Maps, Inbox, todas os aplicativos com a marca Google Play, e, em menor medida, no navegador Chrome e no Google Keep. A interface web para desktop do Google Drive, Documentos, Planilhas, Apresentações e o Inbox também o incorporaram.

A implementação canônica do Material Design para a interface de usuário de aplicativos web é chamada de Polymer.^[8] Ela consiste da biblioteca Polymer, um shim que fornece uma API com o Componentes Web para navegadores que não implementaram o padrão nativamente, e um catálogo de elementos, entre eles a "coleção de elementos de papel", que apresenta elementos visuais do Material Design.^[9]

Atualizações

Material Design 2 (2018)

Material Design 3 (2021)

Material Design 2

Após a reformulação de 2018, o Google iniciou a reestruturação da maioria de seus aplicativos com base em um conjunto atualizado de princípios e diretrizes denominado Material Design 2, que estreou no Android Pie.^[10] Essa versão trouxe maior foco na personalização dos componentes básicos do Material Design, permitindo que se adaptassem à identidade visual dos produtos em que eram aplicados.^[11] As diretrizes revisadas passaram a enfatizar fortemente o uso de espaços em branco, cantos arredondados, ícones coloridos e barras de navegação inferiores. O Google também passou a utilizar uma versão otimizada em tamanho da fonte proprietária Product Sans, chamada Google Sans.^[12]

Material Design 3 (Material You)

Durante o evento Google I/O em maio de 2021, foi apresentado um novo conceito no Android 12 chamado Material You (também conhecido como Material Design 3^[13]), com foco em animações mais dinâmicas, botões maiores e a capacidade de gerar temas personalizados de interface a partir do papel de parede do usuário.^[14] O Material You foi gradualmente implementado em diversos aplicativos do Google em versões anteriores do Android nos meses seguintes, tornando-se um dos principais destaques da linha de smartphones Pixel 6 e Pixel 6 Pro.^[15][16][17]

Material 3 Expressive

No evento The Android Show: I/O Edition, realizado em maio de 2025, o Google anunciou o Material 3 Expressive para o Android 16 e o Wear OS 6. Essa nova versão do Material Design mantém semelhanças com sua antecessora, mas apresenta animações mais intensas, além de uma estética mais colorida e moderna.^[18]

Características

Algumas das diretrizes são:

Formas: a interface é baseada principalmente em cartões, com um visual sólido, limpo e, geométrico. Por exemplo, são utilizados retângulos com grandes espaços em branco e, bordas suaves para aumentar a clareza do conteúdo.^[2]

Cores: possui paleta de cores própria bastante agradável e chamativa.^[2]

Ícones: Os ícones também são feitos a partir de formas geométricas e devem ser simples, para parecer tátil, ou seja, partindo do propósito acima de como se o usuário realmente estivesse no mundo real. De antemão precisamos saber que existem dois tipos: de produto e de sistema. O de produto é o ícone do aplicativo e o segundo se refere aos ícones internos do app, para identificação de funcionalidade.^[2]

Tipografia: O Material tem duas fontes padrão, chamadas Roboto e Noto.^[2]

Imagens: A utilização de imagens deve ser relevante ao que o usuário está consumindo, como por exemplo, para apresentar conteúdos e avatares, por exemplo.^[2]

Animação: o movimento das animações simula o movimento de objetos no mundo real, de forma simples e rápida.^[2]

Integração: pode utilizar API de terceiros que permitem as animações de forma mais facilitada. Algumas já vem presente de forma nativa no Android.^[2]

Ver também

• Diretrizes de interface humana
• Histórico de versões do Android
• Metro UI

Referências

1. "Exclusive: Quantum Paper And Google's Upcoming Effort To Make Consistent UI Simple".
2. guedes, marylene. «O que é Material Design?». TreinaWeb
3. «Google's new 'Material Design' UI coming to Android, Chrome OS and the web». Engadget (em inglês). Consultado em 5 de janeiro de 2023
4. Chester, Brandon. «Google Reveals Details About Android L at Google IO». Anandtech. Consultado em 5 de janeiro de 2023
5. Chris Smith (30 de julho de 2014). «Google's Material Design is about to change the way we look at the worldwide web». BGR
6. "We just played with Android's L Developer Preview".
7. "Google's next big Android redesign is coming in the fall".
8. "Polymer paper elements" Arquivado em 14 de fevereiro de 2015, no Wayback Machine..
9. "Material design with Polymer" Arquivado em 20 de agosto de 2014, no Wayback Machine..
10. Hall, Stephen (26 de abril de 2018). «What exactly is this so-called 'Material Design 2,' and what will it look like?». 9to5Google (em inglês). Consultado em 6 de setembro de 2020
11. «Material Design». Material Design (em inglês). Consultado em 6 de setembro de 2020
12. Hall, Stephen (9 de maio de 2018). «Now we know: Google Sans is actually a size-optimized version of Product Sans». 9to5Google (em inglês). Consultado em 6 de setembro de 2020
13. Material Design [@materialdesign] (27 de outubro de 2021). «The latest in Material Design is NOW available. With Material Design 3, our next generation of the system, we're introducing Material You — a new set of features that help make your apps more personalized. Give it a try → goo.gle/m3-material-io #AndroidDevSummit» (Tweet). Consultado em 27 de outubro de 2021 – via Twitter
14. Bohn, Dieter (18 de maio de 2021). «Android 12 preview: first look at Google's radical new design». The Verge (em inglês). Consultado em 19 de maio de 2021
15. Warren, Tom (10 de setembro de 2021). «Google's Material You design is coming to Gmail, Calendar, and Docs on Android». The Verge. Consultado em 19 de setembro de 2021
16. Li, Abner (15 de setembro de 2021). «Google Photos rolling out Material You redesign, but without Dynamic Color». 9to5Google. Consultado em 19 de setembro de 2021
17. «Google Contacts is already getting its Material You UI makeover». Android Police. 29 de julho de 2021. Consultado em 19 de setembro de 2021
18. «Android and Wear OS are getting a big refresh». Google (em inglês). 13 de maio de 2025. Consultado em 13 de maio de 2025

Outros projetos Wikimedia também contêm material sobre este tema:
	Categoria no Commons

• Commons