Como fazer um wireframe

Decida quais os elementos que estarão presentes em seu design. Os elementos comuns a serem incluídos são: navegação, áreas de conteúdo, widgets ou caixas de função, imagens e botões. Um exemplo de uma lista que você pode fazer incluem: navegação, controle deslizante de imagem, caixas de introdução, ícones de redes sociais, as últimas ligações do artigo e um direito de autor / rodapé

Determinar a largura de seu projeto que você deseja começar. dimensões do esquema standard são 960, 980px e 1020px, mas um benefício do wireframe é que ele permite que você a experimentar com a escala de seus elementos até que tudo parece certo.

Escolha um método para criar o seu wireframe. A criação de uma estrutura de arame à mão pode ser o mais fácil, mas pode não traduz bem a um ficheiro digital, que pode ser utilizado como um modelo preciso para o seu composto. Os programas de software como o Adobe Photoshop, Illustrator, InDesign ou não são realmente ideal para a criação de wireframes também, mas eles fazem assegurar o máximo de compatibilidade com o seu projeto composto ou real. Sua opção final é a utilização de uma ferramenta wireframing, vários dos quais permitem a colaboração e exportação para projetar-amigáveis ​​formatos.

Crie um novo documento que é pelo menos 1680px de largura e 980px de altura. Você será capaz de imaginar como o seu design e sua escala vai olhar quando apresentado em um navegador da web se o seu espaço de trabalho é maior do que o seu design. Ao desenhar à mão, use papel quadriculado, se possível, onde um quadrado é igual a 10 pixels. Sem uma grade, converter uma polegada a 100 pixels.

Comece criando um retângulo centrado usando a largura e altura de suas dimensões de layout de partida, que irá atuar como seu quadro inicial. Desenhe cada elemento nas posições desejadas usando formas simples e tons de cinza. Se estiver usando software, pré-montados e UI kits gráficos vir a calhar nesta fase, fornecendo-lhe elementos padrão que você pode colocar no seu wireframe como ícones, caixas de texto, barras de pesquisa, menus e assim por diante.

Rotular cada elemento claramente com escrita puro ou uma fonte sans-serif. Se você deseja incluir dimensões, fazê-lo usando uma linha pontilhada cor clara fora do elemento e certifique-se o elemento representa os pixels rotulados com precisão.

Adicionar notas de design nas margens ou mantê-los em um arquivo separado para apresentar ao lado do wireframe. Suas notas de design podem incluir ideias relacionadas à cor, funcionalidade ou finalidade de elementos dentro do wireframe. Se estiver usando um programa de software, certifique-se as notas são discretos e claramente se relacionam com os elementos marcados por nome ou número.

Salve o arquivo como um JPG para máxima compatibilidade com qualquer software o cliente pode usar para visualizá-lo. Se usando um software que suporta camadas, salve uma cópia em camadas para si mesmo para que você possa facilmente editar elementos posterior, ou usar este wireframe novamente como um modelo para outro projeto. Se você desenhou seu wireframe à mão, você vai precisar para digitalizar a imagem e redimensioná-lo para ajustar a representação precisa das dimensões definidas.

Comece criando suas principais dimensões do esquema, que vai agir como seu quadro principal. A maioria dos softwares wireframe vem com tamanhos de layout padrão para escolher. Use um fundo colorido ou transparente luz.

Arrastar e soltar ou adicionar elementos das bibliotecas fornecidas dentro da ferramenta. Coisas para manter em mente são o espaço em branco, o fluxo de conteúdo, e a experiência do usuário pretendido. Você pode ajustar a escala eo tamanho dos elementos nessas ferramentas, arrastando suas alças de dimensão.

Rotular cada elemento claramente clicando no texto da etiqueta dentro de cada elemento e digitando um nome ou número. Se você deseja incluir dimensões, fazê-lo usando uma linha pontilhada cor clara fora do elemento e certifique-se o elemento representa os pixels rotulados com precisão. Alguns wireframes vai fazer isso por você automaticamente.

Adicionar notas de design correspondentes a cada elemento nas margens ou em um documento separado. Suas notas de design podem incluir ideias relacionadas à cor, funcionalidade ou finalidade de elementos dentro do wireframe. Se estiver usando um programa de software, certifique-se as notas são discretos e claramente se relacionam com os elementos marcados por nome ou número.

Exportar ou salvar o arquivo como um PDF ou JPG para que o seu cliente pode facilmente visualizá-lo. Se a sua ferramenta wireframe escolhido suporta a colaboração, é uma boa idéia de convidar o cliente para efetuar login e deixar um comentário.