Entendendo o Material Design

(Last Updated On: 21 de julho de 2017)

Ao fazer uns testes de layout, a equipe de design avaliou esta primeira versão:

Percebe-se que há elementos demais neste layout. Muitas imagens, ilustrações e detalhes decorativos . Além disso, ao rodar o layout em uma página, o tempo de carregamento fica enorme, devido à quantidade de imagens que pesam para carregar.

Certo, então vamos para a segunda versão, com uma outra abordagem! Pensando um pouco mais e vasculhando as tendências e padrões, temos mais uma versão:

Agora sim, perceba que temos um layout mais limpo, minimalista, as imagens foram adicionadas na medida certa… Chegamos a um layout flat!

Parece bom, certo? E de fato está bem legal, mas será que podemos deixar a interação ainda mais rica e intuitiva?

Novas necessidades, novas tendências

À medida que avançamos as pesquisas e experimentações nas diferentes áreas relacionadas à experiência de usuário, novos conceitos e padrões surgem com o intuito de oferecer novas possibilidades de interação.

No que diz respeito ao Design, principalmente quanto ao design de interação, passamos por diversas mudanças também.

As tendências variam desde a utilização de layouts muito complexos, recheados de imagens de todos os tipos, até chegar ao flat design.

Agora, depois de todos esses estágios, nasceu uma nova tendência, um novo padrão, baseado na seguinte premissa:

“Nós nos desafiamos a criar uma linguagem visual para nossos usuários, que sintetiza os princípios clássicos de um bom design com a inovação e possibilidade de tecnologia e ciência”

A partir desse conceito surgiu o Material Design, desenvolvido pela Google em 2014.

Mas por que o Material Design seria melhor que o Flat?

As relações entre Flat e Material Design

As complicações que tínhamos antes com layouts cheios de imagens, elementos visuais e até mesmo as animações em flash, que criavam distrações e dificuldade de compreensão para o usuário, foram resolvidas com o surgimento da tendência do Flat Design.

Um design minimalista, limpo, mais fácil de tornar responsivo e mais leve (quanto à performance do site).

Permanecemos um bom tempo utilizando essa mesma tendência em quase tudo, fugindo à regra vez ou outra para incrementar um pouco mais aqui ou ali, e deixar as coisas um pouco mais interessantes.

Agora, com o surgimento do Material Design, continuamos na linhagem do flat, reaproveitando as qualidades dessa tendência ainda bastante forte, mas com o incremento de alguns fatores.

Para termos uma visão melhor, vamos dar uma olhada neste comparativo prático feito pela Cleveroad:

Para entender melhor, temos esta divisão de coisas que permanecem e o que mudou:

O que já existia com flat O que há de novo com Material Design
Design minimalista Utilização do eixo Z (profundidade)
Leve (performance) Animações elegantes (motion design)
Responsivo Guidelines muito bem definidos

Estes são os pontos básicos. No Material Design temos algumas características do Flat, mas agora com novidades que buscam facilitar a interação do usuário.

Com a noção de profundidade conseguimos deixar mais clara a hierarquia de camadas nos elementos da página, facilitando a compreensão do usuário.

Já as animações, assim como a própria Google define nos guidelines, vieram para incrementar a experiência do usuário com melhor noção das relações espaciais, funcionalidades e intenções, baseado em animações fluidas e elegantes. Veja o exemplo de Jovie Brett:

E, além disso, o simples fato de termos agora uma estruturação muito bem explicada desse novo padrão, os guidelines, permite que a linguagem visual mantenha-se sólida e bem incorporada por quem irá utilizá-la em seus projetos.

Veja como o exemplo do início do post com estes novos conceitos aplicados:

Note que agora incorporamos alguns elementos do Material Design, como:

  • A sombra (tanto nos blocos de cursos quanto no menu para a imagem do banner) indicando a profundidade dos elementos;
  • A característica do menu ativado, que deixa de ser um hover com o background inteiro verde para apenas uma fita indicativa abaixo, típico do Material Design;

  • Os blocos de cursos com o botão “Saiba mais” dentro dos padrões apresentados no guideline.

Além disso, podemos inserir animações de interação para enriquecer ainda mais essa experiência, tornando-a mais elegante e intuitiva.

Então o Material Design é a solução?

Não podemos afirmar que as tendências serão sempre a melhor solução, justamente porque são uma tendência.

Mas, além disso, temos alguns pontos a considerar, em contrapartida, antes de implementar a mudança:

  • As animações adicionadas podem acabar consumindo um pouco mais da bateria dos dispositivos móveis.
  • Não precisamos seguir os conceitos do Material Design à risca, mas precisamos ter cuidado ao aplicar novas características ao design, para que, nem a linguagem do Material Design, nem a linguagem do próprio projeto se perca nesse processo.

  • Tanto o Material Design quanto o Flat Design são formas populares de criar um design de layout, mas será que essa é a melhor abordagem para o seu projeto?

É importante que todos tenham clara a ideia de que o Material Design pode nem sempre ser bem aplicado dentro do conceito de alguns projetos. Vejamos um exemplo:

Se seu projeto tem uma característica particular na identidade visual, como nesse caso da Creative9, que demanda a utilização de algumas ilustrações que entrem no caminho contrário do padrão de Material Design, por exemplo, deve-se refletir se vale a pena sacrificar este elemento da identidade para encaixar o Material Design a qualquer custo.

Para o layout da Creative9, apesar de não seguir a linha do Material Design, propõe uma experiência diferente ao usuário, específica para a proposta deste projeto.

Fique sempre atento às novidades e atualizações que chegam por aí, mas não se esqueça de repensar o design sempre baseando-se no contexto que se tem em mãos e na validação das ideias antes de aplicá-las.

“O design nunca está finalizado”

“Design é a arte de resolução contínua de problemas – um ciclo ativo de investigar e validar necessidades, elaborar e desenvolver ideias, e criar soluções”

É o que diz Nicholas Jitkoff em seu artigo apresentando as atualizações no guideline de Material Design.

Ou seja, design é algo que se renova constantemente, por isso precisamos estar sempre realinhando as novidades, atualizando os conceitos, características e tendências.

Material Design para front-enders

Para os front-enders, existem alguns frameworks que ajudam na hora de implementar essa linguagem visual em seus projetos, como o Materilize, por exemplo.

Assim como o Bootstrap, este framework reúne bibliotecas de CSS e JavaScript, além de ser responsivo, porém, baseado nos princípios de Material Design. 🙂

E aí? O que você achou? Curtiu a ideia do Material Design da Google? Comente ali em baixo e compartilhe sua opinião com a gente!

Para validar a utilização do Material Design, nada melhor do que um briefing bem elaborado do projeto, certo? Então dá uma olhada nesse curso de Identidade visual da Alura para aprender algumas boas técnicas! 😉

FIQUE POR DENTRO

  • Vagner Santos de Araújo

    Agora só falta um curso 😀

    • Coelho

      De uma certa maneira já foram introduzidos os estilos css necessários para o uso do Material Design.
      Agora é só seguir o guideline e dar aquela googlada num efeito mais complexo aqui ou ali.

    • Leticia Ozono

      Oi Vagner! Seria legal mesmo, cara! Passei aqui pra galera, mas se quiser sugerir mais cursos, fique à vontade para sugerir aqui. 😉

  • Coelho

    Nice post.

    • Leticia Ozono

      Oi Coelho! Obrigada!

  • Suellyn Specie

    O link do curso de identidade visual nao esta funcionando.

    • Leticia Ozono

      Oi Suellyn! Puts, verdade! Alterado já. Obrigada pelo feedback 😉

  • fernando andrauss

    Ótimo post, gosto muito da proposta do Material Design. Sempre acompanho seus artigos, são muito bons ; )

    • Leticia Ozono

      Oi Fernando! Valeu pelo feedback 😉

  • Thiago Bezerra

    Para os front-ends tem a versão oficial da Google: AngularJS: https://material.angularjs.org/
    Angular 4: https://material.angular.io/

    • Leticia Ozono

      Oi Thiago! Essa também é uma alternativa criada pelo Google na época em que o Angular bombou para popularizar o uso do MD em novos projetos, mas existem alternativas tanto para outros frameworks como React, ou mesmo outras alternativas livre de tudo, como a sugestão do comentário anterior, o getmdl. 🙂

  • Rafael Felipe

    Esqueceu de mencionar o getmdl.io. Acabamos de finalizar um projeto com materialize aqui na empresa e apesar de ser simples e intuitivo, tem alguns problemas de performance.

    • Leticia Ozono

      Oi Rafael! Realmente, o getmdl foi criado pela google, enquanto o Materialize foi feito por um grupo de estudantes da Universidade Carnegie Mellon. Além disso, a proposta do Materialize é ser mais fácil de usar mesmo, como você comentou. Por isso, pra um primeiro contato, pode ser uma boa utilizá-lo. 😉

    • Reinaldo Vale
  • Jhemyson

    deviam criar o curso de material design com o novo ionic 4

    • Leticia Ozono

      Oi Jhemyson! Legal a sugestão! Se quiser sugerir mais cursos, fique à vontade para sugerir aqui. 😉

  • Vanderson Silva

    Do caral$@# Letícia, parabéns! Muito claro e bem explicado.

    • Leticia Ozono

      Oi Vanderson! Muito obrigada pelo feedback 😉

  • Alexsandro Lima

    Procurar entender bem todo conceito de Material Design foi o que mais me ajudou em minha carreira como Web Designer, pois me identifiquei pra caramba com essa tendência.

    Ainda lembro quando comecei a estudar alguns conceitos que me levaram ao Flat Primeiro, para depois chegar ao Material e isso foi de grande valia para mim.

    Muito bom o seu poster, parabéns!

  • Pingback: Melhore a experiência do usuário com Motion Design - Blog da Alura()

Próximo ArtigoPor que você deve saber estruturar um bom briefing de marketing pessoal