Diseño de aplicaciones iOS. Volumen 1: Herramientas y documentación necesaria.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Llegado el momento, inicié mis andaduras en el diseño de aplicaciones móviles, y muy a mi pesar, me resultó muy complicado localizar material útil para la faceta de diseño de una aplicación y mucho menos en Español. Así que, con la intención de colaborar en ADWE con información útil para ti, hoy intento redactar el material que me hubiera gustado encontrar en la red hace tiempo.

1. ¿Qué herramientas son útiles para iniciar un diseño de este calibre?

Digamos que llegado a este punto ya tienes cerrado con el cliente satisfactoriamente un presupuesto, un timing y unas directrices de lo que se pretende conseguir en este nuevo proyecto. Así que, es necesario organizarse bien para cumplir los requisitos que se te exponen.

a) Google Calendar o Asana. Está claro, que la primera labor a desempeñar es dividir el proyecto en distintas tareas para cumplir el timing sin problemas. Este proceso de organización te servirá para subdividir el proyecto en vistas (cada página de la aplicación) y te servirá para comenzar a organizar mentalmente lo que irá en cada vista.

real-google-calendar-11ret

Dos herramientas muy útiles para organizar dichas tareas son las que te presento. Yo, personalmente, recomiendo Asana pues te permite organizar muy bien las tareas, y de un solo vistazo ver claramente tus objetivos a corto, medio y largo plazo. Además, te brinda herramientas muy útiles para coordinarte con los desarrolladores de dicha aplicación.

Captura de pantalla 2013-11-04 a la(s) 23.44.30

b) Llega el momento de crear los primeros bocetos de la aplicación, obviamente lo más fácil y rápido para todos es coger papel y lápiz y comenzar a pensar en lo que el usuario necesita en cada vista. Pero hoy día, resulta muy importante distribuir estos primeros bocetos entre el jefe de proyecto y el/los desarrolladores para diseñar algo en lo que todos estén de acuerdo.

Así que, para esta labor te aconsejo crear bocetos con tu tableta gráfica rápidamente con programas como balsamiq mockups, o cualquier programa vectorial con el que te sientas cómodo, y luego compártelos a través de Conceptboard, agregando los comentarios que veas necesarios.

– ¿Balsamiq mockups?

mockupsMakesYouAwesome

Es una aplicación muy útil para crear borradores de aplicaciones de forma rápida y sencilla. Pues entre sus herramientas incluye la mayoría de botones que iOS suele utilizar, lo que te facilitará la tarea de crear tus primeros bocetos.

Captura de pantalla 2013-11-04 a la(s) 23.46.28

– ¿Conceptboard? Es una herramienta muy interesante que puedes integrar en tu cuenta de Google Drive, de forma muy sencilla, que te brinda la posibilidad de crear “tableros” que te permiten de forma visual explicar tus diseños con anotaciones que mostrar a tus clientes, o incluso que ellos puedan hacer comentarios ‘in situ’ sobre tus bocetos/diseños de una forma mucho más clara y directa.

Captura de pantalla 2013-11-04 a la(s) 23.51.46

(Consejo de diseñadora): Más vale debatir con el cliente en los bocetos que en el producto final.

Te ahorrarás muchas horas de trabajo.

c) Posteriormente, una vez tengas aprobados los bocetos iniciales de estructura tanto por el jefe de proyecto o en su defecto cliente, y por el desarrollador que es el que tendrá que programarlo, llega el momento de trasladarlos a una estética y estilo concreto. Ahí deberás considerar si la marca o producto está creada para mantener la línea de estilo predefinido, al que deberá adaptarse al diseño de la aplicación. O crear un estilo desde cero con toda la creatividad de tu lado.

ios7-concepto-130528

Para crear en sí el diseño de la aplicación yo normalmente utilizo Adobe Illustrator, pero tú puedes elegir aquel programa con el que te sientas más cómodo a la hora de diseñar: Photoshop, Gimp, Corel Draw, etc. Para diseñar correctamente para iOS, te aconsejo seleccionar como resolución base: 640X960px. Pues luego tendrás que ajustar tu diseño a las dos resoluciones restantes de iPhone: 640X1136px y 320X480px, (aunque de ello hablaremos más concretamente en otros volúmenes).

d) Tu trabajo como diseñador de aplicaciones no acaba pasándole al desarrollador tus archivos vectoriales, pdf y pngs; si no que también deberás facilitarle en el entorno Xcode como construirías esos diseños en un denominado “Storyboard”, que explicaré detenidamente más adelante.

xcode

¿Por qué? Si eres un experimentado en discutir con un programador cada vez que no cuida al detalle, al pixel, tus diseños cuando los plasma en una web… sabrás de lo que te hablo. Si no, pues es el momento de que te enfrentes a la construcción de tu diseño en este espacio para controlar que tu diseño se construye al pixel, y para descubrir ante que problemas puede encontrarse el desarrollador con tu diseño.

Continuará…

Acostumbrada a vivir en red, hoy me propongo un nuevo reto: dar el salto del microblogging a algo más grande. Así que, intentaré extraer lo mejor de mis experiencias profesionales a nivel de diseño, maquetación front-end y desarrollo de aplicaciones móviles para trasladarte de la forma más sencilla todo aquello que sé. ¿Nos seguimos? @CristinaGrim

Comentarios arrow No hay comentarios

Escribe un comentario

Tu e-mail no será publicado. Los campos marcados con un asterisco son obligatorios.