Blog Bugginho Academy

Conheça o Material Design

Vivemos uma era no WebDesign em que o minimalismo é a principal vertente. Apoiando essa frente, apresento para vocês hoje o Material Design.

O que é Material Design?

Desenvolvido pelo Google em 2014, o Material Design se tornou um padrão disseminado em diversos sites. Prezando pelo minimalismo e focando em sombras, profundidade, transições e animações, esta visão de design simboliza uma repaginação do já conhecido “flat design“.

Difundido principalmente a partir da versão 6.0 (Marshmallow) do Android, você poderá encontrar o Material Design nos aplicativos do seu celular, como o Youtube, Google Play Música, Gmail e outros da gigante Google.

Exemplo de uso do Material Design (profundidade do botão, cores vibrantes e animações  – retirado de theultralinx.com)

Como usar?

O Google disponibiliza um portfólio completo do Material Design para consulta e melhor entendimento dos seus princípios. Você pode acessá-lo através deste link:

https://material.io/guidelines/#introduction-principles

Porém, neste artigo irei falar um pouco mais sobre um framework front-end que facilita muito a utilização deste princípio de design. Apresento-lhes o Materialize CSS.

Materialize CSS

Site para referência: http://materializecss.com/

Repositório no GitHub: https://github.com/Dogfalo/materialize

O Materialize CSS se autodefine como “Um framework front-end moderno e responsivo baseado em Material Design”. Ele possui um conjunto de ferramentas prontas para serem utilizadas no design de seu site, como botões, cards, paleta de cores, formulários, barras de navegação, diversos ícones, e, claro, responsividade através de grid (já conhecido pelo usuários do Bootstrap).

Para vocês conhecerem um pouco melhor do Materialize CSS, irei guiá-los para criar um site simples e responsivo de forma rápida e elegante.

» Criando os arquivos necessários

Crie uma pasta em uma localização de sua preferência, crie um arquivo com a extensão .html e abra-o em seu editor de texto ou IDE e insira o seguinte código.

Agora temos o arquivo de nosso site já com as dependências do Materialize CSS importadas através de uma CDN (Content Deliver Network), incluindo tanto o próprio CSS quanto o arquivo JavaScript para as animações e funcionamento dos plug-ins do framework. Além disso também obtemos o jQuery para o pleno funcionamento do framework.

» Criando a página

Agora vamos começar a criar a nossa página! Primeiro iremos colocar uma barra de navegação fixada no topo. Para isso utilizaremos o componente “NavBar”.(http://materializecss.com/navbar.html)

Aqui neste exemplo utilizaremos a NavBar com os links alinhados à direita.

Se você abrir agora o arquivo .html em seu navegador, poderá ver uma barra rosa fixada no topo do site. Para mudar a cor o processo é bem simples, basta adicionar a classe CSS à tag HTML que deseja mudar. Para ver as classes disponíveis, acesse: http://materializecss.com/color.html

No nosso exemplo, colocaremos a barra da cor verde utilizando as classes “teal accent-4” na “div” logo abaixo a tag “nav”:

Após salvar e rodar o arquivo no navegador, você deve ter um resultado semelhante a este:

A seguir iremos colocar um header em nossa página:

Agora você deverá ter um resultado semelhante a este:

Agora iremos adicionar texto e responsividade ao nosso site!

O Materialize CSS, como dito anteriormente, baseia-se na utilização de grid para a responsividade, tal sistema bastante semelhante ao já utilizado pelo largamente conhecido framework Bootstrap.

As classes que serão utilizadas são:

  • row: Inicializa uma nova linha
  • col: Inicializa uma coluna
  • sX: Indica a quantidade de espaços que uma coluna ocupará, sendo ‘x’ um número entre 1 e 12, já que o grid do Materialize é dividido em 12 espaços igualmente divididos. (Por exemplo, uma coluna com classe s1 ocupará 1 espaço do grid, já s12 ocupará os 12 espaços). O prefixo ‘s’ indica como o conteúdo aparecerá para dispositivos mobile com tela menor ou igual a 600 pixels.
  • mX: segue o mesmo raciocínio que o prefixo ‘s’, com a diferença que o prefixo ‘m’ indica como o conteúdo aparecerá para tablets e dispositivos com tela menor ou igual a 992 pixels.
  • lX: também segue o mesmo raciocínio, mas indica como o conteúdo aparecerá para dispositivos com tela maior a 992 pixels, comumente computadores desktop.

Você poderá encontrar mais detalhes sobre o sistema de grid neste link: http://materializecss.com/grid.html

Iremos agora adicionar conteúdo ao nosso site, de forma que cada parte dele apareça ocupando as 12 colunas em dispositivos com tela pequena (mobile), 3 colunas em dispositivos com tela média (geralmente tablets) e em 4 colunas para dispositivos com telas maiores (desktop).

É importante lembrar que só é possível colocar o conteúdo do site nos 12 espaços do grid. Caso a soma das classes de seu conteúdo exceda esse valor, o conteúdo extra é automaticamente colocado em uma linha abaixo.

Veja o código a seguir:

Se você pegar este código e colocar em seu arquivo, você verá o conteúdo disposto de acordo com o dispositivo em que você está (você também pode testar o comportamento ao redimensionar a janela do seu navegador). Veja o resultado a seguir:

  • Em um desktop:

  • Em um tablet:

  • Em um celular:

 

Dessa forma você pode criar o conteúdo do seu site e dispô-lo da melhor forma para o usuário, de acordo com o dispositivo que ele esteja utilizando.

Iremos agora finalizar o nosso site colocando um botão com animação e inserindo sombras para ficarmos de acordo com os princípios do Material Design.

  • Colocando sombra no header: para fazer isto é bem simples, basta apenas adicionarmos a classe “z-depth-x”, onde ‘x’ é um número entre 1 e 5, representando respectivamente sombras mais fracas e mais fortes. (http://materializecss.com/shadow.html)

  • Colocando um botão de ação flutuante com animação: iremos colocar um botão entre o header e o conteúdo da página (para isso utilizando um pouco de CSS), seguindo o padrão do Material Design. Ao clicar no botão você poderá ver um efeito de “ondas”, o mesmo efeito utilizado nos aplicativos do Google. (Você pode encontrar os botões prontos em http://materializecss.com/buttons.html)

Agora você deve ter um resultado semelhante a este:

 

É isso pessoal! Você agora pode dar asas à sua imaginação e utilizar todos os componentes fornecidos pelo Materialize CSS para construir seu site utilizando os princípios do Material Design.

Deixo por fim alguns sites com recursos e exemplos para vocês darem uma olhada na aplicação do Material Design. Caso vocês tenham gostado, deixem seu feedback para que eu possa continuar os tutoriais com o Materialize CSS e criar sites mais complexos.

Caso haja alguma dúvida, deixe aqui seu comentário!

Obrigado, e até a próxima!

Sites para referência:

http://materializecss.com/
https://material.io/guidelines/
https://material.io/guidelines/resources/color-palettes.html
http://materializecss.com/showcase.html
https://code.tutsplus.com/tutorials/design-tips-for-material-design–cms-22515

Victor Hugo

23 anos, graduado em Engenharia da Computação pela FIAP (Faculdade de Informática e Administração Paulista). Analista de Sistemas na TOTVS Juritis.
Programador Front-End e Back-End, trabalhando atualmente em desenvolvimento web com .NET C# e JavaScript.

Comentar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Your Header Sidebar area is currently empty. Hurry up and add some widgets.