Upload
ester-serrano
View
33
Download
2
Embed Size (px)
DESCRIPTION
Design for mobile devices today is not an option but a necessity for all businesses. Being on the Internet is not enough, now we must also provide users with an optimal experience on their devices. High mobility, a small screen, short-term use, little attention... are some of the assumptions surrounding the use of these devices. But is this always true? Is there any more information that we should take into account? And besides... Application, mobile web or responsive design? This workshop will discuss the reasons why this is important and discover through practice which the most important aspects to be considered are when designing an application or website.
Citation preview
Diseño para dispositivos móviles
Wednesday, December 19, 12
¿Quién soy?
@esterserrano
Ester Serrano
Wednesday, December 19, 12
Planning
Ejemplos¿Cuál es la situación actual?Proceso de diseño para dispositivos móviles (con un caso práctico)Conclusiones
Wednesday, December 19, 12
¿Algún diseñador web en la sala?
Wednesday, December 19, 12
Yeah! Jugáis con ventaja
Wednesday, December 19, 12
¿Por qué?
Wednesday, December 19, 12
Sabéis moveros en entornos cambiantes
Wednesday, December 19, 12
Usáis herramientas y procesos similares
Wednesday, December 19, 12
Los que no sois diseñadores web...
Wednesday, December 19, 12
También moláis! De verdad...
Wednesday, December 19, 12
¿Por qué?
Wednesday, December 19, 12
“El efecto espejo retrovisor”
Wednesday, December 19, 12
“Vemos el mundo a través de un espejo retrovisor. Nos movemos hacia delante mirando hacia atrás
Marshal McLuhan
Wednesday, December 19, 12
Ejemplos
Wednesday, December 19, 12
Paper
http://tobiasahlin.com/blog/skeumorphism-and-storytelling/Wednesday, December 19, 12
Paper
Wednesday, December 19, 12
Microsoft
Wednesday, December 19, 12
Wednesday, December 19, 12
Readability
Wednesday, December 19, 12
Readability
Wednesday, December 19, 12
Svpply
Wednesday, December 19, 12
¿Por qué queremos aprender esto?
Wednesday, December 19, 12
Recordad esto No hace tantos años
Wednesday, December 19, 12
Las cosas han cambiado bastante
Wednesday, December 19, 12
Hablamos de menos de 10 años
Wednesday, December 19, 12
Los móviles tienen la misma tecnología que un cohete de la NASA de los 60
Wednesday, December 19, 12
Crecimiento de dispositivos móviles
Wednesday, December 19, 12
Todo el mundo usa este grá!co
Wednesday, December 19, 12
Diversidad de dispositivos
Wednesday, December 19, 12
“Quiero más presencia en dispositivos móviles
Tu cliente
Wednesday, December 19, 12
Pues habrá que hacer esto...¿no?
Wednesday, December 19, 12
+100 millones de iPhones vendidos
Wednesday, December 19, 12
pero...
Wednesday, December 19, 12
6800 millones de personas en el mundo
Wednesday, December 19, 12
77%de gente con móvil
Wednesday, December 19, 12
77%de gente con móvil2%tiene iPhone
Wednesday, December 19, 12
migajas...
Wednesday, December 19, 12
77%de gente con móvil2%tiene iPhone
23%tiene smartphone
Wednesday, December 19, 12
aunque apetitosa...es una pequeña parte
Wednesday, December 19, 12
Y entonces...¿para qué dispositivo diseñamos?
Wednesday, December 19, 12
Wednesday, December 19, 12
Ejercicio
Vamos a pensar en un proyecto concreto
Wednesday, December 19, 12
Una tienda
Diseñar una tienda de productos locales
Wednesday, December 19, 12
Objetivo principalAumentar el nivel de ventas y dar visibilidad a los artesanos.
Wednesday, December 19, 12
NecesidadesDebe poder usarse desde cualquier dispositivo
Wednesday, December 19, 12
Este es nuestro target
Wednesday, December 19, 12
ContextoVa a ser un tema recurrente hoy
Wednesday, December 19, 12
Solemos imaginar este contexto...y es cierto
Wednesday, December 19, 12
¿Y qué pasa en este caso?
Wednesday, December 19, 12
¿Y en éste?
Wednesday, December 19, 12
¿Sabíais que...
Wednesday, December 19, 12
el 62% de la gente usa el móvil mientras ve la tele?
Wednesday, December 19, 12
el 69% lo usa mientras compra?
Wednesday, December 19, 12
el 34% empiezan una operación en el pc y la acaban en el móvil
Wednesday, December 19, 12
<<<<<<<<<<<<Alguien gastó 5000€ en muebles a través del app de M&S
Wednesday, December 19, 12
La gente usa las cosas como quiere
Wednesday, December 19, 12
Empezando un diseño
Wednesday, December 19, 12
El Storyboard
Wednesday, December 19, 12
#4Storyboard
Wednesday, December 19, 12
#4Storyboard
Wednesday, December 19, 12
#4Storyboard
Wednesday, December 19, 12
Identi!ca las tareas principales que quieres comunicar
Crea un personaje y decide sus acciones principales
Crea una historia básica
#4Storyboard
Rellena los huecosWednesday, December 19, 12
Pantallas claveHome / Catálogo
Página de producto
Proceso de compra
Wednesday, December 19, 12
Pantallas claveHome / Catálogo
Proceso de compra
Página de producto
Wednesday, December 19, 12
Cosas que tenéis que tener en cuenta antes de empezar
Wednesday, December 19, 12
68
¿Para qué dispositivo va a diseñarse?1
Wednesday, December 19, 12
69
Qué dice Google Analytics?
Wednesday, December 19, 12
No sólo se trata de la pantalla
Wednesday, December 19, 12
Diferentes elementos de interacción
Wednesday, December 19, 12
72
¿Cuál va a ser la resolución de la pantalla?2
Wednesday, December 19, 12
Wednesday, December 19, 12
74* De nuevo, esto es obra de Stephanie RiegerWednesday, December 19, 12
“Ved vuestros diseños cuanto antes en el dispositivo, no en el emulador!
Lo dice todo el mundo
Wednesday, December 19, 12
76
¿Hago una App o una web?3
bradfrostweb.com/blog/notes/native-vs-web-is-total-bullshit/
Wednesday, December 19, 12
Puedo contar la versión larga
Wednesday, December 19, 12
Pero esta vez no lo haré
Wednesday, December 19, 12
Versión móvil
App nativa
Web Responsive
Wednesday, December 19, 12
Versión móvil
desde 2006Optimizado para pantallas pequeñas.
Necesitas dar todo el contenido.
El contenido tiene que gestionarse 2 veces.
Bastante caro
desde 2010Hay que soportar varias plataformas.
Contenido no indexados en Google.
Sólo recomendables si usan elementos concretos de hardware.
AhoraUna sola web, un solo diseño.
Indexable en Google.
Requiere nuevas habilidades y conocimiento.
Más tiempo al principio.
App nativa
Web Responsive
Wednesday, December 19, 12
¿Cuándo app nativa?
Las restricciones de tiempo o dinero sólo permiten diseño para un dispositivo especí!co
La función principal está basada en un elemento de hardware
Wednesday, December 19, 12
“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
Wednesday, December 19, 12
Wednesday, December 19, 12
Wednesday, December 19, 12
¿Cuándo web?
Si no es absolutamente necesario que hagas una aplicación.
¡Disclaimer!Esto no quiere decir que sea más fácil
Wednesday, December 19, 12
¿Os suena el Responsive web design?
#1 Crash course
Wednesday, December 19, 12
Aquí está el secreto del diseño móvil
Wednesday, December 19, 12
¿Os suena este tío?@EthanMarcotte
Wednesday, December 19, 12
Wednesday, December 19, 12
La web comenzó como imitación de la imprenta
Wednesday, December 19, 12
Y dio lugar a retículas !jas como esta
Wednesday, December 19, 12
Pero ya sabéis lo que ha pasado...
Wednesday, December 19, 12
Una web para gobernarlos a todos
Wednesday, December 19, 12
Wednesday, December 19, 12
Wednesday, December 19, 12
Wednesday, December 19, 12
“Una retícula fluida con imágenes flexibles que incorpora media queries para crear un layout adaptable
Ethan Marcotte
Wednesday, December 19, 12
“Una manera de presentar nuestro contenido sin saber en qué dispositivo va a verse
Ethan Marcotte
Wednesday, December 19, 12
Contenido
Contenedor = %
Retícula "uida
Wednesday, December 19, 12
24px 24px 24px 24px 24px
120px
Wednesday, December 19, 12
20%
100%
20% 20% 20% 20%
Wednesday, December 19, 12
Imágenes "exibles
Reescalar altura y anchura
max-width = 100%
Wednesday, December 19, 12
Wednesday, December 19, 12
El problema con las imágenes
Wednesday, December 19, 12
Demasiado peso para un entorno móvil.
Wednesday, December 19, 12
http://adaptive-images.com/
https://github.com/joshje/Responsive-Enhance
https://github.com/scottjehl/picturefill
Soluciones que ya hay por ahí
Wednesday, December 19, 12
Algunos usan el ingenio http://adactio.com/journal/5439/
Wednesday, December 19, 12
Media queries
Diferentes necesidades, diferente CSS
@media screen and (max-width:320px) {...}
Es necesario conocer los principales breakpoints (Stephanie Rieger)
Wednesday, December 19, 12
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
Wednesday, December 19, 12
110
¿Eres desarrollador web?
Wednesday, December 19, 12
Hazte amigo de uno cuanto antes
Wednesday, December 19, 12
Planear Diseñar Desarrollar Implementar
Wednesday, December 19, 12
Planear
Diseñar
Implementar
Wednesday, December 19, 12
Conversación
Wednesday, December 19, 12
Comienza el diseño
Wednesday, December 19, 12
Nombre del producto
Descripción del producto
Información de envío
Wednesday, December 19, 12
Nombre del producto
Descripción del producto
Información de envío
No intentes meter todo el contenido de un vistazo
Wednesday, December 19, 12
Nombre del producto
Descripción del producto
Información de envío
Info útil pero no imprescindible
Wednesday, December 19, 12
Nombre del producto
Descripción del producto
Información de envío
El botón de comprar no se ve...
Wednesday, December 19, 12
Contenido primero
Wednesday, December 19, 12
Nombre del producto
Descripción del producto
BOTÓN COMPRAR
Wednesday, December 19, 12
Nombre del producto
Descripción del producto
BOTÓN COMPRAR
Ten en cuenta lo que cabe en la pantalla
Wednesday, December 19, 12
Nombre del producto Nombre del producto
BOTÓN COMPRAR
BOTÓN COMPRAR
Wednesday, December 19, 12
Nombre del producto
BOTÓN COMPRAR
Wednesday, December 19, 12
Nombre del producto
Descripción del producto
Información del envío
Información del envío
Información de contacto
BOTÓN COMPRAR
Wednesday, December 19, 12
Nombre del producto
Descripción del producto
Información del envío
Información del envío
Información de contacto
BOTÓN COMPRAR
No tengas miedo al scroll en móvil
Wednesday, December 19, 12
Contenido primero, navegación después
Wednesday, December 19, 12
Nombre del producto
BOTÓN COMPRAR
MENU
Wednesday, December 19, 12
BOTÓN COMPRAR
Ropa Hogar Arte
Joyería Accesorios
Nombre del producto
BOTÓN COMPRAR
Nombre del producto
Ropa
Hogar
Arte
Joyería
Accesorios
Select element“Do nothing”
Wednesday, December 19, 12
Nombre del producto
BOTÓN COMPRAR
MENU
Ropa y accesorios
Hogar
Papelería
Joyería
Accesorios
Nombre del producto
BOTÓN COMPRAR
MENU
Ropa
Hogar
Decoración
Iluminación
Libros y Música
Muebles
Cocina
Papelería
Joyería
Accesorios
Toggle navigation
Wednesday, December 19, 12
Nombre del producto
BOTÓN COMPRAR
MENU MENUMENU
Ropa
Hogar
Decoración
Iluminación
Libros y Música
Muebles
Cocina
Papelería
Joyería
Accesorios
Left Nav Flyout
Wednesday, December 19, 12
MENU
Ropa
Hogar
Papelería
Joyería
Accesorios
Usa el espacio que no ves Off- canvas
Wednesday, December 19, 12
¿Os suena el proceso Mobile First?
#2 Crash course
Wednesday, December 19, 12
¿Quién es éste tío?Luke Wrobleski @LukeW
Wednesday, December 19, 12
Wednesday, December 19, 12
“Las webs y las aplicaciones deberían ser diseñadas y desarrolladas primero para el móvil
LukeW
Wednesday, December 19, 12
Mobile last (degradación progresiva)
Wednesday, December 19, 12
Mobile first (mejora progresiva)
Mobile last (degradación progresiva)
Wednesday, December 19, 12
Y por qué es mejor “Mobile First”?
Wednesday, December 19, 12
Una pantalla pequeña te obliga a centrarte en los importante
Wednesday, December 19, 12
Una conexión lenta te obliga a optimizar.
Wednesday, December 19, 12
Sabe donde estás en todo momento. Geolocalización
Wednesday, December 19, 12
“La mejor cámara es la que llevas siempre encima”
Wednesday, December 19, 12
La pantalla táctil ofrece nuevas posibilidades de interacción
Wednesday, December 19, 12
Nombre del producto
Descripción del producto
COMPRAR
Informacióndel envío
Información de contacto
Productos similares
?Móvil Tableta Desktop
Pie de páginaWednesday, December 19, 12
MENU Ropa Hogar Papelería Joyería Accesorios
Wednesday, December 19, 12
MENU Ropa Hogar Papelería Joyería Accesorios
Wednesday, December 19, 12
Ropa Hogar Arte Joyería AccesoriosRopa Hogar Joyería AccesoriosPapelería
Wednesday, December 19, 12
Ropa Hogar Joyería Accesorios
Ropa
Hogar
Papelería
Joyería
Accesorios
Papelería
Wednesday, December 19, 12
“Show me the data”
Wednesday, December 19, 12
Libreta “Superpoderes”
Comprar
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.
MENU
Wednesday, December 19, 12
Libreta “Superpoderes”
Comprar
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.
No uses un tamaño de fuente menor a 16px
MENU
Wednesday, December 19, 12
Libreta “Superpoderes”
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, todaComprar
Content !rst. LegibilidadWednesday, December 19, 12
154
Legibilidad
Testar siempre en el dispositivo para asegurar la lectura6
http://informationarchitects.net/blog/responsive-typography-the-basics/
Wednesday, December 19, 12
Es necesario un tamaño mayor en pantalla.
Wednesday, December 19, 12
El tamaño de fuente depende de cómo se usa un dispositivo
Wednesday, December 19, 12
Fíjate en los mejores y cópiales
Wednesday, December 19, 12
Fíjate en los mejores y cópiales
Wednesday, December 19, 12
Fíjate en los mejores y cópiales
Wednesday, December 19, 12
Prototipaprototipaprototipa
Wednesday, December 19, 12
Descubre De!ne Desarrolla Implementa
Proceso de diseño
t
Revisiónviabilidad
RevisiónConcepto
Wednesday, December 19, 12
Descubre De!ne Desarrolla Implementa
Proceso de diseño
t
Revisiónviabilidad
RevisiónConcepto
Desastre
Wednesday, December 19, 12
Sin prototipar, la implementación puede ser desastrosa
Wednesday, December 19, 12
Tenemos menos experiencia y no prevemos todo.
Wednesday, December 19, 12
Es fácil tomar malas decisiones
Wednesday, December 19, 12
Prototipar
Mejoramos la toma de decisiones.
Comunicamos mejor nuestras ideas.
Obtenemos feedback del usuario desde el primer momento.
Exploramos lo desconocido sin riesgos.
Wednesday, December 19, 12
La vida de la gente es caótica
Wednesday, December 19, 12
Y no siempre hacen lo que esperamos
Wednesday, December 19, 12
Paperprototype
Wednesday, December 19, 12
Paperprototype
Wednesday, December 19, 12
Paperprototype
Wednesday, December 19, 12
Paperprototype
Wednesday, December 19, 12
In-screen paper
prototype
Wednesday, December 19, 12
Keynote
Wednesday, December 19, 12
Diseño visual
Wednesday, December 19, 12
176
Color
El contraste cambia según la pantalla. Re"ejo en exteriores.1
Wednesday, December 19, 12
Wednesday, December 19, 12
Wednesday, December 19, 12
Diseñar para retina
Wednesday, December 19, 12
Wednesday, December 19, 12
Wednesday, December 19, 12
Un poco de inspiración
Wednesday, December 19, 12
iPad
Wednesday, December 19, 12
Windows Phone
Wednesday, December 19, 12
Android
Wednesday, December 19, 12
Android
Wednesday, December 19, 12
Wednesday, December 19, 12
iPhone
Wednesday, December 19, 12
Wednesday, December 19, 12
Esto era todo lo que quería contaros
Wednesday, December 19, 12
OpiniónMuchos de nosotros vamos a poder dar forma a los dispositivos, comportamientos y experiencias.
¿Qué elegirías hacer?
Dieter Rams
Wednesday, December 19, 12
Muchas gracias
Wednesday, December 19, 12
beautifulpixels.comdribbble.com/ (busca mobile)www.alistapart.com/www.netmagazine.com/mobilewebbestpractices.com/www.smashingmagazine.com/52weeksofux.com/
Recursos
Wednesday, December 19, 12
bradfrost.github.com/this-is-responsive/mediaqueri.esfuturefriend.ly/adactio.com/journal/css-tricks.com
Recursos
Wednesday, December 19, 12
http://thinkvitamin.com/http://www.codecademy.com/http://tutsplus.com/http://www.lynda.com/
Tuts
Wednesday, December 19, 12
Luke Wrobleski @LukeWhttp://www.lukew.com/
Ethan Marcotte @EthanMarcottehttp://unstoppablerobotninja.com/
Stephanie Rieger@StephanieRiegerhttp://stephanierieger.com/
Gente
Wednesday, December 19, 12
Josh Brewer @jbrewerhttp://jbrewer.me/
Tren Walton @trentwaltontrentwalton.com/
Brad Frost @brad_frosthttp://bradfrostweb.com/blog
Gente
Wednesday, December 19, 12
Wednesday, December 19, 12