Tamaño de los iconos de la App Store: Requisitos de archivo, consejos de diseño y mejores prácticas

¿Cuál es el tamaño correcto de los iconos de la App Store? Qué debes representar en tu icono? Qué diferencia hará todo esto? Esta guía sobre los iconos de las aplicaciones ayudará a responder a estas importantes preguntas, ofrecerá consejos y enlazará con recursos.

Por qué importan los iconos de las aplicaciones

El tamaño de los iconos de la App Store es diminuto. Cuando los iconos aparecen en la pantalla de tu smartphone, cada uno de ellos ocupa apenas un pulgar de espacio. Pero en la App Store de Apple o en la Play Store de Google, el diseño que se empaqueta en este pequeño tamaño de icono de la tienda de aplicaciones lo es todo.

Al igual que las portadas de los libros o las imágenes de los listados de productos en Amazon, los iconos de las aplicaciones móviles ayudan a sus clientes potenciales a hacer un juicio rápido en una fracción de segundo.

Antes de que lean el título o la descripción de la aplicación, van a ver el icono. El icono de tu aplicación móvil tiene que hablarles de tu aplicación de forma atractiva, llevándoles a saber más. Una vez que alguien ha hecho clic en el icono, es más probable que instale la aplicación. Y eso es lo que usted quiere. Básicamente, el icono de tu aplicación es la puerta de entrada a las instalaciones.

Por eso es crucial hacerlo bien.

Un icono de aplicación no es un logotipo

Puede parecer que lo más fácil es simplemente transferir el logotipo de tu marca al icono de tu aplicación y darlo por terminado. No lo hagas. El icono de una aplicación no es un logotipo. Un logotipo representa la marca detrás de la aplicación, sí, pero el icono de la aplicación representa la aplicación en sí.

Así como no usarías un logo en lugar de la imagen de un producto en un listado de Amazon, no deberías meter un logo en los requisitos de tamaño del icono de la tienda de aplicaciones y llamarlo icono. Sólo las mega-marcas como Starbucks o Target pueden salirse con la suya.

Si usted es una marca decentemente establecida y conocida, sin embargo, siéntase libre de añadir su logotipo a su icono de la aplicación de alguna manera, pero no lo haga el foco.

En el siguiente ejemplo, la conocida editorial de libros de viajes Lonely Planet incluye su logotipo en el icono de la aplicación Guides by Lonely Planet. Pero el logotipo es sólo una pieza del diseño de la aplicación. El tranquilo borde azul hace resaltar el cálido paisaje urbano en tonos amarillos, invitando al espectador a su próxima aventura.

El eslogan dice que esta aplicación es una recopilación de «guías de ciudades curadas», y el icono de la aplicación insinúa esa función.

Cualquier persona a la que le guste explorar nuevas ciudades y que realice una búsqueda en la tienda de «guías de viajes» se sentirá atraída por este cálido y a la vez emocionante icono de la aplicación.

Compare la aplicación de Lonely Planet con otra aplicación de guías de viaje que encontrará en la misma búsqueda.

mTrip toma la M de su logotipo, le añade un fondo verde y se da un toque de aprobación para publicar el icono en la App Store.

Pero el icono no dice nada sobre lo que el usuario está obteniendo, y mTrip no es lo suficientemente conocido como para ser reconocido por una sola letra. Netflix, a continuación, también toma la primera letra de su logotipo y la utiliza como icono de la app, pero esta marca puede sacarlo adelante porque todo el mundo sabe lo que es Netflix y lo que hace.

Ahora que conoces la diferencia entre un logotipo y un icono de aplicación, vamos a echar un vistazo a las preguntas importantes que debes hacerte antes de empezar a diseñar.

Tamaño de los iconos de la App Store: 4 preguntas que debes hacerte antes de crear el icono de una app

Es cierto que el icono de tu app debe atraer el mayor número de miradas posible. Quieres que destaque entre todos los iconos de aplicaciones que le rodean, y en un mundo saturado de aplicaciones, eso no es tarea fácil.

Pero aquí hay un secreto: no necesitas hacer que el icono de tu aplicación atraiga a todo el mundo. En su lugar, céntrate en hacer que atraiga a las personas de tu público objetivo.

Así que esta es la primera pregunta a tener en cuenta.

Pregunta nº 1: ¿Quién es el público objetivo de esta aplicación?

¿Es tu aplicación para personas a las que les gusta cocinar? ¿Padres con niños pequeños? ¿Amantes de juegos como Candy Crush y Angry Birds? ¿Viajeros? ¿Músicos en ciernes?

Dado que ya has creado la aplicación, deberías saber la respuesta a esta pregunta. Pero hazla también el foco de tu diseño de iconos de la app.

Busca una frase sencilla que defina a tu público objetivo.

Digamos, por ejemplo, que tu app enseña a tocar el piano. Una búsqueda de «aprender a tocar el piano» en la tienda de Google Play hace que aparezcan estas aplicaciones principales.

De los cuatro iconos de aplicaciones, ¿en cuál harías clic para aprender más?

Para mí, un antiguo pianista al que le encantaría volver a aprender lo que una vez supe, esta gana. Sin duda alguna.

El icono de la aplicación Flowkey no me parece nada atractivo porque no me dice nada sobre cómo tocar el piano. (De nuevo, es básicamente un logo y nada más). Las otras dos presentan teclas de piano dentro del icono, algo esperado, quizás, pero totalmente bien.

Para mí, Real Piano Teacher gana porque muestra unas manos tocando el piano en teclas etiquetadas con una hoja de música delante de la persona que toca.

No se puede aprender a tocar el piano sin aprender las notas, y aprender a leer las notas musicales puede ser tan difícil como aprender a leer un idioma escrito. Sólo por su icono de aplicación, esta aplicación promete ayudar a los usuarios a aprender a leer las notas, acelerando su sueño de tocar hermosas melodías por sí mismos.

Ahora aquí está el truco: tú, como creador de la aplicación, debes preguntarte esto ¿cómo puedo hacer que el icono de mi aplicación sea aún mejor que el que más me gusta (Real Piano Teacher’s)?

Diseña el icono de tu aplicación para que se eleve por encima de todas tus principales opciones de la competencia.

Pregunta #2: ¿Qué estándares de diseño actuales debo seguir?

Las tendencias de diseño cambian todo el tiempo. He estado el tiempo suficiente para recordar el más reciente cambio de logotipo de Starbucks en 2011. Me sentí un poco triste de que la sirena cambiara, pero finalmente el diseño se convirtió en sinónimo de mi cafetería favorita una vez más y no podía imaginar que volviera a su diseño anterior.

Por supuesto, a algunas personas les parece que el nuevo logotipo es demasiado recargado y bromean con que al final no será más que un punto verde.

Bromas aparte, es importante estar al tanto de las tendencias de diseño actuales y cómo se relacionan con el diseño de tu aplicación. Tanto la Google Play Store como la App Store publican directrices actualizadas que puedes (y debes) seguir.

Estas directrices te ayudan a crear un icono de aplicación con la sensación más moderna y accesible.

El Material Design de Google ofrece un conjunto exhaustivo de directrices que cubren los siguientes temas:

• Principios de diseño, incluida la expresión de la marca y el enfoque de diseño
• Formas de cuadrícula y líneas clave
• Especificaciones: un desglose detallado de la anatomía de los iconos de las apps y las especificaciones de iluminación
• Tratamientos de los iconos: información sobre el color de la app, la capa, la puntuación, la superposición, el acordeón y la distorsión

El objetivo de Material Design es ayudarte a crear un icono de app con una sensación táctil a través del medio de los píxeles. Es algo complejo, pero merece la pena estudiarlo.

Las Directrices de Interfaz Humana de Apple se leen de una manera más amigable que también es fácil de seguir. Ofrece diez consejos, como «Adopte la simplicidad» y «Pruebe su icono con diferentes fondos de pantalla», junto con instrucciones sobre cómo seguirlos.

A continuación, Apple ofrece información sobre cómo:

• Formatear los atributos de los iconos de las aplicaciones
• Producir el icono de la aplicación en varios tamaños diferentes

• Proporcionar iconos seleccionables por el usuario
• Crear iconos de foco, ajustes y notificaciones para iOS

Aunque las Directrices de la Interfaz Humana son más cortas y, en muchos aspectos, más sencillas que las de Material Design de Google, estas últimas ofrecen más consejos de diseño.

Pregunta #3: ¿Cómo puedo insinuar el propósito de mi aplicación?

Como vimos en el caso de las aplicaciones para aprender a tocar el piano, comunicar el propósito de tu aplicación a tu audiencia es de vital importancia.

Vamos a ver otro ejemplo. Digamos que estás diseñando un icono para una aplicación que ayuda a los escritores a organizar sus pensamientos e ideas. Tal vez tu aplicación también establece objetivos de recuento de palabras y permite a los usuarios hacer un seguimiento del tiempo de escritura diario. Además, tal vez tu aplicación ofrece citas para animar a los escritores a escribir.

¿Quién es tu público?

Escritores, por supuesto. Escritores principiantes. Novelistas. Autónomos. Periodistas. ¡Todos los escritores podrían usar tu aplicación!

Ahora echa un vistazo a tu competencia.

En la App Store, busca «aplicaciones para escritores» y obtendrás una serie de aplicaciones organizativas.

Enfócate en los iconos de las aplicaciones aquí. Primero, hay un bigote con un fondo rojo. Si no vieras el título, no sabrías que esta aplicación está dirigida a los escritores. Incluso así, no está claro qué hace la aplicación, exactamente, para ayudar a los escritores a escribir.

El siguiente icono de la aplicación presenta un fondo blanco con un… ¿avión de papel? ¿La punta de un bolígrafo? ¿Cabeza de salmón? No está muy claro.

El último icono de aplicación de nuestro pequeño estudio presenta un bolígrafo con forma de bombilla sobre un fondo negro. Sólo con mirar el icono, tienes la sensación de que esta aplicación ayudará a los escritores a formar ideas y a mantener esa inspiración hasta que se convierta en un libro, un artículo o un poema.

Emula este icono, no los dos primeros. Insinúa la funcionalidad que ofrece tu aplicación.

Tenga en cuenta que la insinuación de la funcionalidad debe ser diferente para los distintos tipos de aplicaciones.

Si ha creado una aplicación de utilidad, por ejemplo, como una calculadora de propinas o una linterna, el icono de la aplicación debe hacer que la persona que navega sienta que ya está utilizando la aplicación incluso antes de hacer clic en el icono.

El icono de la app que se muestra a continuación no consigue este objetivo, y lo que es más, está abarrotado y es difícil de leer.

Por el contrario, el icono de la aplicación de abajo te hace sentir que podrías acceder rápidamente a esta calculadora de propinas porque prácticamente ya está abierta.

Los iconos de los juegos para móviles también necesitan un tratamiento especial. Su objetivo en un icono de aplicación de juego es hacer que el espectador se sienta como si ya estuviera inmerso en el mundo del juego. Todo lo que tienen que hacer es hacer clic en el icono de la aplicación y obtendrán el subidón de dopamina de jugar a algo nuevo, emocionante y gratificante.

Aquí hay un gran ejemplo de un icono de aplicación que logra esto:

Casi puedes sentir el subidón de bajar una colina llena de baches sólo con mirar este icono de aplicación. Es una emoción deliciosa, sin embargo, que te hace querer jugar el juego.

¿Un ejemplo no tan bueno? Este icono de aplicación para un juego de baloncesto.

Te sientes como si estuvieras… mirando una pelota de baloncesto. No jugando un partido.

Pregunta #4: ¿Cuál es la apariencia de mi aplicación?

Aunque es una buena idea ejercitar la creatividad mientras se diseña el icono de una aplicación, no quieres que la interfaz y el icono de tu aplicación tengan texturas diferentes. Deben trabajar juntos en un sistema de diseño sin fisuras.

Aquí hay dos juegos de bloques de palabras cuyos iconos coinciden con el aspecto de los juegos que representan.

El icono de Word Stacks presenta los mismos colores del atardecer y los mismos bloques de palabras gruesos que el propio juego.

El icono de la aplicación de Woody Block Puzzle es tan leñoso como el propio juego.

No querrás hacer creer a tu audiencia que tu aplicación es un juego del tipo de bloques de madera pero luego revelar en su lugar un juego de bloques de palabras espumoso y de color atardecer. Un branding incoherente es un mal diseño.

Como escribe un bloguero en 99designs, «Si el diseño de tu aplicación es plano, tu icono también debería serlo. Si tu app contiene skeuomorfismo, tu icono también debería tener al menos algún elemento de skeuomorfismo.»

Haz que el icono de tu app refleje los colores, las texturas y la sensación de tu app tanto como sea posible.

Consejos a tener en cuenta mientras diseñas el icono de tu app

Ahora que has respondido a las cuatro preguntas esenciales del diseño de apps, es el momento de empezar a crear varias variaciones o propuestas de diseño para el icono de tu app. Comienza con un esquema de diseño básico y luego experimenta con diferentes colores, bordes y gráficos.

Aquí tienes algunos consejos para guiarte:

• Confía en sólo dos o tres colores. Si hay más de tres, el icono de tu aplicación empieza a parecer demasiado recargado.
• Evita utilizar una fotografía real. Aunque siempre puedes convertir una fotografía en una ilustración/imagen vectorial.
• Piensa en pequeño. El icono de tu aplicación puede parecerte grande mientras lo diseñas, pero es diminuto en una pantalla de iPhone o Android. Asegúrate de que cada elemento es claro incluso en la forma más pequeña del icono.
• Ahorra palabras para el título y el eslogan. El icono de una aplicación está destinado a tener un impacto visual. Puedes decir lo que necesites con palabras en el título, el eslogan y la descripción de la aplicación.
• Sigue siempre los requisitos y directrices de tamaño de los iconos de las tiendas de aplicaciones de Apple y Google. Puedes encontrar los requisitos de tamaño de Google Play aquí y los de la App Store de Apple aquí. Ten en cuenta que tendrás que crear varias versiones del icono de tu aplicación para cada tienda. Ten en cuenta también que, aunque la App Store del iPhone tiene las esquinas redondeadas, debes enviar todos los archivos de tu aplicación en forma cuadrada. El sistema de Apple redondeará las esquinas por ti.

Una vez que tengas dos o tres posibles iconos de aplicaciones para elegir, es el momento de dar el paso más importante de tu viaje de creación de iconos de aplicaciones: hacer una prueba dividida de tus iconos para saber qué piensa tu público objetivo.

Más allá del tamaño de los iconos de la App Store: prueba dividida de los iconos de las aplicaciones en PickFu

La mejor manera de saber qué piensa tu público objetivo del icono de tu aplicación es hacer una prueba dividida en PickFu antes de publicar realmente tu lista de aplicaciones en Google Play Store o la App Store. Claro, usted podría hacer una prueba A / B en la aplicación y ejecutar varias variaciones en la propia tienda, pero este es un proceso lento que puede chupar su tiempo y dinero.

Al dividir la prueba a un grupo de encuestados en PickFu antes de publicar su icono de la aplicación en vivo, se obtiene la retroalimentación que necesita sin perder dinero en el proceso.

Sólo se tarda unos minutos en configurar una encuesta en PickFu. ¿Recuerdas que dije que la segmentación de la audiencia es crucial? PickFu hace que sea fácil para usted. Puedes dirigirte a los miembros de la audiencia según su dispositivo iOS o Android, si son jugadores móviles y cuánto han gastado en la App Store, entre otros muchos rasgos útiles.

Un desarrollador de aplicaciones recientemente recurrió a PickFu para probar entre dos iconos para una aplicación de citas.

El primer icono muestra el perfil rosa de una mujer que sostiene un teléfono, el título de la app en dos colores diferentes y un fondo rojizo y naranja. En total, este icono de la aplicación presenta unos seis colores diferentes.

La segunda opción elimina a la mujer, mantiene un fondo naranja-rojo más estilizado y deja las palabras, pero en blanco con un pequeño corazón metido en el recodo de la letra M. Este icono de la aplicación presenta sólo tres colores.

Los encuestados votaron mayoritariamente a favor de la opción B, más sencilla y limpia. Así que podemos ver exactamente por qué ganó la opción B.

En primer lugar, los encuestados apreciaron el aspecto más sencillo y profesional de la Opción B, diciendo cosas como: «Me gusta la simplicidad de éste y no distingue un género para su uso» y «Realmente no me gusta el color púrpura/rosa brillante de la Opción A – es realmente difícil para los ojos.»

Afortunadamente, el desarrollador de la aplicación fue con el segundo icono de la aplicación, que es mucho más probable que atraiga a los usuarios potenciales que la Opción A.