Wireframes

wireframes
presentación y diagramación de
contenidos para la pantalla

taller_media
lunes 3 de septiembre de 2012

diseño de la
información
card sorting - blueprints - wireframes


taller 6 - información y medios digitales

El Wireframe es una jerarquización de contenidos
distribuida visualmente y una esquematización de la
interfaz.

Gráﬁcamente, son estructuras muy simples y están
enfocados a visualizar la distribución de los
contenidos dentro de una pantalla.

}
wireframe


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

para qué nos
sirve?


Elementos de navegación:
menús, accesos directos e
hipervínculos.
}
graﬁcan


Elementos de información:
contenidos de texto e imágenes.

}
graﬁcan


Elementos de interacción:
herramientas o funcionalidades
que el usuario puede realizar.
}
graﬁcan


Elementos promocionales:
espacio dedicado a banners
publicitarios o a destacados
internos del propio producto. }
graﬁcan


características


Son simples y no tienen distracciones visuales


Pueden ser dibujados a mano o creados con alguna
aplicación computacional


Cada página o pantalla de una interfaz está
representada en 1 wireframe

El sistema presenta al usuario
caminos.
}
aplicarla


El usuario se mueve a través
de estos caminos mediante
acciones }
aplicarla


guiará la estructuración de la web y el resultado
será un diseño ordenado. }
El objetivo del trabajo. Un objetivo bien deﬁnido


Elementos simples: páginas, documentos y
pilas de éstos


Creando relaciones: conectores y ﬂechas


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.


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).


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.


Elementos comunes: áreas y áreas iterativas

El elemento área (un rectángulo de esquinas redondeadas) es usado para
identiﬁcar 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).


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.


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 ﬂujo tradicionales, es
representado por un diamante.


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.


http://www.jjg.net/ia/visvocab/spanish.html

}
mapa de
garrett


encargo 2
visualización técnica


considerar

Habiendo desarrollado las duplas la deﬁnició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.


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


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


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


Wireframes

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (9)

Similar a Wireframes

Similar a Wireframes (20)

Más de iConstruye

Más de iConstruye (20)

Último

Último (20)

Wireframes