![Page 1: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/1.jpg)
www.izaskunsaez.es @isaezdesign
izaskunsaez.esDiseño Gráfico
Diseño print Diseño web Creatividad
USABILIDAD Y DISEÑO DE APLICACIONES MÓVILES
![Page 2: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/2.jpg)
www.izaskunsaez.es @isaezdesign
www.izaskunsaez.es
@isaezdesign
www.linkedin.com/in/izaskunsaez
![Page 3: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/3.jpg)
www.izaskunsaez.es @isaezdesign
Usabilidad y estiloal servicio de
una experiencia de usuarioinolvidable
![Page 4: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/4.jpg)
www.izaskunsaez.es @isaezdesign
Si nuestra app mola...
![Page 5: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/5.jpg)
www.izaskunsaez.es @isaezdesignIlustración: Igor fernández
![Page 6: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/6.jpg)
www.izaskunsaez.es @isaezdesignIlustración: Igor fernández
![Page 7: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/7.jpg)
www.izaskunsaez.es @isaezdesign
Si nuestra appNO mola...
![Page 8: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/8.jpg)
www.izaskunsaez.es @isaezdesignIlustración: Igor fernández
![Page 9: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/9.jpg)
www.izaskunsaez.es @isaezdesignIlustración: Igor fernández
![Page 10: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/10.jpg)
www.izaskunsaez.es @isaezdesignIlustración: Igor fernández
![Page 11: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/11.jpg)
www.izaskunsaez.es @isaezdesign
¿Cual es el papeldel diseñador?
![Page 12: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/12.jpg)
www.izaskunsaez.es @isaezdesign
Característicasinterfaz
Patrones de usuario
Aspecto generalTexturasColores
Branding
DISEÑO DE APLICACIONES
¿Cómo seinteractuarácon ella?
¿Cuá serásu
aspecto/ESTILO?
![Page 13: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/13.jpg)
www.izaskunsaez.es @isaezdesign
Todo empieza por
![Page 14: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/14.jpg)
www.izaskunsaez.es @isaezdesign
LA IDEA
![Page 15: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/15.jpg)
www.izaskunsaez.es @isaezdesign
http://www.mopapp.com/topapps
Sirve para investigar qué apps se encuentran en el TOP en diferentes países y diferentes
dispositivos.
![Page 16: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/16.jpg)
www.izaskunsaez.es @isaezdesign
![Page 17: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/17.jpg)
PREGUNTARTE
QUÉquiero que haga mi app
CÓMOfuncionaría mi app
DÓNDEse usaría principalmente
la app
A QUIÉNse dirige la app
LA IDEA
![Page 18: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/18.jpg)
QUÉquiero que haga mi app
¿Dirigida alentrenimiento?
¿Dirigida a lautilidad?
Diseño más enfocado a lo visual o enfocado a la usabiliadad
LA IDEA
![Page 19: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/19.jpg)
A QUIÉNse dirige la app
Niños Adultos
LA IDEAHombres
Mujeres
![Page 20: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/20.jpg)
LA IDEA
CÓMOfuncionaría/se usará mi app
¿Enmovimiento?
¿De forma más estática o relajada?
El tamaño de los botones o acciones a realizar serán distintos.
¿Para un uso muy ocasional o
más intenso?
¿En compañía?¿Es para disfrutar individualmente?
![Page 21: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/21.jpg)
LA IDEA
DÓNDEse usaría principalmente
la app
¿De noche?¿De día?
¿En lugares con mucha gente?
¿En privado?
¿En ambientes relajados? ¿Al aire libre?
¿En una discoteca?
¿En público?
¿En sitios con conexión
wifi o 3G
![Page 22: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/22.jpg)
¿Qué y cuántatecnología nos rodea?
![Page 23: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/23.jpg)
www.izaskunsaez.es @isaezdesign
Pensar en lasconexiones entre
dispositivos puede ayudarte
![Page 24: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/24.jpg)
www.izaskunsaez.es @isaezdesign
![Page 25: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/25.jpg)
www.izaskunsaez.es @isaezdesign
¿Hacia qué lado se inclina tu idea de
app?
![Page 26: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/26.jpg)
www.izaskunsaez.es @isaezdesign
Entretenimiento Utilidad
Vs
Ilustración: Izaskun Sáez
![Page 27: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/27.jpg)
www.izaskunsaez.es @isaezdesign
TU IDEAExiste
ya
![Page 28: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/28.jpg)
www.izaskunsaez.es @isaezdesign
No pasa nada
![Page 29: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/29.jpg)
www.izaskunsaez.es @isaezdesign
INVESTIGAQUE YA ESTÁ HECHO
![Page 30: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/30.jpg)
www.izaskunsaez.es @isaezdesign
Y MEJÓRALO
![Page 31: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/31.jpg)
www.izaskunsaez.es @isaezdesign
LA IDEA LA EJECUCIÓN
![Page 32: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/32.jpg)
www.izaskunsaez.es @isaezdesign
Hay muchas cosas a tener en cuenta
![Page 33: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/33.jpg)
www.izaskunsaez.es @isaezdesign
Apps Nativas
HTLM5
Vs
![Page 34: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/34.jpg)
www.izaskunsaez.es @isaezdesign
Apps Nativas HTML5Experiencia de usuario más rica y un mejor rendimiento
ACCESO A DISPOSITIVOS Explota al máximo cada una de las presta-ciones integradas en los dispositivos, tales como acelerómetro, calendario, agenda de contactos, audio y vídeo, 3D, y así un largo etcétera.
FACILIDAD PARA GENERAR INGRESOSLas aplicaciones nativas se distribuyen fá-cilmente a través de las tiendas de aplica-ciones como App Store, Android Market, y Amazon Appstore,
FACILIDAD DE DESARROLLO Es más sencillo dar forma al contenido usando HTML y CSS en lugar de las bi-bliotecas nativas de iOS o Android
RAPIDEZ DE DESARROLLOEvaluar y probar su trabajo en tiempo real, creando un ciclo virtuoso de codifi-cación, actualización y repetición.
MENOR COSTE DE DESARROLLO MULTIPLATAFORMA
CONTROL DE LA DISTRIBUCIÓN Y FACILIDAD DE ACTUALIZACIÓN
FUENTE: http://www.businessinsider.com/battle-between-html5-vs-native-apps-2013-55
![Page 35: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/35.jpg)
www.izaskunsaez.es @isaezdesign
A qué accede unaAplicación nativa
¿ ¿
![Page 36: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/36.jpg)
Cámarafrontal
MULTITOUCH
CámaraTRASERA
GIROSCOPIOMICROFONO
3G
WIFI
altavoZ
CONEX
IONES
Ilustración: Izaskun Sáez
![Page 37: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/37.jpg)
www.izaskunsaez.es @isaezdesign
Ya has pensado mucho y tienes...
![Page 38: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/38.jpg)
TU IDEA
![Page 39: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/39.jpg)
www.izaskunsaez.es @isaezdesign
COMENCEMOS
![Page 40: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/40.jpg)
www.izaskunsaez.es @isaezdesign
STORYBOARDSe trata de ilustrar en formato de secuencia el uso de la app con la intención de explicar
un ejemplo de uso de la misma
![Page 41: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/41.jpg)
www.izaskunsaez.es @isaezdesign
STORYBOARD
¿Para qué sirve esto?Pensar en el diseñode usabilidad de la
App
Detectar mejor elpúblico objetivo de
nuestra app
Pensar posibles
lugares de uso de nuestra app
![Page 42: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/42.jpg)
www.izaskunsaez.es @isaezdesign
http://zurb.com
![Page 43: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/43.jpg)
www.izaskunsaez.es @isaezdesign
¿Cuál es la idea?
A todos nos gusta aprovechar nuestros
viajes en bus o metro para leer, estudiar...
pero tamboén para dormir, ¡sobre todo
cuando nos pegamos esos madrugones!
¡A todos nos ha pasado!
Aprovechas para echar una cabezadita
en el bus... ¡y se te pasa la parada!.
Llegas tarde a trabjar o a tu casa a última
hora, al instituto...
¡La solución!
Una App que te despierte unos minutos
antes de llegar a tu parada... pero no es
simplemente un despertador, sino que
mediante el uso de la geolocalización y
GPS la App te avisará de forma exacta
ya que detectará tu parada cuando
realmemte esté próxima, teniendo en
cuante retrasos imprevistos.
elige tu transporte
elige tu trayecto
elige tu parada
ÁDespiŽrtame!
Àbus?Àmetro?
ÀBarakaldo-Bilbao?
Àeuskotren?
Casco Viejo
www.izaskunsaez.es
NOMBRE DEL PROYECTO STORYBOARD¡Madrugón!
¡Siempre me quedo dormido y más
de una vez se me ha pasado la parada!
¡Y aún me quedan 30 minutos
de viaje en bus!
Otra vez llegaré
tarde al trabajo ¡Descárgate
Z zALERT!
ZZ
ALERT
Ojalá hubiera algo que me avisase
5 minutos antes de llegar
a mi parada...
¿Y eso cómo
funciona?
ALERT
elige tu transporte
elige tu trayecto
elige tu parada
¡Despiértame!
¿bus?¿metro?
¿Barakaldo-Bilbao?
¿euskotren?
Casco Viejo
La App calculará la duración
del viaje mediante GPS...
25 MIN 5 MIN
Mediante geolocalización la App
sabrá 5 minutos antes de tu parada
que debe despertarte
En ese momento te despertará usando
uno de estos 3 métodos
PIPI PI
Si llevas auriculares con música, la pa
rará
y ¡emitirá un zumbido que te despertará!
ZzAlert
www.izaskunsaez.es
NOMBRE DEL PROYECTO STORYBOARD¡La aplicación solo te avisará cuandoqueden muy pocos minutos parallegar a tu destino!Si LO LLEVAS EN EL BOLSILLOEMITIRÁ UN ZUMBIDO + VIBRACIÓN
Si NECESITAS ALGO MÁS FUERTE PARADESPERTARTE UNIREMOS:ZUMBIDO+VIBRACIÓN+TIMBRE DE LLAMADAPI PI PI
¿Y qué pasa si se retrasa la hora dellegada a mi parada porque hay tráf icoo por lo que sea?
¡Genial!
¡Con Z zAlert, aprovecha el viaje paradormir sin miedo a pasarte tu parada!
ALERT
¡Con llegarás a tiempo altrabajo y podrás dormir esamedia horita en el bus!
ALERT
No tendrás que estar pendientede la parada porque Z zAlertrecalculará la llegada constántemente
ZzAlert
![Page 44: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/44.jpg)
www.izaskunsaez.es @isaezdesign
LOS MOCKUPSPlasmar en un papel ya sea a mano o de
forma digital el esquema y funcionalidades de la nueva app.
![Page 45: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/45.jpg)
www.izaskunsaez.es @isaezdesign
la mejor manera de empezar es con
Personalmente creo que...
papel y lápiz
![Page 46: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/46.jpg)
www.izaskunsaez.es @isaezdesign
http://www.codeproject.com/Articles/111949/Excerpt-from-De-signing-the-iPhone-User-Experience
![Page 47: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/47.jpg)
www.izaskunsaez.es @isaezdesign
![Page 48: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/48.jpg)
www.izaskunsaez.es @isaezdesign
dribbble.com
iPhone App por Jake Nicolella en Behance
![Page 49: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/49.jpg)
www.izaskunsaez.es @isaezdesign
pinterest.comImagen byFernando Guillen
![Page 50: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/50.jpg)
NOMBRE DEL PROYECTO
ESPECIFICACIONES
Mockup 12:00 PM
ESPECIFICACIONES
Mockup 12:00 PM
ESPECIFICACIONES
Mockup 12:00 PM
ESPECIFICACIONES
Mockup 12:00 PM
www.izaskunsaez.es
![Page 51: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/51.jpg)
www.izaskunsaez.es @isaezdesign
Más rapidéz (dibujar-borrar-dibujar)
Lo ideal: hacerlo junto con el cliente
Es el BOCETO PREVIO al mockup digital
VENTAJAS DEL PROTOTIPADO EN PAPEL...
![Page 52: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/52.jpg)
www.izaskunsaez.es @isaezdesign
pulir los mockupde forma
después...
digital
![Page 53: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/53.jpg)
www.izaskunsaez.es @isaezdesign
http://businessofsoftware.org/2012/10/bos-
2012-workshop-team-misfit-toys-output/
![Page 54: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/54.jpg)
www.izaskunsaez.es @isaezdesign
Xcode
![Page 55: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/55.jpg)
www.izaskunsaez.es @isaezdesign
SVOY app design
http://www.behance.net
![Page 56: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/56.jpg)
www.izaskunsaez.es @isaezdesign
Visto enPinterest
![Page 57: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/57.jpg)
www.izaskunsaez.es @isaezdesign
nuestro esquemade uso de la app...
Una VEZ TENGAMOS CLARO...
vamos con el diseño
![Page 58: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/58.jpg)
www.izaskunsaez.es @isaezdesign
Conocer ALGUNOS DATOS os daráuna visión de la
importancia del diseño de una app
![Page 59: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/59.jpg)
www.izaskunsaez.es @isaezdesign
En Juliode 2013
la App Store cumplió años 5
![Page 60: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/60.jpg)
www.izaskunsaez.es @isaezdesign
60mil millones de descargas reali-zadas (Octubre
2013)
mil millones de descargas
realizadas (Marzo 2012)
1.000.000
600.000
aplicaciones en el Apple Store
aplicaciones en el Apple Store
25año
año
2012
2013
http://appleweblog.com
![Page 61: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/61.jpg)
www.izaskunsaez.es @isaezdesign
Cada segundo que pasa, 800 aplicaciones salen de los servidores de Apple para instalarse en un
iPhone o un iPad
Fuente: http://www.lavanguardia.com
http://www.lavanguardia.com/tecnologia/20130710/54377379926/app-store-apple-cumple-cinco-anos-creado-nueva-industria.html
![Page 62: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/62.jpg)
www.izaskunsaez.es @isaezdesign
+ de 400.000aplicaciones que no se han descargado ni
una sola vez
En la App Store hay
![Page 63: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/63.jpg)
www.izaskunsaez.es @isaezdesign
Yo no quiero ser una de esas...
vamos a hacerque nosdeseen
![Page 64: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/64.jpg)
www.izaskunsaez.es @isaezdesign
No hay una segunda oportunidad
para causar una buena primera impresión{ {
![Page 65: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/65.jpg)
www.izaskunsaez.es @isaezdesign
DISEÑO VISUAL YATRACTIVO
![Page 66: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/66.jpg)
www.izaskunsaez.es @isaezdesign
![Page 67: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/67.jpg)
www.izaskunsaez.es @isaezdesign
La app Store es como un gran escaparate en la que destacar y presentar un diseño atractivo puede ser determinante, empezando
por su ICONO
Si tenemos en cuenta la ENORME COMPETENCIA
Tendrás que tener DAR IMPORTANCIA el diseño
![Page 68: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/68.jpg)
www.izaskunsaez.es @isaezdesign
![Page 69: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/69.jpg)
www.izaskunsaez.es @isaezdesign
¿ por qué es tan importante el diseño de un buen icono?
![Page 70: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/70.jpg)
www.izaskunsaez.es @isaezdesign
PORQUE ES NUESTRA TARJETA DE
PRESENTACIÓN
PORQUE ACTÚA COMO PEQUEÑORECORDATORIO
PARA QUE UTILICE LA APP
¡Soy unaApp
que molo mucho!
¡eh!¡estoy aquí!
![Page 71: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/71.jpg)
www.izaskunsaez.es @isaezdesign
REGLAS BÁSICAS
PARA EL DISEÑO DE UN BUEN ICONO
![Page 72: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/72.jpg)
www.izaskunsaez.es @isaezdesign
EL TAMAÑO
SÍ IMPORTA
![Page 73: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/73.jpg)
www.izaskunsaez.es @isaezdesign
DISEÑO QUE FACILITE SU VISUALIZACIÓN ENTRE EL RESTO DE TODOS LOS ICONOS.
![Page 74: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/74.jpg)
www.izaskunsaez.es @isaezdesign
CONSEJOCUANTOS MENOS ELEMENTOS
MEJOR
![Page 75: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/75.jpg)
www.izaskunsaez.es @isaezdesign
![Page 76: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/76.jpg)
www.izaskunsaez.es @isaezdesign
![Page 77: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/77.jpg)
www.izaskunsaez.es @isaezdesign
![Page 78: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/78.jpg)
www.izaskunsaez.es @isaezdesign
![Page 79: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/79.jpg)
www.izaskunsaez.es @isaezdesign
![Page 80: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/80.jpg)
www.izaskunsaez.es @isaezdesign
COSASIMPORTANTES
A TENER EN CUENTAPARA EL DISEÑO DE UN ICONO
![Page 81: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/81.jpg)
www.izaskunsaez.es @isaezdesign
El icono de la aplicación debe tener un diseño atractivo y amigable para llamar la atención del
usuario
Un icono mal diseñado, desagradable visualmente o que no se entiende lo que ofrece puede ser decisivo a la hora de que que el usuario decida descargarlo.
![Page 82: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/82.jpg)
www.izaskunsaez.es @isaezdesign
El icono de una app tiene que verse bien en diferentes tamaños y sobre
diferentes backgrounds
![Page 83: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/83.jpg)
www.izaskunsaez.es @isaezdesign
El icono de una app aporta unainformación inicial al usuario
Los usuarios de iphone o iPadquieren tener cosas
agradables en sus dispositivos
un diseño correctovisualmente y atractivo
un mejor funcionamiento de la app y más fiabilidad
![Page 84: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/84.jpg)
www.izaskunsaez.es @isaezdesign
PARA ESTO...
![Page 85: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/85.jpg)
www.izaskunsaez.es @isaezdesign
Un icono con texto será ILEGI-BLE y quedará con un ASPEC-TO BORROSO O DE MANCHA cuando lo veamos en nuestro escritorio.
Para solucionar este problema opta por el Uso de una Inicial o como mucho unas siglas o en su defecto utiliza una imagen facilmente re-conocible y memorizable.
Texto en el icono
![Page 86: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/86.jpg)
www.izaskunsaez.es @isaezdesign
![Page 87: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/87.jpg)
www.izaskunsaez.es @isaezdesign
El uso de formas reconocibles y de tamaño adecuado permitirá que el
usuario reconozca el contenido de la App
![Page 88: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/88.jpg)
www.izaskunsaez.es @isaezdesign
![Page 89: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/89.jpg)
www.izaskunsaez.es @isaezdesign
![Page 90: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/90.jpg)
www.izaskunsaez.es @isaezdesign
El color no es solo esto
![Page 91: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/91.jpg)
www.izaskunsaez.es @isaezdesign
Escoge una paleta de colores reducida donde haya un color protagonista
esto creará idea de marca
![Page 92: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/92.jpg)
www.izaskunsaez.es @isaezdesign
![Page 93: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/93.jpg)
www.izaskunsaez.es @isaezdesign
![Page 94: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/94.jpg)
www.izaskunsaez.es @isaezdesign
![Page 95: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/95.jpg)
www.izaskunsaez.es @isaezdesign
![Page 96: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/96.jpg)
www.izaskunsaez.es @isaezdesign
![Page 97: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/97.jpg)
www.izaskunsaez.es @isaezdesign
www.colourlovers.com
En este site encontraréiscientos de paletas de colores.
![Page 98: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/98.jpg)
www.izaskunsaez.es @isaezdesign
el color PROVOCA SENSACIONES
![Page 99: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/99.jpg)
www.izaskunsaez.es @isaezdesign
¿Qúe aplicación creéis que dará más luz?
![Page 100: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/100.jpg)
www.izaskunsaez.es @isaezdesign
El color es mucho más llamativo y las formas son redondeadas,
además son formas poco complejas
para que su reconocimiento sea
más rápido. Ideal para niños.
La austeridad en el uso del color y el realismo de la imagen del icono crean una imagen global que se dirige totalmente a un público adulto.
![Page 101: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/101.jpg)
www.izaskunsaez.es @isaezdesign
Pero en todohay excepciones
![Page 102: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/102.jpg)
www.izaskunsaez.es @isaezdesign
![Page 103: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/103.jpg)
www.izaskunsaez.es @isaezdesign
2
1A Tener en cuenta:- Tamaño del dispositivo
Debemos vigilar el uso del color, si nos vamos a dirigir a un público adulto nos decantaremos por colores más serios u oscuros y si nos diri-gimos a niños optaremos por una paleta más viva y colorista.
El tamaño
El Color
3Elegir las formas que compron-drán nuestro icono, sin querer meter un exceso de información, ten en cuenta que tu app ya irá incluida en una categoría dentro de la tienda (App Store) así que no hace falta que en icono repre-sentemos absolutamente todo lo que ofrecemos. QUEDAOS CON EL CONCEPTO Y RECORDAD MENOS SIEMPRE ES MÁS (o casi siempre)
La gráfica
En resumena tener en cuenta
4Diferenciaos, destacad, los dispositivos móviles son un pequeño escaparate y nosotros cada vez tenemos menos tiempo (y pacien-cia) así que o nos ven o no existimos.
A veces hay que romper con todo
*
*
![Page 104: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/104.jpg)
www.izaskunsaez.es @isaezdesign
TODOlo anteriorse aplica
a lainterfaz
de usuario
USABILIDAD
![Page 105: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/105.jpg)
www.izaskunsaez.es @isaezdesign
Debemos pensar en el entorno y formas de uso de una App
![Page 106: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/106.jpg)
www.izaskunsaez.es @isaezdesign
Vs
Tamaño de la pantalla
![Page 107: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/107.jpg)
www.izaskunsaez.es @isaezdesign
FORMA DE interactuar
Vs
![Page 108: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/108.jpg)
www.izaskunsaez.es @isaezdesign
![Page 109: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/109.jpg)
www.izaskunsaez.es @isaezdesign
FORMA DE USO
imagen thinkstock
http://www.leadpile.com
Vs
![Page 110: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/110.jpg)
www.izaskunsaez.es @isaezdesign
http://freshpeel.com/2012/06/where-do-people-check-their-mobile-phones/
![Page 111: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/111.jpg)
www.izaskunsaez.es @isaezdesign
Todos estos aspectos hay que tenerlos presentes
a la hora de pensar el diseño de una app
![Page 112: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/112.jpg)
www.izaskunsaez.es @isaezdesign
El usuario de una Appno miraOJEA
![Page 113: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/113.jpg)
www.izaskunsaez.es @isaezdesign
Menos pasos para realizar una acción
Mayor y mejor visibilidad de los elementos
Elementos táctiles fácilmente seleccionables
Contenido útil abusar de información=
![Page 114: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/114.jpg)
www.izaskunsaez.es @isaezdesign
Vamos a centrarnos enalgunas cosas
concretas
![Page 115: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/115.jpg)
www.izaskunsaez.es @isaezdesign
EL TEXTOsiempre tiene que ser
legible
EL TEXTOsiempre tiene que ser
legible
![Page 116: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/116.jpg)
www.izaskunsaez.es @isaezdesign
1
2
La tipografía
La disposición del texto
La tipografía “verdana”, helvética y otras tipografías “sin serifes” son las que consiguen una lectura más rápida.
Texto enriquecido (títulos, subtí-tulos, destacados...etc) facilita la lectura al usuario.
Texto en peso regular o medium(nunca light o thin porque se pier-den los contornos).
Hola HolaVs
http://nathanbarry.com/app-design-handbook/
https://developer.apple.com/library/ios/documentation/userexperience/
![Page 117: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/117.jpg)
www.izaskunsaez.es @isaezdesign
3
4
El tamaño del texto
No abuses de tipografías
Por defecto el texto de párrafo (body) es de 34 ptNunca debe bajar de los 22 ptHabrá que controlar el interlineado e interletrado para una legibilidad óptima
![Page 118: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/118.jpg)
www.izaskunsaez.es @isaezdesign
5 Contraste texto-fondoEl texto color negro sobre fondo blanco resulta más “có-modo” de leer. Se puede poner para evitar demasiado contraste debido al propio brillo de la pantalla un negro al 5% para el fondo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet blandit viverra. Ves-tibulum eu magna id mauris cursus pellentesque eu ac erat.
Lorem ipsum dolor sit amet, con-sectetur adipiscing elit. Sed imper-diet blandit viverra. Vestibulum eu magna id mauris cursus pellentes-que eu ac erat.
Con 5% de negro en el fondo
Negro al 100%Sobre blanco.
![Page 119: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/119.jpg)
www.izaskunsaez.es @isaezdesign
iOS Fontspágina donde encontrareis las fuentes que usa apple por defecto
App FontsFontspring. Para buscar más tipografías.
How Much Does It Cost To Use A Font In My iOS Appen Dinosaurs With Lazerz escrito por Craig Rozynski donde os hablará sobre el coste de comprar una fuente para vuestra app.
developer.apple.com/library/ios/documentationGuía oficial de Apple sobre iOS Human Interface Guidelines
![Page 120: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/120.jpg)
www.izaskunsaez.es @isaezdesign
MÁS COSAS A TENER EN CUENTA
![Page 121: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/121.jpg)
www.izaskunsaez.es @isaezdesign
3
4
Imágenes
Botones y menú
1 Los númerosMostrar los números como nú-meros, a los usuarios les resulta-rá muchos más fácil e inmediato reconocerlos.
2 Frases cortas Como ya hemos comentado, la interfaz que contenga una canti-dad significativa de texto debe-rá tender hacia las frases cortas ya que los usuarios “usan cortos tiempos de atención” por lo que si se muestra un texto farrago-so seguramente les ahuyentare-mos.
Las imágenes grandes reciben más atención, siempre que sea posible utilizaremos imágenes donde se vea claramente los detalles y la informa-ción.
Lo aconsejable es que sean senci-llas, limpias y amigables.
Trabajar con formato PNG de 24 bits
Diseño: Tendremos que dedicarle tiempo puesto que suponen el co-rrecto uso de nuestra aplicación.
Ubicación: A ser posible se coloca-rán en la parte inferior de la interfaz ya que estarán más accesibles.
Tamaño: que podamos pulsarlo con la mayor comodidad posible y que sean bien visibles.
![Page 122: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/122.jpg)
www.izaskunsaez.es @isaezdesign
7 Espacio en blancoNo es necesario ni aconsejable llenar todos los huecos y esquinas de la página, los sitios con demasiado contenido tienden a ser molestos.
Deja espacios visuales límpios para no agobiar al usuario y provocar su abandono.
Como se suele decir en diseño:
¡Dame aire!
![Page 123: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/123.jpg)
www.izaskunsaez.es @isaezdesign
LAUNCH IMAGES
No te quedes
en negro
![Page 124: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/124.jpg)
www.izaskunsaez.es @isaezdesign
es lo que se muestra detu app
mientras se estácargando
![Page 125: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/125.jpg)
www.izaskunsaez.es @isaezdesign
Ejemplo Splash Screens / Launch Images
zZzlert
![Page 126: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/126.jpg)
www.izaskunsaez.es @isaezdesign
Volvemos a la App Store
![Page 127: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/127.jpg)
www.izaskunsaez.es @isaezdesign
![Page 128: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/128.jpg)
www.izaskunsaez.es @isaezdesign
![Page 129: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/129.jpg)
www.izaskunsaez.es @isaezdesign
![Page 130: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/130.jpg)
www.izaskunsaez.es @isaezdesign
![Page 131: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/131.jpg)
www.izaskunsaez.es @isaezdesign
![Page 132: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/132.jpg)
www.izaskunsaez.es @isaezdesign
![Page 133: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/133.jpg)
www.izaskunsaez.es @isaezdesign
Ejemplo de proceso de un proyecto
![Page 134: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/134.jpg)
www.izaskunsaez.es @isaezdesign
![Page 135: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/135.jpg)
www.izaskunsaez.es @isaezdesign
Nombre de usuario
Nombre de usuario
¿Has olvidado tu contraseña?WQ E R T Y U I O P
SA D F G H J K L
Z X C V B N M
.@space123 return
Zlert
Regístrate
Zlert
IZAS 11:56 AM
IZAS 11:56 AM
Volver EntrarRegistro
Elige tu trayecto
IZAS 11:56 AM
CercanoTu cuentaFavoritos Buscar Updates
Volver Tu trayecto
¿De dónde sales?
¿Cual es tu parada?
Viajas en metro
Busca tu parada
Siguiente
IZAS 11:56 AM
CercanoTu cuentaFavoritos Buscar Updates
Volver Tu Zalert
34min.
IZAS 11:56 AM
CercanoTu cuentaFavoritos Buscar Updates
Volver Tu Zalert
IZAS 11:56 AM
CercanoTu cuentaFavoritos Buscar Updates
Volver Tu transporte
Tranvía Metro
Cercanías Cercanías
Elige tu transporte
![Page 136: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/136.jpg)
www.izaskunsaez.es @isaezdesign
PALETA DE COLORES BÁSICA
![Page 137: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/137.jpg)
www.izaskunsaez.es @isaezdesign
zZzalert - alarma con geolocalización para no dormirte en el autobús, metro o tranvía.
Login with Facebook
Login with Twitter Metro
Elige tu ruta
![Page 138: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/138.jpg)
![Page 139: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/139.jpg)
www.izaskunsaez.es @isaezdesign
Pero el trabajo de un diseñador no
acaba ahí...
![Page 140: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/140.jpg)
www.izaskunsaez.es @isaezdesign
Diseño dentrode la estrategia
de Marketing
Diseño redessociales
Diseñooff line
DiseñoLanding o site
de la App
Y lo quesurja...
![Page 141: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/141.jpg)
www.izaskunsaez.es @isaezdesign
Vamos a cambiar un poco de tercio...
![Page 142: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/142.jpg)
www.izaskunsaez.es @isaezdesign
Seguimos con más cosas a tener en
cuenta...
![Page 143: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/143.jpg)
www.izaskunsaez.es @isaezdesign
El filtro deApple
![Page 144: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/144.jpg)
www.izaskunsaez.es @isaezdesign
http://www.businessinsider.com/heres-why-it-really-sucks-to-be-an-app-reviewer-for-apple-2012-7#ixzz1zaB9ki4H
1. Nada de contenido para adultos.2. Hay muchas aplicaciones de desarrolladores serios y profesionales, y no quere-
mos que sus programas no estén con aplicaciones hechas por amateurs. Si has hecho una aplicación en pocos días, rápido y simplemente para que tus amigos te sorprendan, será rechazada de la tienda.
3. No necesitamos más aplicaciones de pedos. Textual del PDF, señores.4. No es que en Apple seamos maniáticos del control, sino que estamos compro-
metidos con que los usuarios disfruten de la mejor experiencia de usuario con las aplicaciones.
5. ¿Emuladores escondidos en aplicaciones con otra descripción? Rechazada.6. ¿Clones repetidos de otras aplicaciones que ya fueron rechazadas? También
rechazadas.7. Nada de frameworks de terceros para navegar por la web.8. Aplicaciones muy parecidas en diseño a cualquier promoción de Apple o
con nombres parecidos a los productos de Apple, automáticamente rechazadas.9. Nada de widgets o algo parecido en el iOS.10. Aplicaciones con contenido generado por usuarios que pueda ser ofensivo
(como Chatroulette, por ejemplo), rechazadas.11. Las aplicaciones que compartan archivos de forma ilegal, rechazadas.
En 2010 Apple reveló sus guías de aprobación de aplicaciones
![Page 145: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/145.jpg)
www.izaskunsaez.es @isaezdesign
“creemos que tenemos la responsabilidad moral de mantener el porno fuera del iPhone. Las personas que quieran porno pueden comprar un teléfono Android”.
Steve Jobs
Esta frase se la dijo a un cliente de Apple que envió un e-mail a Steve Jobs quejándose del control moral que ejerce Apple en este proceso de revisión.
![Page 146: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/146.jpg)
www.izaskunsaez.es @isaezdesign
Apple elimina la aplicación de 500px ya que puedes encontrar imágenes de contenido sexual
http://www.applesfera.com/aplicaciones-ios-1/apple-elimina-la-aplicacion-de-500px-ya-que-puedes-encontrar-imagenes-de-contenido-sexual
Enero 2013
![Page 147: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/147.jpg)
www.izaskunsaez.es @isaezdesign
4+ / No contiene material desagradable.
9+ / Puede contener situaciones leves o infrecuentes de violencia realista, fan-tástica o en dibujos animados y contenido sugestivo, maduro o de terror que puede no ser apropiado para menores de 9 años.
12+ / Puede contener lenguaje no apropiado leve o infrecuente, violencia realis-ta, fantástica o en dibujos animados frecuente, y contenido maduro o su-gestivo leve o no frecuente, y juegos de azar simulados que pueden no ser apropiados para menores de 12 años.
17+ / Puede incluir contenido maduro, sugestivo o de terror intenso y frecuente; más contenido sexual, alcohol, tabaco, y drogas que puede no ser apropia-do para menores de 17 años. Los consumidores deben tener al menos 17 años para comprar aplicaciones con esta clasificación. Siempre que una aplicación con esta clasificación sea descargada, se mostrará un mensaje preguntando si el usuario tiene 17 años o más.
http://blog.staffcreativa.pe/desarrollo-aplicaciones-ios-apple/
Desarrollo de Aplicaciones para iOS – Guía Básica
![Page 148: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/148.jpg)
www.izaskunsaez.es @isaezdesign
http://en.wikipedia.org/wiki/IOS_app_approvals
http://applicantes.com/apple-proteccion-ninos-nuevas-directrices-apps/
http://www.applesfera.com/apple/mas-transparencia-apple-revela-sus-guias-de-aprobacion-de-aplicaciones-y-crea-un-consejo-de-revision-de-aplicaciones
Más transparencia: Apple revela sus guías de aprobación de aplicaciones y crea un consejo de revisiones
http://www.imaginanet.com/blog/como-subir-apps-a-apple-store.htmlComo subir apps a Apple Store
Apple busca proteger a los niños mediante nuevas directrices sobre las apps infantiles
iOS app approvals
Apple modifica algunas normas de revisión para las aplicaciones de sus tiendas
Es hora de que la App Store mire a los juegos con otros ojos
Trabajar en Apple revisando aplicaciones para la App Store no mola nada (y no adivinaríais el motivo)
http://www.applesfera.com/curiosidades/trabajar-en-apple-revisando-aplicaciones-para-la-app-store-no-mola-nada
http://www.applesfera.com/app-store-1/apple-modifica-algunas-normas-de-revision-para-las-aplicaciones-de-sus-tiendas
http://www.applesfera.com/aplicaciones-ios-1/es-hora-de-que-la-app-store-mire-a-los-juegos-con-otros-ojos
![Page 149: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/149.jpg)
www.izaskunsaez.es @isaezdesign
En la web veremos un gráfico que nos dice cuántos días se está tardando en el último mes en revisar las Apps
http://reviewtimes.shinydevelopment.com/
![Page 150: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/150.jpg)
Hay muchoque leer ...
![Page 151: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/151.jpg)
www.izaskunsaez.es @isaezdesign
ivomynttinen.com/blog/
Un blog muy interesante dobre diseño en IOS7
![Page 152: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/152.jpg)
www.izaskunsaez.es @isaezdesign
developer.apple.com/library/ios/design/index.html#//apple_ref/doc/uid/TP40013289
![Page 153: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/153.jpg)
www.izaskunsaez.es @isaezdesign
Resoluciones & especificacionesExtraído de: http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/
![Page 154: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/154.jpg)
www.izaskunsaez.es @isaezdesign
![Page 155: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/155.jpg)
www.izaskunsaez.es @isaezdesign
![Page 156: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/156.jpg)
www.izaskunsaez.es @isaezdesign
App Icons
![Page 157: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/157.jpg)
www.izaskunsaez.es @isaezdesign
User Interface
![Page 158: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/158.jpg)
www.izaskunsaez.es @isaezdesign
Tipografía
![Page 159: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/159.jpg)
www.izaskunsaez.es @isaezdesign
www.idev101.com/code/User_Interface/sizes.html
![Page 160: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/160.jpg)
www.izaskunsaez.es @isaezdesign
taybenlor.com/2013/05/21/designing-for-ios.html
![Page 161: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/161.jpg)
www.izaskunsaez.es @isaezdesign
Densidad de pantalla
![Page 162: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/162.jpg)
www.izaskunsaez.es @isaezdesign
px dpVspíxeles por pulgada puntos por pulgada
![Page 163: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/163.jpg)
www.izaskunsaez.es @isaezdesign
Un factor a tener en cuenta es la densidadde la pantalla.
Esta se refiere a la cantidad de píxeles que entran en un determinado espacio físico y se mide en
puntos por pulgada
![Page 164: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/164.jpg)
www.izaskunsaez.es @isaezdesign
La densidad de la pantalla, se mide de forma distinta según el sistema operativo.
Cuantos más píxeles o puntos caben en una pantalla, mayor será la densidad de la misma y su resolución.
![Page 165: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/165.jpg)
www.izaskunsaez.es @isaezdesign
iOS solo cuenta con dos densidadesretina y no retina
![Page 166: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/166.jpg)
www.izaskunsaez.es @isaezdesign
Algunas herramientas para saber la
Densidad de pantalla
![Page 167: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/167.jpg)
www.izaskunsaez.es @isaezdesign
http://www.teehanlax.com/blog/density-converter/
![Page 168: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/168.jpg)
www.izaskunsaez.es @isaezdesign
Conversor pixel densidad en App Store
![Page 169: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/169.jpg)
www.izaskunsaez.es @isaezdesign
http://www.adwe.es/diseno-web-2/diseno-para-dispo-sitivos-moviles-y-la-densidad-de-pantalla
Diseño para dispositivos móviles y la densidad de pantalla
![Page 170: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/170.jpg)
www.izaskunsaez.es @isaezdesign
...etc
![Page 171: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/171.jpg)
Aprender es algo contínuo
![Page 172: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/172.jpg)
¡Gracias!
![Page 173: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/173.jpg)
www.izaskunsaez.es
@isaezdesign
www.linkedin.com/in/izaskunsaez
![Page 174: Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)](https://reader034.vdocuments.co/reader034/viewer/2022052315/546dadcdb4af9f932c8b53db/html5/thumbnails/174.jpg)
izaskunsaez.esDiseño Gráfico
Diseño print Diseño web Creatividad
[email protected]: isaezdesign
Agradecimiento especial a Igor Fernández por las ilustraciones.
Su Twitter: igor_f_f