img_principalTodas las aplicaciones necesitan un icono singular, del mismo modo que un negocio necesita una buena puerta de entrada. Subestimar la importancia y las características de esa puerta puede provocar que los ojos, y los pies, de un usuario se dirijan al negocio del vecino.

Han pasado ya unos años desde este estudio, pero el feedback que dieron los usuarios sobre el diseño del icono no sería muy distinto del que darían hoy en día:

“El diseño del icono de la app influencia la percepción inicial de si se trata de una app de calidad, o no”
“Si fuera un icono mal diseñado, pasaría de largo”
“Los iconos bonitos y claros me empujan a investigar de qué va la app

El icono no solo aparece en las Stores y el SpringBoard del dispositivo junto al resto de apps descargadas. Necesitas que tu icono se vea bien en la configuración de settings, en campos de búsqueda, en resoluciones bajas, normales, en resoluciones retina. Tu icono aparece en distintos usos, y en todos debe funcionar bien.

Antes de nada, familiarízate con las especificaciones técnicas de las plataformas y sus principios de diseño. Las guías de estilo tanto de iOS como de Android ofrecen toda la información que necesitas para generar de manera adecuada este recurso. Por ejemplo, ten en cuenta que todos los iconos iOS tienen la misma forma; sin embargo, en Android puedes personalizarla. Sigue las templates y acertarás:

img_templates

 

 

 

 

 

 

Cada plataforma tiene sus propios principios gráficos y es interesante encajar bien en su carácter. Por así decirlo: si te invitan a un cóctel, no vistas de noche. iOS te invitará a una fiesta donde prima la sencillez; Android, a una donde lo que importa es la naturalidad.

img_plataformas

 

 

 

 

 

 

 

Aquí podéis ver qué dice iOS sobre el icono de la app y qué dice Android por su parte. Aún así, te proponemos esta lista de do’s and dont’s. Te ayudará a respetar los principios de las plataformas sin renunciar al branding de tu producto:

DO’S

  • Una sola forma o símbolo. Sintetiza el espíritu de tu app de forma clara y memorable.
  • Sencillo. No abigarres de efectos, elementos y detalles tu icono. Debe ser reconocible con lo indispensable.
  • Escalable. Que el icono sea sencillo ayuda a que funcione bien en la variedad de tamaños en los que es necesario. El icono puede tener tamaños tan dispares como 1024×1024 y 29×29 píxeles.
  • Contrastado. Comprueba que el icono se ve claramente sobre varios fondos, no solo en colores neutralizadores como blanco, negro o gris.
  • Consistente. Lo que muestres en el icono debe tener sentido con lo que el usuario se va a encontrar dentro de la app. Usar la misma paleta de colores para ambas cosas es la estrategia más sencilla para correlacionarlas.
  • Diferencial, o no. Tu competencia directa o indirecta, ¿cómo diseñan sus iconos? ¿Te interesa resaltar tu producto o seguir el patrón? El diseño de tu icono debe atender a intereses tanto de marketing (dentro de las Stores) como de usabilidad (una vez instalada).
  • En iOS, si vas a añadir un borde a tu pieza, comprueba que estás aplicando el radio correcto a los bordes.

Ejemplos de apps que han decidido diferenciar claramente sus iconos:

img_does

 

 

 

 

 

 

 

DON’TS

  • No incluyas palabras. A medida que escales el icono hasta 29×29, el texto será progresivamente ilegible.
  • No uses el logo de tu compañía. Si el logo es muy complejo, puede llegar a ser una mancha irreconocible. Además, el producto puede representar un servicio muy concreto de tu empresa. En este caso, estarías echando a perder la imagen global de tu marca si representas tu app solo con tu logo. Te animamos a crea un imaginario gráfico coherente con tu marca para solventar este problema.
  • No uses fotos. Como en los dos casos anteriores, la escalabilidad de las fotos suele ser bastante mala. Simplifica y vencerás.
  • No copies elementos de interfaz de la plataforma para representar tu servicio. Sigue sus tips, pero no los copies. Tampoco te interesa parecer una app preinstalada.
  • En Android, intenta no caer en la tentación de reciclar el icono que has diseñado para iOS. Si eres usuario de Android, verás en tu SpringBoard muchos iconos con el border radius característico de iOS. Sé imaginativo con las posibilidades que ofrece Android.

Algunos ejemplos de errores recurrentes:

img_dont

 

 

 

 

 

 

 

Recuerda: Por cada icono launcher con texto, logos, horror vacui, bordes mal ajustados, templates mal aplicados y colores random, un diseñador… llora.

Autora del post: Georgina Armisen (@GiArmisen), Lead UX/UI en SlashMobility

Recommended Posts
Showing 2 comments
  • Sergio Becerril
    Responder

    Muy interesante el articulo.

    Siempre he creído que el icono junto con el titulo es lo más importante, mas allá de la descripción que pongas en Google Play o App Store, más allá de las capturas de pantalla o videos que incluyas, mas allá incluso de las valoraciones recibidas.

    Sobre todo en iOS, creo que la gente compra por impulsos, esto es, ven un icono precioso y un titulo sugerente y ¡A comprar!

    Si bien es cierto que a medida que ha ido adentrándose entre nosotros la compra de aplicaciones móviles, el usuario ha ido experimentando cambios, y cada vez más esta compra compulsiva de la que hablo ha ido decreciendo, ahora el “comprador de Apps” valora otros aspectos como puede ser las valoraciones, la descripción, etc.

    Sin embargo, bajo mi humilde punto de vista, un buen icono te va hacer vender más.

    Un saludo.

    • Anna Barri
      Responder

      Hola Sergio,

      Muchas gracias por tu comentario. Tal y como comentas, el icono es un elemento muy importante en la influencia de los usuarios a la hora de escoger una descripción. No obstante, el nombre, la descripción y los pantallazos de la app desempeñan un papel importante en esta decisión.

      Un saludo y muchas gracias

Leave a Comment