O que é Material Design? \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 05 Horas 10 Min 12 Seg Tempo restante da oferta: 05 10 12 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) O que é Material Design? [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) # O que é Material Design? Se você deseja criar rapidamente aplicações bonitas e utilizáveis, dê uma conferida no Material Design. [ Marylene Guedes ](https://www.treinaweb.com.br/blog/autor/marylene-guedes) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/12150130/MATERIAL-DESIGN.png) Quem já se deparou com o Android a uns anos atrás, via que um dos grandes problemas que ele tinha era a falta de unidade visual e de usabilidade nas interfaces: não era a mesma no smartphone, tablets e smartwatches. Finalmente em 2014, juntamente com a nova versão do Android - o Android Lollipop, nasceu o **Material Design**. O Material Design veio para fazer a unificação das interfaces gráficas dos sistemas Google, além de ser utilizado por diversos desenvolvedores que desejam criar algo para ele. ## Afinal, o que realmente vem a ser o Material Design? Em primeiro lugar, devemos saber o conceito do Material Design. Segundo o próprio site, > o Material Design é um sistema de design - apoiado em código-fonte aberto - que ajuda as equipes a criar experiências digitais de alta qualidade. É um conjunto de diretrizes, também conhecido como guidelines, que foi criado pela Google para padronizar todas as suas interfaces gráficas. Atualmente essa linguagem de design também é utilizada no Chrome e aplicativos web da Google. Então, se você já gostou da beleza das interfaces de aplicativos da Google, provavelmente foi utilizado o Material. À primeira vista já vemos que uma diretriz do Material Design é a do minimalismo, tudo deve ser muito clean. Existem outras diversas particularidades e fundamentos no Material Design que devem ser seguidas, para se ter uma experiência uniforme. [ ![Desenvolvedor Android](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/android-seguranca.svg) Formação Desenvolvedor Android Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-android) ### Características Antes de mais nada *- apesar de parecer repetitivo -* precisamos frizar que o Material tem o princípio de ser simples, direto, chamativo, amigável e intuitivo, então cada elemento da interface deve se encaixar nessas características. Além disso, ele tem o propósito de que tudo deve ser como se fosse um mundo real no mundo digital: responsividade imediata a interação do usuário, objetos sólidos, utilização de sombras e luzes, simulação de profundidade, animação baseada em força, onde há aceleração e desaceleração, como acontece na vida real, materiais digitais que não podem passar uns dentro dos outros, etc. Algumas dessas características são: #### Formas A interface é baseada principalmente em cartões, tendo um visual sólido, bem geométrico. Por exemplo, são utilizados retângulos, grandes espaços em branco, grids e bordas suaves para aumentar a clareza do conteúdo. #### Cores O Material tem uma [paleta de cores própria](https://www.materialpalette.com/ "paleta de cores própria") bastante agradável e chamativa. #### Ícones Os ícones também são feitos a partir de formas geométricas e devem ser simples, para parecer tátil, ou seja, partindo do propósito acima de como se o usuário realmente estivesse no mundo real. De antemão precisamos saber que existem dois tipos: de produto e de sistema. O de produto é o ícone do aplicativo e o segundo se refere aos ícones internos do app, para identificação de funcionalidade. #### Tipografia O Material tem duas fontes padrão, chamadas Roboto e Noto. #### Imagens A utilização de imagens deve ser relevante ao que o usuário está consumindo, como por exemplo, para apresentar conteúdos e avatares, por exemplo. #### Animação O movimento das animações devem simular o movimento de objetos no mundo real, devem ser simples e rápidas, por outro lado, elas devem ser perceptíveis. Como não é algo tão simples de se aplicar ao seu layout, você pode utilizar APIs de terceiros que permitem essas animações de forma mais facilitada. Porém algumas já vem presente de forma nativa no Android. Dessa forma, no site do [Material](https://material.io/ "Material") encontramos os componentes e podemos utilizar os recursos disponibilizados para criarmos um produto utilizável e funcional. Cada página de componente inclui orientação sobre como eles devem ser usados, padrão de interação e especificações de design, fornecendo as informações necessárias para garantir que você acerte. - [ #Google ](https://www.treinaweb.com.br/blog/tag/google) - [ #material design ](https://www.treinaweb.com.br/blog/tag/material-design) Autor ![Marylene Guedes](//secure.gravatar.com/avatar/5b0ba52b3705f298802db58782656bbc?d=mm) ## Marylene Guedes Responsável pelo sucesso do cliente na TreinaWeb. Graduada em Gestão de Tecnologia da Informação pela FATEC Guaratinguetá, além de estudante de UX/UI. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/marylene-guedes) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/14165959/Widgets-Flutter-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 7 anos atrás ## [ Flutter: O que são widgets e qual sua importância ](https://www.treinaweb.com.br/blog/flutter-o-que-sao-widgets-e-qual-sua-importancia) Veja neste artigo o que são e qual a importância dos widgets para a criação de interfaces no Flutter. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/criando-um-drawer-navigator-com-flutter-400x280.png) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) 6 anos atrás ## [ Criando um drawer navigator com Flutter ](https://www.treinaweb.com.br/blog/criando-um-drawer-navigator-com-flutter) Veja neste artigo como criar um drawer navigator com Flutter. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/10/22110927/FRAMEWORKS-CSS-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ Os principais frameworks CSS ](https://www.treinaweb.com.br/blog/os-principais-frameworks-css) Neste artigo veremos alguns dos principais frameworks CSS do mercado e algumas de suas características. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/criando-um-bottomnavigationbar-com-flutter-400x280.png) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) 6 anos atrás ## [ Criando um BottomNavigationBar com Flutter ](https://www.treinaweb.com.br/blog/criando-um-bottomnavigationbar-com-flutter) Veja neste artigo como criar um BottomNavigationBar com Flutter. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/22111106/FLUTTER-CONFIGURANDO-FONTES-EXTERNAS-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 7 anos atrás ## [ Configurando fontes em projetos Flutter ](https://www.treinaweb.com.br/blog/configurando-fontes-em-projetos-flutter) Veja neste artigo como configurar fontes em projetos Flutter. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/04115610/capa-flutter-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 8 anos atrás ## [ Por que estudar Flutter? ](https://www.treinaweb.com.br/blog/por-que-estudar-flutter) Veja neste artigo as vantagens de se estudar o Flutter. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/01/22182140/TEMPLATES-GRATUITOS-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 8 anos atrás ## [ Templates gratuitos para aplicações administrativas ](https://www.treinaweb.com.br/blog/templates-gratuitos-para-aplicacoes-administrativas) Neste artigo veremos alguns templates para criação de aplicações administrativas. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/front_vs_back-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 10 anos atrás ## [ O que é front-end e back-end? ](https://www.treinaweb.com.br/blog/o-que-e-front-end-e-back-end) Os desenvolvedores de front-end e back-end se completam na maioria dos casos. Se faz indispensável saber o papel que cada um desempenha ou pode desempenhar. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/04/27171327/reinaldo-ferraz-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 8 anos atrás ## [ TW Entrevista 09: Reinaldo Ferraz ](https://www.treinaweb.com.br/blog/tw-entrevista-09-reinaldo-ferraz) Fizemos uma série de entrevistas chamada "TW Entrevista". O entrevistado de hoje é o Reinaldo Ferraz, especialista em Acessibilidade para a Web e que trabalha na W3C Brasil. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/leis-usabilidade-400x280.jpg) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 10 anos atrás ## [ Três leis para melhorar a usabilidade da sua aplicação ](https://www.treinaweb.com.br/blog/tres-leis-para-melhorar-a-usabilidade-da-sua-aplicacao) Uma breve introdução e alguns exemplos de como as leis abordadas neste post podem ser aplicadas para melhorar a usabilidade do seu produto/serviço. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/02215124/CHAT-ONLINE-1-400x280.png) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 7 anos atrás ## [ Porquê instalar um chat online pronto vale a pena ](https://www.treinaweb.com.br/blog/porque-instalar-um-chat-online-pronto-vale-a-pena) Confira neste artigo as vantagens de instalar um chat online. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/importancia-dos-testes-de-software-na-qualidade-do-sistema-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 4 anos atrás ## [ Estrutura de pastas e arquivos com React ](https://www.treinaweb.com.br/blog/estrutura-de-pastas-e-arquivos-com-react) Aprenda a criar uma estrutura de pastas e arquivos com React para ter uma aplicação com fácil manutenção e escalável. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **05h 10min 12s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58