11. ¿Cual es el papel
del diseñador?
www.izaskunsaez.es
@isaezdesign
12. DISEÑO DE APLICACIONES
¿Cómo se
interactuará
con ella?
Características
interfaz
Patrones de usuario
www.izaskunsaez.es
¿Cuá será
su
aspecto/ESTILO?
Aspecto general
Texturas
Colores
Branding
@isaezdesign
20. LA IDEA
¿En
movimiento?
CÓMO
funcionaría/se usará mi app
¿En compañía?
¿Es para disfrutar
individualmente?
¿De forma
más estática
o relajada?
¿Para un uso
muy ocasional o
más intenso?
El tamaño de los botones o acciones
a realizar serán distintos.
21. LA IDEA
¿De noche?
¿De día?
¿En lugares con
mucha gente?
¿En ambientes
relajados?
DÓNDE
¿En sitios
con conexión
wifi o 3G
se usaría principalmente
la app
¿En privado?
¿En público?
¿Al aire libre?
¿En una discoteca?
34. Apps Nativas
Experiencia de usuario más rica y un mejor
rendimiento
ACCESO A DISPOSITIVOS
Explota al máximo cada una de las prestaciones 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 INGRESOS
Las aplicaciones nativas se distribuyen fácilmente a través de las tiendas de aplicaciones como App Store, Android Market, y
Amazon Appstore,
HTML5
FACILIDAD DE DESARROLLO
Es más sencillo dar forma al contenido
usando HTML y CSS en lugar de las bibliotecas nativas de iOS o Android
RAPIDEZ DE DESARROLLO
Evaluar y probar su trabajo en tiempo
real, creando un ciclo virtuoso de codificació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
www.izaskunsaez.es
@isaezdesign
35. A qué accede una
Aplicación nativa
www.izaskunsaez.es
¿
¿
@isaezdesign
40. STORYBOARD
Se 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
www.izaskunsaez.es
@isaezdesign
41. STORYBOARD
¿Para qué sirve esto?
sar posibles
Pen
gares de uso
lu
p
de nuestra ap
www.izaskunsaez.es
Pensar en el diseño
de usabilidad de la
App
Detectar mejor el
público objetivo de
nuestra app
@isaezdesign
43. RYBOARD
STO
ZzAlert
L PROYECTO
NOMBRE DE
s
edo do rm ido y má
¡Si em pre me qu ha pas ad o la parad a!
un a vez se me
de
an 30 mi nut os
¡Y aún me qu ed en bu s!
de viaje
¡M ad ru gón!
Otra vez lleg aré
tarde al tra bajo
e
o qu e me avi sas
Oja lá hu bie ra alg es de lleg ar
5 mi nut os ant ad a...
a mi par
¿Y eso cóm o
fun cio na?
¡Descárg ate
Z zA LERT !
ZZ
ALERT
¡A todos nos ha pasado!
¿Cuál es la idea?
ar nuestros
A todos nos gusta aprovech
leer, estudiar...
viajes en bus o metro para
ir, ¡sobre todo
pero tamboén para dorm
madrugones!
cuando nos pegamos esos
cabezadita
Aprovechas para echar una
la parada!.
en el bus... ¡y se te pasa
casa a última
Llegas tarde a trabjar o a tu
hora, al instituto...
la du ración
La App calcul ará nte GPS...
de l viaje media
25 MIN
sporte
elige tu tran
elig
da
elige tu para
Casco Viejo
ALERT
Casco Viejo
ÁDespiŽrtame!
¡La solución!
unos minutos
Una App que te despierte
pero no es
antes de llegar a tu parada...
or, sino que
simplemente un despertad
ocalización y
mediante el uso de la geol
forma exacta
GPS la App te avisará de
da cuando
ya que detectará tu para
teniendo en
realmemte esté próxima,
cuante retrasos imprevistos.
I
PI P
5 MIN
Si LO LLEVAS EN EL BOLSILLO
EMITIRÁ UN ZUMBIDO + VIBRACIÓN
STORYBOARD
aez.es
www.izaskuns
ZzAlert
¿Y qué pasa si se
llega da a mi para daretra sa la hora de
porqu e hay tráfico
o por lo que sea?
elige tu transporte
ÀBarakaldo-Bilbao?
ará
s con música, la par
Si llevas auriculare que te despertará!
y ¡emitirá un zumbido
bao?
ECTO
elige tu parada
ndo
¿Barakaldo-Bil
!
¡Despiértame
NOMBRE DEL PROY
elige tu trayecto
te des pertará usa
En ese mo me nto s 3 mét odo s
uno de esto
PI
¿bus?
¿metro?
tren?
¿eusko
e tu trayecto
Àbus?
Àmetro?
tren?
Àeusko
p
loca liza ción la Ap
Media nte geos ant es de tu parada
sab rá 5 min uto e des pertarte
que deb
Si NECESITAS ALGO MÁS FUERTE PARA
DESPERTARTE UNIREMOS:
ZUMBIDO+VIBRACIÓN+TIMBRE DE LLAM
ADA
¡La aplicación solo te avisa
rá
qued en muy poco s minutos cuan do
llega r a tu dest ino! para
PI PI PI
No tend rás que esta r pend
de la para da porqu e Z iente
recalcula rá la llega da constzAle rt
ánte ment e
¡Con ALERT llega rás a tiem
po
trabajo y podrás dorm ir esa al
media horit a en el bus!
¡Con Z zAle rt, apro
el
dorm ir sin mied o a vech arte viaje para
pasa tu para da!
¡Ge nia l!
ALERT
www.izaskunsaez.es
www.izaskunsaez.es
@isaezdesign
44. LOS MOCKUPS
Plasmar en un papel ya sea a mano o de
forma digital el esquema y funcionalidades
de la nueva app.
www.izaskunsaez.es
@isaezdesign
51. VENTAJAS DEL PROTOTIPADO EN PAPEL...
Más rapidéz (dibujar-borrar-dibujar)
Lo ideal: hacerlo junto con el cliente
Es el BOCETO PREVIO al mockup digital
www.izaskunsaez.es
@isaezdesign
61. 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
www.izaskunsaez.es
@isaezdesign
62. En la App Store hay
+ de
400.000
aplicaciones que no
se han descargado ni
una sola vez
www.izaskunsaez.es
@isaezdesign
63. Yo no quiero ser una de esas...
vamos a hacer
que nos
deseen
www.izaskunsaez.es
@isaezdesign
64. {
{
No hay una
segunda oportunidad
para causar una
buena primera impresión
www.izaskunsaez.es
@isaezdesign
67. Si tenemos en cuenta la ENORME
COMPETENCIA
Tendrás que tener DAR
IMPORTANCIA el diseño
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
www.izaskunsaez.es
@isaezdesign
69. ¿ por qué es tan importante el
diseño de un buen icono?
www.izaskunsaez.es
@isaezdesign
70. ¡Soy una
App
que molo mucho!
PORQUE ES NUESTRA
TARJETA DE
PRESENTACIÓN
PORQUE ACTÚA
COMO PEQUEÑO
RECORDATORIO
PARA QUE UTILICE
LA APP
www.izaskunsaez.es
¡eh!
¡estoy aquí
!
@isaezdesign
81. 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.
www.izaskunsaez.es
@isaezdesign
82. El icono de una app tiene que verse
bien en diferentes tamaños y sobre
diferentes backgrounds
www.izaskunsaez.es
@isaezdesign
83. El icono de una app aporta una
información inicial al usuario
un diseño correcto
visualmente y atractivo
un mejor funcionamiento
de la app y más fiabilidad
Los usuarios de iphone o iPad
quieren tener cosas
agradables en sus dispositivos
www.izaskunsaez.es
@isaezdesign
85. Texto en el icono
Un icono con texto será ILEGIBLE y quedará con un ASPECTO BORROSO O DE MANCHA
cuando lo veamos en nuestro
escritorio.
www.izaskunsaez.es
Para solucionar este problema opta
por el Uso de una Inicial o como
mucho unas siglas o en su defecto
utiliza una imagen facilmente reconocible y memorizable.
@isaezdesign
100. 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.
www.izaskunsaez.es
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.
@isaezdesign
103. En resumen
a tener en cuenta*
1 El tamaño
A Tener en cuenta:
- Tamaño del dispositivo
2 El Color
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 dirigimos a niños optaremos por una paleta más
viva y colorista.
*
www.izaskunsaez.es
4
3 La gráfica
Elegir las formas que comprondrá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 representemos absolutamente todo lo
que ofrecemos. QUEDAOS CON
EL CONCEPTO Y RECORDAD
MENOS SIEMPRE ES MÁS (o
casi siempre)
A veces hay que romper con todo
Diferenciaos, destacad, los dispositivos móviles son un pequeño
escaparate y nosotros cada vez tenemos menos tiempo (y paciencia) así que o nos ven o no existimos.
@isaezdesign
113. Menos pasos para realizar una acción
Mayor y mejor visibilidad de los elementos
Elementos táctiles fácilmente seleccionables
Contenido útil
www.izaskunsaez.es
= abusar de información
@isaezdesign
114. Vamos a centrarnos en
algunas cosas
concretas
www.izaskunsaez.es
@isaezdesign
116. 1 La tipografía
La tipografía “verdana”, helvética
y otras tipografías “sin serifes” son
las que consiguen una lectura más
rápida.
Hola
Vs
Hola
2 La disposición
del texto
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 pierden los contornos).
http://nathanbarry.com/app-design-handbook/
https://developer.apple.com/library/ios/documentation/userexperience/
www.izaskunsaez.es
@isaezdesign
117. 3 El tamaño del texto
Por defecto el texto de párrafo (body) es de 34 pt
Nunca debe bajar de los 22 pt
Habrá que controlar el interlineado e interletrado
para una legibilidad óptima
4 No abuses de tipografías
www.izaskunsaez.es
@isaezdesign
118. 5 Contraste texto-fondo
El 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. Vestibulum eu magna id mauris
cursus pellentesque eu ac erat.
Negro al 100%
Sobre blanco.
www.izaskunsaez.es
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet blandit viverra. Vestibulum eu
magna id mauris cursus pellentesque eu ac erat.
Con 5% de negro
en el fondo
@isaezdesign
119. iOS Fonts
página donde encontrareis las fuentes que usa apple por defecto
App Fonts
Fontspring. Para buscar más tipografías.
How Much Does It Cost To Use A Font In My iOS App
en 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/documentation
Guía oficial de Apple sobre iOS Human Interface Guidelines
www.izaskunsaez.es
@isaezdesign
121. 1 Los números
Mostrar los números como números, a los usuarios les resultará muchos más fácil e inmediato
reconocerlos.
3 Imágenes
Las imágenes grandes reciben más
atención, siempre que sea posible
utilizaremos imágenes donde se vea
claramente los detalles y la información.
Lo aconsejable es que sean sencillas, limpias y amigables.
Trabajar con formato PNG de 24
bits
2 Frases cortas
Como ya hemos comentado, la
interfaz que contenga una cantidad significativa de texto deberá tender hacia las frases cortas
ya que los usuarios “usan cortos
tiempos de atención” por lo que
si se muestra un texto farragoso seguramente les ahuyentaremos.
www.izaskunsaez.es
4 Botones y menú
Diseño: Tendremos que dedicarle
tiempo puesto que suponen el correcto uso de nuestra aplicación.
Ubicación: A ser posible se colocará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.
@isaezdesign
122. 7 Espacio en blanco
No 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!
www.izaskunsaez.es
@isaezdesign
135. 11:56 AM
IZAS
11:56 AM
Tu Zalert
Elige tu trayecto
Metro
34
Viajas en metro
¿De dónde sales?
Cercanías
Cercanías
¿Cual es tu parada?
min.
Siguiente
IZAS
Volver
Busca tu parada
Elige tu transporte
Tranvía
IZAS
Tu Zalert
Volver
Tu trayecto
Volver
11:56 AM
IZAS
11:56 AM
IZAS
Tu transporte
Volver
11:56 AM
Favoritos
Tu cuenta
Cercano
Buscar
Updates
Favoritos
Tu cuenta
Cercano
Buscar
Updates
Favoritos
Tu cuenta
Cercano
Buscar
Updates
Favoritos
Tu cuenta
Cercano
Buscar
Updates
Zlert
Twitter
Facebook
Regístrate
IZAS
Volver
11:56 AM
Registro
Entrar
Nombre de usuario
Nombre de usuario
Q¿Has olvidado tu contraseña? P
W E R T Y U I O
A S D F G H J K L
Z X C V B N M
123
www.izaskunsaez.es
space
@
.
return
@isaezdesign
137. zZzalert - alarma con geolocalización para no
dormirte en el autobús, metro o tranvía.
Elige tu ruta
Login with Facebook
Login with Twitter
www.izaskunsaez.es
Metro
@isaezdesign
138.
139. Pero el trabajo de
un diseñador no
acaba ahí...
www.izaskunsaez.es
@isaezdesign
144. En 2010 Apple reveló sus guías de aprobación de aplicaciones
1.
Nada de contenido para adultos.
2.
Hay muchas aplicaciones de desarrolladores serios y profesionales, y no queremos 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.
5.
6.
7.
8.
9.
No es que en Apple seamos maniáticos del control, sino que estamos comprometidos con que los usuarios disfruten de la mejor experiencia de usuario
con las aplicaciones.
¿Emuladores escondidos en aplicaciones con otra descripción? Rechazada.
¿Clones repetidos de otras aplicaciones que ya fueron rechazadas? También
rechazadas.
Nada de frameworks de terceros para navegar por la web.
Aplicaciones muy parecidas en diseño a cualquier promoción de Apple o
con nombres parecidos a los productos de Apple, automáticamente rechazadas.
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.
http://www.businessinsider.com/heres-why-it-really-sucks-to-be-an-app-reviewer-for-apple-2012-7#ixzz1zaB9ki4H
www.izaskunsaez.es
@isaezdesign
145. “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.
www.izaskunsaez.es
@isaezdesign
146. Enero 2013
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
www.izaskunsaez.es
@isaezdesign
147. 4+ /
No contiene material desagradable.
9+ /
Puede contener situaciones leves o infrecuentes de violencia realista, fantá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 realista, fantástica o en dibujos animados frecuente, y contenido maduro o sugestivo 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 apropiado 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.
Desarrollo de Aplicaciones para iOS – Guía Básica
http://blog.staffcreativa.pe/desarrollo-aplicaciones-ios-apple/
www.izaskunsaez.es
@isaezdesign
148. iOS app approvals
http://en.wikipedia.org/wiki/IOS_app_approvals
Apple busca proteger a los niños mediante nuevas directrices sobre las apps infantiles
http://applicantes.com/apple-proteccion-ninos-nuevas-directrices-apps/
Como subir apps a Apple Store
http://www.imaginanet.com/blog/como-subir-apps-a-apple-store.html
Más transparencia: Apple revela sus guías de aprobación de aplicaciones y crea un consejo de revisiones
http://www.applesfera.com/apple/mas-transparencia-apple-revela-sus-guias-de-aprobacion-de-aplicaciones-ycrea-un-consejo-de-revision-de-aplicaciones
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
Apple modifica algunas normas de revisión para las aplicaciones de sus tiendas
http://www.applesfera.com/app-store-1/apple-modifica-algunas-normas-de-revision-para-las-aplicaciones-de-sus-tiendas
Es hora de que la App Store mire a los juegos con otros ojos
http://www.applesfera.com/aplicaciones-ios-1/es-hora-de-que-la-app-store-mire-a-los-juegos-con-otros-ojos
www.izaskunsaez.es
@isaezdesign
149. 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/
www.izaskunsaez.es
@isaezdesign
163. Un factor a tener en cuenta es la densidad
de 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
www.izaskunsaez.es
@isaezdesign
164. 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.
www.izaskunsaez.es
@isaezdesign
165. iOS solo cuenta con dos densidades
retina y no retina
www.izaskunsaez.es
@isaezdesign