Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Seminario: Prototipado y Wireframes

2,943 views

Published on

Seminario sobre Prototipado y el uso de herramientas de creación de bocetos

  • Be the first to comment

  • Be the first to like this

Seminario: Prototipado y Wireframes

  1. 1. SEMINARIOS Miguel Gea (mgea@ugr.es) Dpt. Lenguajes y Sistemas Informáticos Grado en Ingeniería Informática Universidad de Granada http://utopolis.ugr.es/diu Prototipado: wireframing y mockup DISEÑO DE INTERFACES DE USUARIO •Definición y conceptos •Posturas •Herramientas y recursos 28 Octubre, 2015
  2. 2. Definición y conceptos Seminario: Prototipado. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 2 Un prototipo es un diseño a escala del producto usado para su evaluación Las herramientas de prototipado de IU permite crear bocetos para analizar propiedades sobre la organización de información, navegación y diseño. Favorece la comunicación entre usuarios y diseñadores Campo de aplicación: Diseño de Interfaz de usuario para escritorio (S.O.) Diseño de navegación web (wireframing) Diseño dispositivos móviles Realización: en papel / herramienta digital Relacionado con: Arquitectura de la Información
  3. 3. Tipologías Seminario: Prototipado. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 3 http://www.uxbooth.com/articles/concerning-fidelity-and-design/
  4. 4. Tipologías Seminario: Prototipado. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 4 Sketch: Dibujo a mano alzada con los elementos e ideas básicas del diseño. Conceptos. Wireframe: Ajuste de las composición básica del diseño (reticula con formas básicas y espaciado). Layout. Mockup: Incluye detalles relacionados con la apariencia del producto final (color, tipografía, y elementos visuales de diseño) aplicando guías de estilos. ——— Prototipado: Cualquier representación del producto para pruebas. Puede tener diferentes formas de acabado (papel/funcional…) [UXPinMockup]
  5. 5. Sketch Seminario: Prototipado. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 5 Generalmente es boceto en papel (bosquejo). Idea del producto y elementos/distribución más destacable prototipo de telefono img: [GOODWIN09]
  6. 6. Wireframe Seminario: Prototipado. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 6 Diseño de alambre (en escala grises). Centrarse en espacios y organización (layout low-fidelity). Aproximación para: • contenido: qué se quiere mostrar • cómo organizar la información: agrupación, espacios y distribución • identificar los elementos visuales más destacados Posee los tamaños exactos del diseño, pero no se aplica apariencia final. Estilo a lápiz y papel (como boceto), plantillas, o con herramientas (diseño gráfico, de prototipado, presentación) [UXPinWire]
  7. 7. Nivel de fidelidad Seminario: Prototipado. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 7 Diagrama de Bloques. Nivel básico de información de la estructura de alambre (uso de espacios y organización general). Caja gris. En grises para definir espacios. Texto completado con “lorem ipsum” para ajustar tamaños. Hi-Fi Media. Incluye los elementos de contenido (texto e imágenes) Hi-Fi interacción. Incluye navegación entre bocetos [UXPinWire]
  8. 8. Posturas Seminario: Prototipado. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 8 Relacionar plataformas y modo de uso El usuario tiende a estar ocupado todo el tiempo en la tarea Multiples ventanas, maximizada la de trabajo Usuarios: nivel de experiencia intermedio-experto Basado en buscar información (enlaces hipertexto) Uso de un navegador / múltiples pestañas Organización de la información clara y comprensible (AI) Poco tiempo de permanencia, volatilidad Obtener información instantánea y en el contexto (Just It) Uso en cualquier lugar, no con las mejores condiciones Tamaño de uso y capacidad de uso más limitada desktop web movil Obtener información de un lugar / espacio (dimensión social) Uso poco frecuente, busca información relevante e inmediata Usuarios múltiples culturas (e idiomas) kiosco [Cooper07]
  9. 9. Herramientas de creación de prototipos Seminario: Prototipado. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 9 Herramientas de prototipado: • Pencil Project. Open Source GUI prototyping tool http://pencil.evolus.vn • Justinmind (Web & Mobile). http://www.justinmind.com • Bocetos y wireframing (online) https://wireframe.cc • iPhone Mockup (online) http://iphonemockup.lkmc.ch • Axure RP Pro (Win/Mac) http://www.axure.com/ • Balsamiq mockup (Mac) http://www.balsamiq.com/products/mockups • UXPin https://www.uxpin.com • MockFlow (Online) http://mockflow.com/ • Moqups (online- HTML5) https://moqups.com • MS Visio (Win) http://office.microsoft.com/es-es/visio • MS Expression:SketchFlow (Win) http://www.microsoft.com/expression/ [UXPinMockup]
  10. 10. Otros métodos Seminario: Prototipado. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 10 [UXPinWire] Pizarras, recortables, Programas diseño grafico (Photoshop), plantillas, presentación (PowerPoint), código HTML…
  11. 11. Prototipado: JustinMind Seminario: Prototipado. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 11 • Generación de prototipos de los bocetos funcionales en HTML • Recopila la documentación de la especificación del diseño • Herramienta de prototipado rápido y creación de bocetos digitales
  12. 12. Justinmind. Area de trabajo Seminario: Prototipado. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 12 1. La barra de menú. 2. La barra de herramientas. 3. Pestaña de interfaz de usuario. 4. Paleta de componentes. 5. Lienzo o área de trabajo. 6. Árbol de pantallas. 7. Propiedades del elemento seleccionado. Propiedades, añadir comentarios, interacciones y requisitos relativos al elemento. 8. Contenido de la pantalla actual. 9. Pestañas de situación. Pantallas / Bocetos abierto (editables) 10. Botón de simulación.
  13. 13. Justinmind: Diseño Seminario: Prototipado. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 13 • Basado en modelo de páginas web • Mapa de sitio • Widget (botones, formas básicas, contenedores) y añadir nuevos • Permite simular ventanas de escritorio (tamaños en pixels) • Comportamiento de Widgets • Navegación entre bocetos (Links) • Cambio de propiedades (ocultar/mostrar, estado) • Agrupan en colecciones (IU: Web, android, MacOSX, Win) y funcionalidad • Crear widgets personalizados • Personalizar y reutilizar • Generación prototipo evaluable • Prototipos (HTML + JavaScript) • Documentación (de especificación )
  14. 14. Justinmind: Comportamiento Seminario: Prototipado. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 14 Acciones que se pueden definir Basadas en el ratón / teclado on Click (pulsar botón izqdo) on Mouse Enter (posicionarse encima) on Mouse Over on Key Pressed Basadas en el contenido (texto) OnChange (cambio del valor del texto) Al comenzar en nueva página OnPageLoad (acción por defecto)
  15. 15. Balsamiq mockup Seminario: Prototipado. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 15 Sobre tecnología Adobe AIR Orientado al diseño (bocetos) Sin funciones de navegación Ejemplos: http://mockupstogo.net/
  16. 16. AppInventor: Bocetos y App Seminario: Prototipado. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 16 Incluye editor para UI. Prototipo sobre Android http://appinventor.mit.edu
  17. 17. Iphone Mockup Seminario: Prototipado. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 17 http://iphonemockup.lkmc.ch Diseño visual adaptado a iPhone (uso online). Dos modos:
  18. 18. Recursos Seminario: Prototipado. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 18 Colección UXPin de >60 ebook (gratis) sobre prototipado y diseño https://www.uxpin.com/knowledge.html
  19. 19. Referencias Seminario: Prototipado. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 19 [Buxton07] B. Buxton. Sketching User Experiences: Getting the Design Right and the Right Design, Morgan KaufMann, 2007 [COOPER07] A. Cooper, R. Reimann, D. Cronin: About Face 3, The Essentials of Interaction Design, Wiley Publishing, 2007 [GOODWIN09] K. Goodwin. Designing for the Digital Age: How to Create Human-Centered Products and Services, Wiley Publishing, 2009 [MATH11] L. Mathis. Designed for Use: Usable Interfaces for Applications and theWeb, Pragmatic Programmers, 2011 [UXPinMockup] Jerry Cao. UXPin: The guide to mockup [UXPinWire] Jerry Cao. UXPin. The guide to Wireframing: For Designers, PMs, Engineers and Anyone Who Touches Product, [UXPinBoxes] Jerry Cao. UXPin:Boxes to Interactions: The Complete Wireframing Process, 2015 Recursos UXPin. https://www.uxpin.com/knowledge.html Bocetos: http://www.grihotools.udl.cat/mpiua/bocetos-sketching/ Wireframes: Revista electrónica sobre prototipos / mockups http://wireframes.linowski.ca/ Alzado.org. Ejemplos y comentarios sobre diseños http://www.alzado.org Videos: http://www.youtube.com/watch?v=QSxF-pISj1w&NR=1

×