Diseño de aplicaciones iOS. Volumen 4: Diseñando una aplicación.

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

Posteriormente, una vez tengas aprobados los primeros bocetos del anterior post, hecho las modificaciones oportunas sobre los mismos, y debidamente compartidos con Conceptboard, llega el momento de darle un estilo concreto y definido a tu aplicación. Como ya te comenté en anteriores publicaciones, yo suelo hacer estos diseños sobre Adobe Illustrator, pero tú puedes seleccionar aquel programa con el que te sientas más cómodo diseñando.

5. Para empezar a diseñar, te aconsejo crear la primera mesa de trabajo con resolución: 640×960 px. En dicha resolución, el tamaño de la fuente deberá ser el siguiente: 34 px para títulos y 28 px para texto normal. El resto de elementos, llegados a este punto, ya debes saber su tamaño, si no, te aconsejo revisar la documentación necesaria.

6. Una vez tengas diseñada la primera vista, en este caso el Login, con la resolución que te comentaba anteriormente. Sólo es cuestión de crear otras dos mesas de trabajo: 640×1136 px, simplemente un pelín más alta que la primera, con los cual, sólo tienes que adaptar los elementos a una vista más larga. En el caso de la resolución más pequeña para Iphone, tendrás que adaptar tu diseño a 320×480 px. Por tanto, tendrás que escalar los elementos que incluyas en cada vista hasta que encajen en esta resolución, pero recordando que la tipografía no debe ser inferior a la siguiente: 20 px para títulos, y 17 px para textos de tamaño normal.

7. Si en tu caso, te solicitaron crear un diseño para Ipad, las resoluciones, tamaños y posición de los elementos debe ser diferente. Pues estos dispositivos tienen una forma de lectura diferente de cara al usuario. Así que deberás tener esto en cuenta para tu diseño. Para ello, te comparto este enlace que te resultará muy útil.

En un principio, este minicurso voy a dedicarlo exclusivamente al diseño iOS para iPhone, con algunas pinceladas y referencias al diseño para iPad que te serán muy útiles, pero no voy a extenderme sobre ello, a no ser que necesites ese apoyo.

Por tanto, tu diseño para iPhone quedará algo parecido en estructura a esto, el diseño lo dejo a tu elección. Pero estaré encantada de conocer tus progresos con el curso si me los adjuntas como comentario en cada uno de los post de este minicurso.

diseño para ios español login

8. Pues bien, esto mismo que acabas de hacer con esta vista, deberás hacerlo con todas. Teniendo sumo cuidado con el tamaño de las fuentes, porque las indicaciones que anteriormente te comentaba, son el tamaño idóneo para que se vea todo correctamente en cada una de las resoluciones.

resoluciones ios apple diseño español

9. Una vez tengas todas las vistas diseñadas y adaptadas a las tres resoluciones para iPhone (en caso de ser para iPad serán más), llega el momento, de crear otros elementos necesarios para completar el diseño de tu aplicación: Hablaremos entonces de “launch images” y de los iconos de la aplicación.

– El launch image de una aplicación iOS, es aquella pantalla que aparece en el dispositivo mientras tu aplicación se está iniciando, normalmente se utiliza con un efecto interesante que introduce la primera vista de la aplicación, en nuestro caso el login.

Los tamaños correspondientes a este elemento, serán tantos como tantas resoluciones tengas que trabajar. En el caso del ejemplo que estamos siguiendo, son 3: 320×480 px, 640×960 px y 640×1136 px. Su diseño debe ser muy sencillo, pues servirá de introducción a tu aplicación y apenas será percibido por el usuario.

En nuestro caso, podría ser algo por el estilo:

launch image diseño ios

– En cuanto a los iconos, te reirás cuando veas todos los tamaños que tienes que confeccionar del mismo. Pues tu aplicación aparecerá en tantos lugares, que necesitarás que el mismo icono se adapte perfectamente a cada uno de ellos.

En primer lugar, decirte que para facilitarte la labor puedes descargarte este template PSD, que incluye todos los tamaños solicitados por Apple.

iconos app ios diseño

Para más información sobre los iconos, puedes dirigirte al siguiente enlace:
http://mrgan.tumblr.com/post/708404794/ios-app-icon-sizes

Una vez confeccionados todos los diseños de las vistas, los launchimages y los iconos, ya puede decirse que tienes el diseño de tu primera aplicación. Y ahora el siguiente paso es: adaptar dicho diseño a Xcode. ¿Te apetece? ¡Pues vamos con ello en el siguiente volumen!

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

Escribe un comentario

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