Pocas cosas teme tanto un escritor como enfrentarse a una hoja en blanco. A los diseñadores les pasa lo mismo cuando se encuentran ante la pantalla. A la hora de diseñar app nativas, siempre les queda el consuelo de poder acudir a las guidelines. Pero ¿qué ocurre con las aplicaciones cross? ¿Dónde acudir? Hoy os damos algunas claves para enfrentaros al diseño de aplicaciones multiplataforma.
1. Haz que el usuario se sienta como en casa
Cada usuario esta familiarizado con una plataforma. Por ello antes de empezar a diseñar, revisa las guidelines de las diferentes plataformas: Android, iOS y Windows phone. Ten en cuenta los conceptos básicos tanto de navegación como de la interfaz para mejorar así la experiencia de usuario.
2. El tamaño sí importa
Una vez tengas claro el Navigation Flow de tu app, empieza a trabajar los wireframes sobre un espacio de trabajo de resolución media: 320x568px. Esta proporción de pixels es la misma en iPhone 5 y Nexus 5 (aunque el Nexus sea un smartphone de mayor tamaño, la proporción es la misma). Trabajar sobre este tamaño de base, nos permitirá escalar los recursos para diferentes dispositivos consiguiendo una visualización óptima de la capa gráfica. Si además de smartphone, también debemos enfrentarnos al diseño orientado a tablet, la mejor solución será tomar de base el iPad de resolución media: 1024x768px.
3. La belleza es relativa a la plataforma
La elección de una buena paleta de color nos ayudará a unificar el diseño en las diferentes plataformas. Para que la app no se aleje de las guidelines, podemos alinear la estética usando controles y botones nativos de cada una de las plataformas. De igual forma escogeremos los colores de los Call To Action para mejorar la usabilidad de la app al máximo.
Por otro lado, el uso del color definirá el branding y look&feel del producto, ayudando al usuario a sentirse cómodo en la utilización de nuestra aplicación y a identificar nuestra app frente a sus competidores.
4. Assest y cotas
El problema principal es que hay varios modos de trabajar. Ante cualquier duda pregunta al equipo de desarrollo. Por ejemplo, si tu equipo trabaja con Ionic, aquí te damos algunos consejos de cómo debes exportar los assets y generar las cotas para facilitar la tarea a los desarrolladores.
- Assets: podemos usar las resoluciones de iOS (@2x y @3x). También puedes exportar en .svq en vez de .png y especificar el tamaño en píxeles.
- Cotas: hay que definir el tamaño de letra en px; después Ionic reescala los px según el propio dispositivo.
- Splash: Ionic tiene un generador que mediante una imagen cuadrada de 2208x2208px la recorta según el dispositivo, manteniéndola siempre centrada. Por esto, se recomienda que el contenido esté en el cuadro centrado de 1200x1200px.
- Iconos app: en el caso de Ionic, éste tiene un generador de iconos propio. Requiere una sola imagen .png de al menos 192x192px sin bordes redondeados. Después, él exporta los iconos en los tamaños que toca para todas las plataformas.
5. Se creativo
Cada proyecto es un mundo. No siempre se tienen que seguir las guidelines al pie de la letra ¡se creativo! Si estás poco inspirado, hazte una cafe, pon tu canción favorita y echa un vistazo a páginas como http://pttrns.com/ o http://uxarchive.com/
Autora del post: Helena Hernández
