Casi todos los diseñadores están pensando en el diseño de aplicaciones en estos días. Una de las características más pequeñas de cada aplicación es el ícono utilizado para representarlo en la pantalla de cada dispositivo móvil y en las tiendas de aplicaciones. Diseñar un gran icono es algo más que poner un logotipo en una caja. Necesitas algo que se destaque entre todos los demás íconos de aplicaciones que hay.
Un buen ícono se puede usar de varias maneras: para aplicaciones, redes sociales e incluso en proyectos impresos más pequeños o tarjetas de presentación. Y todo lo que necesita es un poco de diseño y planificación.
1. Haz que sea fácil de leer
Un icono debe ser fácil de leer. (Y no estamos hablando de texto). La legibilidad visual es clave.
El icono debe incluir un elemento visual que sea altamente reconocible debido a la marca o porque es fácil de entender. Piense en los iconos en el escritorio de su computadora, por ejemplo. Usted sabe dónde se ubican las cosas debido a la naturaleza simple de los íconos: los documentos se almacenan en carpetas, la música se reproduce desde un botón en forma de una nota musical y las imágenes se almacenan en una ubicación que parece una foto Polaroid.
Cuando se trata de legibilidad visual, la marca es una parte importante de la consideración. Las grandes marcas de los hogares a menudo tienen íconos que son parte de su logotipo o una imagen icónica. Las personas tienden a reconocer estos elementos de inmediato, incluso en tamaños pequeños. Esto puede ser un poco más difícil para las marcas nuevas o más pequeñas o los conceptos de iconos y los diseñadores pueden optar por utilizar otras técnicas para lograr un impacto óptimo.
2. Piensa en el icono, no en la imagen
Un icono no es una foto en una caja. Un icono puede incluir una imagen, pero también puede ser una representación de texto, marca de registro o combinación de esos elementos.
Solo necesita ser altamente visual y reconocible. La mayoría de los logotipos no incluyen fotografías reales, pero son una representación más gráfica de una idea. (Este concepto se enfatiza por la necesidad de crear un ícono basado en vectores).
Una imagen también puede ser difícil de leer en tamaños pequeños y perderse en un mar de otros íconos en el teléfono u otro dispositivo de un usuario. Una representación más gráfica a menudo puede tener más peso visual.
El ícono de la aplicación móvil para los grandes almacenes de Macy's es un buen ejemplo de esto. La gran estrella blanca en el centro de una caja roja es fácil de identificar. El ícono varía del tratamiento estándar del ícono de firma de la compañía en que el color se invierte para agregar énfasis al ícono. Es probable que un fondo rojo se destaque más que uno blanco contra una variedad de fondos de pantalla de usuario.
3. Evita las palabras
Una cosa que no verás en los íconos es el uso de palabras. Simplemente no hay suficiente espacio para un icono que está lleno de cosas para leer y comprender.
Como regla general, evite el texto por completo a menos que sea parte de su logotipo. Incluso el texto que forma parte de un logotipo debe considerarse cuidadosamente antes de utilizarlo en el diseño del logotipo principal.
El icono debe estar diseñado de tal manera que cree identidad sin palabras. Además, recuerde cuántos iconos se utilizan realmente en contexto para los dispositivos en los que aparecen. La mayoría incluye una línea de texto de descriptor debajo del bloque de iconos real.
El icono de Design Shack, por ejemplo, es uno que usa una sola letra? D? Con tratamientos de color y tipografía acordes con la web. Esta marca unificada y una letra fácil de leer crean un vínculo visual y una conexión, sin palabras.
4. Usa colores vibrantes
¿Quieres que tu icono se destaque? Ir negrita con el color. Una elección de colores vibrantes lo ayudará a destacar su aplicación en una variedad de fondos y atraerá la atención de los usuarios.
Lo último que desea 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 de cielo y azul marino, sea un color que probablemente querrá evitar porque muchos otros iconos lo usan.
Si el azul es el logotipo principal o el color de su marca, intente combinarlo con algo más brillante para el impacto. Considere un nuevo neutral? como el verde lima, u opta por un tono de temporada como el naranja brillante en el otoño o el rosa brillante en la primavera.
5. Desarrollar un símbolo o logotipo simple
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 fragmento de un logotipo o imagen.
Solo necesita ser agudo y memorable. Más marcas están incorporando símbolos icónicos en sus marcas y logotipos estándar para crear una conexión completa entre iconos más pequeños y proyectos de diseño más grandes.
Piensa en la aplicación de mensajería y para compartir fotos de Snapchat. El símbolo fantasma se ha vuelto 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 una imagen independiente en una cartelera. Este es un buen ejemplo de un símbolo que funciona.
6. recuerda la escala
Mientras que la mayoría de nosotros pensamos en los íconos como esas pequeñas cosas en nuestros teléfonos o computadoras de escritorio, un ícono no siempre es pequeño. Debe diseñarse de manera que se pueda usar independientemente del tamaño.
Esto es especialmente importante debido al panorama digital en constante cambio, a la aparición de más pantallas de retina y porque diferentes plataformas y dispositivos pueden representar iconos en diferentes tamaños.
Se construyó grande y luego se redujo.
7. Crear en un formato vectorial
Cuando se trata de escala y tamaño, el formato también es una consideración importante. Es necesario crear un icono utilizando un diseño basado en vectores.
Tener una imagen vectorial le dará la libertad de hacer cambios y guardar el ícono para una variedad de dispositivos, tamaños y vistas sin crear muchas imágenes individuales. Debido a que la realidad es que necesitará múltiples versiones de un ícono dimensionado para una variedad de proyectos.
El beneficio del vector es la flexibilidad. Pero hay una trampa. Para muchas aplicaciones o plataformas, es probable que tenga que guardar una copia en un formato no vectorial para cargar.
8. Piense fuera de la caja de diseño
En los últimos meses ha habido una gran cantidad de iconos que utilizan fondos de un solo color con un icono blanco, técnicas de diseño plano y largas sombras. Si bien estas tendencias pueden ser muy divertidas, no se atasque dentro de la caja de diseño. Haz algo diferente con tu icono.
Si todos los demás están trabajando con bordes cuadrados, considere algo más redondeado. Agrega un toque de textura al fondo para resaltar todo el color plano. No sientas que debes modelar tu ícono en lo que hacen los demás.
9. Hazlo monocromo
Hay un pequeño truco divertido que los diseñadores han usado durante años para probar la efectividad de los diseños a pequeña escala: hacer que sea monocromo. Si su diseño comunica el mismo mensaje con o sin color, probablemente funcione. Si el icono necesita color para ser leído, siga trabajando en las revisiones.
Personalmente, comienzo casi todos los proyectos de diseño en blanco y negro y luego, luego, empiezo a agregar color. Es el boceto de un concepto informático. Si lo dibuja en un papel y funciona antes de que realmente comience a agregar color, la idea probablemente tenga un marco sólido.
10. piensa en la plaza
Tu ícono y cualquier parte dentro del marco cuadrado también deben encajar perfectamente. Esto no significa que el diseño o la imagen tengan que ser exactamente de forma cuadrada, sino que la relación de aspecto básica para cada icono tiene la misma altura y anchura.
Entonces, si tiene un símbolo que es super vertical u horizontal, necesitará una forma de llenar el espacio a su alrededor para que no se pierda en el fondo. Opte por un concepto que ocupe una parte significativa de un espacio que será mayormente cuadrado. (Incluso un icono circular redondeado tiene igual altura y anchura).
Conclusión
Puede sonar cliché, pero la clave para un buen diseño de icono es ser? ¿bien? icónico. Es así de simple.
Diseño con simplicidad, color y reconocimiento visual en mente. Piense en las interfaces y las tendencias actuales para que el diseño se ajuste a los estándares. (No diseñaría un icono skeuomorphic para una aplicación móvil de iOS en estos días, ¿verdad?) Y diviértase; un icono es la puerta de acceso de un usuario a su interfaz digital.
Fuentes de imagen: Ash Kid, Casey Fleser, Roland Tangalo, Gustavo da Cunha Pimenta y Microsiervos Geek Crew.