Wireframes, Definiciones.
-
Upload
rodrigo-vera -
Category
Design
-
view
481 -
download
1
description
Transcript of Wireframes, Definiciones.
WIREFRAMES clase 02
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 Referencias!
REPRESENTACIÓN
DIAGRAMACIÓNEl primer paso en el diseño de objetos o procesos es la representación mediante diagramas de su estructura, funcionamiento y comportamiento, concretando así las primeras ideas abstractas.
DIAGRAMACIÓNEn el caso de productos interactivos con interfaz, como por ejemplo los sitios web, esta interfaz también es objeto de diagramación, especificando cuál será la organización y estructuración visual de los diferentes elementos.
DIAGRAMACIÓNLos diagramas se deben realizar a partir de la información recogida durante las etapas de investigación de la audiencia, en las que se estudia a los usuarios con el objetivo de crear un producto que satisfaga sus necesidades. !http://www.nosolousabilidad.com/articulos/diagramacion.htm#sthash.x7e0bp0o.dpuf
REPRESENTACIÓN EN LA AI
http://www.nosolousabilidad.com/articulos/diagramacion.htm
QUÉ ES UN WIREFRAME
UN POCO DE HISTORIA…
¿UN BOCETO?Un boceto es un dibujo hecho a mano alzada, utilizando lápiz, papel y goma de borrar, realizado generalmente sin instrumentos de dibujo auxiliares.
Puede ser un primer apunte del objeto ideado que aún no está totalmente definido. Es un dibujo rápido de lo que luego llegará a ser un dibujo definido o la obra de arte final en sí.
UN POCO DE HISTORIA…
Bocetos Da Vinci 1495 - 1497
UN POCO DE HISTORIA…
Bocetos Da Vinci 1495 - 1497
UN POCO DE HISTORIA…
Bocetos Da Vinci 1495 - 1497
UN POCO DE HISTORIA…
Planos Da Vinci
DIBUJO TÉCNICOEl dibujo técnico es un sistema de representación gráfica de diversos tipos de objetos, con el propósito de proporcionar información suficiente para facilitar su análisis, ayudar a elaborar su diseño y posibilitar su futura construcción y mantenimiento. Suele realizarse con el auxilio de medios informatizados o, directamente, sobre el papel u otros soportes planos.
UN POCO DE HISTORIA…
Blueprint
UN POCO DE HISTORIA…
Blueprint
UN POCO DE HISTORIA…
Blueprint
MODELADO 3DWireframe (marco o malla de alambre) es un algoritmo de renderización del que resulta una imagen semitransparente, de la cual solo se dibujan las aristas de la malla que constituye al objeto (de ahí su nombre).
Casi nunca se emplea en la representación final de una imagen, pero sí en su edición, debido a la escasa potencia de cálculo necesaria (comparada con otros métodos).
UN POCO DE HISTORIA…
Wireframes 3D
UN POCO DE HISTORIA…
Wireframes 3D
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…
Es la metodología que permite hacer diseños simplificadosdetallando su estructura y los elementos relevantes que se incorporarán para atender a las “personas” que llegan a visitar el sitio web o espacio digital que se desarrolla.
LOS WIREFRAMES SON…
Mediante esta forma de trabajo se obliga a los participantes en el desarrollo, a definir en forma anticipada los elementos que se deben incorporar en la interfaz, colaborando de modo eficaz a la toma de las decisiones más relevantes acerca del contenido y la interacción, junto con establecer la ubicación de dichas zonas en la pantalla.
LOS WIREFRAMES SON…
Adicionalmente el hecho de utilizar wireframes en el diseño, permite llevar a cabo pruebas tempranas de las interfaces y determinar si cumplen con los objetivos que se espera conseguir a través de ellas
LOS WIREFRAMES SON…
LOS WIREFRAMES SON…
LOS WIREFRAMES SON…
LOS WIREFRAMES SON…
RELACIÓN CON AIUn proyecto de interfaz digital, tiene a lo menos 4 etapas fundamentales: Estrategia, Arquitectura de Información, Diseño de Interfaz y Desarrollo.
RELACIÓN CON AI
El Wireframe es el paso intermedio entre Arquitectura de Información y Diseño, pasa de la “mentalidad estructural” de un
mapa de contenidos, dónde decidimos y ordenamos los contenidos de nuestro sitio web, a la emocionalidad del Diseño de Interfaz.
ESTRATEGIA AI UI DESARROLLLOWIREFRAMES
REPRESENTACIÓN EN LA AI
http://training.ayerviernes.com/
WIREFRAMES
++ COMUNICACIÓNSirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes.
++ COMUNICACIÓN
UTILIDADOfrece una perspectiva basada principalmente en la arquitectura del contenido Ayudan a que el proyecto no se retrase por falta de definición Son imprescindibles para definir los comportamientos en la interacción
TIPOS DE WIREFRAME
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
CARACTERÍSTICAS Y VENTAJAS
CARACTERÍSTICAS
CARACTERÍSTICAS
Se utilizan en la creación de todas las interfaces digitales (web, móviles, ATM, etc.).
CARACTERÍSTICAS
Se diseñan sólo las páginas tipo (plantillas).
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
CARACTERÍSTICAS
Pueden ser dibujados a mano o creados con alguna aplicación computacional.
CARACTERÍSTICAS
Son simples y no tienen distracciones visuales tales como color o imágenes.
CARACTERÍSTICAS
Siempre van acompañados de una explicación acerca de las zonas e interacciones.
ventajas
VENTAJAS
Las correcciones son objetivas, basadas en contenidos y funcionalidad, no en diseño.
VENTAJAS
Se reducen los tiempos de trabajo y gastos involucrados en el proyecto.
VENTAJAS
Permite la comunicación fluida entre el equipo de trabajo y el cliente.
VENTAJAS
Como es una estructura simple y enfocada en los contenidos, permite al diseñador tener plena libertad al momento de diseñar la interfaz.
VENTAJAS
Permiten visualizar interacciones y flujos.
VENTAJAS
Permiten identificar problemas que puedan presentarse más adelante.
MALAS PRÁCTICAS
MALAS PRÁCTICAS
Uso de color e imágenes.
MALAS PRÁCTICAS
Mezcla con interfaz real.
MALAS PRÁCTICAS
Wireframes muy complejos, mezclando formas y colores.
MALAS PRÁCTICAS
Wireframes muy simples.
OTROS USOS
MAPA DE DIVS
MAPA DE DIVS
MAPA DE DIVS
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
https://www.youtube.com/watch?v=GrV2SZuRPv0
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
REFERENCAS!
PARA LEER
Parte III - Wireframes (Pags. 307 - 313)
INFORMATION ARQUITECTURE FOR DE WORLD WIDE WEB (Morvile & Rosenfield)
PARA VER
Chapter 6 - The Skeleton Plane (Pags. 128-131)
THE ELEMENTS OF THE USER EXPERIENCE (Jesse James Garret)
PARA VER
THE GUIDE TO WIREFRAMING (Chris Bank)
http://uxpin.com/guide-to-wireframing.html
PARA VER
http://www.wireframeshowcase.com/
https://www.flickr.com/groups/ilovewireframes/
http://moobileframes.tumblr.com/
FIN CLASE 02