¿Qué es?
Los wireframes describen el contenido de una pagina web y sus prioridas relativas.
¿Para qué sirven los wireframes?
- Ayudan al equipo del proyecto a establecer la funcionalidad, los comportamientos y las prioridades relativas del contenido de las páginas web.
- Pueden iniciar el proceso de diseño, ayudar a elaborar los detalles funcionales y evaluar la viabilidad del concepto de diseño.
¿Quién los utiliza?
Son tocados por todos los miembros del equipo del proyecto, como los developers, designers o business stake-holders.
¿Cuánto trabajo hacen?
Básicamente, depende de cómo los uses en el proceso de diseño.
¿Cuándo aparecen durante el proceso?
Idealmente, la creación de estructuras de alambre comienza en algún punto entre el trabajo estructural de alto nivel y los screen designs.
¿Qué aspecto tienen?
-
Los marcos de alambre se ven como páginas web desprovistas de la mayoría de los estilos visuales y gráficos.
-
Los marcos de alambre representan pantallas o partes de ellas. Su objetivo es evocar lo que los usuarios verán cuando utilicen el sitio web.
Lo que pueden hacer..:
- Proporcionar una forma rápida y sencilla de presentar conceptos para interfaces
- Enfoque en la lógica, el comportamiento y la funcionalidad subyacentes
- Habilitar la iteración rápida de los conceptos de diseño
Los Wireframes centran la atención del equipo en :
- Los tipos de información que se muestran
- La gama de funciones disponibles
- Las prioridades relativas de la información y las funciones
- Las reglas para visualizar ciertos tipos de información
- El efecto de los diferentes escenarios en la pantalla
Anatomía de los wireframes :
Layer 1 : Rectángulos Los marcos de alambre comienzan con rectángulos, esculpiendo áreas de la página o pantalla para dedicarlas a diferentes tipos de contenido. El marco de alambre más básico es un rectángulo cortado en rectángulos más pequeños.
- Áreas de contenido
- Un área de contenido es una región de una página con un único y discreto propósito.
- Hay varios tipos de áreas de contenido:
- Áreas estructurales
- Áreas reutilizables
- Áreas únicas
Los rectángulos deben estar etiquetados, para indicar su propósito.
Prioridades y distinciones :
El wireframe tiene que mostrar las prioridades relativas de esas áreas de contenido.
La forma más sencilla de hacerlo es listar las áreas de contenido en orden, con la más importante en primer lugar.
- Usted también tiene que comunicar acerca de..:
- Las funciones de las áreas
- Cómo se relacionan con las operaciones del sitio web
- Cualquier asunto relacionado con la logística del proyecto
Layer 2 : Rectangles with form
Permite formar la página en algo más reconocible.
Los marcos de alambre también pueden incorporar contenido, siempre y cuando sea de una manera que apoye el propósito del marco de alambre.
También puede incorporar elementos funcionales, como widgets.
Layer 3 : Más allá de los rectángulos
Los elementos en esta capa pulen los wireframes, pero de ninguna manera son necesarios para el propósito esencial del wireframe, porque pueden distraer de lo que queremos comunicar con el diagrama.
Grid
En el diseño gráfico, las rejillas establecen una proporcionalidad entre los elementos. Es una buena herramienta cuando el enfoque se centra menos en el diseño gráfico y más en la estructura y el contenido, porque proporciona un marco útil para la construcción de wireframe.
Elementos estéticos
La incorporación de un poco de estilo en los wireframes le da un toque de autenticidad. Por ejemplo, un wireframe puede depender del color para ayudar a comunicar la función o el propósito de algunos elementos. Pero hay que tener cuidado de que la elección del tipo o gráfico no distraiga la atención de la finalidad del wirefram.
Creación de alambres
Las decisiones a tomar antes de considerar el propósito y la audiencia:
- Acerca de la escala : páginas o áreas de contenido?
- ¿Qué tan cerca de la realidad quieres que esté el wireframe?
- ¿Cuán específico para el contenido?
- Cuántas variaciones, para el nivel de página y el nivel de componente?
El propósito :
- ¿Para qué estás usando los wireframes?
Audiencia : Hay que pensar en las personas que necesitan los diagramas, y no en los usuarios del sitio web.
Consejos :
- Dibujar primero
- Establecer un propósito para la página
- Recordar los principios de diseño
- Listar el contenido de la página
- Usar escenarios realistas
Comments