Como fazer uma rápida e fácil web site mock up

Criando um mock-up é o primeiro passo para planear o seu design do site.

Criando um mock-up é o primeiro passo para planear o seu design do site.

Criando um mock-up é um dos primeiros passos na construção de um website. O termo "brincar" é muitas vezes usado como sinônimo de "wireframe," mas eles não são bem a mesma coisa, embora ambos são importantes para o planejamento de seu site. Um mock-up é o design visual do site, enquanto que um wireframe se concentra em conteúdo e função do site.

Apesar de um mock-up é fundamental para o desenvolvimento do seu site, ele não precisa ser complicado ou demorado para criar uma. Contanto que você capturar a idéia para o site, não importa se você ir de alta tecnologia (software design gráfico) ou nenhuma tecnologia (papel e lápis).

Determinar o layout básico de seu site. Considere coisas como número e colocação de colunas e elementos-chave que você deseja que apareça acima da rolagem.



Quebrar a página em áreas designadas para a navegação, cabeçalho, conteúdo de texto e vídeo ou conteúdo. Você pode achar que você reequilibrar proporções do site através de alguns rascunhos de seu mock-up.

Seleccionar imagens para elementos visuais principais que evocam o sentimento que você quer para o site. Estes não têm que ser selections- finais "comp" ou "FPO" (Para a colocação somente) imagens são muito bem.

Selecione fontes e tamanhos de fonte. Indique estilo para cabeçalhos, parágrafos padrão, listas e outros elementos de texto.

Video: Como criar seus próprios mockups no Photoshop

Identificar um esquema de cores e rotular elementos do seu site em conformidade.

dicas

  • Verifica Mock-ups são um projecto do seu site, e provavelmente você vai passar por algumas versões antes de se decidir sobre o plano de projeto final para o site. O mock-up permite que você experimentar com uma variedade de opções antes de você começar a investir no desenvolvimento do site em si, portanto, fique flexível como o site evolui.
  • Verifica Se você estiver usando software de design para criar o seu mock-up, insira texto do espaço reservado para ver como os diferentes tamanhos e pesos de fluxo de texto na página.
  • Verifica geradores esquema de cores online são uma ferramenta valiosa em qualquer fase do design do site. Você pode selecionar a partir de temas prontos, extrapolar-los de fotos ou imagens que você gosta ou criá-los.

Referências

  • ligação Universidade de Washington: Aprender e acadêmica TECHNOLOGIES- Site Planejamento: wireframes e Mockups
  • ligação Adobe: Macromedia Dreamweaver- Designing Layout de Página

Video: Best 2 Mockup Websites For Designers!

Sobre o autor

Kristen King tem escrito profissionalmente desde 2004. Seu trabalho tem aparecido em "iParent" revista, "O Jornal de Oncologia Prática," "Publishing Association" e outras publicações impressas e on-line. Rei recebeu o Prêmio da American Writers presidente do Independent em 2009. Ela possui um Bachelor of Arts em Inglês pela Universidade de Mary Washington e mestrado em Estudos Profissionais na publicação de The George Washington University.


Artigos relacionados