{"id":3364,"date":"2014-07-03T16:00:59","date_gmt":"2014-07-03T19:00:59","guid":{"rendered":"http:\/\/blogimpacta.com.br\/?p=3364"},"modified":"2014-07-03T16:00:59","modified_gmt":"2014-07-03T19:00:59","slug":"vem-ai-o-material-design-o-novo-conceito-de-design-de-toda-a-plataforma-google","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/vem-ai-o-material-design-o-novo-conceito-de-design-de-toda-a-plataforma-google\/","title":{"rendered":"Vem a\u00ed o Material Design, o novo conceito de design de toda a plataforma Google"},"content":{"rendered":"

Recentemente, em 25 de junho \u00faltimo, o Google apresentou ao mercado o que acredita ser uma nova aposta na uniformiza\u00e7\u00e3o de sua identidade \u2013 sobretudo visual \u2013, um redesign<\/em> de todos seus produtos e plataformas, a ser chamado Material Design<\/strong>.<\/p>\n

Ap\u00f3s o esqueumorfismo<\/a>\u00a0trabalhado pela Apple \u2013\u00a0buscando um design veross\u00edmil e realista \u2013\u00a0e o Metro, codinome da interface gr\u00e1fica do Windows 8 e Windows Mobile, que se baseia em tipografia e iconografia simples, clean<\/i> e moderna; agora o Google vem fazer frente a estes gigantes com o Material Design.<\/p>\n

Produtos como o Google Drive, Google Calendar, Gmail, etc. contar\u00e3o com novidades como o design totalmente voltado ao flat design<\/em>, por\u00e9m com sombras, volumes e movimentos com mais dinamismo, tornando a experi\u00eancia do usu\u00e1rio mais divertida, sem deixar de ser funcional. \u00a0O reconhecido portal americano The Next Web<\/a> publicou recentemente um artigo sobre os pontos relevantes no Material Design do Google. A seguir, sintetizamos um pouco o conceito de cada um. Confira!<\/p>\n

Material \u00e9 a met\u00e1fora<\/b><\/p>\n

Met\u00e1fora material, de acordo com o Google, \u00e9 a rela\u00e7\u00e3o entre o espa\u00e7o racional, t\u00e1til e f\u00edsico, e os sistemas de movimento.<\/p>\n

\"1-material-metaphorm\"<\/a><\/p>\n

\n

Superf\u00edcies intuitivas e naturais<\/b><\/p>\n

Superf\u00edcies e arestas s\u00e3o atributos t\u00e1teis presentes em nosso dia a dia, o que acaba por nos remeter a uma maior compreens\u00e3o da dimens\u00e3o das propor\u00e7\u00f5es e espa\u00e7os.<\/p>\n

\"2-tangibles-surfaces\"<\/a><\/p>\n

\n

Dimens\u00e3o permite intera\u00e7\u00e3o<\/b><\/p>\n

As no\u00e7\u00f5es de dimens\u00e3o, combinadas \u00e0 fundamentos de luz e sombra, superf\u00edcie e movimento ajudam na separa\u00e7\u00e3o de elementos e espa\u00e7os, indicando o que pode ser movimentado.<\/p>\n

\"3-dimension-affordances\"<\/a><\/p>\n

\n

Um design adaptado<\/b><\/p>\n

Um sistema de design unificado organiza as dimens\u00f5es e intera\u00e7\u00f5es entre elementos. Ainda que cada um expresse vis\u00f5es independentes, a identidade de cores, iconografia e hierarquia dos elementos \u00e9 constante e \u00fanica.<\/p>\n

\"4-one-design\"<\/a><\/p>\n

\n

Conte\u00fado ousado, gr\u00e1fico e intencional<\/b><\/p>\n

O design mais ousado e arrojado cria hierarquia de elementos, sentido e foco <\/b>no que for necess\u00e1rio <\/b>transmitir. A escolha de cores, as imagens de ponta a ponta e a tipografia em dimens\u00f5es maiores ajuda a prender a aten\u00e7\u00e3o e dar clareza aos elementos.<\/p>\n

\"5-bold-international\"<\/a><\/p>\n

\n

Cores, superf\u00edcie e iconografia para enfatizar a\u00e7\u00f5es<\/b><\/p>\n

A\u00e7\u00f5es do usu\u00e1rio s\u00e3o a base de todo a design experience, e as a\u00e7\u00f5es<\/i> prim\u00e1rias s\u00e3o capazes de <\/b>transform\u00e1-la por inteiro. Por isso, a \u00eanfase neste sentido faz com que fun\u00e7\u00f5es principais sejam imediatamente vis\u00edveis e conectadas a pontos de interesse do usu\u00e1rio.<\/p>\n

\"6-enphasize-actions\"<\/a><\/p>\n

\n

Altera\u00e7\u00f5es iniciadas pelo usu\u00e1rio<\/b><\/p>\n

Mudan\u00e7as de interface demandam a\u00e7\u00f5es dos usu\u00e1rios. As anima\u00e7\u00f5es derivadas do toque refor\u00e7am a import\u00e2ncia percebida pelo usu\u00e1rio como principal autor das transi\u00e7\u00f5es.<\/p>\n

\"7-user-initiate-change\"<\/a><\/p>\n

\n

Anima\u00e7\u00f5es coreografadas em espa\u00e7os compartilhados<\/b><\/p>\n

No redesign<\/em> do Google, a\u00e7\u00f5es e transi\u00e7\u00f5es nos objetos ocorrem no mesmo ambiente, sem romper a continuidade da experi\u00eancia, transformando-os e reorganizando-os entre si no mesmo espa\u00e7o.<\/p>\n

\"8-animation-choreography\"<\/a><\/p>\n

\n

Movimento gera sentido<\/b><\/p>\n

Elementos em movimento carregam sentido e s\u00e3o apropriados para prender a aten\u00e7\u00e3o do usu\u00e1rio e gerar continuidade. As transi\u00e7\u00f5es ficam eficientes e coerentes, e o feedback torna-se sutil e percept\u00edvel.<\/p>\n

\"9-meaningful-motion\"<\/a><\/p>\n

\n

O Material Design foi apresentado na \u00faltima atualiza\u00e7\u00e3o do aplicativo mobile do Google+, seguindo os mesmos conceitos do pr\u00f3ximo Android L, trazendo todas estas novas cores, tipografia, iconografia e hierarquia de interface diferenciadas.<\/p>\n

Segundo o Google, este redesign<\/em> radical de seus componentes representa “uma teoria de unifica\u00e7\u00e3o e racionaliza\u00e7\u00e3o dos espa\u00e7os e sistemas de movimento.”<\/a> A ideia parece ser otimizar interfaces em termos de usabilidade e atribuir a todos os produtos Google um \u201cvisual caracter\u00edstico\u201d, facilmente reconhec\u00edvel por parte do usu\u00e1rio.<\/p>\n

Seguindo o hist\u00f3rico de inova\u00e7\u00f5es do Google e sua crescente relev\u00e2ncia no surgimento de tend\u00eancias no \u00e2mbito de experi\u00eancia do usu\u00e1rio, \u00e9 de se esperar que o Material Design<\/strong> cumpra seus prop\u00f3sitos muito em breve. Aguardemos.<\/p>\n

Para mais informa\u00e7\u00f5es, confira o manual oficial do Google Material Design aqui<\/strong><\/span><\/a>.<\/p>\n

<\/i>Love<\/span>0<\/span><\/span><\/a> <\/i> <\/i>