10 consejos para diseñar iconos que no apesten

Hoy en día, casi todos los diseñadores piensan en el diseño de aplicaciones. Una de las características más pequeñas de cada aplicación es el icono que se utiliza para representarla en la pantalla de todos los dispositivos móviles y en las tiendas de aplicaciones. Diseñar un gran icono es algo más que poner un logotipo en un recuadro. Se necesita algo que destaque entre todos los demás iconos de aplicaciones que hay por ahí.

Un buen icono puede utilizarse de muchas maneras: para aplicaciones, redes sociales e incluso en pequeños proyectos impresos o tarjetas de visita. Y todo lo que hace falta es un poco de diseño y planificación.

Explorar los activos digitales

1. Facilitar la lectura

Un icono tiene que ser fácil de leer (y no hablamos de texto). La legibilidad visual es clave.

El icono debe incluir un elemento visual que sea muy reconocible por la marca o porque es fácil de entender. Piense, por ejemplo, en los iconos del escritorio de su ordenador. Usted sabe dónde se encuentran las cosas gracias a la naturaleza simple de los iconos: los documentos se almacenan en carpetas, la música se reproduce desde un botón en forma de nota musical y las imágenes se almacenan en una ubicación que parececomo una foto Polaroid.

Cuando se trata de legibilidad visual, la marca es un factor importante. Las grandes marcas suelen tener iconos que forman parte de su logotipo o una imagen icónica. La gente tiende a reconocer estos elementos de inmediato, incluso en tamaños pequeños. Esto puede ser un poco más difícil para marcas o conceptos de iconos nuevos o más pequeños, por lo que los diseñadores pueden optar por otras técnicas para conseguir un impacto óptimo.

2. Piense en icono, no en imagen

Un icono no es una foto en un recuadro. Un icono puede incluir una imagen, pero también puede ser una representación textual, una logomarca o una combinación de esos elementos.

Basta con que sea muy visual y reconocible. La mayoría de los logotipos no incluyen fotografías reales, sino que son una representación más gráfica de una idea (este concepto se acentúa por la necesidad de crear un icono basado en vectores).

Una imagen también puede resultar difícil de leer en tamaños pequeños y perderse en un mar de otros iconos en el teléfono u otro dispositivo del usuario. Una representación más gráfica a menudo puede tener más peso visual.

El icono de la aplicación móvil de los grandes almacenes Macy's que aparece arriba es un buen ejemplo de ello. La gran estrella blanca en el centro de un recuadro rojo es fácil de identificar. El icono varía del tratamiento estándar del icono característico de la empresa en que el color se invierte para añadir énfasis al icono. Un fondo rojo probablemente destacará más que uno blanco contra una variedad de fondos de pantalla de los usuarios.

3. Evitar las palabras

Una cosa que no verás en los iconos es el uso de palabras. Sencillamente, no hay espacio suficiente para un icono lleno de cosas que leer y comprender.

Como regla general, evite por completo el texto a menos que forme parte de su logotipo. Incluso el texto que forme parte de un logotipo debe considerarse cuidadosamente antes de utilizarlo en el diseño principal del logotipo.

El icono debe diseñarse de tal manera que cree identidad sin palabras. Además, recuerde cuántos iconos se utilizan realmente en el contexto de los dispositivos en los que aparecen. La mayoría incluyen una línea de texto descriptivo bajo el bloque del icono propiamente dicho.

El icono de Design Shack, por ejemplo, utiliza una sola letra "d" con colores y tipos coherentes con el sitio web. Esta marca unificada y una letra fácil de leer crean un vínculo visual y una conexión, sin palabras.

4. Utilice colores vivos

Si quieres que tu icono destaque, apuesta por el color. Un color vibrante ayudará a que tu aplicación destaque en una gran variedad de fondos y llamará la atención de los usuarios.

Lo último que quieres de un diseño de icono es que se mezcle con todas las demás opciones disponibles. Esto hace que el azul -especialmente los tonos cielo y azul marino- sea un color que probablemente querrás evitar porque muchos otros iconos lo utilizan.

Si el azul es el color principal de su logotipo o marca, intente combinarlo con algo más brillante para causar impacto. Considere un "nuevo neutro", como el verde lima, u opte por un tono de temporada, como el naranja brillante en otoño o el rosa vivo en primavera.

5. Desarrollar un símbolo o logotipo sencillo

Es probable que tenga un logotipo para su marca, pero cuando se trata de iconos un símbolo también es importante. Un símbolo puede ser una simple representación gráfica o un fragmento de un logotipo o una imagen.

Cada vez son más las marcas que incorporan símbolos icónicos a sus marcas y logotipos estándar para crear una conexión plena entre los iconos más pequeños y los proyectos de diseño de mayor envergadura.

Pensemos en la aplicación de mensajería e intercambio de fotos Snapchat. El símbolo del fantasma se ha hecho tan reconocible que puede aparecer como el icono con el que los usuarios están familiarizados, en otras combinaciones de colores y formas, e incluso como imagen independiente en una valla publicitaria. Es un excelente ejemplo de un símbolo que funciona.

6. Recuerda Escala

Aunque la mayoría de nosotros pensamos en los iconos como esas cosas diminutas que aparecen en nuestros teléfonos u ordenadores de sobremesa, un icono no siempre es pequeño. Debe diseñarse de forma que sea utilizable independientemente de su tamaño.

Esto es especialmente importante debido al constante cambio del panorama digital, a la aparición de más pantallas retina y a que las distintas plataformas y dispositivos pueden representar los iconos en tamaños diferentes.

Constrúyelo a lo grande y luego redúcelo.

7. Crear en formato vectorial

Cuando se trata de escala y tamaño, el formato también es una consideración importante. Un icono debe crearse utilizando un diseño basado en vectores.

Tener una imagen vectorial te dará la libertad de hacer cambios y guardar el icono para una variedad de dispositivos, tamaños y viewports sin crear un montón de imágenes individuales. Porque la realidad es que necesitarás múltiples versiones de un icono de tamaño para una variedad de proyectos.

La ventaja del vector es la flexibilidad, pero hay un inconveniente: para muchas aplicaciones o plataformas, es probable que tenga que guardar una copia en un formato no vectorial para cargarla.

8. Piense más allá de los límites del diseño

En los últimos meses se han visto muchos iconos que utilizan fondos de un solo color con un icono blanco, técnicas de diseño plano y sombras largas. Aunque estas tendencias pueden ser muy divertidas, no te quedes atrapado dentro de la caja de diseño. Haz algo diferente con tu icono.

Si todo el mundo trabaja con bordes cuadrados, piense en algo más redondeado. Añada un toque de textura al fondo para que destaque sobre todo el color plano. No crea que debe modelar su icono según lo que hace todo el mundo.

9. Que sea monocromo

Hay un pequeño truco divertido que los diseñadores han utilizado durante años para comprobar la eficacia de los diseños a pequeña escala: hazlo monocromo. Si tu diseño comunica el mismo mensaje con o sin color, probablemente funcione. Si el icono necesita color para ser leído, sigue trabajando en las revisiones.

Personalmente, empiezo casi todos los proyectos de diseño en blanco y negro y más tarde empiezo a añadir color. Es el concepto de esbozo en ordenador. Si lo esbozas en papel y funciona antes de empezar a añadir color, es probable que la idea tenga un armazón sólido.

10. Think Square

El icono y todas las partes que se encuentren dentro del marco cuadrado también deben ser cuadrados. Esto no significa que el diseño o la imagen tengan que tener una forma exactamente cuadrada, sino que la relación de aspecto básica de todos los iconos debe tener la misma altura y anchura.

Así que, si tienes un símbolo que es supervertical u horizontal, necesitarás una forma de llenar el espacio a su alrededor para que no se pierda en el fondo. Opta por un concepto que llene una parte significativa de un espacio que será mayoritariamente cuadrado. (Incluso un icono redondeado y circular tiene la misma altura y anchura).

Conclusión

Puede sonar a tópico, pero la clave de un buen diseño de iconos es ser... bueno... icónico. Así de sencillo.

Diseña pensando en la sencillez, el color y el reconocimiento visual. Piensa en las interfaces y las tendencias actuales para que tu diseño se ajuste a los estándares (hoy en día no diseñarías un icono skeuomórfico para una aplicación móvil de iOS, ¿verdad?) Y diviértete; un icono es la puerta de entrada de los usuarios a tu interfaz digital.

Fuentes de las imágenes: Ash Kid, Casey Fleser, Roland Tangalo, Gustavo da Cunha Pimenta y Microsiervos Geek Crew.