diseño móvil

A la hora de diseñar para móviles es necesario tener en cuenta una serie de aspectos y condiciones que quizá no contemplemos de un inicio. No sólo debemos ceñirnos al estudio de la interfaz para dispositivos diferentes a los que estamos acostumbrados sino a la manera de trabajar con éstos.

A Jimena Catalina le sigo la pista desde hace mucho y se ha marcado una estupenda presentación titulada Diseñar para móviles en la que nos brinda una serie de datos y consejos a la hora de afrontar este tipo de proyectos. Y es que no todo es Apple y aunque es un mercado jugoso, hay mucho más a lo que hincar el diente y que merece la pena estudiar.

Diseñar para móviles

Muchas veces me voy guardando información para tenerla recopilada y preparar un post potable. En esta ocasión versaba sobre el uso de media queries y frameworks o utilidades que ayudan en el desarrollo web multidispositivo. Hablo de cosas como 320 and up [en] o Skeleton [en].

Pero el tiempo ha ido pasando y en Smashing Mag han sacado un artículo muy (MUY) destacable sobre este tema, con un montón de recursos y enlaces super útiles que os llevarán por la senda correcta. Rara vez un recopilatorio de estos me ha parecido tan bueno y sólo puedo agradecer al autor su publicación. Ahí os va el link.

Responsive web design techniques [en]

The most awesome, incredible, kick-ass y todos los superlativos y calificativos que quieras añadir extras al título me sirven para presentar Overlapps, un rinconcito que me envía Miguel y que realiza una selección de aplicaciones para nuestros cacharritos móviles de últimas generaciones ya sean manzaneros o del robotito verde. Otra web que añadir a los descubrimientos de Beautiful Pixels o Pttrns.

Overlapps [en]

En su momento me sumé a la marea de diseñadores que descubrieron con alegría LiveView pero debo decir que al no contar ni con dispositivos de este tipo (ni con proyectos que lo requerían) pues en mi caso esta pequeña utilidad pasó más bien desapercibida.

Han tenido que pasar un buen puñado de meses y el poder verlo in situ para darme cuenta de lo valiosísimo de esta aplicación.

Para no extenderme mucho digamos que te permite previsualizar en tiempo real en un iPhone, lo que estés haciendo en tu Mac. ¿Ejemplo interesante? Estar diseñando en Fireworks y comprobando directamente qué tal se ve lo que estás haciendo en el iPhone (o el iPad). Porque aunque las guías de estilo y recomendaciones están muy bien a la hora de preparar una interfaz consistente y correcta, no hay nada mejor que verlo con los ojitos. Lástima que no haya versión para Android por ejemplo. ¿Conocéis algo similar?

LiveView for iPhone & iPad [en]

Ahora más que nunca está a la orden del día el uso de media queries para poder ofrecer una versión adaptada de nuestros sitios web en función del dispositivo que esté haciendo la petición. Para que nos entendamos todos y en plan rápido nos sirve para decir por ejemplo “oye, si estás viendo la web y la ventana del navegador tiene un ancho inferior a 600px, muestra la web con esta CSS. Si no, usa esta otra hoja de estilo”.

No es que sea nada nuevo pero con el auge de dispositivos móviles y tablets la variedad de dispositivos y características que se deben contemplan a la hora de diseñar para web hacen recomendable el uso de estos métodos.

Bueno pues Media Queries es un showcase de sitios que adaptan sus contenidos de una manera efectiva. Parece que a día de hoy, hay galerías de todo y para todos.

Media Queries [en]

De los mismos creadores de Android Patterns me traigo un recurso super útil si estáis desarrollando aplicaciones para los juguetitos de Apple.

Si usáis Fireworks sabéis que es bastante fácil añadir interactividades simples con las que dotar al prototipo de un aspecto más cercano al desarrollo final que el que puede mostrar un simple jpeg. Ahora, con TAP, tenemos la posibilidad de incorporar nuevas habilidades a nuestros prototipos pensados para el iPad o el iPhone: detección de gestos o transiciones…

Acaba de salir del horno pero tiene muy buena pinta. Y todos estos “extras” son bienvenidos y agradecidos a la hora de presentar los prototipos, ¿verdad?

TAP, desarrolla prototipos interactivos para iPad y iPhone con Fireworks [en]

Seguimos con post de tema interface :) Porque aunque la documentación existente sobre las guías de estilo de diseño para Android [en] son bastante extensas y potables, creo que este pequeño “add-on” será bien recibido.

Android Patterns recopila una serie de patrones de diseño que son recomendables de cara a la construcción de una aplicación consistente y usable. Como se suele decir siempre cuando se tratan estos temas, los patrones son sólo sugerencias y consejos y no se pueden tomar como verdades absolutas aunque sí que es cierto que vienen a resolver correctamente los problemas que se plantean. Es por ello que nunca está de más tener a mano chuletas de este estilo.

Categorizados en función del contexto, encontramos preguntas que nos podemos realizar durante el proceso de diseño y una respuesta en forma de sugerencia. Todo acompañado de pequeños gráficos para facilitarnos el entendimiento.

Un recurso muy útil para ir despertando el gusanillo UX :)

Android Patterns [en]

Añado al saquito que tengo de posts sobre recursos de usabilidad y patrones de diseño web (y este otro también) una web que presenta capturas de aplicaciones realizadas para iPhone y de esta manera hacernos una idea de los patrones de interacción e interfaz que se suelen seguir de cara a conseguir una experiencia positiva con el usuario.

Es una web muy sencilla de usar, basada en filtrado por etiquetas y poco más. Ya sea en plan inspiracional o como punto de partida para buscar patrones, Pttrns puede ser un buen recurso.

Pttrns [en]

Febrero de 2011 llega con una nueva edición de DeviceDays, el evento que cada año organiza el equipo de BlocketPc, con un buen repertorio de talleres y conferencias, con sorteo de cositas y, por supuesto, al que sigue siendo gratis el acudir.

Las plazas suelen volar entre los que prueban una vez y luego repiten por lo que si os llama el desarrollo móvil y estáis por Barcelona el día 18 de Febrero, inscribiros ya. Servidor promete que será una buena experiencia.

DeviceDays 2011

Preguntaba Chavalina hace poco por Twitter si conocíamos alguna página en la que se mostrasen diseños creados para plataformas móviles. En mi caso particular os recomiendo que echéis un vistazo a lo que hay dentro de la etiqueta diseño móvil porque es donde voy guardando la información de este tipo.

En cualquier caso, chavalina facilitaba un linkito que no tenía yo y que paso a compartir con vosotros. El sitio web se llama TapFancy y recopila vistosos diseños de aplicaciones para los cacharritos móviles de la manzana de Jobs.

TapFancy [en]