Los iconos pueden considerarse una de las universalidades del diseño web; casi cualquier sitio web se beneficia de la adición de al menos algunos de ellos. Así que es tentador suponer que si esparces un puñado de estas pequeñas imágenes, tu trabajo está hecho. Pero hay mucho más que eso: los buenos iconos deben sentir que están integrados visualmente en el grupo de imágenes en el que están, así como en el diseño del sitio en general. Necesitan tener una claridad y un propósito conceptuales que vayan más allá de ser meros dulces visuales. Cualquier ícono que no sirva para un propósito establecido, o que no transmita el concepto correcto en sus imágenes, debe ser reconsiderado.
Por supuesto, hay espacio para la interpretación y la generalización con cualquier tipo de imagen, pero los iconos no son meras ilustraciones que se usan simplemente para dividir el espacio y agregar interés: son metáforas visuales que pueden invertir significado en un tema de una sola mirada; y como tales, son una herramienta poderosa para mejorar las experiencias de los usuarios.
¿Cómo se deben usar los iconos?
La iconografía puede ser un tema resbaladizo, ya que abarca muchos tipos de imágenes y puede cumplir muchos roles. Los iconos se pueden usar para muchos propósitos, pero los dos más comunes e importantes tienden a ser:
- Roturas visuales en el contenido: Haciéndolo más atractivo y legible. Esta aplicación se usa a menudo en el cuerpo del sitio web, en listas (como se ve arriba) u otros elementos pesados de texto.
- Referencia visual rápida para un concepto.: Este uso aparece con mayor frecuencia en elementos de navegación (como se ve arriba), y algunos, como el icono de lupa que significa una búsqueda, son tan comunes que ni siquiera necesitan un identificador de texto.
Es obvio que incluso estas dos categorías conforman un sinnúmero de formas y razones para usar íconos, por lo que es probable que los vea en casi todos los elementos del diseño web: encabezados, pies de página, barras de navegación, listas; prácticamente cualquier parte de un diseño puede mejorarse mediante la adición de iconos bien elegidos.
¿Qué hace un buen icono?
Si bien no es difícil ver cómo los íconos son un componente esencial para casi cualquier buen diseño de sitios web, a veces puede ser difícil reconocerlos cuando no están funcionando tan bien como deberían. Incluso un conjunto de iconos mal diseñado suele ser preferible a una pared de texto, pero un hermoso conjunto de iconos significativos, como los de arriba, puede hacer mucho más.
Si bien el diseño de iconos es un tema complicado que cambia con cada nueva situación, todavía hay algunas reglas esenciales que se aplican al diseño efectivo de iconos en todas las aplicaciones: las dos cosas fundamentales a considerar en cualquier sistema de iconos son cómo hacer que ambos iconos visualmente y conceptualmente eficaz.
¿Cómo hacer íconos visualmente efectivos?
Los iconos hacen un mejor trabajo agrupando el contenido relacionado y dirigiendo la atención hacia información importante si tienen relaciones coherentes y consideradas con los otros iconos del conjunto y con el diseño del sitio que los rodea.
Los conjuntos de iconos deben tener unificación visual
Un grupo de íconos que no tienen suficiente cohesión se ve mal, no importa cuán grandes puedan ser cuando se consideran individualmente. Hay muchos trucos que pueden crear un sentido de unidad, incluyendo:
- Usando el mismo color o combinación de colores, como se ve arriba.
- Ajuste todos sus iconos en la misma forma, como se ve arriba.
- Diseñe sus iconos con o sin líneas u otros atributos de borde, como se ve arriba.
- Agregar efectos, como gradientes, transparencias o sombras, como se ve arriba.
Para este fin, es importante considerar cómo adaptarás el estilo de tus ilustraciones para que se ajusten a los temas. Por ejemplo, es posible que desee representar sus iconos con un efecto 3D, en un ángulo. Pero, ¿qué pasaría si uno de los íconos del ejemplo anterior tuviera que representar una tarjeta de regalo? Un icono que represente una tarjeta casi seguramente tendría que ser bidimensional y así arruinaría el efecto que está buscando.
Cuanto más grande sea el conjunto y el alcance de los íconos, más diversidad deben tener
Aunque los iconos dentro de un conjunto deben tener una conformidad estrecha, puede doblar e incluso romper las reglas cuando se trata de grandes conjuntos de imágenes. Este sitio web, visto anteriormente, es un excelente ejemplo que trata el tema de la misma dimensionalidad, ya que decidieron abarcar las diferentes dimensionalidades de sus iconos. Las diferencias no son discordantes porque los dos tipos están separados, lo que los convierte en sistemas de iconos relacionados que funcionan bien juntos sin verse exactamente iguales.
Además de estos pequeños cambios, el sitio se desvía aún más en los otros íconos que encuentra, con algunos que tienen formas más grandes y complejas, y otros que replican el efecto 3D, pero en un estilo completamente diferente. Sin embargo, todos estos aún funcionan bien juntos porque conservan algunos elementos comunes, y se presentan en instancias que están lo suficientemente separadas para no abrumar al espectador.
Los iconos deben armonizar con el resto del diseño de su sitio
Por supuesto, hay una cantidad infinita de métodos que puede utilizar para hacer que sus iconos funcionen con sus otros elementos de diseño. Pero en un nivel básico, las dos formas más efectivas de hacerlo son:
- Íconos como punto de contraste frente al resto del sitio.: Este enfoque es particularmente efectivo si los íconos son de navegación, como estos enlaces de redes sociales (como se ve arriba), porque el contraste llama mucho la atención.
- Iconos de estilo para que estén integrados con y similares a otros elementos de diseño: Esta es una buena opción para imágenes que tienen más que ver con la claridad y el respiro visuales, y no necesitan el énfasis adicional que los elementos de navegación pueden tener, como se vio anteriormente.
¿Cómo se hacen los iconos conceptualmente eficaces?
Es importante que los íconos desempeñen el papel correcto para dirigir la atención y aumentar la estética de un diseño, pero es igualmente importante que también sean lógicos y coherentes en términos de los conceptos que comunican.
Los iconos deben ser entendidos fácilmente
Por un lado, las imágenes pueden ser difíciles porque las interpretaciones nunca son absolutas. Pero, por otro lado, son mucho más manejables que las palabras, porque si son lo suficientemente claras pueden trascender el lenguaje. Las directivas simples en las que abunda el diseño web son el vehículo perfecto para la comunicación universal, como se vio anteriormente.
Pero a veces los diseñadores intentan poner conceptos más complicados en la iconografía, y el efecto es confuso en lugar de aclarar, como se vio anteriormente. En estas circunstancias, es bueno dar un paso atrás y tratar de destilar el contenido a su esencia básica. Si no puede, eso significa que un icono no es la solución correcta para ese contenido. Uno de los mejores recursos para encontrar una iconografía inteligente que amplíe los límites de la comunicación pictórica es el diseño infográfico, donde el objetivo a menudo es hacer un ícono con cada información posible.
A medida que el diseño web crece y madura exponencialmente, también lo hace el diseño de iconos. Los conceptos que antes eran imposibles de representar a través de la iconografía se están estandarizando rápidamente y se están agregando a las herramientas de comunicación del diseñador web. Con este impulso hacia la universalidad, es una predicción segura de que los iconos se convertirán en una parte del diseño aún más importante de lo que ya son. Y teniendo en cuenta estos métodos esenciales de uso, podrá utilizarlos con todo el arte y la claridad que necesita para crear diseños hermosos, funcionales y efectivos para cualquier proyecto.