Ver el diseño de una interface para dispositivos móviles directamente en un dispositivo real, siempre te va a dar una idea mas acertada de lo que estás haciendo que dejarlo todo en manos de tu editor de imágenes.
Cuando diseñas interfaces en Photoshop u otra plataforma similar, en ocasiones puedes cometer algunos “errores típicos”, sobre todo relacionados con el tamaño que has establecido para un determinado icono, el cuerpo de una fuente, la accesibilidad y usabilidad de un botón, un menú, etc… Hay muchos factores que contribuyen a que esto suceda, por ejemplo: determinados niveles de zoom de Photoshop desvirtúan un poco la calidad de visualización de los elementos en pantalla, los colores pueden sufrir variaciones respecto a lo que ves en Photoshop y lo que verás en el dispositivo final, también influye sin duda, la manera en la tengas calibrado el monitor… La representación de líneas y fuentes muy finas, según en que monitores, puede ser de muy baja calidad y, en definitiva, existen una serie de factores que pueden hacer que lo que has diseñado en Photoshop no tenga la calidad que esperabas cuando la visualices en el dispositivo final.
Pues bien, para minimizar esos riesgos, existen aplicaciones como Skala View/Preview.
Consiste en una App de escritorio y una App para móviles. Por una parte se instala la App de escritorio, que puedes descargar de la página oficial, y por otra la App móvil (disponible en App Store y Google Play) en los dispositivos móviles que suelas utilizar para pruebas… Yo normalmente uso un iPhone 5 para iOS y un Motorola “MotoG” para Android. Para los usuarios de Windows, siento deciros que aún no existe para este sistema operativo y la verdad, desconozco si se prevé algún lanzamiento (desde luego en la web oficial no dicen nada).
Una vez instaladas las correspondientes Apps, el procedimiento es muy sencillo:
Lo primero es conectar la App de escritorio con la App para el móvil. Para ello, basta con abrir ambas aplicaciones y, una vez abiertas, ir a la App móvil y seleccionar el equipo con el que desea conectar (ambos deben estar conectados en la misma red). Una vez hecho esto, mostrará el mensaje “connected” en ambas pantallas (ordenador y móvil).
Hecho esto, abres un documento en Photoshop (y aquí abro un paréntesis para comentar una obviedad: ¡¡Ojo a las medidas!! Siempre deben corresponder al tamaño de tu dispositivo, porque aunque esta herramienta tiene una opción de “ajustar a pantalla”, determinadas relaciones de aspecto no las representará bien porque no son directamente proporcionales).
Una vez abierto el documento en Photoshop, creas tu diseño y lo guardas en formato nativo. Después arrastras ese archivo .psd a la pantalla central de la App de escritorio y se mostrará automáticamente en tu dispositivo movil. ¡Y eso es todo! Así de sencillo y… así de útil, tan útil que cada vez que guardes cambios en el documento, la vista de tu móvil se actualizará automáticamente sin necesidad de arrasar de nuevo el documento. De esta manera puedes estar trabajando en Photoshop y viendo simultáneamente los cambios en la pantalla de tu móvil.
El resultado es que puedes comprobar “en vivo” si ese icono que has metido con calzador en una esquinita va a ser visible o si determinados textos van a ser legibles correctamente o no. Esto que es tan básico y fundamental, se nos escapa a menudo a muchos diseñadores (sobretodo a los noveles en este campo) que, damos por buenos resultados que luego en el dispositivo final no son tales.
Así que en resumen, no dejéis nada al azar, trabajando con Skala View/Preview estoy seguro de que optimizaréis vuestros resultados notablemente y además, es una herramienta totalmente gratuita.
