220+ Ícones inspirados em materiais para um ótimo UX

Os ícones sempre foram importantes para aprimorar a experiência do usuário, não apenas para navegar facilmente pelas informações em seu aplicativo ou em seu site, mas também para aumentar a legibilidade do conteúdo, resumindo-o, tornando-o empolgante e chamando a atenção do usuário para as partes mais importantes de seus projetos da web.

Eles economizam espaço em barras de ferramentas e paletas e não há necessidade de traduzir ícones para usuários internacionais.

Ao trabalhar em diferentes amostras e aplicativos na Infragistics nossa equipe de design sempre achou os ícones de materiais do Google ótimos para o design da interface do usuário, mas meio limitados, especialmente em áreas como Finanças e Saúde. Então, depois de algumas discussões, decidimos estender o conjunto oficial de ícones do Material Design fornecido pelo Google com um subconjunto não oficial de 5 categorias de ícones que serão valiosos não apenas para nós, mas para as grandes pessoas que usam nossos produtos.

Ser designer de produto trabalhando em casa por alguns meses devido a uma pandemia mundial e cuidar de uma família ao mesmo tempo não é tarefa fácil. Especialmente quando você tem um menino curioso de 6 anos que quer saber mais sobre seu trabalho e por que ele é mais importante do que jogar Banco Imobiliário ou futebol, por exemplo.

Vi isso como uma oportunidade de passar o tempo juntos e, como meu filho gosta muito de desenhar, decidi conseguir isso desfrutando de algumas horas colaborativas durante os próximos dias para esboçar ideias para as cinco categorias com as quais nossa equipe de design decidiu começar.

Sentamos juntos com lápis nas mãos e tentei explicar alguns conceitos de design. Pensamos em metáforas adequadas e objetos do mundo real, escrevemos algumas das associações para possíveis símbolos que tínhamos em mente e, em seguida, elaboramos alguns protótipos do que mais tarde se tornaria os novos conjuntos de ícones inspirados em materiais que eu projetei.

Meu filho muitas vezes tinha perguntas e tentava implementar o que ouvia em seus esboços. Não me pergunte como expliquei o significado de alguns dos ícones, como fertilização e contracepção, já que a compreensão de um ícone é baseada principalmente em experiências anteriores. Eu não fiz. Esses símbolos eu guardei apenas para meus olhos. Máscaras respiratórias e vírus eram muito mais fáceis de entender (e discutir sem perguntas difíceis) por causa dos tempos desafiadores que todos enfrentamos. A interação com meu filho realmente me encorajou a desenvolver e validar minhas ideias ainda mais. Agora acho que se você pode tornar os ícones memoráveis para uma criança de 6 anos, então você fez um ótimo trabalho.

Foi um tempo valioso e produtivo!

O conjunto de ícones inspirado em materiais do IgniteUI para Angular contém mais de 220 ícones para várias situações que você pode encontrar em seus designs. Estamos lançando todos esses ícones distribuídos em 5 categorias:

Financiar

O conjunto estendido com ícones de finanças cobre as necessidades gerais relacionadas a bancos, dinheiro, poupança, compras e comércio eletrônico.

Saúde

O conjunto com ícones de saúde abrange diferentes tópicos como atendimento odontológico, símbolos de medicamentos, instalações e instituições médicas, questões relacionadas à saúde.

Logos

Este conjunto de ícones consiste em alguns dos logotipos mais populares que você pode querer usar em seus designs, como Apple Pay, Dropbox, Google Drive, PayPal, logotipos de navegadores diferentes, os logotipos de produtos mais recentes da Microsoft para Word, Excel, Outlook e muito mais - todos se encaixando bem na linguagem Material Design.

Programação

Se você estiver procurando por ícones de materiais relacionados à programação, como git commit, git compare, git merge, repository, inspect code, console e muito mais - é aqui que você os encontrará.

Redes sociais

Não poderíamos fugir sem ter todo o material de mídia social inspirado em ícones para Facebook, TikTok, Instagram, YouTube, LinkedIn, etc.

Cada ícone está disponível como um arquivo SVG devido ao amplo suporte em navegadores modernos e, além disso, exportamos os ícones como objetos JavaScript para que você possa importá-los em seu aplicativo Angular / React / Vue.