Como planejar uma página web: 20 etapas (com fotos)

4 partes:Criar a estrutura subjacente Fazer um "wireframe" HTML Criar conteúdo Transforma o conceito na web

Se você quer projetar e criar uma página web, você vai encontrá-lo muito mais fácil se você planejar com antecedência. A fase de planejamento permite que o desenvolvedor eo cliente trabalho em conjunto para encontrar um formato e uma disposição que correspondam às suas necessidades. O processo de planejamento influenciar as decisões de estilo e, provavelmente, o layout da página mais importante, especialmente no campo de olhares de negócios.

parte 1Criar a estrutura subjacente

Determina a função do sítio. Se você fizer a web para si mesmo, você provavelmente já sabe a resposta. Se você fizer a web para uma outra pessoa, empresa ou organização, você tem que saber o que esperar deste e funcionalidade. Tudo o que você decidir, nesta fase, terá impacto sobre a web final.

Precisa de interface de vendas? Você deseja comentários do usuário? Os usuários devem se registrar? ¿Conter itens? ¿Contêm muitas imagens? Todas estas perguntas e muito mais vai ajudar a estabelecer o projeto ea estrutura da web.
Pode ser um processo interminável, especialmente se for uma grande empresa com muitas pessoas envolvidas no projeto.

Criar um mapa do site. Um mapa do site é como um fluxograma e mostra como os usuários saltar de uma página para outra. Você não precisa mesmo de páginas neste ponto, apenas um fluxo geral de conceitos. Você pode usar um programa de computador para criar o diagrama ou esboçar-lo sozinho em um pedaço de papel. Use o mapa do site para planejar a hierarquia e conectividade do site.

Método de ensaio "card sorting" (classificação de fichas). Um método popular grupo é usar um conjunto de guias para encontrar o ideal de cada classificação. Tome um conjunto de chips e escreve o conteúdo básico de cada página em cada guia. Fazer parte da equipe organizar as abas da maneira que considerem mais útil. É melhor em situações colaborativa de autoria web.

Use papel e um quadro de avisos. É o método mais barato de planejamento original e permite que você remova ou mover o conteúdo para dar uma nova direção. Desenhar o projeto em pedaços de papel e se conectar com fio ou desenhar o layout em um quadro negro. Este método é excelente para sessões de brainstorming.

Faça um inventário de conteúdo. É mais adequado para a reformulação que a criação de websites. Digite cada um dos itens ou páginas existentes em uma planilha. Faça anotações sobre o propósito de cada um e usa a lista para determinar o que vai eo que permanece. Isso ajuda a eliminar os itens desnecessários e simplificar o processo de redesenho.

parte 2Fazer um "wireframe" HTML

Cria um wireframe para estabelecer a hierarquia. wireframe HTML é um esqueleto de um futuro web, criado usando somente as etiquetas e os blocos mais básicos para representar o conteúdo. Responda a pergunta "O que é apresentado e onde?". O formato e estilo são ignoradas completamente em um wireframe.

O wireframe permite visualizar a estrutura e fluxo do conteúdo antes de tomar decisões de estilo.
wireframes HTML não são estáticos como PDF ou imagens e permite que você se mover rapidamente blocos de conteúdo para criar uma nova estrutura.
Um wireframe é interativo, o que é benéfico tanto para o desenvolvedor eo cliente. Como o wireframe é escrito em HTML simples, você pode navegar nele e experiência de como se sente ao saltar páginas. Isso é algo que não pode ser expressa em um conceito de PDF.

Faça uma caixa cinza de teste (caixa cinza). Isola o conteúdo da página em caixas cinzentas, com o conteúdo mais importante no topo. Os blocos são dispostos numa única coluna, com a porção de conteúdo mais importante no topo da página. Por exemplo, se a página contém os detalhes da empresa, esta informação pode ir no topo, seguido pela lista pessoal, seguido de informações de contato, etc.

o cabeçalho e rodapé não estão incluídos. As caixas cinzentas são simplesmente uma representação visual do conteúdo que vai estar na página.

Tente um programa para criar wireframes. Existem vários programas que podem ajudar com o processo de criação do wireframe. O conhecimento de programação necessário varia de programa para programa. Alguns dos programas mais populares são:

Padrão Lab. Este site especializado em "projeto atômico"Em que cada parte de conteúdo está prevista como uma "molécula" que é uma página maior.
Jumpcharts. É um serviço de planejamento e criação de wireframe web. Ele requer uma assinatura paga, mas permite criar wireframes rapidamente, sem se preocupar muito com o código.
Wirefy. É um outro sistema "projeto atômico". As ferramentas são livres para desenvolvedores.

Use um marcado (markup) HTML simples. Um bom wireframe pode facilmente tornar-se web reais mais tarde. Não se preocupe com o estilo durante o processo de criação do wireframe. Em vez disso, use uma marcação que pode ser compreendido e facilmente modificado.

Quando se trata de um wireframe, menos é mais. O objetivo é construir a estrutura. O aspecto visual pode ser ajustado posteriormente com uma CSS avançado e marcação.

Cria uma estrutura de arame para cada página do site. Pode ser tentador para um wireframe e dizer "grande, posso aplicá-lo em todas as páginas"Mas, na realidade, você vai produzir um site mais genérico e chato. Cria uma estrutura de arame para cada página e descobrir que cada um tem suas próprias necessidades organizacionais.

parte 3Criar conteúdo

Tem algum conteúdo pronto antes de começar a construir o site. Vai ser muito mais fácil de ver como a web parece se você tem que colocar o conteúdo real em vez de referências. Você não precisa de muito, mas os esboços será muito melhor se você tem alguns originais e as imagens de cópias.

Não é necessário ter o corpo de um artigo, mas você deve ter cabeçalhos pelo menos reais.

Lembre-se que um bom conteúdo é mais do que o texto. Internet é composta de sites com muito mais do que texto simples. Para realçar um campo, você precisa variedade de conteúdo diferente para atrair e reter os visitantes. Nós apresentamos algum conteúdo que você pode considerar:

imagens
auditivo
vídeo
Registros de atividades (Twitter)
A integração com o Facebook
RSS
distribuição de conteúdo Web

Contratar um fotógrafo profissional. Se você estiver indo para incluir fotos na web, as impressões iniciais será muito maior com fotografias profissionais. Uma boa imagem vale mais do que vinte ruim.

recém-licenciados à procura de fotógrafos para gastar menos do que profissionais experientes.

Escrever artigos de qualidade. O conteúdo da página escrita determina maior parte do tráfego web. Enquanto você não precisa se preocupar muito sobre a criação de conteúdo neste momento no processo de design, não há nada de errado com o planejamento início porque você precisa de novos conteúdos regularmente após o lançamento do web.

Além de artigos, existem elementos escritos que possam precisar durante o processo de construção da web. Pode ser informações de contato, nomes de empresas e tudo o que é para ser usado em vários lugares na web.

parte 4Transforma o conceito na web

Pense elementos de estilo globais. São os elementos que você vê em todas as páginas do site, como o cabeçalho, rodapé e navegação menu. Cria um estilo muito básico para ver como todas as páginas vai ser quando todos esses elementos no lugar. É muito útil à medida que avança para o processo de eliminação.

Não se preocupe muito sobre os detalhes, mas tentar ser perto de como as manchetes será semelhante no final.

Cria um layout básico. Começa a se mover blocos wireframe fora da única coluna e sua localização geral na página. Por exemplo, é aconselhável para mover o bloco de navegação no lado esquerdo da página e uma lista de cabeçalhos para a direita.

Manter a experimentar com as disposições de algumas páginas antes de continuar. Deixe que os outros experimentá-los para verificar que eles são intuitivos.

Criar um esboço. Use um programa como o Photoshop para criar o esboço de algumas páginas do site. Use o arranjo listado como seu guia. Você pode trabalhar muito mais rápido em um programa de edição de imagem e colocar tudo no lugar que você deseja. Isso permite que você use as imagens como referências quando chega a hora de criar o código real.

Ele inclui conteúdo real no esboço para garantir que tudo fica bem juntos.

Substitui os blocos com o conteúdo. Começar a adicionar conteúdo e elementos para a página. Não se preocupe com o estilo ainda, basta colocar tudo em sua localização. Isso ajuda a verificar se as mudanças no estilo de trabalho.

Criar um guia de estilo. É essencial manter um estilo coesa, especialmente em grandes locais. Se o site é para um negócio que já tem uma aparência visual distintiva, você deve incorporar o design do site. Recomendamos algumas coisas a considerar no guia de estilo:

navegação
(cabeçalhos, , etc)
parágrafos
itálico
negrito
Links (ativo, inativo, reagindo ao cursor)
usando imagens
ícones
botões
listas

Aplica-se o estilo. Depois de ter decidido sobre um estilo e design para a Web, é hora de começar a implementá-las. CSS é um dos mais fáceis de implementar estilo em uma página ou todo os métodos da web. revisão esta guia Se você quiser mais detalhes do uso de CSS.

Planejando um site