10 consejos para hacer diseños de iconos efectivos

Traducir las características 'icónicas' de un objeto en algo que sea metafóricamente significativo e instantáneamente reconocible no es una tarea fácil, ¡en especial cuando el diseño debe ser tan efectivo en 48x48 píxeles como lo es en 256x256!

Un icono memorable y funcional es hermoso, icónico, significativo y funcional. He enlistado diez consejos acertados sobre cómo crear iconos sobresalientes.

1. Captura las características del objeto

Uno de los aspectos más importantes del diseño de iconos es crear un icono que sea inmediatamente reconocible. Ya sea que trates de representar una rana azul o una lata de lápices, lo que intentas representar debe ser identificable a simple vista o el propósito del icono será saboteado. Y por supuesto, un icono debe ser "icónico" de la metáfora que representa.

En un tutorial de diseño de iconos de Smashing MagaZine, los diseñadores maestros de iconos Vu y Min Tran discuten su proceso detrás del gráfico del lápiz como parte de su Bright! Icon Set (Conjunto de iconos ¡Brillante!).

Dibujar un icono significa dibujar las características más representativas de un objeto para que pueda capturar la acción del icono o representar su concepto y matiz.
Como sabrán, generalmente hay tres tipos de lápices que puedes elegir:

1. Cuerpo en forma de prisma con un extremo brillante recubierto de esmalte.
2. Cuerpo en forma de prisma con un borrador sujetado al cuerpo del lápiz con un anillo de metal blanco brillante.
3. Cuerpo cilíndrico sin un borrador.

Usaremos el segundo tipo para el diseño del icono porque tiene todos los elementos necesarios, facilitando al espectador el reconocimiento de la imagen.

A veces es mejor elegir la forma más complicada de un objeto ya habrá menos elementos que compartan esas características únicas, lo que hará que el objeto específico que deseas representar sea más fácil de identificar. Hay muchos objetos cilíndricos con puntas puntiagudas además de los lápices (bolígrafos, marcadores, uñas) y en tamaños más pequeños pueden ser indistinguibles, pero solo un lápiz tiene un cuerpo en forma de prisma con un borrador sujetado a él por un anillo de metal blanco brillante. Así que esto lo convierte en "icónico".

2. Mantén los iconos simples y versátiles para que encajen en una variedad de proyectos

Para los creadores de iconos de DryIcons, un valor clave en su proceso de diseño es mantener sus iconos bastante simples y básicos en cuanto a estilo, en lugar de usar un estilo definitivo. Esto ayuda a que los iconos sean mucho más versátiles y utilizables en una serie de proyectos una vez se vendan como un paquete completo a los desarrolladores de software. Si tu icono se adapta a una gama más amplia de escenarios, tu mercado potencial será más grande.

En cuanto a las tendencias, creemos que es muy importante mantener las cosas simples y básicas, para que puedan cumplir su propósito inicial: encajar en tu proyecto como si hubiese sido creado para ser incluido en él. Esa es la única tendencia que seguimos.

3. Usa una fuente de luz consistente

Un consejo particularmente útil cuando se diseñan varios iconos para un paquete es mantener la consistencia entre ellos no sólo en el estilo sino también en los detalles como la fuente de luz. Aunque normalmente es una consideración secundaria, cualquier inconsistencia de un icono en la manada podría afectar seriamente a la calidad general de los iconos.

En este resumen de los iconos de Windows Vista, puedes observar cómo la fuente de luz ha cambiado entre los sistemas operativos, pero es consistente con todos los iconos de cada conjunto.

Las sombras en los objetos de los iconos de Vista son indicativas de la profundidad real y realista, tal como existen en cualquier objeto del mundo real. Los iconos de Vista no tienen las sombras planas de la parte inferior derecha que están predeterminadas en los iconos de Windows XP. La fuente de luz también es totalmente diferente en los iconos de Vista. Todos los objetos están ahora orientados directamente hacia la fuente de luz. Desde Windows 95 a Windows XP la fuente de luz en todos los iconos siempre provenían de la parte superior izquierda y los objetos se giraban en sentido contrario a las agujas del reloj, lejos de la fuente de luz. La colocación e iluminación de los iconos de Vista será completamente opuesta en comparación con los iconos de los sistemas Windows XP y anteriores.

4. Crea iconos en formato vectorial (Argumento 1)

A menudo los iconos deben ser utilizados en una variedad de tamaños, así que puedes aprovechar al máximo la naturaleza escalable de los gráficos vectoriales para crear un diseño que luzca genial y pueda ser utilizado para múltiples propósitos.

Lo que es más, gracias a los paquetes de software vectorial como Adobe Illustrator, cada forma, gradiente y trazo que compone el icono puede ajustarse o cambiarse en cualquier momento, a diferencia de un diseño basado en píxeles que deberás redibujar si deseas hacerle cambios.

Este excelente tutorial de diseño de iconos de VECTORUTS aborda el proceso de cómo se puede crear un gráfico impresionante usando las formas y gradientes básicos de Illustrator.

5. No crees iconos en formato de vector (Argumento 2)

Por el contrario, los gráficos vectoriales no son siempre la mejor opción para los diseñadores de iconos. Dado que muchos iconos requieren escalas muy pequeñas, los gráficos vectoriales a menudo no logran reproducir una representación nítida cuando se rasterizan. En esos casos, redibujar completamente el icono en un número de tamaños especificados da el mejor resultado.

Los diseñadores de interfaces web de Firewheel Design destacan este enfoque en su discusión de mapa de bits vs. vector:

Cuando se toma una imagen vectorial, originalmente dimensionada en 24x24 y se reduce a 16x16, las proporciones relativas no coinciden. No hay manera de que puedas distribuir uniformemente 24 píxeles de información en 16 píxeles de espacio (recuerda que no existe la mitad de un píxel). Así que la imagen se desenfocará.
Tampoco hay forma de que puedas escalar uniformemente 24 píxeles de información en 32 píxeles de espacio. Una vez más, y otra vez, la imagen se desenfocará.

Además, si tomas esa misma imagen vectorial, originalmente de 24x24 y la escalas a 48x48, duplicarás las proporciones. No tendrás líneas de un píxel. tendrás líneas gruesas de 2 píxeles. Si lo escalas a un tamaño mayor (digamos a 96x96), esas líneas se vuelven aún más gruesas.

6.Considera las diferencias culturales

Al igual que en el punto número uno, donde mencionó que es crucial capturar las características "icónicas" de un objeto, también es importante recordar que puede haber enormes diferencias culturales en el reconocimiento de los objetos cotidianos.

Turbomilk discute esto en su útil resumen de 10 Errores en el diseño de iconos con el ejemplo de un buzón. Lo que podría ser la forma y el color reconocidos de un buzón en un país, podría ser totalmente erróneo para otro.

Siempre hay que tener en cuenta las condiciones en las que se utilizará tu icono. Un aspecto importante aquí son las características nacionales. Las tradiciones culturales, el entorno y los gestos pueden diferir radicalmente de un país a otro.

Usa imágenes universales que la gente reconozca fácilmente. Evita centrarse en un aspecto secundario de un elemento. Por ejemplo, para un icono de correo, un buzón rural sería menos reconocible que un sello postal.

Nota: presta especial atención a esta regla cuando diseñes iconos basados en señales de advertencia y de tráfico, que difieren en cada país.

7. Usa combinaciones de colores fuera de lo común

Si creas un icono como un gráfico soso presentado en forma circular, es probable que se pase desapercibido. Usar colores fuertes y una forma interesante que refuerce el objeto ayudará a que tu icono se destaque. Recuerda que los iconos rara vez van a mostrarse en un fondo monocolor... en la mayoría de los casos será todo lo contrario, así que tendrán que sobresalir. También considera la posibilidad de utilizar el brillo y el sombreado para crear un efecto final más dinámico.

Jasper Hauser, el diseñador detrás del icono de Camino, toca este tema en una entrevista en la que habla de "¿Qué hace que un buen diseño de icono sea bueno?"

Básicamente hay dos aspectos que son la base de un buen icono: 1) la forma, y 2) el uso del color. Si miras el icono de Appzapper verás que 1) tiene una forma original, y 2) utiliza colores irregulares y una combinación de colores irregular. Hacer un círculo azul no resaltará.

8. Diseña los iconos para que sirvan tanto en formatos grandes como en pequeños

Ya se ha mencionado que los diseñadores de iconos necesitan acomodar las pequeñas escalas en sus creaciones de iconos. Sin embargo, con el desarrollo de la tecnología, los diseñadores también deben tener en cuenta el uso de los iconos a una escala mucho mayor que la estándar. ¡Un ejemplo puedes observarlo en Windows Vista, donde los iconos pueden ser escalados hasta 256px de altura!

En una entrevista con Brian Brasher, un artista de Firewheel Design, se le preguntó:

John Marstall: ¿Cuál es tu opinión sobre el cambio a iconos más grandes y la independencia de la resolución?

Brian: Iconos más grandes significan más detalles, lo que significa una experiencia de interfaz gráfica más rica, así como la eliminación de un montón de restricciones que un fabricante de iconos ha puesto sobre sí mismo para hacer una imagen legible. Desafortunadamente, eliminar esas restricciones significa que muchos de los iconos que se ven muy bien a tamaño completo, se verán fangosos y horribles a 32x32 y menos. Una espada de dos filos. Habrá que hacerse sacrificios.

9. Planifica cuidadosamente tu proceso de diseño

El esbozo es un proceso común en cualquier aspecto del diseño y sigue siendo relevante en el diseño de iconos. Desplegar una gama de ideas en papel realmente ayuda a desarrollar un producto conciso que se ajusta a los requisitos de su propósito. Debido a que el diseño de un icono debe ajustarse a un conjunto definido de proporciones y dimensiones, sin dejar de ser "icónico" e inmediatamente reconocible, la planificación anticipada es increíblemente importante.

Michael Matas, un diseñador gráfico que ha creado iconos para la plataforma Mac OS X comparte sus propias prácticas de trabajo:

Siempre empiezo en mi pizarra. Intento crear metáforas buenas y claras para el icono. Esbozo diferentes ideas y normalmente termino cubriendo toda la pizarra. Cuando se me ocurre una buena metáfora, empiezo a esbozar la disposición del icono y el ángulo desde el que lo voy a dibujar. Hago una búsqueda de imágenes en Google y en la búsqueda de imágenes de Watson y trato de encontrar buenas imágenes para el objeto que estoy dibujando. Descargo cualquier cosa que parezca decente y las abro todas en Photoshop. Creo un nuevo archivo de Photoshop para dibujar el icono y rodear la ventana con las imágenes que he descargado de la web. Utilizo las imágenes de la Web para ayudarme a tener una idea de cómo se ve la textura y la forma. Pero si puedo, siempre trato de mirar objetos reales para inspirarme.

10. Genera una interesante pero clara metáfora para el icono

El trabajo de un icono es representar una acción o idea en forma de un símbolo gráfico. Por lo tanto, las metáforas juegan un papel crucial en la traducción de esa acción o idea instantáneamente al usuario. Al encargar un conjunto de nuevos diseños de iconos para Macinstruct, el equipo contempló una serie de metáforas para representar la dificultad de sus tutoriales en línea:

Tal vez los iconos más difíciles de decidir fueron nuestros medidores de tutoriales. Necesitábamos una forma de clasificar la dificultad de nuestros tutoriales, y queríamos una forma realmente creativa y efectiva de mostrarlo. Después de un par de días de lluvia de ideas, se nos ocurrieron las siguientes ideas:Termómetros:

• Termómetros: Los tutoriales fáciles son fríos, los tutoriales medios son medios y los tutoriales difíciles son calientes.
• Semáforos: Verde para fácil, naranja para medio y rojo para difícil.
• Cinturones de karate: Cinturones blancos, naranjas y negros, como niveles de habilidad de karate.
• Rompecabezas: Un rompecabezas con una pieza a un lado. Las piezas más pequeñas equivalen a las más difíciles.
• Temas de aviación: Gafas para fácil, casco de cuero viejo y gafas para medio, y casco de piloto de caza y máscara de oxígeno para difícil.
• Imágenes de ingeniería: Un manual y una placa de circuito, una placa de circuito y algunas herramientas, y un osciloscopio.

Al final, eliminamos todas estas ideas por una ofrecida por nuestro propio Ric Getter. ¡Todos estuvieron de acuerdo en que usar protectores de bolsillo para indicar la dificultad era una gran idea!