Diseño de aplicaciones para desarrolladores
-
Upload
javier-gala -
Category
Design
-
view
2.737 -
download
1
description
Transcript of Diseño de aplicaciones para desarrolladores
![Page 1: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/1.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Diseño de aplicacionesConceptos básicos para desarrol ladores
Alex de Fuenmayor & Jav ie r Ga la
![Page 2: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/2.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Alex de FuenmayorDiseñador Visual y de Interacción
Responsable de Diseño de Interacción en Tempos21, Grupo Atos
@alexdef • alexdef.com
Javier GalaDiseñador de Experiencia de Usuario
@JaviGala • javiergala.wordpress.com
Quiénes
![Page 3: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/3.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Qué es y por qué del diseño
Diseño aplicado al software
Principios universales
Diseño de Guerrilla
Consejos finales
Qué
![Page 4: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/4.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Qué es y por qué del diseño
![Page 5: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/5.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
La mayor parte de la gente comete el error de pensar que el diseño es cómo se ve. La gente piensa que es un barniz, que a los diseñadores les dan una caja y les dicen “¡Haz que quede bonito!”. Esto no es lo que creemos que es el diseño. No es sólo cómo se ve o cómo se siente. El diseño es cómo funciona.
Steve Jobs, CEO de Apple
”
Qué es
![Page 6: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/6.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Me sorprende la frecuencia con la que aquellos fuera de la disciplina del diseño asumen que lo que hacen los diseñadores es decoración.El buen diseño resuelve problemas.
Jeffrey Veen, co-fundador de Adaptive Path
”
El diseño resuelve problemasz
![Page 7: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/7.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Me sorprende la frecuencia con la que aquellos fuera de la disciplina del diseño asumen que lo que hacen los diseñadores es decoración.
El buen diseño resuelve problemas.
”Jeffrey Veen, co-fundador de Adaptive Path
El diseño resuelve problemasz
![Page 8: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/8.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
El diseño no es arte
El buen diseño se define por su adecuación a la audiencia y objetivos, y por su efectividad, no por su adherencia al diseño suizo o el número de premios que gane.
Drew Davies, diseñador
”
z
![Page 9: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/9.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
El diseño es inevitable
Las dudas sobre si el diseño es necesario o asequible son irrelevantes: el diseño es inevitable.
La alternativa al buen diseño es el mal diseño, no el “no diseñar”.
”Douglas Martin, diseñador y tipógrafo
![Page 10: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/10.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
El buen diseño es la forma más importante de diferenciarnos de nuestros competidores.”
Yun Jong Yong, CEO de Samsung
El diseño es diferencia
![Page 11: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/11.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
En internet si tienes un cliente descontento no se lo dice a seis amigos, se lo dice a seis mil.”
Jeff Bezos, CEO de Amazon
El diseño genera satisfacción
![Page 12: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/12.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
El diseño aplicado al softwarez
![Page 13: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/13.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
1. Definición del problema
2. Elementos del problema
3. Recopilación de datos
4. Análisis de datos
5. Creatividad
6. Materiales - tecnologías
7. Experimentación
8. Modelos
9. Verificación
”Bruno Munari, diseñador industrial
Metodología tradicional del diseñoz
![Page 14: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/14.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
El diseño industrial
Nunca diseño un edificio sin antes ver el lugar y conocer a la gente que lo va a utilizar.”
Frank Lloyd Wright, arquitecto
![Page 15: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/15.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Diseño centrado en el usuario
El diseño centrado en el usuario significa entender lo que necesitan tus usuarios, cómo piensan, y cómo se comportan – e incorporar este conocimiento en cada faceta de tu proceso.
”Jesse James Garrett, co-fundador de Adaptive Path
![Page 16: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/16.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Experiencia de usuario
Peter Morville, arquitecto de información
![Page 17: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/17.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Experiencia de usuario
Luke Wroblewski, diseñador UX
La arquitectura de información define la estructura de la información. El diseño de interacción hace que podamos manipular y contribuir a la información. El diseño visual comunica estas posibilidades y crea afinidades. La experiencia de usuario es la suma total de estas consideraciones.
”
![Page 18: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/18.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Principios universalesz
![Page 19: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/19.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Menos es más
John D. Berry, Tipógrafo
El diseño llama la atención sólo cuando falla; cuando tiene éxito es invisible.”
z
![Page 20: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/20.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Elementos del Diseño Visual
Blanco
Jerarquización
Tipografía
Ilustración e imagen
Color
z
![Page 21: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/21.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Blanco
¿Por qué es tan importante el espacio en blanco?
El contenido necesita espacio para respirar.
z
![Page 22: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/22.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Jerarquización
Los diseñadores pueden crear la normalidad en medio del caos; pueden comunicar ideas a través de la organización y manipulación de palabras e imágenes.
”Jeffrey Veen, co-fundador de Adaptive Path
z
![Page 23: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/23.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Tipografía
Albert Hollestein, Tipógrafo
La tipografía debe definir el blanco como la arquitectura debe definir el espacio.”
z
![Page 24: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/24.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Color
Philippe Starck, Diseñador industrial
Uno crea su propia decoración. Eliges tu color, eliges tu estado de ánimo...
[Si] estás deprimido, pones un poco de amarillo brillante y de repente estás feliz.
”
z
![Page 25: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/25.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Color
http://kuler.adobe.com
z
![Page 26: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/26.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Timothy Samara, diseñador gráfico y profesor
La retícula sitúa los elementos en un área espacial dotada de regularidad, lo que los hace accesibles; los lectores saben dónde encontrar la información que buscan, porque las uniones entre las divisiones verticales y las horizontales actúan como señales indicativas para su localización.
”Proporción aurea y retícula
z
![Page 27: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/27.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Proporción aurea y retículaz
![Page 28: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/28.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Robert H. MacArthur y Eric R. Pianka, biólogos
Teoría de recolección óptima
Cantidad neta de energía obtenida por la captura de una presa comparada con la energía invertida en la obtención de la presa.
”
![Page 29: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/29.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Cantidad de información obtenida comparada con el tiempo y esfuerzo invertido.
Recolección de información
![Page 30: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/30.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Patrones de escaneo
![Page 31: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/31.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Jakob Nielsen, experto en usabilidad
Patrones y estándares
Ley de Jakob de la experiencia de usuario: los usuarios pasan la mayor parte de su tiempo en otras páginas.”
![Page 32: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/32.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Diseño de guerrillaz
![Page 33: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/33.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Diseño de guerrilla
Definición de producto y éxito
Análisis competitivo orientado
Puntos de contacto y fricción
Bocetos
Resultados
z
![Page 34: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/34.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Definición de producto y éxito
Albert Einstein, científico
Si no puedes explicar algo de forma sencilla, entonces es que no lo entiendes bien.”
![Page 35: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/35.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Harry Brignull, diseñador UX
Hace unos días un amigo me habló de su primera visita a IDEO. En un momento dado vio a una docena de investigadores en una cocina improvisada, cada uno con una marca diferente de sartén, haciendo girar tortitas una y otra vez. Había una persona observando y tomando notas con una libreta.
Análisis competitivo orientado
”
![Page 36: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/36.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Puntos de contacto y fricción
Henry Dreyfuss, diseñador industrial
Si el punto de contacto entre el producto y la gente se convierte en un punto de fricción, entonces es que el Diseñador Industrial ha fallado.
”
![Page 37: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/37.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Bocetos
Frank Lloyd Wright, arquitecto
Puedes usar una goma de borrar en la mesa de dibujo o un martillo en la obra.”
![Page 38: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/38.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Resultados
Winston Churchill, estadista
Por muy hermosa que sea la estrategia, de vez en cuando hay que tener en cuenta los resultados.”
![Page 39: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/39.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Consejos finales
![Page 40: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/40.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Mike Kuniavsky, co-fundador de Adaptive Path
Tus usuarios no son tú. No se parecen a ti, no piensan como tú, no hacen las cosas que tú haces, no comparten tus expectativas o suposiciones.
Si lo hicieran no serían tus clientes; serían tus competidores.
”
No eres tu usuario
![Page 41: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/41.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Philip Tetlock, psicólogo y Dan Gardner, periodista
Entrevistas
La gente es muy mala prediciendo el futuro. Esto incluye a los expertos […] [que] tendrían mejores resultados adivinando al azar. Incluso los mejores pronosticadores fueron superados por reglas generales como “predecir siempre que no habrá cambios”.
”
![Page 42: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/42.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Personas y escenarios
Roger Schank, lingüista especializado en IA y psicología cognitiva
Podemos explicar reglas generales derivadas de nuestra experiencia, pero es difícil aprender de ellas. Resulta complicado recordar abstracciones, pero resulta más sencillo recordar una buena historia. Las historias avivan nuestras experiencias pasadas. Hacen nuestro pasado memorable para nosotros y para los demás.
”
![Page 43: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/43.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Steve Krug, experto en usabilidad
Lo que pocos saben sobre los tests de usabilidad es que son increíblemente sencillos de realizar. Sí, alguna gente los hace mejor, pero nunca he visto un test de usabilidad que no produzca resultados útiles, no importa lo mal que se hiciera.
”
Test de usabilidad
![Page 44: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/44.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Formularios para humanos
Luke Wroblewski, diseñador UX, autoridad mundial en formularios
Los formularios son un asco. Si no me crees, busca a alguien a quien le guste rellenarlos.
”
![Page 45: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/45.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Henry Ford, fundador de Ford
Si le hubiera preguntado a mis clientes que querían, me hubieran dicho que un caballo más rápido.”
Diseñar no es obedecer al usuario
![Page 46: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/46.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Matthew Inman, diseñador web (http://theoatmeal.com/comics/design_hell)
Diseñar no es obedecer al cliente
![Page 47: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/47.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Paula Scher, diseñadora gráfica
Lo dibujé en solo unos segundos, pero me ha costado 34 años aprender a dibujarlo en sólo unos segundos.”
El diseño es un oficioz
![Page 48: Diseño de aplicaciones para desarrolladores](https://reader035.fdocument.pub/reader035/viewer/2022081413/548b104bb4795900198b45f7/html5/thumbnails/48.jpg)
BCNDEVCON 2011@alexdef • @JaviGala
Evan Williams, creador de Blogger y CEO de Twitter
La experiencia de usuario lo es todo. Siempre lo ha sido, pero sigue siendo infravalorada y contando con pocos recursos. Si no sabes diseño centrado en el usuario, estúdialo. Contrata a gente que lo conozca. Obsesiónate con él. Convence a toda tu empresa.
”
Despedidaz