Designing for mobile devices

Diseño para
dispositivos móviles

Wednesday, December 19, 12

Ester
Serrano ¿Quién soy?

@esterserrano

Planning

Ejemplos
¿Cuál es la situación actual?
Proceso de diseño para dispositivos
móviles (con un caso práctico)
Conclusiones


¿Algún diseñador
web en la sala?


Yeah!
Jugáis con ventaja

¿Por qué?


Sabéis moveros en
entornos cambiantes

Usáis herramientas y
procesos similares


Los que no sois
diseñadores web...


También moláis!
De verdad...

“El efecto espejo
retrovisor”

“ el mundo a través de un
Vemos
espejo retrovisor. Nos movemos
hacia delante mirando hacia atrás
Marshal McLuhan


Ejemplos


Paper
http://tobiasahlin.com/blog/skeumorphism-and-storytelling/

Paper


Microsoft


Clear


Flipboard


Readability


Svpply


¿Por qué queremos
aprender esto?


Recordad esto
No hace tantos años

Las cosas han
cambiado bastante

Hablamos de
menos de 10 años


Los móviles tienen la
misma tecnología
que un cohete de la
NASA de los 60

Crecimiento de
dispositivos
móviles


Todo el mundo usa este gráfico


Diversidad de
dispositivos


“ más presencia en dispositivos
Quiero
móviles
Tu cliente


Pues habrá que hacer
esto...¿no?

+100 millones
de iPhones vendidos


pero...


6800 millones
de personas en el
mundo


77%
de gente con móvil


77%
de gente con móvil
2%
tiene iPhone


migajas...


77%
de gente con móvil
2%
tiene iPhone

23%
tiene smartphone


aunque apetitosa...es
una pequeña parte

Y entonces...¿para
qué dispositivo
diseñamos?

Ejercicio
Vamos a
pensar en
un proyecto
concreto


Una tienda
Diseñar una tienda
de productos
locales


Objetivo principal
Aumentar el nivel de
ventas y dar visibilidad
a los artesanos.


Necesidades
Debe poder usarse
desde cualquier
dispositivo


Este es nuestro
target


Contexto
Va a ser un tema recurrente hoy


Solemos imaginar
este contexto...y es
cierto

¿Y qué pasa en este
caso?

¿Y en éste?

¿Sabíais que...


el 62% de la gente usa
el móvil mientras ve
la tele?


el 69% lo usa
mientras compra?


el 34% empiezan una
operación en el pc y
la acaban en el móvil


<<<<<<<<<<<<
Alguien gastó 5000€ en muebles a
través del app de M&S


La gente usa las
cosas como quiere

Empezando un
diseño


El Storyboard


#4
Storyboard


#4
Storyboard

Identifica las tareas principales que
quieres comunicar
Crea un personaje y decide sus
acciones principales
Crea una historia básica
Rellena los huecos

Pantallas clave
Home / Catálogo
Página de producto
Proceso de compra

Cosas que tenéis que
tener en cuenta antes
de empezar


1 ¿Para qué
dispositivo va a
diseñarse?

68


Qué dice Google
Analytics?
69


No sólo se trata de la
pantalla

Diferentes elementos
de interacción

2 ¿Cuál va a ser
la resolución de
la pantalla?

72


* De nuevo, esto es obra de Stephanie Rieger 74


“ vuestros diseños cuanto antes
Ved
en el dispositivo, no en el emulador!
Lo dice todo el mundo


3 ¿Hago una App
o una web?

bradfrostweb.com/blog/notes/native-vs-web-is-total-bullshit/
76


Puedo contar la
versión larga


Pero esta vez no lo
haré


Versión App Web
móvil nativa Responsive


Versión App Web
móvil nativa Responsive

desde 2006 desde 2010 Ahora
Optimizado para Hay que soportar Una sola web, un
pantallas pequeñas. varias plataformas. solo diseño.

Necesitas dar todo Contenido no Indexable en Google.
el contenido. indexados en
Google. Requiere nuevas
El contenido tiene habilidades y
que gestionarse 2 Sólo recomendables conocimiento.
veces. si usan elementos
concretos de Más tiempo al
Bastante caro hardware. principio.


¿Cuándo app nativa?
La función principal está basada en un
elemento de hardware

Las restricciones de tiempo o dinero
sólo permiten diseño para un
dispositivo específico


“Why do people pay $8 for a dessert
with no second thought but won’t buy a
79-cent iPhone/Android app without
thinking hard if it’s worth it.

Preguntas de quora


¿Cuándo web?
Si no es absolutamente necesario que
hagas una aplicación.

¡Disclaimer!
Esto no quiere decir que sea más fácil

¿Os suena el
Responsive web
design?

#1 Crash course


Aquí está el secreto
del diseño móvil

¿Os suena este tío?
@EthanMarcotte

La web comenzó como
imitación de la imprenta


Y dio lugar a retículas
fijas como esta


Pero ya sabéis lo que
ha pasado...

Una web para
gobernarlos a todos


“ retícula ﬂuida con imágenes
Una
ﬂexibles que incorpora media
queries para crear un layout
adaptable
Ethan Marcotte


“ manera de presentar nuestro
Una
contenido sin saber en qué
dispositivo va a verse
Ethan Marcotte


Retícula
fluida

Contenido
=%
Contenedor


120px

24px 24px 24px 24px 24px


100%

20% 20% 20% 20% 20%


Imágenes
flexibles

Reescalar altura y anchura

max-width = 100%


El problema con las
imágenes

Demasiado peso para
un entorno móvil.

http://adaptive-images.com/

https://github.com/joshje/Responsive-Enhance

https://github.com/scottjehl/picturefill

Soluciones que ya
hay por ahí

Algunos usan el
ingenio
http://adactio.com/journal/5439/


Media
queries

Diferentes necesidades, diferente CSS

@media screen and (max-width:320px) {...}

Es necesario conocer los principales
breakpoints (Stephanie Rieger)

Media
queries

max-width 479px (smartphone portrait)
max-width 767px (smartphone landscape)
max-width 1023px (tablets portrait)
max-width 1024px (tablets landscape & others)

El resto queda a vuestro criterio


¿Eres desarrollador
web?
110


Hazte amigo de uno
cuanto antes

Planear Diseñar Desarrollar Implementar


Planear Implementar

Diseñar


Conversación


Comienza el diseño


Nombre del producto

Descripción del producto

Información de envío


Nombre del producto


No intentes meter todo el
contenido de un vistazo



Nombre del producto


Info útil pero no
Información de envío imprescindible


Nombre del producto



El botón de comprar no
se ve...


Contenido primero


Nombre del producto

BOTÓN
COMPRAR



Nombre del producto

Ten en cuenta lo
que cabe en la
BOTÓN
COMPRAR
pantalla



Nombre del producto Nombre del producto

BOTÓN BOTÓN
COMPRAR COMPRAR


Nombre del producto

BOTÓN
COMPRAR


Nombre del producto
Información del envío

Información de contacto
BOTÓN
COMPRAR




Nombre del producto

Información de contacto
BOTÓN
COMPRAR


Información del envío No tengas miedo
al scroll en móvil

Contenido primero,
navegación después


MENU

Nombre del producto

BOTÓN
COMPRAR


Ropa Hogar Arte Ropa

Joyería Accesorios Hogar
Nombre del producto

Arte
Nombre del producto
Joyería

Accesorios

BOTÓN
COMPRAR
BOTÓN
COMPRAR

“Do nothing” Select element

MENU MENU

Ropa y accesorios Ropa
Nombre del producto Nombre del producto
Hogar Hogar

Papelería Decoración

Joyería Iluminación

Accesorios Libros y Música

Muebles

Cocina

Papelería

BOTÓN Joyería BOTÓN
COMPRAR COMPRAR
Accesorios

Toggle navigation

MENU MENU
MENU

Nombre del producto Ropa

Hogar

Decoración

Iluminación

Libros y Música

Muebles

Cocina

Papelería
BOTÓN
Joyería
COMPRAR
Accesorios

Left Nav Flyout

MENU

Ropa

Hogar

Papelería

Joyería

Accesorios

Usa el espacio que
no ves Off- canvas

¿Os suena el proceso
Mobile First?

#2 Crash course


¿Quién es éste tío?
Luke Wrobleski @LukeW

“ webs y las aplicaciones deberían
Las
ser diseñadas y desarrolladas
primero para el móvil
LukeW


Mobile last (degradación progresiva)


Mobile last (degradación progresiva)

Mobile ﬁrst (mejora progresiva)


Y por qué es mejor
“Mobile First”?


Una pantalla pequeña te
obliga a centrarte en los
importante

Una conexión lenta te
obliga a optimizar.


Sabe donde estás en todo
momento.
Geolocalización


“La mejor cámara es la
que llevas siempre
encima”


La pantalla táctil ofrece
nuevas posibilidades de
interacción

Móvil Tableta Desktop
Nombre del producto

?
COMPRAR

Descripción
del producto

Información
del envío

Productos similares

Información de
contacto

Pie de página

MENU Ropa Hogar Papelería Joyería Accesorios


Ropa Hogar Papelería Joyería Accesorios Ropa Hogar Arte Joyería Accesorios


Ropa Hogar Papelería Joyería Accesorios

Ropa

Hogar

Papelería

Joyería

Accesorios


“Show me the data”


MENU

Libreta “Superpoderes”

Comprar

¿Miedo a la página en blanco? Seguro que con
nuestra libreta con Supepoderes para tener
grandes ideas no padecerás nunca más este
síntoma. Apunta, dibuja, anota y escribe todo lo
que se te pase por la cabeza que seguro será una
genial idea.

La libreta es de tapa dura, toda forrada en papel
kraft muy bonito e impresa en tinta blanca. La
encuadernación es tipo en wire-o negro de doble
anilla, muy cómoda para abrir, cerrar y doblar la
libreta.

Descripción
Tamaño: 14,8 x 21 cm (DIN-A5)
Volumen: 100 hojas de papel blanco liso de 90 gr.
Comprar


MENU


Comprar

¿Miedo a la página en blanco? Seguro que con
nuestra libreta con Supepoderes para tener
grandes ideas no padecerás nunca más este
síntoma. Apunta, dibuja, anota y escribe todo lo
que se te pase por la cabeza que seguro será una
genial idea.

La libreta es de tapa dura, toda forrada en papel
kraft muy bonito e impresa en tinta blanca. La
encuadernación es tipo en wire-o negro de doble
anilla, muy cómoda para abrir, cerrar y doblar la
libreta.

Descripción
Tamaño: 14,8 x 21 cm (DIN-A5)
Volumen: 100 hojas de papel blanco liso de 90 gr.
Comprar

No uses un tamaño de
fuente menor a 16px

MENU


Comprar

¿Miedo a la página en blanco?
Seguro que con nuestra libreta
con Supepoderes para tener
grandes ideas no padecerás
nunca más este síntoma.
Apunta, dibuja, anota y escribe
todo lo que se te pase por la
cabeza que seguro será una

Comprar genial idea.

La libreta es de tapa dura, toda

Content first. Legibilidad

6
Legibilidad
Testar siempre en
el dispositivo para
asegurar la lectura

http://informationarchitects.net/blog/responsive-
typography-the-basics/ 154


Es necesario un
tamaño mayor en
pantalla.

El tamaño de fuente
depende de cómo se
usa un dispositivo

Fíjate en los mejores
y cópiales

Prototipa
prototipa
prototipa


Proceso de diseño
Revisión Revisión
viabilidad Concepto

t

Descubre Define Desarrolla Implementa

Proceso de diseño
Revisión Revisión
viabilidad Concepto

Desastre t

Descubre Define Desarrolla Implementa

Sin prototipar, la
implementación
puede ser desastrosa

Tenemos menos
experiencia y no
prevemos todo.

Es fácil tomar malas
decisiones

Prototipar

Mejoramos la toma de decisiones.

Comunicamos mejor nuestras ideas.

Obtenemos feedback del usuario desde
el primer momento.

Exploramos lo desconocido sin riesgos.

La vida de la gente es
caótica

Y no siempre hacen
lo que esperamos

Paper
prototype


In-screen
paper
prototype


Keynote


Diseño visual


1
Color
El contraste cambia
según la pantalla.
Reflejo en exteriores.

176


Diseñar para retina


Un poco de
inspiración


iPad

Windows Phone

Android

iPhone

Esto era todo lo que
quería contaros

Opinión
Muchos de nosotros vamos a poder dar forma a
los dispositivos, comportamientos y
experiencias.
¿Qué elegirías hacer?
Dieter Rams


Muchas gracias

@EsterSerrano
ester.serrano@designit.com

Recursos

beautifulpixels.com
dribbble.com/ (busca mobile)
www.alistapart.com/
www.netmagazine.com/
mobilewebbestpractices.com/
www.smashingmagazine.com/
52weeksofux.com/

Recursos

bradfrost.github.com/this-is-
responsive/
mediaqueri.es
futurefriend.ly/
adactio.com/journal/
css-tricks.com


Tuts

http://thinkvitamin.com/
http://www.codecademy.com/
http://tutsplus.com/
http://www.lynda.com/


Gente

Luke Wrobleski @LukeW
http://www.lukew.com/

Ethan Marcotte @EthanMarcotte
http://unstoppablerobotninja.com/

Stephanie Rieger@StephanieRieger
http://stephanierieger.com/

Gente

Josh Brewer @jbrewer
http://jbrewer.me/

Tren Walton @trentwalton
trentwalton.com/

Brad Frost @brad_frost
http://bradfrostweb.com/blog

Designing for mobile devices

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Designing for mobile devices

Semelhante a Designing for mobile devices (8)

Último

Último (20)

Designing for mobile devices