Pensado para ser fluido, natural, intuitivo e de simples compreens\u00e3o<\/b>, o Material Design possui diversas particularidades e fundamentos, que ser\u00e3o explicados ao longo deste post.<\/p>\n\n\n\n
Ent\u00e3o sem mais delongas, vamos aos conceitos essenciais!<\/p>\n\n\n\n
Fun\u00e7\u00e3o<\/h2>\n\n\n\n
O Material Design tem como objetivo sintetizar os conceitos cl\u00e1ssicos de um bom design com a inova\u00e7\u00e3o e possibilidades trazidas com a tecnologia e a ci\u00eancia<\/b>.<\/p>\n\n\n\n
Ele proporciona uma experi\u00eancia uniforme atrav\u00e9s de diversas plataformas diferentes, sejam smartphones, computadores ou rel\u00f3gios inteligentes.<\/p>\n\n\n\n
Princ\u00edpios<\/h2>\n\n\n\nRealista<\/h3>\n\n\n\n
O Material Design se baseia no mundo real.<\/p>\n\n\n\n
Desde a ilumina\u00e7\u00e3o at\u00e9 como suas anima\u00e7\u00f5es se comportar\u00e3o, tudo \u00e9 pensado de modo que se assemelhe ao que aconteceria se ocorresse fora do ambiente digital.<\/p>\n\n\n\n
O Material foi idealizado sobre o estudo de pap\u00e9is com tinta, mas sendo mais tecnicamente avan\u00e7ado e aberto para a criatividade.<\/p>\n\n\n\n
Com isso, o design se torna intuitivo e de f\u00e1cil compreens\u00e3o, j\u00e1 que se baseia na realidade vivenciada fora do ambiente virtual e j\u00e1 familiar para os usu\u00e1rios.<\/p>\n\n\n\n
Ao mesmo tempo que, por ser mais flex\u00edvel que os materiais reais, cria novos entendimentos que n\u00e3o est\u00e3o presentes no mundo f\u00edsico.<\/p>\n\n\n\n
![\"Material](\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:787\/h:245\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/06\/Elementos-sobrepostos-de-forma-realista-787x245.png\")
<\/figure><\/div>\n\n\n\nChamativo<\/h2>\n\n\n\n
Os princ\u00edpios fundamentais do design gr\u00e1fico, como a tipografia<\/a>, grade, cor, espa\u00e7os e uso de imagens n\u00e3o servem apenas para deixar o conte\u00fado visualmente agrad\u00e1vel.<\/p>\n\n\n\n Eles criam tamb\u00e9m hierarquia visual, significado e foco, guiando o usu\u00e1rio durante a experi\u00eancia dele.<\/p>\n\n\n\n Por isso, o Material Design tamb\u00e9m se apoia nesses pilares, para ser o mais intuitivo, claro e imersivo durante o uso.<\/p>\n\n\n\n O movimento \u00e9 essencial no Material Design. Seu uso proporciona foco, transi\u00e7\u00e3o e feedback dos elementos, tudo dentro de um mesmo ambiente.<\/p>\n\n\n\n Isso \u00e9 pensado para que a continuidade n\u00e3o seja afetada, mesmo havendo movimenta\u00e7\u00e3o.<\/p>\n\n\n\n Todos os objetos do Material Design possuem eixos x<\/b>, y<\/b> e z<\/b>. Ou seja, eles s\u00e3o 3D e possuem comprimento, largura e altura referente ao plano de fundo.<\/p>\n\n\n\n Esse ambiente tridimensional tem duas fontes de luz: luz ambiente<\/b> e luz direcional<\/b>. Elas s\u00e3o combinadas formando a ilumina\u00e7\u00e3o presente nos elementos.<\/p>\n\n\n\n A ilumina\u00e7\u00e3o \u00e9 extremamente importante no Material Design. Como todos os objetos seguem o mesmo eixo para z<\/b> (altura), \u00e9 somente a sombra que eles projetam que ir\u00e1 diferenciar qual est\u00e1 na frente e qual est\u00e1 no fundo.<\/p>\n\n\n\n As sombras s\u00e3o fundamentais para a compreens\u00e3o dos componentes.<\/p>\n\n\n\n Por exemplo, se a sombra aumenta junto ao objeto, quer dizer que ele aumentou sua altura relativa ao fundo. Por outro lado, se a sombra se mant\u00e9m igual, quer dizer que o elemento aumentou de tamanho.<\/p>\n\n\n\n O eixo z<\/strong> sempre \u00e9 perpendicular<\/strong> \u00e0 tela do dispositivo e os elementos presentes nele sempre ser\u00e3o paralelos<\/strong> ao fundo (seja em computadores, tablets, smartphones etc).<\/p>\n\n\n\n Por fim, objetos diferentes nunca<\/b> est\u00e3o no mesmo n\u00edvel de altura.<\/p>\n\n\n\n Al\u00e9m disso, todos os elementos possuem sempre<\/b> 1dp de espessura, equivalente a 1 pixel<\/b> em uma tela com densidade de 160 pixels por polegada.<\/p>\n\n\n\n Todos os elementos do Material Design possuem uma eleva\u00e7\u00e3o de repouso<\/b> padr\u00e3o.<\/p>\n\n\n\n Isto \u00e9, sempre que n\u00e3o est\u00e3o em movimento no eixo z<\/b>, ficam em uma altura definida, que varia de acordo com o componente visual. A menor dist\u00e2ncia poss\u00edvel entre o fundo e os objetos \u00e9 de 2dp.<\/p>\n\n\n\n As eleva\u00e7\u00f5es de repouso tamb\u00e9m mudam de acordo com a plataforma utilizada. Por exemplo, televis\u00f5es e computadores possuem telas maiores e s\u00e3o utilizados de uma dist\u00e2ncia maior que os celulares e, por isso, apresentam profundidades maiores.<\/p>\n\n\n\n As diferentes alturas em rela\u00e7\u00e3o ao fundo criam hierarquia visual entre os componentes visuais, definindo quais t\u00eam mais import\u00e2ncia sobre os demais (e vice-versa).<\/p>\n\n\n\n Os objetos presentes no Material Design possuem algumas caracter\u00edsticas imut\u00e1veis:<\/p>\n\n\n\n Como introduzido nos princ\u00edpios do Material Design, o movimento \u00e9 um elemento crucial para sua funcionalidade.<\/p>\n\n\n\n Toda a cin\u00e9tica da metodologia \u00e9 pensada com base nos movimentos naturais reais<\/b>. Dessa forma, se torna bastante fluido e agrad\u00e1vel para o usu\u00e1rio.<\/p>\n\n\n\n Existem alguns preceitos do movimento usados no Material.<\/p>\n\n\n\n Por exemplo, os elementos possuem bastante energia<\/b>. Dessa forma, s\u00e3o bastante responsivos ao que o usu\u00e1rio pede, entregando com rapidez sem comprometer a fluidez.<\/p>\n\n\n\n Al\u00e9m disso, os componentes se movimentam de forma natural<\/b>, com acelera\u00e7\u00f5es e desacelera\u00e7\u00f5es que ocorrem de forma assim\u00e9trica, assim como ocorre naturalmente com a gravidade<\/b>.<\/p>\n\n\n\n A cin\u00e9tica do Material tamb\u00e9m \u00e9 consciente<\/b> do ambiente, mudando a posi\u00e7\u00e3o de elementos de acordo com a inten\u00e7\u00e3o do usu\u00e1rio e do movimento de um componente principal.<\/p>\n\n\n\n E, como toda movimenta\u00e7\u00e3o de objetos, essa tamb\u00e9m deve ser bastante clara<\/b> (sem obstru\u00e7\u00e3o ou anima\u00e7\u00f5es desnecess\u00e1rias que compliquem o movimento) e deve mudar o foco de um local para outro.<\/p>\n\n\n\n Assim como a eleva\u00e7\u00e3o dos objetos, a anima\u00e7\u00e3o tamb\u00e9m muda de plataforma em plataforma, j\u00e1 que dispositivos com telas maiores possuem uma \u00e1rea muito maior para um componente cobrir no mesmo intervalo de tempo do que em uma tela bem pequena.<\/p>\n\n\n\n O Material Design possui uma paleta de cores<\/a> pr\u00f3pria \u2014 que, como j\u00e1 dito no blog<\/a>, \u00e9 a paleta que seguimos para criar as imagens de posts e ebooks<\/a> \u2014 desenvolvida para ser harmoniosa, contrastante e chamativa.<\/p>\n\n\n\n As cores podem ser usadas para criar hierarquia visual<\/b>, definindo quais elementos chamam mais a aten\u00e7\u00e3o, e tamb\u00e9m definir o estado de algo.<\/p>\n\n\n\n Por exemplo, caso um elemento esteja errado<\/b><\/span> voc\u00ea pode represent\u00e1-lo com vermelho e, quando estiver certo<\/b><\/span>, com azul.<\/p>\n\n\n\n O uso das cores precisa garantir contraste suficiente entre os componentes visuais. No caso de texto, n\u00e3o use cores s\u00f3lidas, e sim diferentes<\/b> opacidades<\/b> de uma mesma cor.<\/p>\n\n\n\n O mesmo acontece para diferenciar destaques nos textos, seja cor clara em um fundo escuro ou uma cor escura em um fundo claro. Em ambos os casos, cores menos transparentes ganham mais foco<\/b>.<\/p>\n\n\n\n Os \u00edcones do Material Design s\u00e3o feitos a partir de formas geom\u00e9tricas, simples e que, no total, sintetizam a ideia fundamental do produto. <\/b><\/p>\n\n\n\n Cada \u00edcone \u00e9 desenvolvido para parecer t\u00e1til e real. O design remete a realidade como se fosse uma folha de papel cortada e dobrada no formato iconogr\u00e1fico.<\/p>\n\n\n\n O Material Design utiliza uma grade bastante vers\u00e1til para a cria\u00e7\u00e3o iconogr\u00e1fica, podendo abranger diversos formatos em um \u00fanico padr\u00e3o.<\/p>\n\n\n\n Todos os formatos podem ser obtidos a partir da grade de \u00edcones do Material Design.<\/p>\n\n\n\n As imagens s\u00e3o mais do que decora\u00e7\u00e3o no Material Design. Elas s\u00e3o uma ferramenta bastante poderosa para que voc\u00ea possa comunicar seu produto e diferenci\u00e1-lo da concorr\u00eancia.<\/p>\n\n\n\n Alguns princ\u00edpios b\u00e1sicos do uso de imagens no Material Design definem que elas t\u00eam que ser relevantes<\/b>, informativas<\/b> e atrativas<\/b>. Dessa forma, elas ir\u00e3o auxiliar o usu\u00e1rio e aumentar o engajamento<\/a> dele com seu produto.<\/p>\n\n\n\n O seu produto pode possuir imagens e ilustra\u00e7\u00f5es dependendo do contexto, e isso \u00e9 bastante recomend\u00e1vel<\/b>.<\/p>\n\n\n\n Por exemplo, quando quiser representar um artista ou um determinado prato de comida, procure primeiro por fotos, pois \u00e9 algo espec\u00edfico.<\/p>\n\n\n\n J\u00e1 para representa\u00e7\u00f5es mais abrangentes, como ingresso para cinema, ve\u00edculos e pr\u00e9dios, ilustra\u00e7\u00f5es s\u00e3o bem-vindas e bastante atrativas.<\/p>\n\n\n\n Mas aten\u00e7\u00e3o! No Material \u00e9 bastante recomend\u00e1vel que voc\u00ea fique longe das fotos padr\u00e3o de bancos de imagem<\/b>. Elas n\u00e3o passam autenticidade e n\u00e3o diferenciam seu produto pela criatividade e originalidade.<\/p>\n\n\n\n Procure fotos que narram hist\u00f3rias<\/b>, sejam espec\u00edficas<\/b> quando necess\u00e1rio e tenham um foco<\/b> para auxiliar na compreens\u00e3o do usu\u00e1rio.<\/p>\n\n\n\n Dessa forma, ser\u00e1 poss\u00edvel criar uma narrativa para suas imagens e deixar seu produto mais imersivo e humanizado, definindo o humor e contexto utilizando storytelling visual<\/b> \u2014 ali\u00e1s, voc\u00ea pode entender mais sobre storytelling lendo este post<\/a>.<\/p>\n\n\n\n Para que as imagens tenham harmonia com os outros elementos presentes no mesmo espa\u00e7o, algumas medidas devem ser tomadas.<\/p>\n\n\n\n A resolu\u00e7\u00e3o<\/b>, por exemplo, deve ser uma grande preocupa\u00e7\u00e3o. Imagens com baixa qualidade n\u00e3o s\u00e3o t\u00e3o atrativas quanto imagens com tamanho adequado ao layout<\/b>. Por isso, sempre confira se, no design final, a imagem est\u00e1 com resolu\u00e7\u00e3o boa.<\/p>\n\n\n\n Para interagir com texto<\/b>, no Material Design, as imagens ganham um gradiente<\/b> do preto para o transparente (como uma sombra) para melhorar o contraste. O qu\u00e3o transl\u00facido ser\u00e1 essa camada vai depender da imagem de fundo, mas a varia\u00e7\u00e3o recomendada \u00e9 de 20%-60%<\/b>.<\/p>\n\n\n\n Aten\u00e7\u00e3o: sempre tome cuidado para n\u00e3o obstruir ou escurecer demais a imagem.<\/p>\n\n\n\n Voc\u00ea tamb\u00e9m pode usar cores<\/b> para o fundo do texto como elemento de design e us\u00e1-las transl\u00facidas em conjunto com o gradiente sobre fotos para aumentar o contraste e estilizar as imagens.<\/p>\n\n\n\n As imagens tamb\u00e9m podem estar em conjunto<\/b>. Para criar hierarquia visual, \u00e9 recomendado a diferencia\u00e7\u00e3o no tamanho delas. Imagens maiores chamam mais aten\u00e7\u00e3o do que as menores no layout.<\/p>\n\n\n\n O Material Design possui duas fontes padr\u00e3o usadas nos diversos produtos: Roboto<\/b> e Nato<\/b>.<\/p>\n\n\n\n Roboto \u00e9 a fonte desenvolvida pelo Google com objetivo de ser funcional em uma grande gama de dispositivos. Possui formato um pouco mais largo e arredondado para proporcionar maior clareza durante a leitura e ser mais otimista.<\/p>\n\n\n\n A fam\u00edlia Roboto possui as seguintes varia\u00e7\u00f5es: Thin, Light, Regular, Medium, Bold e Black, al\u00e9m das varia\u00e7\u00f5es em it\u00e1lico.<\/p>\n\n\n\n J\u00e1 a fonte Nato<\/b> \u00e9 a respons\u00e1vel por suprir determinadas l\u00ednguas com alfabetos diferentes que a Roboto n\u00e3o suporta, como chin\u00eas, japon\u00eas, coreano e indiano.<\/p>\n\n\n\n Suas varia\u00e7\u00f5es diferem em rela\u00e7\u00e3o \u00e0 l\u00edngua escrita. Em chin\u00eas, por exemplo, sua fam\u00edlia possui: Thin, Light, DemiLight, Regular, Medium, Bold e Black (quase como a Roboto). J\u00e1 para o tailand\u00eas, por exemplo, s\u00f3 h\u00e1 o Regular e Bold.<\/p>\n\n\n\n Se quiser saber mais sobre tipografia, n\u00e3o deixe de conferir este post completo sobre o assunto!<\/a><\/p>\n\n\n\n As diretrizes do Material Design s\u00e3o bastante extensas<\/b>.<\/p>\n\n\n\n Isso ocorre porque seu uso \u00e9 principalmente voltado para o desenvolvimento de aplicativos e de sites, e, por isso, cada elemento da interface tem sua regra espec\u00edfica de cor, movimento, posi\u00e7\u00e3o etc.<\/p>\n\n\n\n Mas mesmo sendo t\u00e3o completo, todas as leis seguem os mesmos princ\u00edpios.<\/p>\n\n\n\n O Material \u00e9 simples<\/b>, direto<\/b>, conciso<\/b>, natural<\/b>, intuitivo<\/b>, amig\u00e1vel<\/b>, chamativo<\/b> e cin\u00e9tico<\/b>. Cada elemento das interfaces v\u00e3o e t\u00eam que se encaixar nessas caracter\u00edsticas.<\/p>\n\n\n\n Desde 2014, quando foi lan\u00e7ado, o Material Design continua seguindo como o principal influenciador das tend\u00eancias de design<\/a>.<\/p>\n\n\n\n Sua modernidade, fluidez e aten\u00e7\u00e3o para o usu\u00e1rio constru\u00edram sua tamanha import\u00e2ncia no desenvolvimento de aplicativos e sites desde sua cria\u00e7\u00e3o.<\/p>\n\n\n\n O que n\u00e3o \u00e9 diferente aqui na Rock Content<\/a>! Nossa linha de design \u00e9 inspirada pelo Material Design, desde as fontes e paleta de cores que utilizamos at\u00e9 como ser\u00e1 a navega\u00e7\u00e3o em nossos blogs e sites<\/a>.<\/p>\n\n\n\n Como j\u00e1 dito aqui tamb\u00e9m, muitas imagens s\u00e3o produzidas com base no Material, e esse post<\/a> explica como esse processo funciona e fornece algumas dicas de como criar imagens atrativas para seu p\u00fablico!<\/p>\n\n\n\n Se quiser saber mais sobre as diversas regras do Google sobre os demais elementos, n\u00e3o deixe de acessar o guia completo elaborado pela Gigante das Buscas!<\/a><\/p>\n\n\n\n Se voc\u00ea quiser continuar aprendendo ainda mais sobre diversos temas em marketing, recomendo que confira nosso ebook sobre redes sociais!<\/p>\n\n\n\n![\"Material](\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:787\/h:245\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/06\/Elemento-central-em-foco-787x245.png\")
<\/figure><\/div>\n\n\n\nCin\u00e9tico<\/h2>\n\n\n\n
![\"Material](\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:787\/h:245\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/06\/Elementos-organizados-para-dar-ideia-de-movimento-787x245.png\")
<\/figure><\/div>\n\n\n\nAmbiente e Sombras<\/h2>\n\n\n\n
![\"Material](\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:787\/h:245\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/06\/Diferença-de-sombra-provocada-por-fontes-de-luz-distintas-direcional-ambiente-e-combinada-787x245.png\")
<\/figure><\/div>\n\n\n\n![\"Material](\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:787\/h:245\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/06\/Diferença-de-tamanho-de-um-mesmo-objeto-provocado-pela-diferença-de-sombra-787x245.png\")
<\/figure><\/div>\n\n\n\nEleva\u00e7\u00e3o<\/h2>\n\n\n\n
Caracter\u00edsticas dos objetos Material<\/h2>\n\n\n\n
Movimento<\/h2>\n\n\n\n
![\"Material](\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/06\/Movimento-natural-do-Material-Design-demonstrado-por-um-gráfico-de-movimento-de-duas-bolinhas-azul-e-vermelha-1.gif\")
Cor<\/h2>\n\n\n\n
![\"Material](\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:787\/h:85\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/06\/Dois-textos-de-diferentes-opacidades-sobre-o-mesmo-fundo-787x85.png\")
<\/figure><\/div>\n\n\n\nIconografia<\/h2>\n\n\n\n
![\"Material](\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:787\/h:245\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/06\/Formatos-de-ícones-787x245.png\")
Imagens e ilustra\u00e7\u00f5es<\/h2>\n\n\n\n
![\"Material](\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:787\/h:258\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/06\/Integração-entre-imagens-e-cores-gradiente-sólida-e-translúcida-787x258.png\")
<\/figure><\/div>\n\n\n\nIntegra\u00e7\u00e3o com outros elementos<\/h3>\n\n\n\n
Tipografia<\/h2>\n\n\n\n
![\"Material](\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:300\/h:300\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/06\/Variações-da-fonte-Roboto-300x300.png\")
<\/figure><\/div>\n\n\n\nE muito mais!<\/h2>\n\n\n\n
![\"Kit](\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2017\/02\/Kit-Marketing-nas-Redes-Sociais.png\")
<\/a><\/figure><\/div>\n\n\n\n