Google Material Design – Conheça e baixe paletas, ícones e mais…
8 Flares Twitter 0 Facebook 0 Google+ 8 Pin It Share 0 Filament.io 8 Flares ×

Material Design‘ é um novo conceito de design criado pelo Google, para o lançamento do Android 5.0 Lollipop. Trata-se de uma nova interface que procura unificar o visual do Android, dos aplicativos do Chrome OS e das páginas de internet de um modo padronizado, equilibrado e com foco na usabilidade e navegabilidade.

google-material-design

Com a atualização em meu Nexus 4 na última segunda-feira (17/11/14) estou igual criança com brinquedo novo. Tudo mudou muito – em se tratando de design – e mudou pra melhor!

De cara, uma predominância de cores chapadas e vibrantes numa paleta criada especialmente para equilibrar-se com ícones completamente repaginados, profundidade entre os aplicativos com diferentes camadas, além de possuir muita animação em praticamente todas as interações com a interface. As alterações seguem o conceito de “espaços racionalizados e sistemas em movimento”, criado pelo Google.

Neste post, procurei coletar alguns links para baixar muita coisa, baseado no Material Design do Google, e já sair criando. Inclui alguns modelos, kits, ícones, ferramentas, scripts e fontes para o seu próximo projeto de design ou de inspiração.

Vamos começar pelas cores:

md-colors

A Paleta criada pelos designers do Google visa tornar as cores aplicadas mais consistentes, sensíveis e equilibradas. Usando valores em RGB uma cor dominante pode gerar uma grande paleta de cores de suas nuances. Por padrão, a Paleta oferece uma seleção com base em cores suaves e vibrantes, quebrando-as ainda mais para o escuro, passando por vários tons e nuances com sombras diversas. Uma paleta maior será possível, mas mesmo esta configuração padrão é altamente impressionante e útil. Abaixo o link para baixar e instalar a Paleta em seu Photoshop ou Illustrator.

Clique para baixar a Paleta Material Design

Ícones e layouts:

icones

Outro quesito minimalístico são os ícones utilizados que ficaram mais leves e com símbolos mais definidos. Dá-se menos atenção às cores e mais aos significados. Isso não impede que você os trabalhe em diferentes contextos, porém, leve sempre em conta a experiência do usuário final e a funcionalidade dos mesmos: não são meros enfeites em um aplicativo ou página, eles precisam ter um sentido, levar a uma ação e entregar o resultado a que se propõe.

Na comunidade Material Design Icons tem muita coisa pronta e free pra baixar: Material Design Icons.

E no repositório GITHUB estão classificados por pastas. Você pode dar uma olhada antes, neste link: GUIA VISUAL DE ÍCONES que serve de guia para o conteúdo de cada pasta criada. Depois é só ir pro repositório e baixar o zip com todas: GITHUB Material Design Icons.

Quanto a Layouts, não é difícil compreender sua estrutura baseada em navegabilidade simplificada e esteticamente intuitiva ao se olhar para os novos aplicativos e as mudanças pelas quais muitos passaram. Mas, caso queira seguir bons exemplos de acessibilidade, comece pelo site oficial do Google: Estrutura. Se precisar, o site PSD Boom tem um kit que serve como um ótimo apanhado para várias situações criativas baseadas no Material Design: Free Material Kit PSD.

Tipografia:

tipografia

Adoramos ‘todo tipo de tipo’ (menos Comic Sans inapropriada!) e sempre é possível encontrar um contexto para cada estilo, por mais fora de contexto que uma tipo possa parecer… (acabei de falar mal da Comic Sans, mas ela foi criada especificamente para aplicações infantis, ou seja tem uma aplicação apropriada!). Comumente chamadas de ‘fontes tipográficas’ ou somente ‘fontes’, a tipografia é importante na construção de um ambiente harmonioso, na possibilidade de leitura fácil e no equilíbrio com todo o cenário. A família Roboto vêm sendo utilizada já com frequência nas aplicações para Android, e passou por uma pequena reformulação. Continua sendo a queridinha da vez. Acompanhada pela família de fontes Noto que é mais extensa.
Você pode adquirir tanto uma quanto outra diretamente no site oficial: Tipografia. Também dê uma passadinha antes de aplicá-las em: Tipos de Construção, para não ter problemas com formatação de fontes. E, se você é doente por elas, visite o repositório mais famoso da web: Google Fonts.

Com esses links você já tem um material bacana pra começar a se aventurar no Material Design. Compartilhe depois seus projetos e inspirações, inspire outros!

Paleta Material Design

Material Design Icons

GITHUB Material Design Icons

Free Material Kit PSD

Google Fonts

Written by MarcelGinn®

Não sou chegado de Dalton Trevisan, nem fiz poesia com Leminski, o que não me torna menos vampiro de Curitiba.

Leave a Comment

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *