Diurno

(Re)Conheça o Material Design

por: Mariana Azzi

data: 08/01/2018

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no whatsapp
Compartilhar no linkedin
Compartilhar no facebook
Compartilhar no twitter
Compartilhar no whatsapp
Compartilhar no linkedin

Você já reparou que a maioria dos aplicativos que você baixa vem seguindo um mesmo padrão gráfico? Cores chapadas e vibrantes, ícones personalizados, sensações de profundidade e diversas animações entre as ações realizadas?

Esse fato se dá pelo surgimento da filosofia do Flat Design. Essa nova tendência em web design se baseia na simplicidade dos elementos e clareza do layout. Estruturas geométricas e o conceito “clean” são os elementos chave dessa tendência.

Com a grande adesão do Flat design e seguindo esse estilo, em 2014, a Google lançou o Material Design. Essa nova linguagem visual foi planejada para atender a Androids mas hoje em dia vem sendo espelhada nos demais sistemas operacionais.

 

Material Design

A Google buscou sintetizar os princípios do bom design com inovação em harmonia com a ciência e tecnologia, criando um sistema que permite a padronização da experiência do usuário em diferentes plataformas e dispositivos.

Uma das propriedades do Material Design é criar objetos que simulem a realidade. Através do reconhecimento da luz e aplicação da sombra os objetos ganham forma e composição.

Assim, temos como regra estabelecida que os objetos gráficos criados sempre terão uma variação em seu tamanho da forma, e sempre terão uma espessura uniforme de 1dp – densidade por pixel. As sombras sempre serão baseadas na distância em profundidade de um elemento para o outro.

Pixels

Você pode conferir todas as propriedades desse padrão de linguagem clicando aqui.

Alguns consideram o Material Design uma evolução do Flat Design. A principal diferença entre os dois é que os objetos achatados e sólidos presentes também no Flat Design, passam a ser considerados como elementos reais que respeitam as leis da física para criar uma forma e movimentação mais próxima do real.

google-material-design

 

Em 2015 foi lançado o Material Design Lite, uma bibliotecade componentes para auxílio na criação web utilizando esse estilo. Você pode conferir mais aqui.

 

A grande questão é:
Se todos passarem a seguir à risca esse padrão de guidelines do Google, todos os apps não ficarão iguais?

 

Como questionado inicialmente, vemos que essa padronização vem sim acontecendo, como podemos perceber nas imagens abaixo:

Material Design Doist

 

Material design Evernote

 

Material design gmail

 

A vantagem dessa unificação é a familiaridade do usuário com a navegabilidade dos apps. A padronização das interações faz com que os usuários aprendam e consigam usar qualquer aplicativo.

O grande problema é que seguindo à risca essas linguagens, Material Design e Flat Design, os apps acabam homogeneizando demais a interface, não conseguindo se destacar de seus concorrentes e tornando até difícil a distinção entre os mesmos.

O nosso desafio aqui na dti é inovar e utilizar a criatividade para manter a personalidade de uma marca em um ambiente tão padronizado e cheio de características. Procuramos utilizar os guidelines propostos filtrando o que é aplicável ou não para que não percamos a identidade própria do cliente e possamos criar um visual marcante em meio a tantos padrões.

 


Warning: include(/home/storage/9/44/25/dtidigital1/public_html/wp-content/plugins/wp-rocket/vendor/composer/../matthiasmullie/minify/src/JS.php): failed to open stream: No such file or directory in /home/storage/9/44/25/dtidigital1/public_html/wp-content/plugins/wordpress-seo/vendor/composer/ClassLoader.php on line 444

Warning: include(): Failed opening '/home/storage/9/44/25/dtidigital1/public_html/wp-content/plugins/wp-rocket/vendor/composer/../matthiasmullie/minify/src/JS.php' for inclusion (include_path='.:/usr/share/pear') in /home/storage/9/44/25/dtidigital1/public_html/wp-content/plugins/wordpress-seo/vendor/composer/ClassLoader.php on line 444

Fatal error: Uncaught Error: Class 'MatthiasMullie\Minify\JS' not found in /home/storage/9/44/25/dtidigital1/public_html/wp-content/plugins/wp-rocket/inc/classes/subscriber/Optimization/class-minify-js-subscriber.php:40 Stack trace: #0 /home/storage/9/44/25/dtidigital1/public_html/wp-includes/class-wp-hook.php(286): WP_Rocket\Subscriber\Optimization\Minify_JS_Subscriber->process('<!DOCTYPE html>...') #1 /home/storage/9/44/25/dtidigital1/public_html/wp-includes/plugin.php(203): WP_Hook->apply_filters('<!DOCTYPE html>...', Array) #2 /home/storage/9/44/25/dtidigital1/public_html/wp-content/plugins/wp-rocket/inc/front/process.php(417): apply_filters('rocket_buffer', '<!DOCTYPE html>...') #3 [internal function]: do_rocket_callback('<!DOCTYPE html>...', 9) #4 /home/storage/9/44/25/dtidigital1/public_html/wp-includes/functions.php(3778): ob_end_flush() #5 /home/storage/9/44/25/dtidigital1/public_html/wp-includes/class-wp-hook.php(286): wp_ob_end_flush_all('') #6 /home/storage/9/44/25/dtidigital1/public_html/wp-includes/class-wp- in /home/storage/9/44/25/dtidigital1/public_html/wp-content/plugins/wp-rocket/inc/classes/subscriber/Optimization/class-minify-js-subscriber.php on line 40