Como storyboard com wireframes, desenhos, mapas do site, e fluxogramas

Video: merihelp-converting your wireframe into a storyboard

Storyboards 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 para olhar e funciona da maneira que é suposto para trabalhar.

Local na rede Internet 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 (Tais como design de página, artwork, esquemas de cores, fontes e outros elementos de design) - vai se encaixar.

Se você pensar sobre arquitetura website como uma analogia ao que um arquiteto faz na concepção de um edifício, uma wireframe de uma página web é semelhante a um plano, 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 rude esboços de como a página vai ficar, o que significa que eles normalmente não incluem obras de arte desenvolvida, tipografia e cores. Às vezes wireframes são criadas usando Photoshop, Illustrator, ou Fireworks. Considerando wireframes normalmente demonstrar ligações para e de páginas, fluxogramas ou 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 pode ser entregue a um artista, que irá traduzir o esboço em um desenho artístico full-blown. 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 naquele 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 texto do espaço reservado com o texto real, imagens de espaço reservado com imagens reais, 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 no modo como o conteúdo é esboçado em um wireframe. A vida real nunca se encaixa plantas. Conteúdo vai ser mais longo ou mais curto do que o previsto. Muitas vezes, quando um wireframe é traduzido em um projeto, coisas que pareciam como eles podem trabalhar esteticamente no wireframe acabar turn-offs quando implementada.

Video: Oxford University Wireframes Tour

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, seus wireframes e fluxograma de navegação em conjunto, servem como modelo para o seu site.

Video: 015 Assignment 5 Create Wireframes for Your App

Será que você, ao longo do caminho, fazer alterações a esse plano? Claro. Mas bons esboços 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.