MENU Mário Valney

It’s me Mário 2.0 – O que é o Material Design?

Teorizando 18 de maio de 2015 2 comentários
Teorizando
  • 18 - 05 - 15
  •        
  • 2

E ae galera! Tudo bem?
Como deve ter percebido, o nosso site mudou (espero que para melhor!) e agora temos um layout muito mais clean (OMG! era possível?) e 100% pensado no mobile.

Mobile [muito] First

Bem… se você é desenvolvedor web, provavelmente conhece o conceito ou já ouviu alguém falando dele. Mobile First (como o nome já diz) é o desenvolvimento que preza por criar uma interface de usuário pensada primeiramente para o mobile.

Existe um artigo do Tableless que fala muito disso. Recomendo dar uma lida lá… Mas o que eu queria falar de Mobile First é que agora o layout do site é pensado primeiro no Mobile, sendo que eu fui além (como confio nas skills de meus leitores) estou usando conceitos de navegação e layout que são mais familiares aos usuários mobiles (no caso, Android) do que aos usuários exclusivamente Web.

Estou ousando. Se acertei ou errei, vocês que irão dizer… :D

Material Design?

É! Material Design!!!

materialdesign_introduction

Nós nos desafiamos a criar uma linguagem visual para os nossos usuários que sintetizasse os princípios clássicos de um bom design, com inovação e com as possibilidades científicas e tecnologias. Isso é o projeto Material Design.

O trecho acima é uma tradução adaptada das primeiras palavras das especificações do Material Design.

Mas e qual a história do MD (Material Design)?

Bem… lembra do Google antigamente?

Google Antigo

e do Gmail?

Google Antigo

Meio tenso, né? Mesmo pensando no começo dos anos 2000 ainda era um design relativamente “feio”. Mas isso mudou com a entrada do Larry Page na presidência em 2011:

Sua primeira ordem foi para que o Google recebesse uma cara nova e isso é óbvio, pois a Apple já respirava design e se o Google não corresse atrás, provavelmente ficaria atrasado.

Dessa forma, foi criado o Google Creative Labs ( em NY <3 ) e com isso foi dado o primeiro passo rumo ao MD. Por isso, o MD não possui um criador, ele é uma compilação de tudo o que o Google investiu em pesquisa e criação de Interfaces de Usuário, mas se tivermos que apontar uma cabeça, seria a de Matías Duarte, criador de muita coisa, principalmente do webOS, que deu origem ao conceito, dentre outras coisas, dos “cards” utilizados pela Apple e pelo Google.

Então em 2013 iniciou-se a criação do MD como um framework de criação de interfaces de usuário, ou seja, um framework de “como o Google se comunica com seus usuários”. E o maior case atualmente é o Lollipop do Android.

Vai ficar tudo igual?

Essa eu vou pular para não causar nenhuma treta com nenhum designer, já que não é a minha expertise. Mas se eu quisesse “plantar uma treta”, eu diria que não.

Treta

Não?
É! Não.

O Material Design é, acima de tudo, um conceito visual. Você não precisa deixar tudo igual, mas precisa entender os objetivos e os princípios (estão lá na documentação) de forma a criar uma boa UX e uma UI agradável, aliando tudo isso ao seu próprio processo de criação do layout.

É só saber usar… :D

Voltando ao layout do site

Escolhi a paleta blue/red:

palette

Que resulta nisso aqui:

Preview da Paleta

E além das cores, usei o conceito dos “card” e me inspirei muito no aplicativo do Google+.

Layout de uma "Collection" no Google+
Layout de uma “Collection” no Google+
Página de Artigo do meu site
Página de Artigo do meu site

Sinceramente? Espero que tenham gostado!

BETA?

Isso! Ainda estamos em BETA, pois ainda faltam algumas funcionalidades e coisinhas legais como os botões de compartilhar, os estilos do formulário de contato, organizar os menus, mudar a parte de cima do menu lateral, terminar o sistema de notificações (vai ficar massa!) e o botão de ação que ficará no canto inferior direito.

Certo! Tudo massa, mas e o Desktop?

Meu site Desktop

Utilizei um conceito de Design Responsivo para tablets (landing), que aprendi nas aulas de Android: já que há espaço livre, o menu ficará aberto sempre.

Conclusão

Comecei a escrever esse texto dia 14 e só terminei hoje (18/05), então podem imaginar como o fim de semana foi corrido… e foi! Por isso, ainda essa semana teremos um post sobre o FrontIn Fortaleza e enquanto isso, responde o questionário abaixo e/ou deixe um comentário, pra fazer um #dev feliz?

Caso não esteja conseguindo acessar, clique aqui.

Por favor, considere desativar o AdBlock

Não perca nenhuma novidade, assinando nossa newsletter!



    Não se preocupe: não enviaremos muitos e-mails, nem mostraremos seu e-mail para ninguém. Dúvidas?


    Deixe seu comentário! Dúvida sobre como comentar
    ou vai postar código? Leia antes.