Como Encenação com Wireframes, desenhos, mapas do site, e fluxogramas

Storyboarding geralmente se refere ao processo de elaboração esboços e diagramas de navegação entre as páginas. A combinação de esboços de páginas (muitas vezes referida como wireframes) E Fluxogramas de navegação (muitas vezes referida como mapas do site) Estabelece a base para a construção de um site que parece a forma como é suposto a aparência e funciona da maneira que é suposto para trabalhar.

Site arquitetura refere-se ao planejamento de como todos os elementos de um site - conteúdo, usabilidade (Apresentação do conteúdo de uma forma que funciona na web), planejamento técnico (Para descobrir como o site vai ser construído), e estética (Como o design da página, obras de arte, esquemas de cores, fontes e outros elementos de design) - vai se encaixar.

Se você pensa sobre a arquitetura website como uma analogia ao que um arquiteto faz na concepção de um edifício, uma wireframede uma página web é semelhante a um modelo, e um conjunto de wireframes é análogo a um conjunto de projetos que esboçar como um todo o edifício vai olhar.

wireframes são ásperoesboços de como a página vai ficar, o que significa que eles geralmente não incluem obras de arte desenvolvida, tipografia e cores. Às vezes wireframes são criados usando o Photoshop, Illustrator ou Fireworks. Considerando wireframes normalmente demonstrar ligações para e de páginas, fluxogramasou mapas do site se concentrar em uma representação gráfica das artérias de navegação de um site.

A figura mostra um wireframe, um esboço de uma única página da web. Como você vê, ele tem espaço reservado Lorem Ipsum texto. E tem uma barra de navegação, o que indica o fluxo de navegação básica do home page, abaixo do logotipo.

Este wireframe pode ser colado em uma parede com outros wireframes página para ter uma idéia de como as diferentes páginas do site vai ficar ligados uns aos outros e se deparar com um usuário como um todo.

E, wireframes individuais podem ser entregue a um artista, que irá traduzir o esboço em um desenho artístico completo. Por exemplo, o espaço que foi bloqueado para fora para um anúncio é 324 x 648 pixels (px). Essas dimensões permitirá que um designer para criar um anúncio de web que parece ser bom nesse tamanho.

No exemplo anterior, além de especificações para o tamanho do anúncio, o wireframe pode vir com notas, indicando que as linhas tracejadas são para fins de localização única, que o conceito é uma divisão de 60/40 entre os lados esquerdo e direito da página e que a área de logotipo deve ser 72 px de altura.

No próximo passo na jornada desta página, um designer substitui o texto espaço reservado com o texto real, imagens de espaço reservado com imagens reais, de espaço reservado gráficos com gráficos reais, e assim por diante - praticamente fornecendo um modelo detalhado para a página da web final.

Ao longo do caminho, um designer vai fazer algumas alterações na forma como o conteúdo é esboçado em um wireframe. A vida real nunca se encaixa modelos. Conteúdo será mais longo ou mais curto do que o previsto. Muitas vezes, quando um wireframe é traduzido em um projeto, coisas que pareciam como se pode trabalhar esteticamente no wireframe acabam turn-offs quando implementada.

Claro, se o site é um projeto de uma pessoa, você pode preencher o papel de esboçar wireframes (e fluxogramas) e projetar mais precisamente como páginas olhará realmente.

Aqui está o que o wireframe pode acabar parecendo após um designer cria um verdadeiro anúncio e logotipo, preenche algum texto real, e brinca com um esquema de cores possível.

O árbitro (s) de como um site é suposto a aparência pode ser um cliente, uma equipe colaborativa, ou apenas você. Em qualquer um destes cenários, os seus wireframes e fluxograma de navegação em conjunto servir de modelo para o seu site.

Você vai, ao longo do caminho, fazer alterações a esse plano? Claro. Mas bons desenhos básicos e uma carta de navegação básica pode ser a diferença entre um plano de site que serpenteia para sempre e um que vem junto mais ou menos como previsto, dentro do cronograma e do orçamento.