Diseñar iconos puede ser muy divertido. Pero una vez que tienes un buen set, ¿qué haces con ellos?
Los íconos no son solo enlaces en miniatura para Facebook o Instagram, sino que pueden ser señales totalmente interactivas que ayudan a los usuarios a lograr un diseño y proporcionan una chispa visual adicional. Los iconos pueden ser pequeños o grandes, en blanco y negro o en colores, planos o intrincados. No importa qué estilo le atraiga, el uso efectivo de los iconos puede mejorar la usabilidad y el valor estético de casi cualquier proyecto de diseño.
1. Añadir interés visual
No todas las imágenes van a ser un paisaje impresionante. A veces las imágenes se quedan cortas.
La iconografía divertida puede ayudar a agregar más interés a estas fotos poco interesantes. Use íconos para mejorar el contenido de la foto, proporcionar un poco de información adicional y proporcionar una señal de interacción.
Tome el ejemplo anterior para una clínica dental (es cierto, no es el concepto visual más interesante). El diseño es fresco, brillante y atractivo. El icono simple al lado de la cara es una nueva versión de la idea de la bombilla. - Tenga en cuenta los pequeños dientes. El equilibrio entre la parte luminosa de la pantalla de la izquierda y el ícono blanco brillante también ayuda a llamar la atención sobre el diseño. El resto del sitio utiliza otros pequeños iconos para la navegación.
2. Crear interacción
Los iconos no tienen que encajar en ubicaciones específicas para fomentar la interacción del usuario. (Demasiadas plantillas utilizan la combinación de icono / texto de tres columnas en el desplazamiento.
Los iconos pueden ser el elemento que impulsa la interactividad. Combine la iconografía y el desplazamiento de paralaje para que los elementos se muevan por la pantalla. Los iconos de capas con imágenes u otro fondo para crear un elemento que es un poco inesperado.
Boone Selections crea una escena de viaje para sus vinos utilizando la iconografía de una manera que hace que quieras desplazarte. El ícono del avión viaja en un avión siguiendo las flechas en la pantalla (que reaccionan al desplazamiento). Cada icono de arte lineal se representa como un dibujo a medida que el usuario se desplaza a esa parte de la pantalla. Los movimientos son simples, clásicos y altamente efectivos.
3. Usa la animación
Nadie ha dicho nunca que los iconos tienen que ser elementos estáticos. Animalos!
Pero no te vuelvas demasiado loco. Las mejores animaciones de iconos se relacionan con el contenido del propio icono. Los movimientos no deberían ser demasiado rápidos porque pueden ser un poco desconcertantes. Los movimientos no deben ser demasiado lentos porque los usuarios pueden pasarlos por alto. Hay un punto dulce en el medio donde el movimiento de iconos proporciona un poco de placer.
Sweet Punk hace esto brillantemente. ¿El ícono es la misma bombilla? Que se usa en todas partes, pero con un sello de personalización. Tenga en cuenta el interior de la bombilla, es una llama. Luego hay una acción divertida mientras se desplaza la bombilla con un remolino de ideas. Además, el patrón circular alrededor de la bombilla se mueve suavemente y parece responder a los patrones de mouseover.
4. Crear grupos de iconos
Los grupos de formas interesantes, bocetos o iconos hechos a mano de otra manera pueden hacer una imagen visual interesante. El concepto se muestra comúnmente en los sitios web que distribuyen paquetes de iconos (como el de arriba), pero tiene una aplicación más amplia.
Considere filas de íconos (juegue con usarlos de bajo o de gran tamaño para un mayor impacto) cuando no tenga una buena imagen. Los íconos pueden funcionar como enlaces o solo imágenes que se mantienen por sí solos. Los clusters pueden incluir solo dos o tres iconos o tres veces más. Deja que tu contenido conduzca ese proceso de toma de decisiones.
Lo bueno de usar iconos agrupados es que realmente puede pensar fuera de la caja y hacer algo creativo. El otro bono? Incluso puede comenzar con un paquete de íconos si lo desea y personalizar los íconos para hacerlos propios. Cualquiera de las dos opciones puede ser muy divertida y darle una manera de probar algo totalmente diferente.
5. Combinar con elementos de moda
Los íconos deben ser solo una parte de una estrategia de diseño para un proyecto. Piense en su contenido y empareje la iconografía con otro elemento moderno para crear una estética moderna.
Lo bueno de usar iconos es la flexibilidad de estilo. Aparentemente, los íconos vienen en todas las formas, desde el arte lineal, desde estilos basados en bocetos hasta diseños planos recortados para elaborar piezas de arte en miniatura. Una vez que se haya asentado en un estilo de diseño para un proyecto, cree un conjunto de iconos que coincidan con ese tono visual.
El sitio web para una Historia de los Iconos hace esto muy bien. El sitio muestra cómo los estilos de íconos han evolucionado a lo largo de los años, lo cual es un caso de estudio genial en sí mismo si busca más inspiración, pero cada ícono se coloca dentro de un elemento contenedor en un patrón de estilo de diseño de material, con capas bastante planas, táctiles. Movimientos, tipografía limpia y color brillante.
6. Ponle un toque caprichoso
Para ciertos iconos, hay diseños estándar que querrás usar para que los usuarios sepan exactamente qué hacen esos elementos. Esto puede incluir iconos para enlaces de redes sociales, búsqueda, carritos de compras y flechas de navegación. Nunca debes sacrificar la usabilidad por un nuevo diseño.
Pero puedes poner tu propio toque caprichoso en estos estilos de iconos estándar. Cambie el color, modifique la forma o incluso vuelva a dibujar los iconos en su estilo. El truco consiste en hacer algo que se sienta único a la vez que mantiene el reconocimiento visual para que los usuarios no cuestionen qué significa el ícono.
Los cambios simples pueden recorrer un largo camino. Este tipo de ajuste puede ayudar a que los elementos comunes se conviertan también en parte de su diseño e historia visual.
Little Puds & Co. hace esto de una manera absolutamente encantadora. Los iconos comunes en la esquina superior son identificables, pero adoptan el color de la marca del sitio web. Los iconos parecen un poco más suaves de lo que lo harían en las paletas de colores normales de Facebook e Instagram y parecen coincidir con el estilo más caprichoso y infantil que se usa en todo el diseño.
7. Crea bocetos personalizados
Los iconos pueden ser lienzos de arte en miniatura en sí mismos.Si bien las tendencias en iconografía se inclinan más hacia las representaciones súper planas y lineales, los bocetos detallados pueden proporcionar una excelente opción personalizada que es la suya.
Cada conjunto esbozado a mano será diferente. No hay una manera real de categorizarlos, excepto encontrar algo que puedas poseer. Los íconos dibujados a menudo son parte de la identidad de la marca que los usa.
Infinity Foods utiliza este estilo maravillosamente en todo su diseño. (Realmente debería hacer clic para ver el conjunto completo de iconos). El estilo del boceto comienza con el logotipo y se utiliza el mismo estilo de lápiz detallado para cada elemento del icono en el diseño.
Conclusión
Si bien los iconos pueden ser uno de los elementos menos pensados en un proyecto de diseño, pueden ser uno de los más interesantes. Una buena iconografía puede reunir un proyecto de una manera que le dé ese toque de refinamiento y delicadeza.
Lo bueno de trabajar con iconos es que un buen conjunto basado en vectores se puede utilizar de varias maneras y en diferentes tamaños. ¿Interesado en capturar miles de íconos por un precio de suscripción de ganga? ¡Creative VIP te tiene cubierto!