Criado pela Google com grande participação e influência do designer de interface chileno Matias Duarte, o Material Design surge para unificar os aspectos visuais de seus componentes para diferentes plataformas,  convergindo os diversos aplicativos da Google para um mesmo padrão de design.

Criado pela Google com grande participação e influência do designer de interface chileno Matias Duarte, o Material Design surge para unificar os aspectos visuais de seus componentes para diferentes plataformas,  convergindo os diversos aplicativos da Google para um mesmo padrão de design. A mudança integra o visual do Android Lollipop com os dos aplicativos do navegador Chrome, que ganharam novos ícones e seguem os princípios que você vai conhecer a seguir. Além da melhoria na experiência e usabilidade do usuário, o trabalho também ficou mais fácil para o desenvolvedor, que agora pode desfrutar de tais componentes para o desenvolvimento de seus aplicativos. O Material Design apresenta-se como uma tendência na construção de aplicativos, por isso é importante que o desenvolvedor entenda e domine os princípios da tecnologia.
Para ser desenvolvido, o Material Design se baseou em alguns princípios norteadores que são muito bem explorados, como o uso de sombras e profundidade, animações e transições responsivas que possibilitam ao usuário uma agradável sensação de leveza e racionalidade no funcionamento de seus componentes. Além do aumento do uso de layouts baseados em grades (grid-based layout), a  luz, a superfície e o movimento são essenciais para mostrar como os objetos circulam, interagem, e existem no espaço e em relação um ao outro. O princípio de iluminação realista mostra costuras, divide espaços e indica partes móveis na interface do aplicativo.
<a href="https://dtidigital.com.br/wp-content/uploads/2015/07/material-2.png"><img fetchpriority="high" decoding="async" src="https://dtidigital.com.br/wp-content/uploads/2015/07/material-1.png" alt="material 1" width="204" height="362" /></a>                 <a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/07/material-2.png"><img decoding="async" class=" alignnone wp-image-71" src="https://dtidigital.com.br/wp-content/uploads/2015/07/material-2.png" alt="material 2" width="315" height="316" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-2.png 268w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-2-150x150.png 150w" sizes="(max-width: 315px) 100vw, 315px" /></a>
&nbsp;
&nbsp;
<div id="toc_container" class="toc_white no_bullets">Sum&aacute;rio<ul class="toc_list"><li><a href="#Metafora-Material">1 Metáfora Material</a></li><li><a href="#O-mundo-em-3D-para-o-desenvolvedor">2 O mundo em 3D para o desenvolvedor.</a></li><li><a href="#Luz-e-sombra-no-material-design">3 Luz e sombra no material design:</a></li><li><a href="#Usando-material-design-em-Android">4 Usando material design em Android:</a></li><li><a href="#O-Resultado">5 O Resultado:</a></li><li><a href="#i">6     </a><ul><li><ul><li><a href="#Por-Jessica-Saliba-e-Hudson-de-Almeida-Ferreira">6.0.1 Por: Jéssica Saliba e Hudson de Almeida Ferreira</a></li></ul></li></ul></li></ul></div>
<h3>Metáfora Material</h3>
A metáfora material é uma teoria unificadora de um “espaço racionalizado” e um “sistema em movimento”, desenvolvida pela própria Google.
As superfície e bordas do material fornecem pistas visuais que são fundamentadas na realidade. Em que sentido? Dois corpos não ocupam o mesmo lugar no espaço, da mesma forma que um material não ocupa o espaço de outro.
O Material Design é arrojado, sempre intencional, possui cores marcantes, vivas e vibrantes. Sendo assim, seus elementos fundamentais são tipografia, grades, escalas, aproveitamento e valorização de espaços, cor e uso de imagens que orientam o olhar. Por isso, juntos, esses elementos fazem mais que agradar aos olhos. Uma vez que eles criam hierarquia, significado, clareza e foco.
&nbsp;
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/07/material-3.png"><img decoding="async" class="alignnone size-full wp-image-72" src="https://dtidigital.com.br/wp-content/uploads/2015/07/material-3.png" alt="material 3" width="355" height="168" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-3.png 355w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-3-300x142.png 300w" sizes="(max-width: 355px) 100vw, 355px" /></a>   <a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/07/material-4.png"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-73" src="https://dtidigital.com.br/wp-content/uploads/2015/07/material-4.png" alt="material 4" width="355" height="168" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-4.png 355w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-4-300x142.png 300w" sizes="(max-width: 355px) 100vw, 355px" /></a>
&nbsp;
A ideia do movimento no Material Design respeita e reforça o usuário como seu principal agente. Então, são os comandos do usuário que vão determinar o movimento do layout, já que assim vai responder ao comando da ponta dos dedos.
&nbsp;
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/07/material-6.png"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-75" src="https://dtidigital.com.br/wp-content/uploads/2015/07/material-6.png" alt="material 6" width="268" height="268" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-6.png 268w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-6-150x150.png 150w" sizes="(max-width: 268px) 100vw, 268px" /></a>                           <a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/07/material-5.png"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-74" src="https://dtidigital.com.br/wp-content/uploads/2015/07/material-5.png" alt="material 5" width="268" height="266" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-5.png 268w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-5-150x150.png 150w" sizes="(max-width: 268px) 100vw, 268px" /></a>
&nbsp;
<h3>O mundo em 3D para o desenvolvedor.</h3>
Dessa vez a Google inovou ao utilizar em dispositivos mobile o eixo Z. Desse modo, o desenvolvedor pode controlar a disposição dos seus componentes em três dimensões. Com ele é possível trazer elementos para frente quando desejar colocá-los em evidência, atendo-se sempre ao fato de que os princípios são baseados na realidade, conforme exemplos nas figuras:
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/07/material-10.png"><img loading="lazy" decoding="async" class=" size-full wp-image-79 aligncenter" src="https://dtidigital.com.br/wp-content/uploads/2015/07/material-10.png" alt="material 10" width="367" height="403" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-10.png 367w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-10-273x300.png 273w" sizes="(max-width: 367px) 100vw, 367px" /></a>                <a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/07/material-11.png"><img loading="lazy" decoding="async" class=" size-full wp-image-80 aligncenter" src="https://dtidigital.com.br/wp-content/uploads/2015/07/material-11.png" alt="material 11" width="367" height="403" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-11.png 367w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-11-273x300.png 273w" sizes="(max-width: 367px) 100vw, 367px" /></a>
Cada folha do material ocupa uma única posição no eixo Z e possui 1 dp (Density-independent pixel) de espessura. As dimensões de x e y podem variar, mas a espessura é sempre uniforme.
&nbsp;
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/07/material-13.png"><img loading="lazy" decoding="async" class=" size-full wp-image-82 aligncenter" src="https://dtidigital.com.br/wp-content/uploads/2015/07/material-13.png" alt="material 13" width="367" height="403" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-13.png 367w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-13-273x300.png 273w" sizes="(max-width: 367px) 100vw, 367px" /></a>                     <a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/07/material-12.png"><img loading="lazy" decoding="async" class=" size-full wp-image-81 aligncenter" src="https://dtidigital.com.br/wp-content/uploads/2015/07/material-12.png" alt="material 12" width="367" height="403" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-12.png 367w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-12-273x300.png 273w" sizes="(max-width: 367px) 100vw, 367px" /></a>
&nbsp;
<h3>Luz e sombra no material design:</h3>
Luzes virtuais iluminam o espaço no Material Design. A luz principal cria sombras direcionais enquanto a luz ambiente cria sombras de todos os ângulos.
No desenvolvimento Android as sombras ocorrem quando a fonte de luz é bloqueada pelas folhas no eixo Z. No caso de aplicação web,  as luzes são retratadas apenas ao manipular o eixo y.
&nbsp;
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/07/material-14.png"><img loading="lazy" decoding="async" class="alignnone wp-image-83" src="https://dtidigital.com.br/wp-content/uploads/2015/07/material-14.png" alt="material 14" width="308" height="307" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-14.png 246w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-14-150x150.png 150w" sizes="(max-width: 308px) 100vw, 308px" /></a>        <a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/07/material-141.png"><img loading="lazy" decoding="async" class="alignnone wp-image-84" src="https://dtidigital.com.br/wp-content/uploads/2015/07/material-141.png" alt="material 14" width="306" height="305" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-141.png 246w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-141-150x150.png 150w" sizes="(max-width: 306px) 100vw, 306px" /></a>
&nbsp;
Seguindo os princípios gerais, o material pode mudar de formato, ser redimensionado, se partir ou se unir e também pode se mover, mas nunca pode ser dobrado ou curvado.
Um exemplo de um componente importante no Material Design são os Cards (ou cartões). Eles funcionam como se fossem pedaços de papéis que servem para o suporte de informações mais detalhadas. Por exemplo: um cartão pode conter uma foto, um texto, e um link sobre algum assunto. Por isso, os cartões possuem largura constante e altura variável.
&nbsp;
&nbsp;
&nbsp;
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/07/material-16.png"><img loading="lazy" decoding="async" class=" size-full wp-image-85 aligncenter" src="https://dtidigital.com.br/wp-content/uploads/2015/07/material-16.png" alt="material 16" width="680" height="380" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-16.png 680w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-16-300x168.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-16-450x250.png 450w" sizes="(max-width: 680px) 100vw, 680px" /></a>
&nbsp;
&nbsp;
Entretanto, os Dialogs &#8211; ou caixas de diálogo &#8211; informam ao usuário sobre alguma informação crítica na qual é necessário a tomada de uma decisão. Sendo assim, a caixa de diálogo interrompe a tarefa do usuário até que se tome uma decisão.
&nbsp;
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/07/material-17.png"><img loading="lazy" decoding="async" class=" aligncenter wp-image-86 size-full" src="https://dtidigital.com.br/wp-content/uploads/2015/07/material-17.png" alt="material 17" width="278" height="498" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-17.png 278w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-17-167x300.png 167w" sizes="(max-width: 278px) 100vw, 278px" /></a>
&nbsp;
Uma observação interessante é que o conteúdo dessas caixas de diálogo deve apresentar sempre as opções mais intuitivas possíveis.
<h3>Usando material design em Android:</h3>
Para utilizar o material design para Android, o desenvolvedor deve seguir o manual de design e especificação para utilizar os novos componentes. Saiba que esses componentes estão disponíveis para dispositivos com a versão do Android a partir de 5.0 (API level 21).
Para dispositivos com Android anterior ao 5.0, é necessário que o desenvolvedor utilize o AppCompat que simula a utilização do Material Design com alguns componentes como cardview, recyclerview, entre outros. Certamente existem várias bibliotecas que simulam o Floating Action Button, Flat Button e Raised Button para dispositivos Android anterior ao 5.0
<h3>O Resultado:</h3>
<h3><a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/07/material-18.png"><img loading="lazy" decoding="async" class=" wp-image-87 alignnone" src="https://dtidigital.com.br/wp-content/uploads/2015/07/material-18.png" alt="material 18" width="296" height="527" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-18.png 296w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-18-169x300.png 169w" sizes="(max-width: 296px) 100vw, 296px" /></a>   <a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/07/material-19.png"><img loading="lazy" decoding="async" class=" size-full wp-image-88 alignright" src="https://dtidigital.com.br/wp-content/uploads/2015/07/material-19.png" alt="material 19" width="297" height="527" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-19.png 297w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-19-169x300.png 169w" sizes="(max-width: 297px) 100vw, 297px" /></a> <a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/07/material-20.png"><img loading="lazy" decoding="async" class=" size-full wp-image-89 aligncenter" src="https://dtidigital.com.br/wp-content/uploads/2015/07/material-20.png" alt="material 20" width="297" height="527" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-20.png 297w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-20-169x300.png 169w" sizes="(max-width: 297px) 100vw, 297px" /></a></h3>
&nbsp;
<a class="lightbox" href="https://dtidigital.com.br/wp-content/uploads/2015/07/material-21.png"><img loading="lazy" decoding="async" class=" size-full wp-image-90 aligncenter" src="https://dtidigital.com.br/wp-content/uploads/2015/07/material-21.png" alt="material 21" width="824" height="475" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-21.png 824w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-21-300x173.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2015/07/material-21-768x443.png 768w" sizes="(max-width: 824px) 100vw, 824px" /></a>
&nbsp;
Visual limpo, organizado, alegre, vibrante e completamente repaginado. Dessa forma, é possível observar nas imagens, o resultado final é como se a tela se configurasse com ‘cartões’, colunas e informações dispostas com a mesma espessura e diferentes profundidades, tornando o layout agradável ao olhar.
O Material Design foi usado no desenvolvimento do aplicativo Tangerine, criado pela equipe da DTI, sobre o qual você descobre em breve aqui no nosso blog.
Gostou do conteúdo?  O guia completo com os princípios e os componentes podem ser visualizado em: https://www.google.com/design/spec/material-design/introduction.html
Compartilhe com a gente o que você acha!
&nbsp;
&nbsp;
<h5>Por: Jéssica Saliba e Hudson de Almeida Ferreira</h5>

Chegou o momento de impulsionar os resultados da sua empresa! Para entrar em contato com a gente, clique no botão abaixo e preencha o formulário.

Material Design: conheça a cara nova da Google que chegou pra ficar nos seus aplicativos

One-stop shop em tecnologia

Confira outros artigos