Loja 
![[ESPECIAL] Material Design: um estudo de conceitos e aplicabilidade](https://i0.wp.com/www.tecnoveste.com.br/wp-content/uploads/2016/05/material-design-do-google-1.png?fit=400%2C228&ssl=1)
Design é a concepção de um item – máquina, utensílio, mobiliário, embalagem, publicação – no que se refere à sua forma e funcionalidade. De maneira simplificada, é o “desenho total de um item”, físico ou virtual, que envolve não apenas fatores sensoriais, como sua aparência, mas também questões comportamentais, como sua forma de utilização.
Na busca por evoluir a experiência do usuário (UX) – ver post sobre o assunto – dos seus produtos, no Google I/O de 2014, a empresa gigante de buscas anunciou um novo conceito de design para os seus produtos: o Design Material, ou Material Design em inglês. Com o foco na interface do usuário, ao longo dos meses, seus produtos para desktop, web e mobile estão sendo atualizados para oferecer uma experiência consistente em todas suas plataformas.
A inspiração vem para a sua criação vem da arquitetura contemporânea, das placas de trânsito, das pistas de corrida e, por isso mesmo, apresenta uma impressão vibrante e chamativa:
O objetivo é criar uma linguagem visual que sintetize os princípios clássicos do “bom design” com inovação e que favoreça a tecnologia e a ciência, por meio da criação de um sistema único sobrejacente, que permita unificar a usabilidade de aplicativos e da web nos mais diversos aparelhos e plataformas. Nesse sentido, as formas de entrada, ou maneiras de comunicação do usuário para com o computador – como teclado, toque na tela, mouse e comandos de voz -, são essenciais para compreender e desenvolver essa linguagem.
Na prática, o objetivo é dar uma aparência limpa e intuitiva, adicionando as impressões do mundo real à utilização virtual, de maneira que fatores como posicionamento de ícones e suas animações tenham modos de atuação calcados nas experiências físicas reais. Nesse sentido, apesar de ter aparência chapada – contrapondo-se à tendência anterior de autorrelevo -, leva em consideração o posicionamento em três dimensões dos objetos e as interações entre luz e sombra.
As cores-base do Design Material foram tiradas de uma cartela de 500 unidades coloríficas e são complementadas por cores secundárias, sombras, ambientes chapados e destaques “luminosos”. Há uma seleção de cores que foram cuidadosamente escolhidas para trabalhar bem juntas e harmonizar com o propósito das aplicações criadas, criando uma experiência consistente no Android, na Web e no iOS.
Assim como as cores, tipografia, grades, espaçamento e adição de imagens são utilizados no material design para criar um hierarquia, um significado e um foco para fazer o usuário imergir completamente na UX oferecida. A repetição da disposição dos objetos na criação de uma aplicação – ou seja, a padronização do layout – de acordo com os princípios do Design Material auxiliam a criação de uma experiência familiar através de todos os meios em que é aplicado.
Nesse prisma, há três diferentes formas de agrupar elementos diferente:
Outro fator importante a ser levado em consideração é a densidade de pixels, ou seja, a quantidade de pixels que cabem em uma polegada (2,54 com). Deve-se almejar atingir uma quantidade ótima de pixels para que se mantenha uma imagem nítida, mas que não dificulte o carregamento das imagens independente da rede que o usuário está carregando.
É preciso estar atento aos possíveis aparelhos que os usuários podem utilizar o serviço oferecido, por isso o Design Material foi concebido para poder ser utilizado em smartphones, tablets, wearables e desktop. A estrutura dos dispositivos móveis e dos vestíveis inclui uma barra permanente (azul escuro) e um botão de ação flutuante (verde água); o tablet absorve elementos dos smartphones com funcionalidades adicionais com “action overflow”; no computador de mesa a estrutura se repete, mas a barra superior contém elementos de tablets e smartphones, incluindo menus de navegação, controles de janela, canvas e tabs.
Além de todas as funcionalidade que tem sido adicionadas a esses dispositivos nos últimos anos, é preciso que consigamos permitir que eles mantenham sua acessibilidade e possam evoluir através do Design Material. Nesse sentido, é vale destacar a importância da navegação, da legibilidade e do feedback.
Pode se considerar que um produto é acessível quando os usuários podem facilmente navegar, entender e utilizá-lo satisfatoriamente – é recomendado que você estude o site do Google Accessibility. Independente do nível de incapacidade física do usuário, é sempre bom ter em mente a relação dos seguintes elementos com o Design Material: cores, mode de alto contraste, sons, comandos de voz, aumento do tamanho das letras; e suas possíveis combinações.
Com relação à navegação, deve-se ter em mente a rapidez e a eficiência da experiência do usuário, por isso deve-se permitir a utilização sem ou mouse e também através de gestos. Relativo à legibilidade, as fontes padrão são Roboto e Noto – para idiomas que não utilizam caracteres romanos -,e deve-se priorizar o uso de fontes que se adaptem ao aumento e magnificação dos recursos da tela, levando em consideração o contraste e as cores utilizadas, bem como o espaçamento entre os elementos do texto e sua relação com os botões e menus.
Ao desenhar sua aplicação, tenha certeza que elementos como “labels”, “tooltips” e “placeholders” estejam trabalhando para o propósito para o qual forma concebidos. Lembre-se de nomear esses elementos de maneira consistente em todo o app e de relacionar seus nomes com as atividades que são designados por eles. Ademais é importante deixar dispositivos de ajuda facilmente acessíveis, bem como atalhos no teclado, leitura de voz pelo computador e comandos de voz pelo usuário.
Se você está pensando em utilizar este padrão para seu próximo site ou aplicativo, vale a pena relembrar os conceitos ensinados por Tenny Pinheiro sobre Design Thinking na Terça da Inovação do Instituto Illuminante. Você pode começar baixando a Tabela de Conteúdos do Material Design (Adobe After Effects, Adobe Photoshop, Adobe Illustrator, Sketch) ou visitar o site que minha agência a Layerland criou para o Google I/O Extended 2015.
Ouça o minicast sobre material design: http://www.soundcloud.com/tecnoveste
Blog no 
Blog no 
Blog no