Diseñando para iOS: 6 consejos útiles


El uso de aplicaciones móviles crece día a día, y al ser diseñadores muchas veces nos encontramos con peticiones de diseño exclusivo para este tipo de plataformas, por lo cual debemos tener muy claras no sólo las características de los sistemas operativos móviles, sino también las propias particularidades de los dispositivos en sí.

Con respecto a esto, muchos diseñadores opinan que el diseño para iOS, el sistema operativo desarrollado para los productos móviles de Apple, es un poco más complicado de realizar debido a las peculiaridades que presenta, las cuales determinan las pautas a seguir en cuestiones de diseño y desarrollo. Es por ello hoy vengo a comentarte sobre algunos aspectos generales a tener presentes en el diseño para iOS, con lo cual se te hará más fácil todo el proceso:

1. El dispositivo

Lo más lógico si vas a diseñar para un dispositivo móvil es que primero tengas en cuenta su tamaño para crear el lienzo de tu diseño, pues esto te dará una visión real de cómo organizar los elementos. Los dispositivos de iOS vienen en dos formatos principales: iPhone y iPad, y dentro de cada uno de ellos existen varios modelos con tamaños diferentes, por lo cual debes tener muy claro para cuál o cuáles de ellos estás diseñando.

Ahora te muestro las características de los más importantes:

01

2. Retina

Retina Display es una marca comercial de Apple para referirse a las pantallas de alta densidad de píxeles, las cuales presentan una resolución por encima de los 300 ppp. Estas pantallas muestran un increíble nivel de detalles, con lo cual cualquier error en el diseño, por más pequeño que sea, podrá verse con total claridad.

Actualmente la mayoría de los dispositivos móviles de Apple poseen pantalla Retina, por tanto, siempre debes hacer una versión Retina de cada uno de los elementos de tu diseño, o sea, crear elementos con el doble de la resolución previa para ser visualizados correctamente y evitar así que tu diseño se vea borroso, aplastado o pixelado:

02
A) Elemento previo, B) Elemento escalado sin retina, C) Versión Retina

Debes saber además que a las imágenes hechas para pantallas Retina se les da la denominación de @2x, siendo @1x la imagen en su tamaño estándar, y esto se especifica en el propio nombre del archivo para evitar confusiones. Además, ten en cuenta que el iPhone 6 Plus posee ya @3x, o sea, el triple de la resolución previa.

3. Elementos

En las aplicaciones móviles la interactividad se establece a partir de los dedos, por lo cual todos tus elementos de toque (botones, sliders, interruptores, etc.) deben tener un tamaño apropiado para éstos. Apple recomienda utilizar elementos de 44×44 píxeles, pero si aun así te parecen pequeños puedes escoger un tamaño mayor de acuerdo a las características de tu diseño o la apariencia que andes buscando.

Además recuerda no ubicar los elementos demasiado cercanos unos de otros, sobre todo si son pequeños y realizan acciones diferentes, pues de otra forma puede dificultarse la funcionalidad de la aplicación. En fin, se trata de crear un balance entre sutileza y usabilidad:

03

4. Orientación

Cuando trabajas para iOS no estás diseñando para una sola pantalla, pues aun cuando no se trate de una aplicación universal (para todos los dispositivos) todavía debes considerar las diferencias de orientación, ya que algunos usuarios prefieren mirar la pantalla de modo horizontal y otros de forma vertical:

04

Por tanto, es recomendable diseñar una versión de cada una, pensando siempre en las intenciones del usuario con ese dispositivo o esa orientación específica. Recuerda: la flexibilidad de orientación es el núcleo de la plataforma móvil, y las personas esperan que funcione.

5. Iconos

Es importante mantener el estilo que ha establecido iOS para sus iconos y aplicaciones, ya que es a esto a lo que están acostumbrados los usuarios, y cambiarlos significaría que quizás algunos usuarios no lograrían comprender de qué se trata. Sin embargo, lo bueno de diseñar para iOS es que la mayoría de los iconos ya están creados (iOS Dev Center), con lo cual sólo te resta seleccionar los que necesites e integrarlos a tus diseños.

No obstante, aquí debes tener presente también el tamaño que debes darle a cada uno de acuerdo a su función y al dispositivo al que vayan dirigidos, pues este es un aspecto que varía. Ahora te muestro los más utilizados:

05

6. Recursos para el desarrollo

Pensar en lo que necesitará el desarrollador para implementar la aplicación te dará la guía de cada uno de los elementos que debes diseñar o tener en cuenta para que tu trabajo tenga una buena calidad, además de darte la seguridad de que el resultado final será acorde a lo que diseñaste. Por ello es importante que el desarrollador tenga la mayor cantidad de recursos e información disponible, lo cual se traduce en:

  • Toda la tipografía que utilizaste en tu diseño en formato TTF u OTF (iOS usa principalmente Helvetica Neue como tipo de letra, aunque también puedes trabajar con otras que sean compatibles).
  • Todas las imágenes individuales que hayas utilizado, en @1x y @2x, en formato PNG.
  • Todos los iconos (y sus versiones retina) en PNG.
  • Pantalla de carga (la imagen que aparece cuando se está cargando la aplicación), que debe ser acorde a los dispositivos para los cuales se ha pensado la aplicación.
  • Diagrama que muestre cómo ir de un lugar a otro en la aplicación o cómo ésta debe funcionar.
  • Diagrama con las dimensiones de todos los elementos y su posición en la pantalla.
  • Ejemplos y muestras que expliquen cómo deberían funcionar las animaciones.
  • Lista exhaustiva de los colores utilizados en la aplicación con su código RGB.

Por último, todos los elementos utilizados deben contener sus datos básicos en el nombre (ej.: general─logo@1x─200×60 significa que se trata del logotipo, que mide 200×60 píxeles y está presente de forma general, o sea, en todas las vistas de la aplicación).

Conclusiones

Las recomendaciones que te he mostrado hoy constituyen una sencilla guía de aspectos generales que deben tenerse en cuenta a la hora de realizar diseños para iOS, pero existen muchos más. ¿Los conoces? Si es así no olvides compartirlos con todos, y si esta entrada te ha sido útil déjame saberlo con un comentario.