220+ Íconos inspirados en materiales para una gran experiencia de usuario

Los iconos siempre han sido importantes para mejorar la experiencia del usuario, no solo para navegar fácilmente por la información de su aplicación o en su sitio web, sino también para aumentar la legibilidad del contenido al resumirlo, hacerlo emocionante y llamar la atención del usuario sobre las partes más importantes de sus proyectos web.

Ahorran espacio en barras de herramientas y paletas y no es necesario traducir iconos para usuarios internacionales.

Mientras trabajaba en diferentes muestras y aplicaciones en Infragistics nuestro equipo de diseño siempre ha encontrado que los íconos de material de Google son excelentes para el diseño de interfaces de usuario, pero son limitados, especialmente en áreas como finanzas y salud. Entonces, después de algunas discusiones, decidimos ampliar el conjunto oficial de íconos de Material Design proporcionado por Google con un subconjunto no oficial de 5 categorías de íconos que serán valiosos no solo para nosotros, sino también para las excelentes personas que usan nuestros productos.

Ser diseñador de productos trabajar desde casa durante un par de meses debido a una pandemia mundial y cuidar de una familia al mismo tiempo no es tarea fácil. Especialmente cuando tienes un niño curioso de 6 años que quiere saber más sobre tu trabajo y por qué es más importante que jugar al Monopoly o al fútbol, por ejemplo.

Vi esto como una oportunidad para pasar el tiempo juntos y, dado que a mi hijo realmente le gusta dibujar, decidí lograrlo disfrutando de algunas horas de colaboración durante los próximos días para esbozar ideas para las cinco categorías con las que nuestro equipo de diseño ha decidido comenzar.

Nos sentamos juntos con lápices en las manos y traté de explicar algunos conceptos de diseño. Pensamos en metáforas adecuadas y objetos del mundo real, escribimos algunas de las asociaciones de posibles símbolos que teníamos en mente y luego elaboramos algunos prototipos de lo que más tarde se convertirían en los nuevos conjuntos de iconos inspirados en materiales que diseñé.

Mi hijo a menudo tenía preguntas y trataba de poner en práctica lo que escuchaba en sus bocetos. No me pregunten cómo expliqué el significado de algunos de los íconos como la fertilización y la anticoncepción, ya que la comprensión de un ícono se basa principalmente en la experiencia previa. No lo hice. Esos símbolos los guardé solo para mis ojos. Las mascarillas respiratorias y los virus eran mucho más fáciles de entender (y de discutir sin preguntas difíciles) debido a los tiempos difíciles que todos enfrentamos. La interacción con mi hijo me animó a desarrollar y validar aún más mis ideas. Ahora creo que si puedes hacer que los íconos sean memorables para un niño de 6 años, entonces has hecho un gran trabajo.

¡Fue un tiempo valioso y productivo!

El conjunto de iconos inspirados en Angular materiales de IgniteUI contiene más de 220 iconos para diversas situaciones que puedes encontrar en tus diseños. Lanzamos todos estos iconos distribuidos en 5 categorías:

Finanzas

El conjunto ampliado con iconos de finanzas cubre las necesidades generales relacionadas con la banca, el efectivo, los ahorros, las compras y el comercio electrónico.

Salud

El conjunto con íconos de salud cubre diferentes temas como cuidado dental, símbolos de medicina, instalaciones e instituciones médicas, problemas relacionados con la salud.

Logotipos

Este conjunto de iconos consta de algunos de los logotipos más populares que puede querer utilizar en sus diseños, como Apple Pay, Dropbox, Google Drive, PayPal, diferentes logotipos de navegadores, los logotipos de productos de Microsoft más recientes para Word, Excel, Outlook y más, todos encajan bien en el lenguaje Material Design.

Programación

Si estás buscando íconos de material relacionado con la programación como git commit, git compare, git merge, repositorio, inspect code, console y más, aquí es donde los encontrarás.

Medios de comunicación social

No podíamos irnos sin tener todo el material de redes sociales inspirado en íconos para Facebook, TikTok, Instagram, YouTube, LinkedIn, etc.

Cada icono está disponible como un archivo SVG debido a la amplia compatibilidad con los navegadores modernos y, además, hemos exportado los iconos como objetos JavaScript para que pueda importarlos en su aplicación Angular / React /Vue.