¿Cómo hacer el storyboard con wireframes, diseños, mapas del sitio, y diagramas de flujo
Storyboarding se refiere generalmente 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 la base para la construcción de un sitio que se ve la forma en que se supone que mirar y funciona de la manera que se supone que trabajar.
Sitio web arquitectura se refiere a la planificación de cómo todos los elementos de una página web - contenido, usabilidad (Presentación del contenido de una manera que funciona en la web), planificación técnica (Averiguar cómo se va a construir el sitio), y estética (Tales como el diseño de la página, obras de arte, combinaciones de colores, fuentes y otros elementos de diseño) - va a encajar.
Si se piensa en la arquitectura web como una analogía a lo que hace un arquitecto en el diseño de un edificio, una alambre de una página web es similar a un plano, y un conjunto de estructuras alámbricas es análogo a un conjunto de planos que dibujan la forma de un edificio entero se verá.
Video: 08 ejemplos de storyboard
wireframes son áspero bocetos de cómo se verá una página, lo que significa que por lo general no incluyen obra desarrollada, la tipografía y los colores. A veces wireframes son creados usando Photoshop, Illustrator o Fireworks. Mientras que por lo general demuestran wireframes 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 a partir de la página principal, debajo del logo.
Este alambre puede ser pegado en una pared con otras estructuras alámbricas página para tener una idea de cómo las diferentes páginas del sitio se verá vinculados entre sí y nos hemos encontrado a un usuario en su conjunto.
Video: Educación mediática. Cómo se hace un Story Board (subtitulos en español)
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 para un anuncio es de 324 x 648 pixeles (px). Esas dimensiones permitirán que 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 podría venir con notas, lo que indica que las líneas discontinuas son para fines de ubicació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 píxeles de alto.
Video: Storyboard - FPM
En el siguiente paso en el camino de esta página, un diseñador reemplaza texto del marcador 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 - más o menos proporcionar un modelo detallado para la página web final.
En el camino, un diseñador hará algunos cambios en cómo el contenido se esbozó en una estructura metálica. La vida real nunca se ajusta a los planos. El contenido será más o menos largo de lo previsto. A menudo, cuando una estructura metálica se traduce en un diseño, las cosas que parecían ser que trabajen estéticamente en el alambre acabar desvíos en su aplicación.
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 el diseño de las páginas con mayor precisión cómo serán realmente se ven.
Esto es lo que el alambre podría terminar pareciéndose después de un diseñador crea un anuncio y el logotipo verdadera, llena de un texto real, y juega con un posible esquema de color.
El árbitro (s) de cómo un sitio está hecho para buscar podría ser un cliente, un equipo de colaboración, o simplemente usted. En cualquiera de estos escenarios, los wireframes y diagrama de flujo de navegación juntos sirven como modelo para su sitio.
Va a lo largo de la manera, realizar cambios en ese plan? Por supuesto. 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, según lo previsto, y dentro del presupuesto.