El documento describe el proceso de creación de wireframes, que son diagramas simples que muestran la estructura y contenido de una interfaz digital. Explica que los wireframes conectan la arquitectura de información con el diseño al pasar de una visión estructural de los contenidos a una representación visual de la interfaz. También detalla los diferentes elementos que componen un wireframe como la navegación, contenido, interacción y promociones.
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Wireframes
1. wireframes
presentación y diagramación de
contenidos para la pantalla
taller_media
lunes 3 de septiembre de 2012
2. diseño de la
información
card sorting - blueprints - wireframes
lunes 3 de septiembre de 2012
3. taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
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.
}
wireframe
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
5. 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.
}
wireframe
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
6. para qué nos
sirve?
lunes 3 de septiembre de 2012
7. Elementos de navegación:
menús, accesos directos e
hipervínculos.
}
grafican
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
8. Elementos de información:
contenidos de texto e imágenes.
}
grafican
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
9. Elementos de interacción:
herramientas o funcionalidades
que el usuario puede realizar.
}
grafican
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
10. Elementos promocionales:
espacio dedicado a banners
publicitarios o a destacados
internos del propio producto. }
grafican
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
12. Son simples y no tienen distracciones visuales
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
13. Pueden ser dibujados a mano o creados con alguna
aplicación computacional
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
14. Cada página o pantalla de una interfaz está
representada en 1 wireframe
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
15. El sistema presenta al usuario
caminos.
}
aplicarla
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
16. El usuario se mueve a través
de estos caminos mediante
acciones }
aplicarla
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
17. taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
18. guiará la estructuración de la web y el resultado
será un diseño ordenado. }
El objetivo del trabajo. Un objetivo bien definido
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
19. Elementos simples: páginas, documentos y
pilas de éstos
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
21. 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.
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
22. 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).
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
23. 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.
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
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).
lunes 3 de septiembre de 2012
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.
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
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.
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
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.
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
29. encargo 2
visualización técnica
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
30. considerar
Habiendo desarrollado las duplas la definición del sitio
web a analizar y determinando el objetivo trazado, se
debe estructurar de manera formal la presentación
del contenido del sitio.
Proyectar el contenido del sitio a un blueprint de
modo de reconocer la estructura de contenidos,
rótulos y jerarquías de navegación.
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
31. etapas
1. Construir basados en el mapa de garrett la
estructura de contenidos y rótulos del sitio
2. Destacar cual es el “camino” que el usuario debe
reconocer como el mas relevante para lograr el
objetivo del sitio
3. Revisar si existe mas de un modo de realizar el
objetivo y si existe información complementaria en el
sitio para cumplir dicho objetivo
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
32. diseño de documento
Reconociendo la(s) ruta(s) del usuario para lograr el
objetivo, realizar tarjetas para estructurar un rediseño
de la información por medio de un card sorting
Dejar registro de cada una de las alternativas
Realizar la metodología del cardsorting con personas
que se encuentren dentro de las características de su
público objetivo. Registrar la mayor cantidad de datos
de las personas participantes para un posterior
análisis de usuario
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012
33. graficar la estructura
1. Crear modelos de wireframe de cada una de las
páginas que actualmente permiten lograr el objetivo
del sitio por medio de la ruta estipulada
IMPORTANTE: se debe de utilizar la métrica real de la
composición actual de los documentos
taller 6 - información y medios digitales
lunes 3 de septiembre de 2012