Black Friday 20% de desconto
Tá acabando

0

dias

00

hrs

00

min

00

seg

Artigos > Front-end

Entendendo o Material Design

leticia-mayumi
leticia-mayumi
Imagem de destaque

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 imagedesign-uxns 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

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 [/table]

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:

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:

É 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! ;)

Leia também:

Artigos de Tecnologia e Negócios > Front-end
Tá acabando

0

dias

00

hrs

00

min

00

seg

  • 1244 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

  • Desconto 20%

Premium

Desconto 20%
  • 1244 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75 R$60
à vista R$900 R$720
Matricule-se

Premium Plus

Desconto 20%
  • 1244 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100 R$80
à vista R$1.200 R$960
Matricule-se

Max

Desconto 20%
  • 1244 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120 R$96
à vista R$1.440 R$1.152
Matricule-se
Conheça os Planos para Empresas

Acesso por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas