Diseño web: los fundamentos de la wireframing

UN alambre es una vista en diagrama de una página web que utiliza formas simples y elementos de texto para mostrar la estructura de la página, el contenido y la navegación. Se puede utilizar un programa como Illustrator o InDesign para construir estructuras alámbricas, pero los arquitectos de información generalmente prefieren Microsoft Visio para el desarrollo de mapas de sitio.

Video: Generación de wireframes efectivos

Delinear las zonas de contenido de un sitio web

Elaboración de lo que pasa en cada página y cómo se presenta el contenido y navegar es una tarea enorme, especialmente para grandes sitios de la empresa. Algunas empresas optan por un poco de trabajo previo a la estructura metálica de preparación y crearon una modelo para ayudar al equipo rápidamente un mapa de zonas de contenido para cada página para asegurarse de que todo funcionaba bien juntos y fueron consistentes.

Video: How to wireframe a website | CharliMarieTV

La plantilla incluye información clave para ayudar a recordar al equipo de los objetivos de nivel de página. Por ejemplo, un objetivo clave de negocio puede ser un escaparate de nuevos productos en la página principal y, en las páginas siguientes, sugerir otros productos de un usuario puede estar interesado. Con el conocimiento de estos objetivos, se puede definir algunas zonas de contenido y mostrar su relación la colocación, el tamaño, y la prioridad de estos componentes en la página. Observe cómo caen los elementos de baja prioridad debajo de la tapa (Fuera del rango de visión inicial de la página web, los usuarios tengan que desplazarse para verlas).

Wireframing en el diseño web

Después de un ejercicio de pre-wireframing, puede completar los detalles de cada página. (Una ronda de pre-wireframing es un paso opcional recomendado para sitios grandes y complejos. La mayoría de los sitios sólo tiene que ir a la derecha de wireframes el mapa del sitio.)

Wireframes sirven como una especie de lista de lavandería de lo que pasa en cada página de un contenido y medios perspectiva, y también un mapa de las diseño de interacción (Cómo los usuarios utilizan herramientas en la página o navegar por el contenido). Estos son algunos ejemplos de lo que podría mostrar su estructura metálica:

• Lo copie - y cuánto de él - va en la página

• Qué objetos van CMS en la página (si está utilizando un sistema de gestión de contenidos)

• ¿Qué tipo de imágenes y medios de comunicación (tales como archivos de vídeo Flash y) ir a la página

• Su plan técnico y la interacción de la página - enlaces, widgets, como los menús desplegables, la expansión de las áreas de contenido, casillas de verificación y botones

Wireframing es un paso importante que no se debe dejar fuera de cualquier proyecto interactivo - ya sea para una aplicación móvil, una presentación de Flash en una feria comercial, o (por supuesto) un sitio web. Como un buen plano arquitectónico, la estructura metálica es su oportunidad de trabajar todo el contenido y la interacción de los problemas de diseño en el papel, no sólo con el cliente, sino también el equipo técnico que construye el sitio.

No es necesario construir una estructura metálica para cada página del sitio. Sólo tiene que hacer una estructura metálica para cada diseño único. Por ejemplo, si tiene 100 páginas de detalles del producto en su índice de página, se puede construir sólo una estructura metálica que muestra cómo funciona la página de detalles del producto. Si una o dos páginas de productos tienen un diseño o el contenido toque ligeramente diferente a ellos, sin embargo, es una buena idea para hacer un producto de detalle de alambre especial para ellos.

Es importante que tus prototipos se ven tan aburrido y esquemática como sea posible. Son por lo general en escala de grises, con líneas, cajas, cajas de color gris, y el texto de relleno. Esto es para asegurarse de que los clientes a entender claramente que ellos están buscando en un esqueleto y no un diseño visual propuesto.