6. LO QUE VEREMOS HOY
Representación
¿Qué es un Wireframe?
Características y Ventajas
Malas Prácticas
Otros Usos
Herramientas para hacer WF
Referencias!
8. DIAGRAMACIÓN
El 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.
9. DIAGRAMACIÓN
En 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.
10. DIAGRAMACIÓN
Los 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
11. REPRESENTACIÓN EN LA AI
http://www.nosolousabilidad.com/articulos/diagramacion.htm
14. ¿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í.
15. UN POCO DE HISTORIA…
Bocetos Da Vinci 1495 - 1497
16. UN POCO DE HISTORIA…
Bocetos Da Vinci 1495 - 1497
17. UN POCO DE HISTORIA…
Bocetos Da Vinci 1495 - 1497
19. DIBUJO TÉCNICO
El 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.
23. MODELADO 3D
Wireframe (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).
27. 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.
28. LOS WIREFRAMES SON…
Es la metodología que permite
hacer diseños simplificados
detallando 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.
29. 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.
30. 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
34. RELACIÓN CON AI
Un proyecto de interfaz digital,
tiene a lo menos 4 etapas
fundamentales: Estrategia,
Arquitectura de Información,
Diseño de Interfaz y Desarrollo.
35. RELACIÓN CON AI
ESTRATEGIA AI WIREFRAMES UI DESARROLLLO
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.
39. UTILIDAD
Ofrece 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
41. 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.
43. 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.
48. 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 Login/Registro Doña Juana Contacto
Sociabilizar
en Redes
Imprimir Comentar
Agregar a
Favoritos
Descarga
PDF
Funcionalidades Generales
72. 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.
74. 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