Clase Práctica Wireframes
3 recomendaciones2,278 vistas
Este documento presenta una introducción a los wireframes. Explica que los wireframes son representaciones esquemáticas de pantallas sin elementos gráficos que muestran el contenido y comportamiento de las páginas. Luego describe los wireframes de alta y baja fidelidad, y los elementos esenciales que deben contener como navegación, información, interacción y apoyo. Finalmente, presenta algunas herramientas para crear wireframes y consejos para su diseño.
Clase Práctica Wireframes
- 1. WIREFRAMES clase 03 DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2014
- 2. INTRODUCCIÓN
- 3. PRESENTACIÓN Hola, soy Rodrigo Vera, y bienvenidos al taller de Wireframes.
- 4. RODRIGO VERA YERKO PEZZOPANE Diseñador Gráfico Diseñador UX Diseñador UX @rots @ypezzopane
- 5. RODRIGO VERA YERKO PEZZOPANE Diseñador Gráfico Diseñador UX Diseñador UX @rots @ypezzopane
- 6. LO QUE VEREMOS HOY Representación ¿Qué es un Wireframe? Características y Ventajas Malas Prácticas Otros Usos Herramientas para hacer WF
- 8. LOS WIREFRAMES SON… En interfaces digitales, un wireframe es una representación esquemática de una pantalla, sin elementos gráficos, que muestran contenido y comportamiento de las páginas.
- 9. ALTA Alta fidelidad: Los wireframes de alta fidelidad son usados a menudo para documentar, porque ellos incorporan un nivel de detalle que se acerca más al diseño final de una página web, pero toma más tiempo para ser creado.
- 10. ALTA
- 11. BAJA Baja fidelidad: Caracterizado por un dibujo en bruto o un boceto rápido, los wireframes de baja fidelidad tienen menos detalles y son rápidos de producir. Ayudan a un equipo de proyecto a colaborar más efectivamente debido a que son más abstractos, usando rectángulos y etiquetas para representar el contenido. Muestra o contenido simbólico son utilizados para representar datos cuando el contenido real no está disponible.
- 12. BAJA
- 13. ELEMENTOS ESENCIALES Un Wireframe debería, al menos, contar con: Elementos de navegación, información, interacción y de apoyo.
- 14. ELEMENTOS ESENCIALES Elementos de navegación: menúes, breadcrumbs e hipervínculos. Tab Tab Tab Tab Tab Estas en : Inicio / Lorem Ipsum / Lorem Ipsum / detalle Nulla facilisi. Nullam quis turpis sem, ut egestas lectus.
- 15. ELEMENTOS ESENCIALES Elementos de información: contenidos de texto, imágenes, audio y video. Sed vestibulum, ipsum lacinia vulputate vulputate, arcu nisi iaculis risus, sed auctor quam augue id odio. Cras hendrerit blandit nulla sed volutpat. Vestibulum sollicitudin quam sed lectus fringilla blandit. Quisque ut enim in erat tincidunt convallis. 16:9 This is the Title of the Video One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed... More... 0:00 / 4:59 URL Embed
- 16. ELEMENTOS ESENCIALES Elementos de interacción: botones, formularios, tooltips, sliders, etc. Done or Cancel Error message goes here. Error messageM geosessa ghee rgeo. es here. Message goes Mherses.age goes here. Message goes here. Comentar
- 17. ELEMENTOS ESENCIALES Elementos de apoyo: validaciones y alertas. Your XXX has been saved. View in XXX. * Campo requerido
- 18. WIREFRAME = / DISEÑO Un Wireframe no es el aspecto final del sitio, sino una mera representación gráfica de su contenido.
- 27. GUÍAS VISUALES
- 28. GUÍAS VISUALES Son estructuras simples conformados principalmente de líneas y cajas.
- 29. GUÍAS VISUALES Están diseñados en escala de grises.
- 30. GUÍAS VISUALES Todos los elementos que lo componen están representados de forma esquemática.
- 31. GUÍAS VISUALES Se utiliza una sola familia tipográfica. 1234567890¿? abcdefghijklmn ñopqrstuvwxyz
- 32. GUÍAS VISUALES Se debe usar contenido real. Lorem ipsum ¿o no?...
- 33. HERRAMIENTAS PARA DISEÑAR WIREFRAMES
- 34. HERRAMIENTAS PARA DISEÑAR WIREFRAMES Lápiz y papel.
- 35. HERRAMIENTAS PARA DISEÑAR WIREFRAMES Lápiz y papel. 1024 960 800 800 960 1024
- 36. HERRAMIENTAS PARA DISEÑAR WIREFRAMES Lápiz y papel.
- 37. HERRAMIENTAS PARA DISEÑAR WIREFRAMES Prototipos en papel: Es ideal para hacer los primeros esbozos del funcionamiento de una futura aplicación constituyéndose en un elemento de testado y debate rápido (económico) que evitará futuros y costosos errores en fases posteriores de desarrollo.
- 38. HERRAMIENTAS PARA DISEÑAR WIREFRAMES
- 39. HERRAMIENTAS PARA DISEÑAR WIREFRAMES Herramientas digitales: Es la manera para crear wireframes detallados y de alta calidad. Apliaciones escritorio Omnigraffle Visio Axure Balsamiq Fireworks Keynote Apliaciones web Prototyper Hotgloo iplotz Balsamiq Cacoo
- 41. 10 CONSEJOS ESENCIALES • Simple sobre todas las cosas • Usa la mayor cantidad de contenido real posible • Siempre trabaja en escala de grises • Evita usar imágenes, logos e iconografía • No te limites a usar una aplicación digital, ¡dibuja! • Define muy bien la estrategia y los contenidos antes de empezar • Siempre haz wireframes antes de diseñar • Explica las zonas e interacciones • Discute los wireframes con tu equipo de trabajo • Corrige problemas detectados en wireframes, no en diseño
- 42. CÓMO CREAR UN WIREFRAME
- 43. CONSIDERACIONES Los antecedentes del proyecto son claves para la definición y diseño de los wireframes. Es importante tener presente las definiciones provenientes del Brief, Estrategia, Benchmark, Investigación de Usuarios y AI.
- 44. CONSIDERACIONES DEL PROYECTO Consideraciones del Proyecto: Brief, Estrategia, Benchmark, Investigación de Usuario y AI. BRIEF ESTRATEGI A BENCH INVESTIGACIÓ N USUARIOS AI WIREFRAMES
- 45. CONSIDERACIONES DEL DISEÑO DE INTERACCIÓN Una vez creado el mapa de contenidos podemos representar, gráficamente, las interacciones complejas en Mapas de Interacción y Partituras de Interacción.
- 46. PARTITURAS DE INTERACCIÓN Acá, se pueden definir el número de páginas y elementos de la interfaz para un flujo de interacción en la misma partitura. Un ejemplo práctico, es la definición de un flujo de formulario.
- 47. PASAR DE LA AI AL WF
- 48. EL PROCESO Debemos definir que es lo mas importante que queremos representar en nuestra página.
- 49. INTERPRETACIÓN DEL MAPA DE CONTENIDO Es importante saber leer y distinguir distintas profundidades de contenido en un mapa de contenidos para poder traspasar a una adecuada jerarquía. INICIO No Jugos y Bebidas Perecibles Fiambres y Quesos Marca Nivel Auxiliar Ubicación Primer Nivel Preguntas Frecuentes Doña Juana Contacto Verduras Artículos de Aseo Jugos Bebidas Segundo Nivel Arroz Fideos Jamones Quesos Hortalizas Tubérculos Útiles de Baño Útiles de Cocina Tercer Nivel Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha
- 50. INTERPRETACIÓN DEL MAPA DE CONTENIDO Es importante saber leer y distinguir distintas profundidades de contenido en un mapa de contenidos para poder traspasar a una adecuada jerarquía. Home Verduras Jugos y Bebidas Comida no Perecible Fiambres y Quesos Artículos de Aseo Lechugas Tomates Cebollas Jugos Watts Bebidas Coca Cola Sprite Fanta Arroz Fideos Conservas Jamón Quesos Chanco Cabra Gauda Papel Higiénico Útiles de Aseo Útiles de Cocina Redes Sociales Ubicación Login/Registro Doña Juana Contacto Sociabilizar en Redes Imprimir Comentar Agregar a Favoritos Descarga PDF Funcionalidades Generales
- 51. PÁGINAS TIPO Comúnmente se diseñan los wireframes para las pantallas más importantes, complejas y recurrentes a lo largo de la interfaz. Home Verduras Jugos y Bebidas Comida no Perecible Fiambres y Quesos Artículos de Aseo Lechugas Tomates Cebollas Jugos Watts Bebidas Coca Cola Sprite Fanta Arroz Fideos Conservas Jamón Quesos Chanco Cabra Gauda Papel Higiénico Útiles de Aseo Útiles de Cocina Redes Sociales Ubicación Login/Registro Doña Juana Contacto Sociabilizar en Redes Imprimir Comentar Agregar a Favoritos Descarga PDF Funcionalidades Generales
- 52. DEFINICIÓN DE ÁREAS La definición de áreas es el primer paso para la creación de un wireframe. Acá, se jerarquizan las áreas de contenido, tales como header, main, sidebar o footer, según su importancia. HEADER MAIN SIDEBAR FOOTER
- 53. JERARQUIZACIÓN DE CONTENIDOS Una vez definida las áreas, debemos ordenar y jerarquizar los contenidos de éstos, donde es muy importante contar con la totalidad de los contenidos para crear wireframes más reales posibles.
- 54. ALGUNOS PRINCIPIOS BÁSICOS DE DISEÑO • Similitud entre elementos. • Recuerdo mejor que memoria. • Realce de elementos. • Preferir siempre lo simple. Siempre mostrar la información necesaria. • Considerar el patrón de lectura del usuario. • Facilitar la navegación a tu usuario. • Reducir la complejidad de las tareas. • Diseñar a prueba de errores.
- 55. FUNDAMENTACIÓN Y ENTREGABLES La fundamentación tiene como objetivo explicar, de forma detallada, cada decisión de diseño dentro de cada wireframe.
- 56. FUNDAMENTACIÓN Y ENTREGABLES La fundamentación tiene como objetivo explicar, de forma detallada, cada decisión de diseño dentro de cada wireframe. Carrier 12:00 PM Comunidad LG Mobile Para participar debes iniciar Sesión f Connect Foro Comunidad Lorem Ipsum dolor sit amet, consectetur. Descargas Lorem Ipsum dolor sit amet, consectetur. Equipos Lorem Ipsum dolor sit amet, consectetur. Smartphones Lorem Ipsum dolor sit amet, consectetur. Código QR Lorem Ipsum dolor sit amet, consectetur. Comunidad LG Mobile Comparte Copyright 2010 LG ELECTRONICS. TODOS LOS DERECHOS RESERVADOS
- 57. ACTIVIDAD
- 58. ACTIVIDAD La señora Juana tiene un negocio de abarrotes, y resulta que le hablaron de internet y quiere que su comunidad que es en la mayoría un barrio universitario ingrese a la “página web” de su negocio para saber que productos tiene y los precios que maneja Ella nos contó que quiere que su negocio se instale en internet y le ayude a llegar a muchos mas usuarios de los que puede llegar hoy en día. En su local ella vende: ! • Verduras • Jugos y Bebidas • Comida no Perecible • Fiambres y quesos • Artículos de Aseo !
- 59. ACTIVIDAD
- 60. v INICIO No Jugos y Bebidas Perecibles Fiambres y Quesos Marca Nivel Auxiliar Ubicación Primer Nivel Preguntas Frecuentes Doña Juana Contacto Verduras Artículos de Aseo Jugos Bebidas Segundo Nivel Arroz Fideos Jamones Quesos Hortalizas Tubérculos Útiles de Baño Útiles de Cocina Tercer Nivel Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha Ficha
- 62. FIN CLASE 03