10 trucos de diseño para crear excelentes íconos de aplicaciones
Los íconos de aplicaciones son lo primero que notan los usuarios cuando encuentran su aplicación. Con miles de millones de aplicaciones compitiendo por la atención en la tienda de aplicaciones, el ícono de una aplicación se ha convertido en un diferenciador importante que rompe el desorden y lleva a los usuarios a su aplicación. De hecho, son el primer punto de contacto con el que se encuentran sus usuarios. Por lo tanto, es extremadamente importante aprovechar esta experiencia de inmediato.
En esta publicación, sugeriré algunos trucos de diseño que pueden ayudarlo a crear íconos de aplicaciones geniales que pueden destacarse en la tienda de aplicaciones y posiblemente resaltar su aplicación entre otras que compiten por las instalaciones.
Antes de contarte los puntos, debes comprender que el propósito fundamental del ícono de una aplicación es desarrollar una conexión inmediata y crear señales cognitivas. Todo lo sugerido en este post se remonta fundamentalmente a lograr eso.
Estos son algunos de los trucos de diseño para crear excelentes íconos de aplicaciones.
La regla del 70%
Existe un consenso entre los diseñadores sobre el uso del 70% del espacio del icono para resaltar el objeto principal conectado a la aplicación. Un objeto puede ser cualquier cosa relacionada con la aplicación. Si está diseñando una aplicación de fotografía, el objeto puede ser una cámara o una lente. Para un juego, puede ser la cara de un personaje, etc.
En otras palabras, el objeto debe ocupar la mayoría (70%) del área del icono. La idea es desarrollar la cognición instantánea con los usuarios y hacer que naveguen a la página de la aplicación para ver la descripción. Una vez que aterrizan en la página de la aplicación que tiene una descripción, se vuelve mucho más fácil para usted adquirir al usuario.
Sin embargo, no basta con dejar más espacio para el objeto. Debe estar libre de desorden también. Solo entonces puede conectarse y crear una cognición más rápida, lo que nos lleva al siguiente punto.
Corta el desorden hasta que lo básico comience a desmoronarse
Siga cortando el desorden hasta que la idea fundamental del objeto dentro del ícono comience a surgir. En otras palabras, reduzca su ícono hasta un punto en el que el objeto en el ícono pase de ser sensible a no tener sentido. Cortar hasta que el objeto conserve su forma universal e identificable por la mayoría de las personas.
Por ejemplo, si está creando una aplicación para ocultar imágenes, es posible que se le ocurra un ícono de aplicación que tenga "llaves y candado" como objeto principal. Ahora, puede eliminar las sombras o los contadores y optar por un ícono completamente plano. Después Una vez hecho esto, puede volverse minimalista en el diseño, jugando completamente con colores para crear efectos 3D para la forma de "candado y llave" utilizada en el ícono.
Opaco sobre brillante y brillante sobre opaco
Lo siguiente que hace que el ícono de una aplicación se destaque es el uso apropiado del contraste. Los diseñadores a menudo emplean el contraste entre el objeto y el fondo del icono de la aplicación. Si puede ejecutar los dos pasos mencionados anteriormente, es posible que aterrice automáticamente aquí.
Crear contraste también tiene mucho que ver con los colores. Comience con una paleta de colores predeterminada en su mente y avance. Solo recuerda que la idea es crear vitalidad y contraste entre el color de fondo y los elementos del objeto. Si es un principiante en esto, puede consultar algunos diseños en Dribbble y descargar las paletas de colores de su elección.
Una vez que haya terminado con el corte final, puede crear 2-3 versiones con más blanco o negro en los colores. Ahora puede elegir el que le parezca adecuado a sus ojos. Después de iOS 7, se puso mucho énfasis en los colores frescos con tonos más fuertes de blanco.
No te dejes engañar por tu gran Mac
Una vez instalada en un dispositivo, el ícono de su aplicación se muestra en varias resoluciones. Para que parezca significativo incluso en su avatar más pequeño, uno debe diseñarlo teniendo en cuenta las proporciones. A menudo, los diseñadores trabajan en pantallas grandes de Mac en las que también se pueden descifrar hasta los detalles más pequeños. Sin embargo, cuando se prueba el mismo ícono en un teléfono inteligente con varios tamaños de íconos, los detalles se pierden.
Si está trabajando en una Mac y primero está creando la tienda de aplicaciones de íconos, puede darse el lujo de agregar algunos pequeños detalles. Pero tenga en cuenta que el ícono más pequeño destinado al menú de configuración es una imagen de 29x29px. Los detalles más finos, como textos pequeños u otros símbolos, no serán visibles en eso.
Lo mejor que puede hacer es tener en cuenta el tamaño y emplear formas y patrones fundamentales para hacer el trabajo. Adopte la simplicidad y concéntrese en un solo objeto. Preferiblemente una forma o elemento único que conserva sus contornos y detalles a pesar de la escala. De esta forma, su ícono se vería apropiado en todas las resoluciones sugeridas en las pautas dadas por Apple y Android.
Pruebe su ícono contra una gran variedad de fondos de pantalla
Los usuarios tienen gustos y preferencias variados que se reflejan en la elección de fondos de pantalla y temas en sus teléfonos inteligentes. Significa que el ícono de su aplicación tendrá que destacarse contra una miríada de colores. Por lo tanto, siempre es una buena idea probar la visibilidad de su ícono contra fondos de pantalla de siete colores básicos. Puede aumentar o disminuir la saturación de blanco/negro dentro de los fondos de pantalla que está utilizando para concluir una prueba satisfactoria.
Puede haber algunas situaciones en las que el fondo de pantalla interfiera con la visibilidad. Los fondos de pantalla como los selfies pueden carecer de colores uniformes y pueden interferir con la visibilidad del icono. No puede hacer mucho aquí, pero como dije, puede probarlos con los siete colores básicos para comenzar.
Decidir sobre la abstracción y hacer iteraciones.
Los diseñadores sufren un dilema constante entre la abstracción y la representación real del objeto principal dentro del icono. Con la aparición de íconos planos y IU, la era del peso se ha desplazado mucho hacia la abstracción, pero uno no puede simplemente eliminar la representación real de un objeto. Los objetos reales o los íconos skeuomorphic siguen siendo fuertes en la tienda de aplicaciones y hay razones válidas para que así sea.
Por ejemplo, si crea una aplicación para mejorar el sonido, puede dibujar un amplificador esquemórfico en el ícono de la aplicación en lugar de aplanarlo o crear un ícono de línea. Pero dado el hecho de que un amplificador no es un bien familiar, su cognición disminuiría si se aplanara. Para las cosas que son relativamente comunes y disfrutan de una familiaridad universal entre las masas (una cámara para una aplicación de fotografía), definitivamente puede obtener un ícono plano. Sin embargo, si la aplicación está conectada a algo oscuro, será mejor mantenerlo real o skeuomorphic.
Otra gran manera de llegar a un buen diseño de icono es hacer varias iteraciones con skeuomorphic y flat. Puedes tener en cuenta el segundo punto mientras lo haces. Realice varias iteraciones eliminando algunos detalles a la vez. Apílelos todos uno al lado del otro y decida cuál le gusta más y por qué.
Para juegos, identifica un personaje
Hacer íconos de juegos puede ser realmente divertido, ya que se pueden lograr muchas cosas creativas al hacer uno. En medio de eso, debes haber notado que los juegos a menudo tienen historias y personajes. Si nos atenemos a la regla de desarrollar la cognición con los usuarios, las caras de los personajes del juego en sí pueden hacer un gran trabajo. De hecho, esta es la razón por la que las caras de los personajes son tan comunes en los iconos de las aplicaciones de juegos.
Si está creando un juego, debe encontrar el personaje principal o un personaje que sea común en todos los niveles. Debido a la gran familiaridad del personaje con los jugadores, el personaje se puede utilizar para crear un fuerte recuerdo del juego. Y por la misma razón, también puede convertirse en el icono de la aplicación de su juego.
Puede elegir una paleta de colores y construir el ícono de su aplicación alrededor de ellos. Hablando francamente, se vuelve mucho más fácil si buscas una cara. Pero al mismo tiempo, es posible que deba agregar algunos efectos adicionales para que se destaque.
Paletas de colores consistentes y convenciones para íconos y UI
La interfaz de usuario de la aplicación tendrá un tema específico y el uso de ciertos colores. Es mejor emplear los mismos colores para diseñar el ícono también. También puedes hacer lo mismo con ciertos elementos que hayas implementado dentro de la interfaz de usuario y usarlos en el icono. Hacer eso hace que su diseño sea más uniforme y conduce a un mayor recuerdo y familiaridad de su aplicación entre los usuarios.
La creatividad salva el día
Ejecute una búsqueda de "aplicaciones para hacer" en Google Play y encontrará una cuadrícula llena de marcas de verificación. Sí, la mayoría de los diseñadores de aplicaciones de tareas pendientes solo pudieron crear una marca de verificación como ícono de su aplicación, un ícono común para tareas pendientes. Sin embargo, en medio de ese ruido, el ícono de Evernote se destaca cómodamente.
Resultados de búsqueda del término "aplicaciones para hacer". Observe que el ícono de Evernote se destaca entre otros.
La idea del ícono se deriva del hecho de que un Elefante nunca olvida. Se combina con una brillante ejecución de una oreja de elefante doblada que denota un bloc de notas. Diferencia a Evernote de inmediato de otras aplicaciones de tareas pendientes en la tienda y crea una cognición sólida.
Otro ejemplo de gran diseño de iconos se puede atribuir a Pocket. Para empezar, la idea de la aplicación es única. Si bien los marcadores existían desde hace mucho tiempo, no podían hacer que los usuarios volvieran a leer el contenido que guardaban.
Pocket, por otro lado, usó miniaturas para crear una memoria visual clara. La aplicación activa una emoción de "guardar este contenido" y está clara e inteligentemente representada por el ícono en sí. La forma roja se refiere a un "Bolsillo", mientras que la flecha hacia abajo representa "descargar" sin lugar a dudas.
No use fotos o imágenes
Además de los indicadores mencionados anteriormente, también puede evitar la implementación directa de fotos e imágenes en el icono de la aplicación. Incluso si hace referencia a una fotografía, debe crear sus propios vectores en Illustrator o Photoshop. Solo así se verá auténtico y tendrá un efecto magnético.
Puede sonar como un cliché, pero debes mantener tu diseño limpio. Ya mencioné acerca de mezclar más blanco o negro a los colores para llegar al tono de color perfecto que desea. Esto es realmente útil para ordenar un ícono. Si algunos colores se vuelven más brillantes o viceversa, el nivel general de ruido se reduce en varios casos.
Los iconos de aplicaciones deben convertirse en canciones populares que cualquiera pueda reconocer y los siguientes trucos de diseño te ayudarán a crear un gran icono de aplicación. Espero que hayas encontrado los puntos valiosos. Si tiene algo que agregar o sugerir, deje sus comentarios a continuación.