10 Fragmentos de Código de Design de Material Úteis

A mania do design de materiais está tomando o mundo da web de assalto. Todo mês eu encontro novos sites rodando no estilo material usando frameworks ou kits de UI customizados.

Mas isso não é ruim, muito pelo contrário! Essa é uma maneira de simplificar seu processo de design trabalhando com tendências comprovadas que o Google reconhece como sua linguagem de design preferida.

Se você é grande no estilo de design de material, esses trechos de código são para você. Estes são apenas 10 dos meus favoritos que oferecem uma variedade de designs e componentes para escolher.

Tabela responsiva

Aqui está um trecho de design de material com um toque único. Esta tabela responsiva criada por Sergey Kupletsky na verdade hospeda outros links para trechos de design de material. Muito legal!

Isso é naturalmente criado usando técnicas de design de materiais, então a mesa deve se encaixar perfeitamente em seu próprio layout. Mas a parte mais difícil do design móvel é fazer mesas que funcionem em telas menores.

Eu acho que esse método é uma das melhores maneiras de lidar com isso. Seu código também permanece limpo, o que torna super fácil codificar, limpar e gerenciar, independentemente do tamanho da sua tabela.

Transições da IU do cartão

O desenvolvedor Ivan Villamil construiu este design de interface de usuário de cartão muito exclusivo com algumas animações bem loucas.

Dê uma olhada na página e tente clicar em qualquer um dos cartões. Você obterá um efeito animado exclusivo em que o conteúdo do cartão é animado sobre o contêiner e aparece à vista. É como algo que você esperaria encontrar em um aplicativo móvel, mas portado para a web!

Os efeitos de animação são perfeitos e mostram o quanto você pode fazer na web hoje. Sem mencionar que o estilo do material é perfeito para esta interface de usuário web / móvel combinada.

Login compacto

Eu vi alguns formulários de login muito legais ao longo dos meus anos como designer. Mas esse design maluco pode levar o bolo por seus recursos interativos e estilos únicos.

Ao clicar no ícone rosa brilhante no canto superior direito, você verá um campo de registro que aparece sobre a página. É muito original e cria uma interface verdadeiramente utilizável.

Então, qual é o problema? Isso usa muito JavaScript, então não é a solução mais simples em termos de código. Mas ainda é um excelente exemplo de design com recursos compactos.

Preencher Animação

Scott Kellum desenvolveu este intrigante layout de cartão de material que é preenchido automaticamente quando a página é carregada. Isso se desenvolve em uma grade onde você pode passar o mouse sobre cada cartão para ver os recursos do material design em ação.

Eu não posso dizer o quão útil isso é em um projeto direto ou o quanto você pode tirar disso. Mas este é um trecho divertido que mostra um design fora da grade para a web, misturando um toque de sabor material com animações flutuantes.

Botões Materiais BS4

Dos muitos modelos de Bootstrap disponíveis online, é melhor acreditar que alguns deles usam design de material. E esta caneta mostra todas as coisas legais que você pode fazer com o design de materiais no Bootstrap 4.

Realmente esta é apenas uma coleção de botões reestilizados na linguagem material do Google. Mas tudo é executado no mais novo framework BS4 para que você possa adicioná-los a qualquer página com Bootstrap.

Se você leva o Bootstrap a sério, dê uma olhada na versão mais recente para ver o que você pensa. Funciona muito bem como base para qualquer coisa, e isso é especialmente verdadeiro para sites de materiais.

Menu de seleção de design de material

Os menus de seleção suspensos são essenciais no design de formulários. Eles permitem que os usuários escolham entre um punhado de respostas sobre tópicos relevantes, como estados, países, idiomas e assim por diante.

Essa seleção de material design eleva o menu de seleção HTML comum a um nível totalmente novo.

Ele não depende do estilo de documento típico para escolher uma opção. Em vez disso, isso usa uma lista não ordenada com jQuery manipulando as animações e o processo de seleção. E eu tenho que dizer, essa coisa prega o estilo do material.

Sombras materiais

Google realmente empurra sombras para profundidade em sua documentação material. Isso é o que você verá nesta caneta, onde todos os círculos têm seus próprios efeitos distintos de sombra projetada.

Com as sombras, você pode designar a hierarquia dos elementos da página para que alguns apareçam na parte superior e outros na parte inferior. Ele cria uma ilusão de espaço na tela que é especialmente útil em telas sensíveis ao toque.

Um efeito bem legal e certamente algo que você pode copiar em seus próprios projetos.

IU do cartão meteorológico

O desenvolvedor Thomas Vallez criou este incrível cartão meteorológico rodando em puro HTML e CSS. Ele usa um efeito de fade-in simples no carregamento da página, mas a verdadeira beleza aqui é o estilo de design de material.

Tudo, desde as cores até as fontes e até o ícone do clima, todos contam com estilos de materiais naturais.

Você pode pegar este modelo e usá-lo para praticamente qualquer tipo de layout de cartão. É fenomenal e certamente um dos projetos mais diretos desta lista.

Guias de materiais

Aqui está um projeto interessante que se baseia na ideia de guias de design de materiais. Michael Richins criou esta caneta com algum JavaScript básico e algum conhecimento das diretrizes de design do Google.

As guias funcionam exatamente como você esperaria em outros dispositivos semelhantes, como smartphones ou tablets Android. Sem mencionar que essa coisa é executada em JavaScript simples , então você nunca precisa se preocupar com jQuery ou qualquer outra coisa.

Um efeito bem legal se você estiver procurando por abas no seu site. Apenas certifique-se de testar os estilos para ver se eles combinam naturalmente com sua página.

Clique em animação de resposta

O desenvolvedor Emmanuel Pilande criou esse efeito de resposta legal como uma maneira simples de replicar as microinterações materiais do Google.

Clique em qualquer lugar nas cartas de material para ver o efeito. E você pode aplicar isso a praticamente qualquer coisa, desde botões a contêineres de página ou campos de entrada.

Ele depende de algum JavaScript, mas também é simples de adicionar a qualquer projeto. Então, se você está procurando aquele visual de material au naturale , este é um ótimo trecho para salvar.