Clase Práctica Wireframes
-
Upload
rodrigo-vera -
Category
Design
-
view
451 -
download
2
description
Transcript of Clase Práctica Wireframes
WIREFRAMES clase 03
DIPLOMADO ARQUITECTURA DE INFORMACIÓN Y EXPERIENCIA DE USUARIO 2014
INTRODUCCIÓN
PRESENTACIÓNHola, soy Rodrigo Vera, y bienvenidos al taller de Wireframes.
RODRIGO VERA YERKO PEZZOPANEDiseñador Gráfico
Diseñador UX Diseñador UX
@rots @ypezzopane
RODRIGO VERA YERKO PEZZOPANEDiseñador Gráfico
Diseñador UX Diseñador UX
@rots @ypezzopane
LO QUE VEREMOS HOYRepresentación ¿Qué es un Wireframe? Características y Ventajas Malas Prácticas Otros Usos Herramientas para hacer WF
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.
LOS WIREFRAMES SON…
ALTAAlta 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.
ALTA
BAJABaja 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.
BAJA
Un Wireframe debería, al menos, contar con:
Elementos de navegación, información, interacción y de apoyo.
ELEMENTOS ESENCIALES
ELEMENTOS ESENCIALES
Elementos de navegación: menúes, breadcrumbs e hipervínculos.
Estas en : Inicio / Lorem Ipsum / Lorem Ipsum / detalle
TabTabTabTabTab
Nulla facilisi. Nullam quis turpis sem, ut egestas lectus.
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 VideoOne morning, when Gregor Samsa woke from troubled dreams, he found himself transformed... More...
0:00 / 4:59
URL
Embed
ELEMENTOS ESENCIALES
Elementos de interacción: botones, formularios, tooltips, sliders, etc.
Done or Cancel
Error message goes here. Error message goes here.Message goes here.
Message goes here.Message goes here.Message goes here.
Comentar
ELEMENTOS ESENCIALES
Elementos de apoyo: validaciones y alertas.
Your XXX has been saved.View in XXX.
* Campo requerido
WIREFRAME = DISEÑOUn Wireframe no es el aspecto final del sitio, sino una mera representación gráfica de su contenido.
/
WIREFRAMES = DISEÑO/
WIREFRAMES = DISEÑO/
WIREFRAMES = DISEÑO/
WIREFRAMES = DISEÑO/
WIREFRAMES = DISEÑO/
WIREFRAMES = DISEÑO/
WIREFRAMES = DISEÑO
WIREFRAMES = DISEÑO
GUÍAS VISUALES
GUÍAS VISUALES
Son estructuras simples conformados principalmente de líneas y cajas.
GUÍAS VISUALES
Están diseñados en escala de grises.
GUÍAS VISUALES
Todos los elementos que lo componen están representados de forma esquemática.
GUÍAS VISUALES
Se utiliza una sola familia tipográfica.
1234567890¿? abcdefghijklmnñopqrstuvwxyz
GUÍAS VISUALES
Se debe usar contenido real.
Lorem ipsum
¿o no?...
HERRAMIENTAS PARA DISEÑAR WIREFRAMES
HERRAMIENTAS PARA DISEÑAR WIREFRAMES
Lápiz y papel.
HERRAMIENTAS PARA DISEÑAR WIREFRAMES
Lápiz y papel.
1024 960 800 1024960800
HERRAMIENTAS PARA DISEÑAR WIREFRAMES
Lápiz y papel.
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.
HERRAMIENTAS PARA DISEÑAR WIREFRAMES
HERRAMIENTAS PARA DISEÑAR WIREFRAMES
Herramientas digitales: Es la manera para crear wireframes detallados y de alta calidad.
Omnigraffle Visio Axure Balsamiq Fireworks Keynote
Apliaciones escritorio
Apliaciones web
Prototyper Hotgloo iplotz Balsamiq Cacoo
10 CONSEJOS ESENCIALES
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
CÓMO CREAR UN WIREFRAME
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.
CONSIDERACIONES
CONSIDERACIONES DEL PROYECTO
Consideraciones del Proyecto: Brief, Estrategia, Benchmark, Investigación de Usuario y AI.
BRIEF ESTRATEGIA
BENCH INVESTIGACIÓN
USUARIOSAI
WIREFRAMES
Una vez creado el mapa de contenidos podemos representar, gráficamente, las interacciones complejas en Mapas de Interacción y Partituras de Interacción.
CONSIDERACIONES DEL DISEÑO DE INTERACCIÓN
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.
PASAR DE LA AI AL WF
EL PROCESO
Debemos definir que es lo mas importante que queremos representar en nuestra página.
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 Perecibles Fiambres y QuesosJugos y Bebidas
Nivel Auxiliar
Marca
Ubicación
Primer Nivel
Verduras Artículos de Aseo
Doña Juana Contacto
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
Preguntas Frecuentes
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 Doña Juana ContactoLogin/Registro
Sociabilizar en Redes Imprimir Comentar Agregar a
FavoritosDescarga
Funcionalidades Generales
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 Doña Juana ContactoLogin/Registro
Sociabilizar en Redes Imprimir Comentar Agregar a
FavoritosDescarga
Funcionalidades Generales
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
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.
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.
FUNDAMENTACIÓN Y ENTREGABLES
La fundamentación tiene como objetivo explicar, de forma detallada, cada decisión de diseño dentro de cada wireframe.
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
f ConnectPara participar debes iniciar Sesión
Comunidad LG Mobile
ComparteComunidad LG MobileCopyright 2010 LG ELECTRONICS.TODOS LOS DERECHOS RESERVADOS
Foro ComunidadLorem Ipsum dolor sit amet, consectetur.
DescargasLorem Ipsum dolor sit amet, consectetur.
EquiposLorem Ipsum dolor sit amet, consectetur.
SmartphonesLorem Ipsum dolor sit amet, consectetur.
Código QRLorem Ipsum dolor sit amet, consectetur.
ACTIVIDAD
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 !
ACTIVIDAD
v
INICIO
No Perecibles Fiambres y QuesosJugos y Bebidas
Nivel Auxiliar
Marca
Ubicación
Primer Nivel
Verduras Artículos de Aseo
Doña Juana Contacto
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
Preguntas Frecuentes
http://www.raincreativelab.com/paperbrowser/
http://960.gs/
DESCARGAS
FIN CLASE 03