Consejos asesinos para iPhone y iPad Icon Design

Los iconos son una parte crucial de cada aplicación de iOS. Transmiten la primera impresión de su aplicación a los posibles usuarios y siguen siendo un punto focal central para aquellos que descargan la aplicación. Todos sabemos lo importante que es crear una buena primera impresión y crear una marca sólida con su diseño, y este tutorial le mostrará 8 maneras excelentes de hacerlo.!

1. Usa metáforas visuales

Esto es una obviedad en el diseño de iconos, pero si pasas por la App Store, hay sorprendentemente pocos iconos que lo hacen bien. Por ejemplo, busque "trabalenguas" y verá una variedad de iconos como este:

Si quitaste todas las palabras de estos íconos, ¿cuántos te dirían “trabaluz”? Esta es la razón por la que a menudo escuchas "no uses palabras en los íconos": demasiada gente lo usa como una muleta para describir de qué se trata la aplicación.!

He ampliado el único icono que realmente hace justicia al término "trabalenguas". Algunas mejoras que sugeriría son delinear la silueta de la cabeza y posiblemente hacerla más grande. Esto hará que la lengua retorcida sea claramente visible y el contorno ayudará a que salga del fondo. A menos que todos los tornados sean específicos de Gran Bretaña, perdería la bandera y en su lugar elegiría un fondo que agregue más contraste alrededor de la ilustración..

Que paso starbucks?

La aplicación principal de Starbucks tiene un gran icono y diseño de aplicación, pero la aplicación que rastrea el efectivo en su Tarjeta de regalo de Starbucks palidece en comparación. El icono es apenas legible en la cuadrícula de la App Store y el logotipo es prácticamente invisible..

¿Qué más podrían haber hecho? ¿Qué hay de hacer que el icono se parezca a una tarjeta de regalo real? ¿Tire de la marca verde, haga que el logotipo sea grande y visible, y agregue la banda magnética de "tarjeta de regalo" que va a través de ella? O tal vez una ilustración de una billetera con el logotipo de Starbucks?

2. Envuelva un concepto alrededor de su aplicación e icono

Otra forma de agregar profundidad a su ícono y diseño de la aplicación es darle profundidad conceptual. En el espacio abarrotado de aplicaciones de "tareas por hacer", la marca de "verificación" es una buena metáfora visual de "hecho" pero se utiliza en exceso hasta el punto de no tener sentido.

Las únicas aplicaciones destacadas entre la multitud han superpuesto una capa conceptual adicional sobre la marca de verificación comunicativa.

2Do: este icono se parece a una pila de documentos que deben revisarse. El cuero cosido es un bonito contraste con el color limpio, post-it y la textura suave..

Ponga las cosas fuera: poner las cosas fuera es un gran ejemplo de diseño y pensamiento conceptual. ¿Por qué crear otra aplicación de tareas pendientes cuando la mayoría de nosotros realmente queremos descubrir qué podemos postergar hasta mañana? Mirar un problema exactamente en el lado opuesto de su competencia puede producir resultados bastante creativos y divertidos. La ilustración dice exactamente de qué se trata la aplicación: una bandeja de entrada con una flecha de "avance", y si miras la cuadrícula de íconos sobre la selección de colores, realmente se destaca de la multitud..

Taska: el icono de Taska parece un montón de papeles cuidadosamente apilados sobre un escritorio. Aunque no es un concepto profundo, este icono está bellamente ilustrado. Observe los detalles sobre el sombreado del fondo de madera que le da profundidad a la pila y la nitidez de los bordes del papel y la marca de verificación. Los papeles parecen salirse de la pantalla, lo que hace que se salga de la cuadrícula de marcas de verificación obsoletas.

3. No hagas promesas vacías

El ícono de tu aplicación es la primera promesa que le haces al usuario. Dice:

  • Soy de calidad "x"
  • Haré "esto" por ti

Si la gente ve un ícono de alta calidad y la aplicación es una mierda, la gente recibe un PO. Si la gente piensa que el ícono significa "x" y que la aplicación realmente realiza "y", las personas obtienen un PO. Cumplir la promesa de su aplicación para el usuario.!

4. La continuidad gráfica es una necesidad

Una forma de garantizar que cumpla sus promesas es asegurarse de que los gráficos de la aplicación coincidan con el icono. Los gastos son un gran ejemplo de un ícono que describe con gran precisión la función de la aplicación (gastos de seguimiento) y cómo llevar a cabo un concepto de diseño de ícono a aplicación..

5. Pruebe el diseño del icono en su dispositivo

Esto es una sorpresa para muchos diseñadores nuevos en el diseño de iconos de iPhone y iPad. La forma en que su diseño se ve simulado en Photoshop o incluso en el iPhone Simulator es muy diferente de la apariencia que tendrá un dispositivo real. ¿Por qué? Algunas razones:

  • Los monitores de computadora no representan con precisión la gama de colores y el brillo de los dispositivos de pantalla táctil.
  • No todas las pantallas táctiles son iguales. Por ejemplo, la pantalla de retina en el iPhone es de mayor calidad que la pantalla de retina para iPod touch.
  • Específicamente para iPad, es difícil duplicar la perspectiva de profundidad en los iconos tal como aparecen en el dispositivo real.

6. Curiosidad del piqué.

All-in Yoga es un excelente ejemplo de una silueta provocativa, pero de buen gusto ilustrada que describe a fondo de qué se trata la aplicación..

Yoga todo incluido

7. Capitaliza tu marca

Si estás diseñando una aplicación para una marca conocida, ¡úsala! A continuación se muestran ejemplos de aplicaciones que hacen un gran trabajo destacándose en la App Store al mostrar un logotipo, nombre o rostro reconocible relacionado con la aplicación. Es posible que estas aplicaciones no le digan exactamente lo que hace la aplicación, pero le da una idea del contenido que obtendrá según la imagen..

Nike - probablemente algo relacionado con la aptitud
NBC Nightly News - noticieros del programa
Virgen - musica o videos
Jamie Oliver - recetas
Mad Libs - Probablemente una versión de la aplicación de MadLibs?

Hagas lo que hagas, ¡no desperdicies el regalo de una marca reconocible! Estos pueden ser reconocibles cuando son volados:

Pero mire lo que sucede cuando sus siluetas débiles compiten con otros íconos en la grilla ocupada de App Store. Donde esta raquel iCarly?

Ahora mira la mejora con solo unos pequeños ajustes:

También son más reconocibles en la cuadrícula de la App Store:

Pensar y ejecutar estos ajustes tomó menos de una hora en Photoshop:

Rachel ray - Incluso si la cara de Rachel no era reconocible, tiene una gran sonrisa y ojos que sirven como punto focal para atraer a la gente. La buena noticia cuando estás diseñando un ícono para una celebridad es que tienes mucho con qué trabajar para usarlo. cara de la persona En general, los ojos de las personas se sienten primero atraídos por los rostros humanos entre un grupo de íconos genéricos. Prueba esto por ti mismo: aparta la vista de la imagen anterior durante un minuto y luego mira hacia atrás. ¿En qué icono aterrizó primero tu ojo? Házmelo saber en los comentarios!

iCarly - Es cierto que no veo iCarly, pero el sentido común me dice que el personaje principal del programa es probablemente la mejor cara para mostrar en este ícono, junto con el logo del show de Tweeny. Si los niños o los padres no están seguros de la taza ofrecida, el logotipo admite que han encontrado una aplicación de interés.

Eckart Tolle - Esta aplicación es en realidad para su serie de videos, Stillness Within. El título sin duda podría estar escrito en la parte inferior de una manera elegante. Sin embargo, para las personas que reconocen a Eckart, probablemente no les va a importar el título. Atrae a un público MUY apasionado, uno que estaría interesado en cualquier cosa que publique. Solo tener su foto es suficiente.

Hello Kitty Stamp Calendar - Una vez más, una marca muy reconocible que tiene demasiado abarrotada en un espacio pequeño. En la versión original, apenas puedes distinguir la cara de Hello Kitty. Esto es una pena porque es la marca registrada internacionalmente de la marca. Por supuesto, una adición valiosa sería agregar un calendario con forma de sello, pero lo que debe considerarse en el caso de las grandes marcas es cómo manejar la iconografía en toda la gama de productos de aplicaciones para esa marca. ¿Es esta la única aplicación que Hello Kitty producirá? ¿Cómo van a manejar los iconos para la marca en su conjunto??

Perez Hilton - Este icono puede ir en un par de direcciones diferentes. ¿Sus lectores realmente lo reconocen o solo su nombre? He leído su blog varias veces y no puedo decirte nada sobre su apariencia. Sin embargo, tiene algunas ilustraciones en el encabezado de su blog, el problema es que el que se usó es prácticamente irreconocible. Utilicé una de las otras ilustraciones en su blog, la hice estallar para obtener una silueta fuerte y combiné los colores fuertes de su sitio web. Bam.

Ahora que he dicho que está bien usar una imagen fotográfica, permítanme aclarar. ¡Esto SOLO está bien si estás tratando con una figura reconocible del tipo de una celebridad! No recomendaría el uso de fotografías por ninguna otra razón. Los siguientes son algunos ejemplos de mal uso del icono de foto:

8. Respeta la red de App Store.

Puede que hayas notado que sigo refiriéndome a la grilla de la App Store. Esto es lo que hace que el diseño de iconos para el iPhone y el iPad sea exclusivo del diseño de iconos de aplicaciones de escritorio o web. La experiencia de compra en la App Store es como buscar un "hallazgo" en una tienda de segunda mano. Hay algunos productos útiles y bellamente diseñados rodeados de mucha conmoción y basura.

Revise su diseño en TODAS las tiendas

La "cuadrícula" se aplica a la tienda de iTunes, iPhone y iPad, así que asegúrese de probar cómo se verá su icono en todos esos entornos cuando se comparan con las aplicaciones que probablemente se ubicarán en la misma lista que la suya. Tienes que descubrir cómo atraer la atención del usuario hacia la competencia y hacia ti.!

Háblame de tus iconos favoritos

Déjame un comentario a continuación con ejemplos de íconos que crees que lo están haciendo bien.!