Diseno aplicaciones moviles_android_ios
description
Transcript of Diseno aplicaciones moviles_android_ios
![Page 1: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/1.jpg)
Diseño y usabilidaden aplicaciones móviles
![Page 3: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/3.jpg)
El color
El tamaño importa
Simplifica
![Page 4: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/4.jpg)
El Color
![Page 5: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/5.jpg)
Define la marca / Branding
Ayuda a jerarquizar
Guía al usuario visualmente
![Page 6: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/6.jpg)
El color
![Page 7: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/7.jpg)
El color
![Page 8: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/8.jpg)
El color
![Page 9: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/9.jpg)
Escoge una paleta de colores reducida esto creará idea de marca
![Page 10: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/10.jpg)
El color
![Page 11: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/11.jpg)
Define la marca / Branding
Ayuda a jerarquizar
Guía al usuario visualmente
El color
![Page 12: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/12.jpg)
@isaezdesign
455
Mi Biografía
Mi Trabajo
Mis Seguidores
Mis Libros favoritos
Mi música preferida
@isaezdesign
455
Mi Biografía
Mi Trabajo
Mis Seguidores
Mis Libros favoritos
Mi música preferida
El color
Si abusamos del color TODO GRITA,
los elementos no se jerarquizan y no ayudamos al
usaurio a guiarse a través de la
aplicación.
Una paleta de colores reducida afianzará nuestra identidad de marca, nos hará más reconocibles y perdurables en la memoria.
![Page 13: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/13.jpg)
El colorSOMOS ANIMALES VISUALES
Dos aplicaciones con información de Londres.
En una han diseñado un menú simplemente basado en texto, sin ningún tipo de ayuda visual.
En la 2ª opción han usado el color para hacer diferenciaciones entre los diferentes aspectos del menú, de forma que con el uso habitual de la aplicación llegará un momento en que si, por ejemplo, vamos a la sección de MAP en lugar de leer la palabra solo veremos el color y la respuesta por parte del usuario será mucho más rápida y por tanto la usabilidad será mayor.
![Page 14: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/14.jpg)
![Page 15: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/15.jpg)
Photo: Ariel Zambelich/Wired
El tamaño importa
![Page 16: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/16.jpg)
El tamaño importa
ESPACIO DE INTERACTUACIÓN
Los espacios de interacción en una aplicación móvil deben ser lo suficientemente grandes para poder interactuar con comodidad.
Eliminar los aspectos que no son relevantes como botones que no son de acción directa o características que no aportan nada relevante y que solo agobian visualmente el diseño y no apoyan a al usabilidad de al app es de suma importancia.
En estos ejemplos, vemos como los elementos de una y otra aplicación son de muy diferente tamaño: en el diseño superior han tenido en cuenta que se trata de una aplicación donde el usuario interactuará directamente con los platos de DJ y por eso le han dado mucho más tamaño que en el ejemplo inferior.
![Page 17: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/17.jpg)
EL TAMAÑO DE LOS BOTONES
En este ejemplo de nuevo nos encontramos ante una 1ª aplicación donde los botones de acción son demasiado pequeños y están muy juntos entre sí.
En el 2º diseño vemos como todo está más euqilibrado visualmente, con iconos lo suficientemente grandes para interactuar con nuestro dedo y con en espaciado entre los elementos que facilita pulsar sobre lo que queremos sin errar.
El tamaño importa
![Page 18: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/18.jpg)
¡Simplifica!
![Page 19: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/19.jpg)
SimplificaDAME AIRE
El diseño en una aplicación debe respirar, esto es, no saturar al usuario visualmente con un exceso de información de una sola vez.
![Page 20: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/20.jpg)
AL GRANO
Una pantalla de registro no debe tener un exceso de información que pueda llevar a la confusión.
Debemos ofrecer la información necesaria de una forma amena y cuanto más visual mejor.
De esta forma evitamos distracciones sobre el objetivo que tenemos, en este caso: que el usuario se registre.
Simplifica
![Page 21: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/21.jpg)
MUESTRA SOLO LO NECESARIO
De nuevo el exceso de información juega a la contra.
Muestra al usuario solamente lo que necesite ver y en el momento en que lo necesite ver.
La sobreinformación visual no es bienvenida en el diseño de una aplicación.
Simplifica
![Page 22: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/22.jpg)
Diseño en aplicaciones móviles es...
InvestigarHacer mockups
Hacer más mockupsTrabajar con los desarrolladores
Trabajar con los de MarketingDarle vueltas al tema del color
Optimizar el tamaño de los elementosUsabilidad
Accesibilidad...etc
![Page 23: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/23.jpg)
LOS DISEÑADORESSOMOS LOS ENCARGADOSDE CREAR EXPERIENCIAS
NO APLICACIONES
![Page 24: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/24.jpg)
IllustratorPhotoshop
InkscapeCorel
....
La investigaciónEl análisisEl testeoAplicarMejora contínua
¿Qué herramientas usa un diseñador ?
![Page 25: Diseno aplicaciones moviles_android_ios](https://reader034.fdocuments.mx/reader034/viewer/2022042714/557b866dd8b42aff318b57dd/html5/thumbnails/25.jpg)
¡Gracias!
@isaezdesign