Cómo diseñar un icono de la aplicación: la guía definitiva

Los iconos de las aplicaciones son de tamaño pequeño pero contribuyen enormemente al éxito de tu aplicación. Aumentar las descargas, anunciar el aspecto y el estilo de tu aplicación y comunicar la función de tu aplicación son sólo algunas de las tareas que un icono de aplicación puede realizar. Eso es mucho poder, ¡y queremos que lo aproveches al máximo! Por eso hemos creado esta práctica guía que contiene todo lo que necesitas saber sobre el diseño de los iconos de las aplicaciones:

Cómo diseñar un icono de la aplicación: la guía definitivaIcono de MAM2 para el criptograma.

  • ¿Qué es un icono de aplicación?
  • En la tienda de aplicaciones
  • Conociendo los estándares de diseño actuales
  • Mostrando el aspecto de tu aplicación
  • Comunicar la función de tu aplicación
  • Conseguir que se diseñe un icono de la aplicación
  • Conociendo sus plataformas
  • Tamaño y formato

¿Qué es un icono de aplicación?

Lo primero es lo primero, un icono de una aplicación no es un logo. Hace más o menos lo mismo, ¿verdad? Bueno… más o menos.

Mientras que un logotipo identifica y representa el producto o la marca de una empresa, un icono de aplicación identifica y representa, lo adivinaste, la aplicación de una empresa (o de un individuo) .

Cómo diseñar un icono de la aplicación: la guía definitivaIcono de la aplicación skeuomorphic de cuero de Joekirei para los estudios SPM.

Piense en los iconos de las aplicaciones como un pequeño contenedor de un tamaño fijo que contiene un trozo de información visual «del tamaño de un bocado» sobre su aplicación. Sí, por supuesto que puedes poner el logo de tu producto o marca dentro de un ícono de aplicación si quieres, pero eso no hace que el ícono de tu aplicación sea un logo (y para la experiencia del usuario no es probablemente la mejor solución).

Piénsalo de esta manera: los propios logos son libres de vagar más allá de las limitaciones de un icono de una aplicación. Son escalables y pueden existir en cualquier contexto: en folletos, sitios web, tarjetas de visita, lo que quieras (incluso en los iconos de las aplicaciones). Pero olvídate de los logos! Hablemos de iconos de aplicaciones.

En la tienda de apps

Como probablemente sepas, cuanto más atractivo sea el icono de tu aplicación, más descargas e instalaciones tendrás. Dicho esto, lo que es atractivo para una persona puede no serlo para otra. Por lo tanto, no se trata sólo de hacer un icono llamativo que lo conquiste todo. Más bien, se trata de encontrar lo que se ve atractivo para tu público objetivo. Es necesario pensar en qué estilo de icono de aplicación se ve atractivo para un comprador de cupones, un fanático de los deportes o un jugador. Vamos a desglosarlo!

Cómo diseñar un icono de la aplicación: la guía definitiva Cómo diseñar un icono de la aplicación: la guía definitiva Cómo diseñar un icono de la aplicación: la guía definitiva

Tomemos por ejemplo el resultado de la búsqueda de «cámara» en la tienda de Google Play. Basándose en los iconos de las aplicaciones resultantes, ¿puedes adivinar qué aplicación de cámara tiene más instalaciones? Golden Camera es la última con un estimado de 10 a 50 mil instalaciones, Professional HD Camera tiene un estimado de 1 a 5 millones de instalaciones, tanto Open Camera como Camera MX tienen un estimado de 10 a 50 millones de instalaciones, y en primer lugar Candy Camera tiene un estimado de 100 a 500 millones de instalaciones.

Dado que el icono de la aplicación «Candy Camera» se rastrilla en la mayoría de las instalaciones, podemos usarlo para aprender sobre los intereses generales de los usuarios de la aplicación de la cámara. El diseño es colorido y juguetón, pero también retrata la simplicidad y la funcionalidad. Los iconos de las aplicaciones de Open Camera y Camera MX también muestran simplicidad (lo que puede explicar su competitividad en la tienda de aplicaciones), pero su falta de color y juguetón puede explicar sus estimaciones de instalación más bajas. La conclusión es que el grupo demográfico objetivo de las aplicaciones con cámara busca en gran medida una aplicación sencilla pero divertida.

Podemos ver este ejemplo desde otro ángulo también. Candy Camera utiliza un diseño que sigue de cerca las pautas de diseño de materiales de Google (nos ocuparemos de esto en la siguiente sección). Básicamente, Candy Camera es el único icono de esta lista que sigue los estándares de diseño actuales. Golden Camera y Open Camera parecen haber sido diseñados cuando se creó el diseño plano y el diseño skeuomorfo. Hoy en día, estas parecen anticuadas. Por lo tanto, también es importante seguir los estándares de diseño actuales.

Por muy fascinante que sea sumergirse en los mecanismos de diseño de los ejemplos anteriores, la gran ventaja es que los iconos de las aplicaciones marcan claramente una gran diferencia en lo que respecta a las descargas e instalaciones.

Conociendo los estándares de diseño actuales

Cómo diseñar un icono de la aplicación: la guía definitivaEste icono encaja en el iOS. Icono de MAM2 para el Cliente Mínimo de Twitter.

Aunque no tienes que seguir necesariamente ninguna regla aparte del tamaño del envío, tanto Google como Apple han creado directrices sobre cómo quieren que se vea tu aplicación, y es una buena idea seguirlas. Como hemos observado anteriormente, los iconos de las aplicaciones que siguen estas directrices se sienten cohesionados y relevantes con respecto a las tendencias actuales. Como resultado, las aplicaciones respectivas generalmente reciben más descargas.

Con el lanzamiento más reciente de Android, Google ha implementado un nuevo lenguaje de diseño llamado Diseño de Materiales, que es esencialmente un extenso conjunto de pautas para crear una interfaz visual cohesiva, más específicamente creando una experiencia que se siente como si estuvieras interactuando con «materiales» pseudofísicos (a pesar de que todos son píxeles). Para los diseñadores a los que les gusta la idea de contribuir a este aspecto cohesivo, Google ha publicado una documentación exhaustiva sobre el diseño de materiales. Para las pautas del Diseño Material icono , haga clic aquí.

Apple ha presentado directrices similares para el iOS, llamadas Directrices de la Interfaz Humana. Estas directrices son útiles para los diseñadores de iOS, sin embargo, no son tan profundas como las de Diseño de Materiales. Dicho esto, no es un mal lugar para empezar si no estás seguro de cómo debería ser tu icono del iOS. Para ver las directrices de la interfaz humana para los iconos del iOS, haz clic aquí.

Mostrando el aspecto de tu aplicación.

Cómo diseñar un icono de la aplicación: la guía definitivaa través de Google Play. Cómo diseñar un icono de la aplicación: la guía definitivaIcono de la aplicación de Word Connect y diseño de la aplicación

Naturalmente, el icono de tu aplicación debe reflejar el aspecto y la sensación de tu aplicación, los usuarios quieren saber qué esperar al entrar. Por ejemplo, ¿cómo te sentirías si compraras un galón de pintura «blanco cáscara de huevo» para tu casa, y al abrirlo descubrieras que la pintura es de un color marrón oscuro? Aunque algunas cáscaras de huevo son de hecho marrones, es importante pensar en lo que los consumidores esperarán según su marca.

Para aplicar esto al diseño del icono de la aplicación: Si el diseño de tu aplicación es plano, tu icono también debería ser plano. Si tu aplicación contiene skeuomorfismo, tu icono también debería tener al menos algún elemento de skeuomorfismo. Si el diseño de tu aplicación sigue las directrices de Google sobre diseño de materiales, el icono de tu aplicación también debería serlo. Comprueba cómo los iconos de las aplicaciones de los ejemplos anteriores coinciden con el aspecto de sus respectivas aplicaciones.

Comunicando la función de su aplicación

Cómo diseñar un icono de la aplicación: la guía definitivaIcono de la aplicación de conteo de palabras de Pixtograp. Cómo diseñar un icono de la aplicación: la guía definitivaIcono de la aplicación Calc+ a través de Google Play. Cómo diseñar un icono de la aplicación: la guía definitivaIcono de la aplicación de Notas Clásicas a través de Google Play. Cómo diseñar un icono de la aplicación: la guía definitivaIcono de la aplicación de Linterna a través de iTunes. Cómo diseñar un icono de la aplicación: la guía definitivaIcono de la aplicación de Relojes Despertadores a través de iTunes.

Los iconos de la aplicación también juegan un papel en la experiencia de la aplicación en su conjunto. Tomemos por ejemplo las aplicaciones de utilidades, como calculadoras, «linternas» o aplicaciones meteorológicas. Estos iconos de aplicaciones deberían hacer que el usuario sienta que tiene la utilidad al alcance de la mano. Piensa en lo que se siente al coger un lápiz, mirar un termómetro o medir algo con una regla: esa es la sensación que el icono de una aplicación de utilidad debería inspirar al usuario. En los ejemplos anteriores, observa cómo casi puedes sentir los botones de la calculadora debajo de las yemas de los dedos, o cómo la linterna se siente como si se pudiera encender y apagar fácilmente con un interruptor deslizante.

Más allá de inspirar este sentido de utilidad, los ejemplos de iconos presentados arriba son instantáneamente reconocibles como utilidades. Una forma en que los diseñadores logran esto es incorporando pistas visuales de utilidades culturales populares. Un gran ejemplo son los números retro-digitales usados en el icono de la aplicación del reloj de arriba. ¿Quién no los recuerda o reconoce?

Cómo diseñar un icono de la aplicación: la guía definitivaIcono de la aplicación del editor de juegos de milomilo para Charles Jr. Cómo diseñar un icono de la aplicación: la guía definitivaIcono de la aplicación Bowling King a través de Google
Play. Cómo diseñar un icono de la aplicación: la guía definitivaIcono del logo de Roll the Ball® a través de Google Play. Cómo diseñar un icono de la aplicación: la guía definitivaIcono de la aplicación Pokémon GO a través de iTunes. Cómo diseñar un icono de la aplicación: la guía definitivaIcono de la aplicación Fruit Ninja Classic a través de iTunes.

Otra gran categoría de aplicaciones son los juegos. A diferencia de los iconos de las aplicaciones para las utilidades, los iconos de los juegos deben atraer al usuario al mundo de ese juego. En pocas palabras, ¡los iconos de las aplicaciones de juegos deben hacer que quieras jugar! En los ejemplos anteriores, la atractiva y reluciente bola de bolos que se estrella contra los bolos es difícil de ignorar: ¡comunica acción, movimiento, emoción y diversión! Del mismo modo, la Poké Ball que descansa en un planeta bajo las estrellas te hace entrar en un mundo que es difícil de no querer explorar.

También es importante pensar en cómo estos iconos llaman la atención. En el caso de cualquier aplicación de bolos, quieres mostrar la acción de los bolos en lugar de mostrar los bolos estacionarios: ¡qué aburrido! Lo mismo se aplica al Fruit Ninja Classic, donde la acción de cortar una fruta se muestra de forma llamativa y emocionante.

Obtener un icono de la aplicación diseñada

Si ya has elegido un diseñador independiente para el diseño de la interfaz de tu aplicación, no es una mala idea contratarlo específicamente para crear un icono de la aplicación a juego para mantener la cohesión visual en toda la aplicación. Alternativamente, para ver una amplia gama de ideas de diseño de iconos de aplicaciones, la celebración de un concurso en 99designs es un buen movimiento.

Cómo diseñar un icono de la aplicación: la guía definitivaPlantilla de icono de la aplicación Photoshop a través de Every Interaction.

Si estás buscando un punto de partida para diseñar tu propio icono, no digas más. Los programas de diseño más comunes para el diseño de iconos de aplicaciones son Photoshop, Illustrator y Sketch. En general, usa Photoshop si quieres crear efectos rasterizados (sombras, reflejos, reflejos), usa Illustrator si estás creando formas vectoriales complejas y usa Sketch si prefieres las plantillas de aplicaciones integradas (Sketch viene con plantillas de iconos de aplicaciones gratuitas instaladas). Para ver una reseña detallada de este programa y más, haz clic aquí.

Conociendo sus plataformas

Antes de entrar en detalles sobre el diseño de los iconos de las aplicaciones, es importante saber que hay dos grandes campos de iconos de aplicaciones: Android e iOS. Aunque ambos tipos de iconos de aplicaciones son (para todos los propósitos intensivos) un pequeño botón cuadrado que se presiona, hay importantes diferencias en el tamaño, e incluso en el estilo recomendado (más sobre eso en nuestra sección de reglas). Vamos a ello!

¿Qué tamaño y formato debería tener mi icono?

Cómo diseñar un icono de la aplicación: la guía definitivaIcono de la aplicación de relajación de Daylite Designs ©.

En los dispositivos Android, los iconos de lanzamiento son generalmente de 96×96, 72×72, 48×48, o 36×36 píxeles (dependiendo del dispositivo), sin embargo Android recomienda que el tamaño inicial de la placa de arte sea de 864×864 píxeles para permitir un ajuste más fácil. Además, los diseñadores de aplicaciones de Android suelen guardar un icono de aplicación de tamaño diferente para cada densidad de pantalla de dispositivo generalizada y los almacenan en un directorio de recursos específico de la densidad dentro de la aplicación. Para más información sobre esto, haz clic aquí. Los iconos de las aplicaciones de Android deben guardarse como archivos PNG.

En cuanto al iOS, los iconos de la aplicación deben tener un tamaño de 1024×1024 píxeles. Al igual que en Android, el icono se redimensionará dependiendo del dispositivo y el contexto, pero Apple se encarga de eso por ti. Si quieres los detalles de esos tamaños para pruebas visuales o experimentos, haz clic aquí. Los iconos de la aplicación iOS deben guardarse como archivos PNG.

Rock your app icon design

Sabemos que tienes una idea genial para una aplicación, así que no te pierdas en la confusión con un mal diseño del icono de la aplicación. Si te ciñes a esta guía, conseguirás un diseño que se vea asombroso y que llegue a tu público objetivo. ¿No pensaste que te dejaríamos comer tu pastel también?

Recursos para el diseño de iconos de aplicaciones

  • Paquete de plantillas de iconos para Android 4.0 (Paquete de plantillas directamente desde Android)
  • Plantilla de iconos de material gratuito
  • Cada plantilla de icono de la aplicación iOS Interaction
  • Plantilla de iconos de aplicaciones iOS Savvy Apps
¿Listo para conseguir un icono para tu aplicación?
Aprende cómo puedes obtener ideas de iconos de aplicaciones de diseñadores gráficos de todo el mundo.

¡Muéstrame!

Comments are closed.