Cómo storyboard con wireframes, diseños, mapas del sitio, y diagramas de flujo

Storyboarding generalmente se refiere al proceso de elaboración de bocetos y diagramas de navegación entre las páginas. La combinación de bocetos de páginas (a menudo referido como wireframes) Y diagramas de flujo de navegación (a menudo referido como mapas del sitio), Establece las bases para la construcción de un sitio que se ve la forma en que se supone que se vea y funciona de la forma en que se supone que funciona.

Sitio web arquitectura se refiere a la planificación de cómo todos los elementos de una página web - contenido, usabilidad (presentando el contenido de una manera que funciona en la web), planificación técnica (averiguar cómo el sitio se va a construir), y estética (tales como el diseño de páginas, ilustraciones, esquemas de color, fuentes y otros elementos de diseño) - caben juntos.

Si se piensa en la arquitectura web como una analogía a lo que hace un arquitecto en el diseño de un edificio, un wireframe de una página web es similar a un plano, y un conjunto de wireframes es análogo a un conjunto de planos que esbozar cómo un edificio entero se verá.

Wireframes son áspero bocetos de cómo una página se verá, lo que significa que por lo general no incluyen obra desarrollada, tipografía y colores. A veces wireframes son creados usando Photoshop, Illustrator o Fireworks. Mientras wireframes generalmente demuestran enlaces hacia y desde las páginas, diagramas de flujo o mapas del sitio centrarse en una representación gráfica de las arterias de navegación de un sitio.

La figura muestra una alambre, un esbozo de una sola página web. Como se puede ver, tiene marcador de posición de texto de Lorem Ipsum. Y tiene una barra de navegación, lo que indica el flujo de navegación básica desde la página principal, debajo del logo.

Este alambre se puede pegar en una pared con otros wireframes de página para tener una idea de cómo las diferentes páginas del sitio se verá ligado entre sí y nos hemos encontrado a un usuario en su conjunto.

Y, wireframes individuales pueden ser entregados a un artista, que se traducirá el esbozo en un diseño artístico en toda regla. Por ejemplo, el espacio que ha sido bloqueado por un anuncio es de 324 x 648 píxeles (px). Esas dimensiones permiten a un diseñador para crear un anuncio web que se ve bien en ese tamaño.

En el ejemplo anterior, además de las especificaciones para el tamaño del anuncio, el alambre puede venir con las notas, lo que indica que las líneas discontinuas son para fines de localización única, que el concepto es una división de 60/40 entre los lados izquierdo y derecho de la página , y que el área del logotipo debe ser 72 px alta.

En el siguiente paso en el camino de esta página, un diseñador sustituye el texto del marcador de posición con el texto real imágenes de marcador de posición con imágenes reales, gráficos de marcador de posición con gráficos reales, y así sucesivamente - prácticamente proporcionando un modelo detallado para la página Web final.

En el camino, un diseñador hará algunos cambios en cómo se esbozó el contenido en una estructura metálica. La vida real nunca encaja planos. El contenido será más o menos largo de lo previsto. A menudo, cuando un alambre se traduce en un diseño, las cosas que parecían que podrían trabajar estéticamente en el alambre acabar desvíos cuando se implementa.

Por supuesto, si su sitio web es un proyecto de una sola persona, puede llenar el papel de dibujar wireframes (y diagramas de flujo) y diseñar con mayor precisión cómo las páginas en realidad mirar.

Aquí está lo que el alambre podría terminar pareciéndose después de un diseñador crea un anuncio de bienes y el logotipo, se llena en un texto real, y juega con un esquema de color posible.

El árbitro (s) de cómo se supone que un sitio para mirar podría ser un cliente, un equipo de colaboración, o simplemente usted. En cualquiera de estos escenarios, tus wireframes y diagrama de flujo de navegación juntos sirven como modelo para su sitio.

Va, en el camino, hacer cambios en ese plan? Claro. Pero los buenos bocetos básicos y una carta de navegación básica puede ser la diferencia entre un plan de sitio web que serpentea por siempre y que viene a más o menos según lo previsto, en la fecha prevista, y dentro del presupuesto.