Un proyecto digital requiere de un método y proceso de desarrollo en cuanto a su estructura visual. Las partituras visuales como los bocetos son herramientas relevantes al momento de crear un guión gráfico para el diseño visual y presentación de contenidos.
3. taller 6 - información y medios digitales
martes 3 de septiembre de 2013
4. El Wireframe es una jerarquización de contenidos
distribuida visualmente y una esquematización de la
interfaz.
Gráficamente, son estructuras muy simples y están
enfocados a visualizar la distribución de los
contenidos dentro de una pantalla.
}wireframes
martes 3 de septiembre de 2013
5. }wireframes
El Wireframe es el puente que une la
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
Arquitectura de información Interfaz.
martes 3 de septiembre de 2013
7. taller 6 - información y medios digitales
Elementos de navegación:
menús, accesos directos e
hipervínculos.
}grafican
martes 3 de septiembre de 2013
8. taller 6 - información y medios digitales
Elementos de información:
contenidos de texto e imágenes.
}grafican
martes 3 de septiembre de 2013
9. taller 6 - información y medios digitales
Elementos de interacción:
herramientas o funcionalidades
que el usuario puede realizar.
}grafican
martes 3 de septiembre de 2013
10. taller 6 - información y medios digitales
Elementos promocionales:
espacio dedicado a banners
publicitarios o a destacados
internos del propio producto.
}grafican
martes 3 de septiembre de 2013
12. taller 6 - información y medios digitales
Son simples y no tienen distracciones visuales
martes 3 de septiembre de 2013
13. taller 6 - información y medios digitales
Pueden ser dibujados a mano o creados con alguna
aplicación computacional
martes 3 de septiembre de 2013
14. Cada página o pantalla de una interfaz está
representada en 1 wireframe
martes 3 de septiembre de 2013
15. El sistema presenta al usuario
caminos.
}aplicarla
martes 3 de septiembre de 2013
16. El usuario se mueve a través
de estos caminos mediante
acciones}aplicarla
martes 3 de septiembre de 2013
17. taller 6 - información y medios digitales
martes 3 de septiembre de 2013
18. taller 6 - información y medios digitales
El objetivo del trabajo. Un objetivo bien definido
guiará la estructuración de la web y el resultado
será un diseño ordenado.}
martes 3 de septiembre de 2013
19. taller 6 - información y medios digitales
Elementos simples: páginas, documentos y
pilas de éstos
martes 3 de septiembre de 2013
20. taller 6 - información y medios digitales
Creando relaciones: conectores y flechas
martes 3 de septiembre de 2013
21. taller 6 - información y medios digitales
Creando relaciones: conectores y flechas
Nótese que estas flechas no son como las flechas que indican una calle de un
solo sentido, más bien son como las flechas de una señalética. El usuario no
está impedido de moverse en dirección opuesta; la flecha indica solamente la
dirección en la cual el usuario probablemente querrá ir.
martes 3 de septiembre de 2013
22. taller 6 - información y medios digitales
Todo de una vez: conjuntos concurrentes
es usado en casos cuando una acción del
usuario genera resultados múltiples
simultáneos (tal como abrir una ventana
pop-up mientras una página se carga en la
ventana principal, o mostrar una pagina
mientras un documento es descargado).
martes 3 de septiembre de 2013
23. taller 6 - información y medios digitales
Separándolo: puntos de continuación
Para permitirnos separar nuestros diagramas en secciones fáciles de digerir,
usamos puntos de continuación (paréntesis cuadrado) para unir los vacíos
entre las páginas.
martes 3 de septiembre de 2013
24. Elementos comunes: áreas y áreas iterativas
El elemento área (un rectángulo de esquinas redondeadas) es usado para
identificar un grupo de paginas que comparten uno o más atributos comunes
(tales como aparecer en una ventana pop-up, o tener un tratamiento único de
diseńo).
martes 3 de septiembre de 2013
25. Elementos comunes: áreas y áreas iterativas
Muchas arquitecturas incluyen repetir la misma estructura básica tal como es
aplicada a un número de elementos de información funcionalmente idénticos.
martes 3 de septiembre de 2013
26. Haciendo elecciones: puntos de decisión
Cuando una acción de un usuario puede generar uno de un numero de
resultados, el sistema debe tomar una decisión acerca de cuál resultado debe
presentar. (Probablemente el ejemplo más común de esto es manejo de errores
en el envió de formularios.) como en diagramas de flujo tradicionales, es
representado por un diamante.
martes 3 de septiembre de 2013
27. Elección múltiple: ramas condicionales
Cuando un sistema debe seleccionar un camino entre un numero de opciones
mutuamente exclusivas a ser presentadas al usuario, usamos una rama
condicional (triángulo).
El sistema está tomando una decisión similar, pero sucede antes que la acción
del usuario.
martes 3 de septiembre de 2013