Como criar um plano de site HTML5 e CSS3 - manequins

Muitas vezes, o trabalho inicial em um site principal envolve a criação de um plano para o design do site HTML5 e CSS3. Fazendo este passo cedo te ajuda a ver o verdadeiro escopo do projeto. Um plano do site é uma visão geral de um site. Normalmente, é desenhado como um gráfico hierárquico.

Imagine que você é convidado a ajudar a projetar um site para um departamento acadêmico em uma grande universidade. A primeira pergunta é: "O que você quer no site? "Anote tudo.

Pergunte ao seu cliente o que eles querem. Depois que todos os participantes sugerem tudo o que eles acham que seu site precisa, tire-os para fora da sala. Usando apenas papel e lápis, crie um esboço mais organizado baseado em como você acha que a informação deve ser organizada.

Como criar uma visão geral do site

Tenha em mente essas sugestões ao criar um diagrama de visão geral do site:

• Use a Lei dos Sete. Esta lei sugere que as pessoas geralmente não podem lidar com mais de sete escolhas por vez. Tente não ter mais de sete principais segmentos de informação em qualquer nível. Cada um destes pode ser separado em até sete pedaços, e cada um deles pode ter sete pedaços.

• Identificar pontos comuns. Enquanto você examina os dados, surgem grupos gerais. No exemplo da universidade, você poderia ver facilmente que você tinha muitos dados do curso, informações de licenciamento, informações sobre professores e pesquisa.

• Tente atribuir cada tópico a um grupo. Esta é uma forma de normalização de dados aqui. Esta estrutura de dados não é necessariamente formal, mas pode ser.

• Organizar uma hierarquia. Agrupe os tópicos do mais geral para o mais específico. Por exemplo, o termo informação do curso é muito amplo. N100 é um curso específico, e pode ter muitas seções (combinação específica de data, hora e instrutor). Assim, faz sentido agrupar seções sob N100 e agrupar N100 em cursos.

• Fornecer dados representativos. Nem todas as informações são necessárias aqui. O objetivo é ter dados suficientes para que você possa ver as relações entre os dados.

• Tenha em mente que este diagrama não representa o design do site. O objetivo deste tipo de diagrama é ver como os dados em si se encaixam. Claro, este diagrama tende a informar a configuração da página e a estrutura do menu, mas não precisa.

• Nem cada caixa é uma página. Pode ser, mas não precisa ser. Mais tarde, no processo, você pode decidir como organizar as partes do site.

Construir este tipo de diagrama de site é absolutamente crítico para sites maiores, ou então você nunca compreendeu o escopo do projeto.Os principais interessados ​​examinam para ver se refletem com precisão a informação que você está tentando transmitir.

Como construir o diagrama do site

O diagrama do site é uma versão mais específica da visão geral do site. Neste ponto, você se compromete com as páginas específicas que deseja no sistema e suas relações organizacionais.

O diagrama do site é um pouco diferente da visão geral por esses motivos:

• Cada caixa representa uma página. Agora você precisa tomar algumas decisões sobre como as páginas estão organizadas. Determine em qual nível da visão geral você tem páginas separadas. Por exemplo, são todas as seções do curso em uma página ou todas as seções do N100? Cada seção de cada curso tem uma página diferente? Essas decisões irão ajudá-lo a determinar quais tecnologias usar na construção da página.

• O diagrama do site ainda não precisa de todas as páginas. Se você tem 30 aulas, não precisa contabilizar cada uma delas se você souber onde elas vão e todas elas têm o mesmo propósito e design geral.

• A estrutura de navegação deve ser clara. A hierarquia deve dar-lhe uma estrutura de navegação clara. (Claro, você pode, e muitas vezes deveria, adicionar uma estrutura de navegação secundária.)

• Nomeie cada caixa. Cada página deve ter um nome. Esses nomes de caixa se traduzem em títulos de páginas e ajudam você a formar um sistema de título unificado. Este arranjo é útil para o seu esquema de navegação.

• Identifique o layout geral para cada caixa. Geralmente, um site usa apenas alguns layouts. Você tem um layout padrão para a maioria das páginas. Muitas vezes, a página da frente tem um layout diferente (para notícias e informações de navegação). Você também pode ter layouts de especialidades. Por exemplo, as páginas da faculdade têm um layout específico com uma imagem proeminente. Não planeje o layout aqui - apenas identifique-o.

• Classifique a ordem. Se a ordem das páginas é importante, o diagrama do site é o local para descobrir.

O objetivo desta parte do processo de planejamento do site é ter uma compreensão clara do que cada página requer. Esta informação deve tornar mais fácil para você completar os passos de dados e design visual. O diagrama do site é um documento absolutamente crítico. Depois de aprová-lo, imprima e grave-o para o monitor. É o seu mapa para o resto do projeto.