0
DISEÑO:
Juan Daniel Pacheco
dennieru@facebook.com
valioso ►►CONVERGENTE
accesible
útil
deseable
creíble
hallable
usable
►CONSIDERACIONES
►Diseño en UX, NO es diseño de interfaz de usuario!!!
►UX, NO es un paso en el proceso!!!
◄UX esta integr...
►DEFINICIÓN
 UX (User Experience) que se traduce como: Experiencia de usuario, es un proceso de diseño
centrado en el usu...
►ENFOQUE UX
Tu programa. Como lo ve el usuario.
Como tu lo ves. Como deberías verlo.
►Multidisciplinario.
◄UX Es principalmente una tarea multidisciplinaria:
 Arquitectura de la información
 Diseño de inte...
►Actividades básicas para la mayoría de tipos de diseño, estas
actividades (diseñar, analizar, implementar y evaluar) se r...
►Ciclo de vida
Diseñar
Prototipar
Evaluar
Analizar
Iterar
Iterar
Iterar
Iterar
Regresar a una
actividad de desarrollo
prev...
► INDAGACIÓN CONTEXTUAL
ESTRATEGIA
► Definir la Misión y la Visión ayudara a articular la características, principios y gu...
INVESTIGACIÓN
► Actividades de recolección de datos.
Contextual Design (CD) es una técnica de recolección de datos de camp...
►CARD SORTING.
►Un grupo de expertos (usuarios) construyen un árbol de categorías.
◄Son guiados en el proceso, por un expe...
► CONSTRUCCIÓN DE SÍNTESIS
DISEÑO UX
►Colaborativa e interactiva, esta fase es la retroalimenta al proyecto, las ideas y o...
►CONSTRUCCIÓN DE SÍNTESIS
PRODUCCIÓN
►La etapa de desarrollo en UX es donde se refleja el diseño con una calidad optima.
►...
►LA TÉCNICA DEL MAGO DE OZ & RaP.
►Proyectar escenarios y aplicaciones de flujo.
◄Que es lo que pasara en respuesta al com...
►HERRAMIENTAS.
Prueba A/B (Split Testing)
Retroalimentación de usuarios para tu wireframe, mockup o website.
Optimización ...
►HERRAMIENTAS.
Estructurado de tarjetas (Card Sorting)
Herramienta que permite a tus usuarios armar un árbol de categorías...
►HERRAMIENTAS.
Diseño de Prototipos.
Herramienta integrada.
Herramienta de representación y diseño multipropósito.
Constru...
►HERRAMIENTAS.
Evaluación de Diseño
Herramienta para la priorización de la usabilidad.
Herramienta de predicción y análisi...
►HERRAMIENTAS.
Evaluación de Arquitectura de la información
Herramienta para la mejora de la navegabilidad.
Convierte tus ...
►HERRAMIENTAS.
Seguimiento de Bugs
Herramienta Bug tracking.
Herramienta Bug tracking.
Encuestas y pruebas de Usuarios
Inv...
►HERRAMIENTAS.
Web analítica
Herramienta para el almacenamiento del comportamiento de visitantes.
Web analítica en tiempo ...
►DEFINICIÓN DE INTERFAZ DE USUARIO (INTERFAZ USER).
• Diseño de Interfaz de Usuario o Ingeniería de Interfaz de Usuario (U...
►DISEÑO DE INTERFACES.
DISEÑO GRAFICO.
Interface → Gráficos + esquema
Botones + iconos → ilustraciones
EL CEREBRO HUMANO.
...
►REGLAS DEL DISEÑO DE INTERFACES.
LINEAS RECTAS.
Hermoso Feo
EL desorden y la falta de simetría se alejan de lo que consid...
►REGLAS DEL DISEÑO DE INTERFACES.
PATRONES Y REPETICIONES.
Nada nuevo Inquietante
EL orden tranquiliza.!
►REGLAS DEL DISEÑO DE INTERFACES.
PATRONES Y REPETICIONES.
Nada nuevo Inquietante
EL orden tranquiliza.!
►REGLAS DEL DISEÑO DE INTERFACES.
ESPACIOS EN BLANCO.
Hermoso Feo
Fácil de contar Difícil de contar
EL desorden y la falta...
►REGLAS DEL DISEÑO DE INTERFACES.
CONTRASTE.
Fácil de reconocer Difícil de reconocer
Lorem ipsum dolor sit amet,
consectet...
►TIPOGRAFÍA.
El mostrar la información no debe analizarse a través del «¿Cómo?» sino del «¿por que?».
Fácil de leer Difíci...
►EJEMPLOS.
PATRONES Y REPETICIONES.
Líneas rectas y espacios en blanco Diferenciación de colores fácil
La practica, discip...
►EJEMPLOS.
PATRONES Y REPETICIONES.
Los iconos ayudan al
usuario a tener una
mejor referencia.
No muy importante.
Importan...
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
DISEÑO DE PANTALLAS
Maestro detalle Paleta/Lienzo Buscador por columnas Tablero (Das...
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
Maestro detalle
iWork.com (beta)Site
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
Maestro detalle
sliderocket.comSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
Maestro detalle
Discover Spend AnalyzerSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
Maestro detalle
WesabeSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
Maestro detalle
SugarSync , ActionM ethod, Product-Planner & boxeeSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
Paleta/Lienzo
Sproud BuilderSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
Paleta/Lienzo
Balsamiq MockupsSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
Paleta/Lienzo
FlairBuilderSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
Paleta/Lienzo
Palm AresSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
Maestro detalle
280Slides FloorPlanner Paper CrittersSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
Explorador en columnas
OtherInboxSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
Explorador en columnas
feed a feverSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
Explorador en columnas
Google WaveSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
Explorador en columnas
kulerSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
Tablero de control (Dashboard)
Quicken OnlineSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
Tablero de control (Dashboard)
zendoughSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
Tablero de control (Dashboard)
optimist onlineSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
Tablero de control (Dashboard)
Indianapolis Museum of ArtSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
Tablero de control (Dashboard)
PNC Virtual Wallet Have a Mint NASDAQ WesabeSite
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
Preguntas y respuestas
Mint – Ways to saveSite
►COMPONENTES UI.
BOTONES
Estados de botones Tamaños
Variantes
Combos
►COMPONENTES UI.
ENTRADAS
Estados
Variantes
►COMPONENTES UI.
VARIOS
Etiquetas Checkboxs
Navegabilidad
►COMPONENTES UI.
VARIOS
Social Buttons Tablas
Iconos Tooltips Sliders y barra de progreso
►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
GRACIAS….
Juan Daniel Pacheco
dennieru@facebook.com
Upcoming SlideShare
Loading in...5
×

User Experience, UX & UI

760

Published on

User Experience

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
760
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
43
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "User Experience, UX & UI"

  1. 1. DISEÑO: Juan Daniel Pacheco dennieru@facebook.com
  2. 2. valioso ►►CONVERGENTE accesible útil deseable creíble hallable usable
  3. 3. ►CONSIDERACIONES ►Diseño en UX, NO es diseño de interfaz de usuario!!! ►UX, NO es un paso en el proceso!!! ◄UX esta integrada en todo lo que haces. ►UX, NO es solo usabilidad o tecnología !!! ►UX es complejo y multidisciplinario!!! ►UX, NO es solo un tema de usuario!!! ◄UX se trata del diseño y del negocio, sobre las necesidades que tienen que satisfacerse «Para todos». Experiencia para todos: consumidores, clientes, empleados, competidores… gente. Cuantas personas interactúen con tu producto, servicio o compañía. !
  4. 4. ►DEFINICIÓN  UX (User Experience) que se traduce como: Experiencia de usuario, es un proceso de diseño centrado en el usuario. El cual usa un conjunto de herramientas durante cada tarea del ciclo de vida del producto software.  No esta únicamente enfocado en las necesidades del usuario, también toma vital importancia en las necesidades del negocio como tal.  Se enfoca principalmente en resolver el: • Que • Cuando • Donde • Por que • Como en el producto que vamos a desarrollar.
  5. 5. ►ENFOQUE UX Tu programa. Como lo ve el usuario. Como tu lo ves. Como deberías verlo.
  6. 6. ►Multidisciplinario. ◄UX Es principalmente una tarea multidisciplinaria:  Arquitectura de la información  Diseño de interacción.  Etnografía.  (Branding) Marcas comerciales.  Ciencia de librerías.  Usabilidad. ►Experto en UX Un profesional en UX posee cualidades tanto de programación, análisis de datos y sistemas como de diseño, sociología y psicología. !
  7. 7. ►Actividades básicas para la mayoría de tipos de diseño, estas actividades (diseñar, analizar, implementar y evaluar) se refieren genéricamente a: Diseño, análisis, implementación evaluación. ►(The wheel)Plantilla del ciclo de vida. ►Ciclo de vida
  8. 8. ►Ciclo de vida Diseñar Prototipar Evaluar Analizar Iterar Iterar Iterar Iterar Regresar a una actividad de desarrollo previa Regresar a una actividad de desarrollo previa Regresar a una actividad de desarrollo previa Regresar a una actividad de desarrollo previa (The wheel)
  9. 9. ► INDAGACIÓN CONTEXTUAL ESTRATEGIA ► Definir la Misión y la Visión ayudara a articular la características, principios y guías dentro la organización. ◄ El entendimiento de nuestro campo de acción nos permitirá tener una idea mas clara de como construir las metas del proyecto. ◄ Nuestra estrategia es, el conjunto de metas las cuales responden preguntas, como: ◄ ¿Que es lo que la organización espera alcanzar con el proyecto? ◄ El éxito del proyecto se lograra ¿ cuando? ◄ ¿Que alcance tendrá el proyecto para sus usuarios? ► Conceptualización o declaración del Sistema. ◄Es un resumen descriptivo del sistema o producto, una visión inicial. ◄ Es la declaración de la misión del proyecto. Técnicas de estrategias ►CARD SORTING.
  10. 10. INVESTIGACIÓN ► Actividades de recolección de datos. Contextual Design (CD) es una técnica de recolección de datos de campo utilizada para capturar información detallada acerca de cómo los usuarios de un producto interactúan con el producto en su entorno de trabajo habitual. Esta información es capturada por: Observaciones al comportamiento de los usuarios y/o por conversaciones con el usuario mientras que él o ella trabaja. ► Identificar aspectos emocionales en el trabajo. ◄ Es un tema de identificación y entendimiento de factores emocionales durante el trabajo, el, como afecta el impacto del ambiente, los colores, y la diversión en el ambiente laboral. Técnicas de estrategias e investigación ►Análisis del competidor. ►Revisión Analítica. ►Entrevista a las partes interesadas (Stakeholders) Comportamiento Datos Conversaciones Observaciones Factores emocionales internos Factores externos Relaciones interpersonales ► INDAGACIÓN CONTEXTUAL
  11. 11. ►CARD SORTING. ►Un grupo de expertos (usuarios) construyen un árbol de categorías. ◄Son guiados en el proceso, por un experto UX. ►Pasos Básicos. ►Se le proporciona a cada participante tarjetas o Post-it-notes con términos escritos (familiares), que representan los conceptos a estudiar. ►El participante agrupa las tarjetas en un orden lógico, y categoriza los grupos. ►El resultado de cada participante es analizado para encontrar patrones. → (Dendogramas) ► Se usa para evaluación de patrones. ◄Son diagramas de frecuencias utilizado para ilustrar la disposición de los grupos producidos por la agrupación jerárquica. Esta técnica te permite tener un mejor entendimiento de la arquitectura de la información. ! A B C D E F BC DE DEF BCDEF ABCDEF
  12. 12. ► CONSTRUCCIÓN DE SÍNTESIS DISEÑO UX ►Colaborativa e interactiva, esta fase es la retroalimenta al proyecto, las ideas y opiniones de los usuarios. La mejor forma de presentar información, es mediante la simplicidad y la diferenciación. ! Técnicas de diseño UX ►Estudios diarios. ►Entrevistas a usuarios. ►Pruebas con usuarios. ►StoryBoards. ►Personas. ►Modelos Mentales. ►Diseño Colaborativo. ►Diagrama de Flujo de Trabajo. ►Sitemap. ►Wireframe. ►Prototipos de papel. ►Tabla de tendencias. ►Versión Beta.
  13. 13. ►CONSTRUCCIÓN DE SÍNTESIS PRODUCCIÓN ►La etapa de desarrollo en UX es donde se refleja el diseño con una calidad optima. ►Contenidos y activos digitales son creados. ►Inicia el proceso de validación con las partes interesadas y usuarios finales. ◄ Dentro de UX la validación es un proceso constante en cada etapa del desarrollo. ►El trabajo principal es conciliar las ideas y colaborar junto a desarrolladores para obtener una relación emotiva entre producto y usuario. USABILIDAD ►La etapa Es mejor encontrar problemas que encontrar soluciones.!
  14. 14. ►LA TÉCNICA DEL MAGO DE OZ & RaP. ►Proyectar escenarios y aplicaciones de flujo. ◄Que es lo que pasara en respuesta al comportamiento del usuario. ►Reunir las interfaces «esqueleto». ►Desarrollar «anzuelos» como, pre-visualizaciones. ►Como y cuando esta técnica te proveerá pre-visualizaciones coherentes. ◄Seleccionando la próxima pantalla, ingresando texto, ingresando a zonas, haciendo validaciones, etc. ◄Recordando que mas tarde todo este comportamiento será remplazado en la computadora a través de una librería o lenguaje de programación. ►Ensayar roles con un compañero. →RaP (Rapid Prototyping) Con esta técnica puedes simular el «comportamiento» deseado del producto.!
  15. 15. ►HERRAMIENTAS. Prueba A/B (Split Testing) Retroalimentación de usuarios para tu wireframe, mockup o website. Optimización para Comercio Electrónico. Pruebas de usabilidad para diseñadores web. Optimización para UX. Empoderamiento de UX a través de BigData. Pruebas A/B para aprender del test. Optimización para UX. Pruebas remotas para analizar las necesidades del usuario. Pruebas de usabilidad. Herramienta para la priorización de la usabilidad. Auditor para la usabilidad. Split Testing es un control por experimentos aleatorios.!
  16. 16. ►HERRAMIENTAS. Estructurado de tarjetas (Card Sorting) Herramienta que permite a tus usuarios armar un árbol de categorías. Diseño de Prototipos. Editor de código para web. Diseñador UI. Construye prototipos interactivos. Construye prototipos. Construye prototipos interactivos. Cogtool Construye prototipos. Construye prototipos interactivos. Construye prototipos y diseño multipropósito. Prototipado ágil. Construye prototipos interactivos. Prototipos interactivos de construcción rápida. Estructurado de tarjetas, permite armar un árbol de estructuras.!
  17. 17. ►HERRAMIENTAS. Diseño de Prototipos. Herramienta integrada. Herramienta de representación y diseño multipropósito. Construye prototipos. Construye prototipos interactivos y colaborativos. Construye prototipos interactivos. Construye recursos Front/End. Construye prototipos. Construye prototipos interactivos y colaborativos. Construye prototipos interactivos, realistas. UX para diseñadores. Un prototipo es una imagen del producto futuro.!
  18. 18. ►HERRAMIENTAS. Evaluación de Diseño Herramienta para la priorización de la usabilidad. Herramienta de predicción y análisis para sitios web. Análisis experto, recomendaciones y soluciones. Pre evaluación. Optimización de paginas web (prueba de los 5 segundos). Notas mentales, para psicología del diseño web. Análisis y pruebas de diseño en equipo. Simulación de retroalimentación de usuarios. Evaluación de Arquitectura de la información Herramienta para la mejora de la navegabilidad. Herramienta para la mejora de la organización. Herramienta para la mejora de la navegabilidad. Las evaluaciones se pueden hacer en distintas faces del desarrollo, incluso análisis.!
  19. 19. ►HERRAMIENTAS. Evaluación de Arquitectura de la información Herramienta para la mejora de la navegabilidad. Convierte tus mockups, sketches o wireframes a interfaces de validación. Validación para la arquitectura de la información. Herramienta para la mejora de la usabilidad (Test del participante). Usabilidad para la mejora de la Experiencia de Usuario. Herramienta para la mejora de la navegabilidad y el análisis de resultados. Herramienta para la mejora de la navegabilidad. Mapa digital de empatía (Process Aids). Investigación remota de testeo Investigación remota de usabilidad a través de sobrecarga. Pruebas de usabilidad remotas y en vivo. Herramienta de pruebas remotas. Las pruebas remotas permiten probar las capacidades del software (con usuarios remotos o por simulación). !
  20. 20. ►HERRAMIENTAS. Seguimiento de Bugs Herramienta Bug tracking. Herramienta Bug tracking. Encuestas y pruebas de Usuarios Investigación de mercado. Herramienta para la recolección de información. Herramienta para la recolección de información. Feedback Tool. Herramienta para la recolección de información. Comunidad para la comprensión del usuario. Herramienta para la comprensión del mercado. El seguimiento de bugs tiene que ver con el proceso de desarrollo en equipo. Las encuestas son herramientas básicas para la recolección de datos. !
  21. 21. ►HERRAMIENTAS. Web analítica Herramienta para el almacenamiento del comportamiento de visitantes. Web analítica en tiempo real. Análisis de visitantes. Grabación del comportamiento de visitantes. Inteligencia de cliente (CI). Conexión con los visitantes en tiempo real. Herramienta para el análisis de visitantes. Análisis de visitantes. Web analítica . Herramienta para el almacenamiento del comportamiento de visitantes. Web Analytics liberada. Herramienta para el análisis de audiencia. Analisi de usuarios en tiempo real. Web Analítica permite cuantificar comportamientos, contar cuantas veces (por ejemplo) hace click un usuario en un link !
  22. 22. ►DEFINICIÓN DE INTERFAZ DE USUARIO (INTERFAZ USER). • Diseño de Interfaz de Usuario o Ingeniería de Interfaz de Usuario (UI) es el arte de diseño de Sitios Web, computadoras, aplicaciones para PC o móviles y Software en general. Con énfasis en la interacción y experiencia de usuario. • El objetivo es hacer la interacción software/usuario lo mas simple y eficiente posible. • A menudo se usa el prototipado como comienzo del diseño de interfaces. • Algunos de los métodos/herramientas dentro del estudio complejo del diseño de interfaces, son:  Análisis del comportamiento, Antropometría (movimiento de brazos y cabeza).  Tipografía, Ciencia de los comentarios y fuentes de texto.  Diseño de la información.  Circulación Horizontal.  Circulación Vertical.  Diseño vs. Interacción.  Diseño Grafico.  Modelos Mentales.  Metáforas de Interfaces.  Flujo de comportamiento.  Prototipado.  Pruebas de Usabilidad.  Grupos de enfoque.  Psicología y sociología.
  23. 23. ►DISEÑO DE INTERFACES. DISEÑO GRAFICO. Interface → Gráficos + esquema Botones + iconos → ilustraciones EL CEREBRO HUMANO. Gusta de las líneas restas. Reconoce patrones y repeticiones. Le encanta tanto la distribución como los espacios en blanco. COLORES. Armonía del color, se recomienda conservar una coherencia. Psicología del color, algunos colores invitan al consumo otros al romance. EL color dentro del diseño es, subjetivo.!
  24. 24. ►REGLAS DEL DISEÑO DE INTERFACES. LINEAS RECTAS. Hermoso Feo EL desorden y la falta de simetría se alejan de lo que consideramos bello.!
  25. 25. ►REGLAS DEL DISEÑO DE INTERFACES. PATRONES Y REPETICIONES. Nada nuevo Inquietante EL orden tranquiliza.!
  26. 26. ►REGLAS DEL DISEÑO DE INTERFACES. PATRONES Y REPETICIONES. Nada nuevo Inquietante EL orden tranquiliza.!
  27. 27. ►REGLAS DEL DISEÑO DE INTERFACES. ESPACIOS EN BLANCO. Hermoso Feo Fácil de contar Difícil de contar EL desorden y la falta de simetría se alejan de lo que consideramos bello.!
  28. 28. ►REGLAS DEL DISEÑO DE INTERFACES. CONTRASTE. Fácil de reconocer Difícil de reconocer Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  29. 29. ►TIPOGRAFÍA. El mostrar la información no debe analizarse a través del «¿Cómo?» sino del «¿por que?». Fácil de leer Difícil de leer Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  30. 30. ►EJEMPLOS. PATRONES Y REPETICIONES. Líneas rectas y espacios en blanco Diferenciación de colores fácil La practica, disciplina la búsqueda de la perfección.!
  31. 31. ►EJEMPLOS. PATRONES Y REPETICIONES. Los iconos ayudan al usuario a tener una mejor referencia. No muy importante. Importante. Diferenciación por medio de de los colores y las agrupaciones.
  32. 32. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. DISEÑO DE PANTALLAS Maestro detalle Paleta/Lienzo Buscador por columnas Tablero (Dashboard) Pregunta/Respuesta Tablas Paneles paralelos Wizard Modelo Interactivo Tabbed Formulario Busqueda/Resultados Datos Refinados(Filtros) Portal Buscador La simplicidad es la mejor forma de llegar al cliente.!
  33. 33. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. Maestro detalle iWork.com (beta)Site
  34. 34. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. Maestro detalle sliderocket.comSite
  35. 35. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. Maestro detalle Discover Spend AnalyzerSite
  36. 36. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. Maestro detalle WesabeSite
  37. 37. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. Maestro detalle SugarSync , ActionM ethod, Product-Planner & boxeeSite
  38. 38. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. Paleta/Lienzo Sproud BuilderSite
  39. 39. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. Paleta/Lienzo Balsamiq MockupsSite
  40. 40. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. Paleta/Lienzo FlairBuilderSite
  41. 41. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. Paleta/Lienzo Palm AresSite
  42. 42. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. Maestro detalle 280Slides FloorPlanner Paper CrittersSite
  43. 43. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. Explorador en columnas OtherInboxSite
  44. 44. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. Explorador en columnas feed a feverSite
  45. 45. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. Explorador en columnas Google WaveSite
  46. 46. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. Explorador en columnas kulerSite
  47. 47. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. Tablero de control (Dashboard) Quicken OnlineSite
  48. 48. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. Tablero de control (Dashboard) zendoughSite
  49. 49. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. Tablero de control (Dashboard) optimist onlineSite
  50. 50. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. Tablero de control (Dashboard) Indianapolis Museum of ArtSite
  51. 51. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. Tablero de control (Dashboard) PNC Virtual Wallet Have a Mint NASDAQ WesabeSite
  52. 52. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES. Preguntas y respuestas Mint – Ways to saveSite
  53. 53. ►COMPONENTES UI. BOTONES Estados de botones Tamaños Variantes Combos
  54. 54. ►COMPONENTES UI. ENTRADAS Estados Variantes
  55. 55. ►COMPONENTES UI. VARIOS Etiquetas Checkboxs Navegabilidad
  56. 56. ►COMPONENTES UI. VARIOS Social Buttons Tablas Iconos Tooltips Sliders y barra de progreso
  57. 57. ►CONSTRUCCIÓN Y DISEÑO DE INTERFACES.
  58. 58. GRACIAS…. Juan Daniel Pacheco dennieru@facebook.com
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×