Se você deseja projetar e criar páginas da web, esse processo será muito mais fácil se você planejar com antecedência. Na fase de planejamento, o designer e o cliente podem trabalhar juntos para encontrar um formato e layout que atenda às suas necessidades. O processo de planejamento afeta o estilo ou estilo do site, você poderia dizer que este é o aspecto mais importante em web design, especialmente se for para fins comerciais.
Etapa
Parte 1 de 4: Criando a Estrutura Básica
Etapa 1. Determine a função do site
Se você estiver criando um site pessoal, provavelmente já sabe a resposta. No entanto, se você estiver criando um site para outra organização, empresa ou pessoa, precisará descobrir o que eles desejam e a funcionalidade do site. Tudo que você especificar aqui terá efeito quando a página da web for concluída.
- O site requer vitrine? Os comentários do usuário devem ser feitos? O usuário precisará criar uma conta mais tarde? O site é orientado para artigos? Ou orientado para a imagem? Todas essas e outras questões o ajudarão a projetar e projetar o site.
- Este processo de planejamento pode ser desenhado em um desenho, especialmente se for para uma grande empresa e muitas pessoas estão envolvidas na criação deste projeto.
Etapa 2. Crie um diagrama do mapa do site (mapa do site)
Um diagrama de mapa do site é semelhante a um fluxograma, mostrando como os usuários passam de uma página para a próxima. Você não precisa de uma página da web neste estágio, apenas um fluxo geral de conceitos. Você pode usar um programa de computador para criar diagramas ou esboçar o seu próprio no papel. Use este diagrama para demonstrar os conceitos de organização hierárquica e conectividade de página da web.
Etapa 3. Experimente o método de elaboração de cartas
Um método popular de desenvolvimento web em grupo é usar vários cartões para descobrir as expectativas de todos. Pegue uma série de cartões de notas e anote o conteúdo básico de uma página da web em cada um individualmente. Organize esses cartões junto com sua equipe para encontrar o melhor conceito. Este método é adequado para uso quando você está colaborando com outras pessoas na criação de páginas da web.
Etapa 4. Use papel e um quadro de avisos ou um quadro branco
Este é um método de planejamento original com um orçamento pequeno, você pode excluir ou mudar rapidamente o conteúdo e alterar o fluxo. Desenhe seu web design no papel e, em seguida, conecte os papéis com linha ou desenhe linhas no quadro. Este método é muito adequado para uso em sessões de brainstorming.
Etapa 5. Crie um inventário de conteúdo
Na verdade, tende a ser mais apropriado para uso no redesenho de sites do que em novos projetos. Insira cada parte final do conteúdo ou página da web em uma planilha. Anote a finalidade de cada parte do conteúdo ou página, usando esta lista para determinar o que remover e o que manter. Você pode simplificar a estrutura da web e simplificar o processo de redesenho mais tarde.
Parte 2 de 4: Criando um esboço de HTML básico
Etapa 1. Crie um wireframe para estabelecer a hierarquia da página da web
O modelo HTML básico é o projeto do site que você criará, usando apenas as tags mais básicas e o conteúdo de amostra (blocos / modelos). Esta estrutura responde à pergunta: “O que é visível na web e onde?” A formatação e o estilo não são necessários na criação deste esboço.
- Você pode ver a estrutura e o fluxograma do conteúdo com um esboço básico antes de escolher uma configuração de estilo.
- Os modelos HTML básicos não são estáticos como PDFs ou imagens, você pode passar rapidamente pelo conteúdo de amostra para criar novas estruturas.
- A estrutura básica é interativa, o que beneficia desenvolvedores e clientes da web. Como essa estrutura básica é escrita com código HTML simples, você ainda pode navegar por ela e saber como funciona a troca de páginas da web. Isso não pode ser feito com PDF.
Etapa 2. Experimente o método Gray Box
Bloqueie ou destaque o conteúdo da sua página da web na Caixa cinza, o conteúdo mais importante está no topo. Classifique o conteúdo em uma coluna. Por exemplo, se a página for "Sobre a empresa", as informações detalhadas sobre a empresa estão no topo, seguidas por uma lista de funcionários, informações de contato, etc.
Isso não inclui cabeçalhos e rodapés. Gray Box é uma representação visual do conteúdo que aparecerá na web
Etapa 3. Experimente um programa construtor de esboço básico
Existem vários programas que você pode usar no processo de criação de uma estrutura básica da web. A quantidade de código de programação da web (linguagem) que você precisa dominar é diferente para cada programa. Alguns dos programas bastante populares incluem:
- Laboratório de padrões. Este site é dedicado ao “design atômico”, cada conteúdo é considerado uma “molécula” que compõe uma página web maior.
- Jumpcharts. Esta página da web fornece serviços de planejamento e enquadramento baseados na web. Esses sites são pagos e exigem uma assinatura, mas você pode criar estruturas da web rapidamente, sem ter que dominar muitos códigos de programação da web.
- Wirefy. Wirefy é outro site que oferece “design atômico”. Os desenvolvedores da Web podem obter a ferramenta gratuitamente.
Etapa 4. Use marcação HTML simples
Um bom modelo básico será facilmente convertido para o site original. Não pense muito sobre o estilo da web durante o processo de criação deste modelo. Use marcação que pode ser facilmente compreendida e alterada.
Uma estrutura básica simples é muito melhor. O objetivo de criar uma marcação é construir uma estrutura. A aparência visual pode ser ajustada posteriormente com CSS e marcação avançada
Etapa 5. Crie um esboço básico para cada página da web
Você pode ficar tentado a equiparar cada página da web a um esboço básico. Na verdade, isso só tornará seu site simples e enfadonho. Crie um esboço diferente para cada página, você entenderá que cada página precisa de seu próprio design.
Parte 3 de 4: Criação de conteúdo
Etapa 1. Prepare o conteúdo antes de criar uma página da web
Você achará muito mais fácil visualizar seu webview se já tiver conteúdo real, em vez de usar amostras ou espaços reservados. Você não precisa ter muito conteúdo, mas sua maquete ficará muito melhor se você usar uma cópia da imagem original.
Você não precisa ter todo o material do artigo, mas pelo menos deve ter um título real
Etapa 2. Lembre-se de que um ótimo conteúdo não é apenas texto
A Internet é muito mais complexa do que uma simples página de texto na web. Você precisa de uma variedade de conteúdo diferente para criar um ótimo site para atrair e convidar visitantes. Por exemplo:
- Foto.
- Voz.
- Vídeos
- Transmissão da web ou webstream (Twitter)
- Integração com Facebook
- RSS
- Feed da web
Etapa 3. Peça ajuda a um fotógrafo profissional
Se você deseja incluir fotos em seu site, a primeira impressão que obterá de seu site será muito melhor se estiver repleto de fotografia profissional. Uma boa foto vale mais do que vinte fotos de baixa qualidade.
Procure um recém-formado na arte da fotografia como uma solução mais barata do que um fotógrafo profissional que já está no ramo há muito tempo
Etapa 4. Escreva artigos de qualidade
O conteúdo escrito na página da web determinará a quantidade de seu tráfego na web. Embora você não precise se preocupar muito com a criação de conteúdo neste processo de design, não custa nada começar a pensar nisso, porque você também precisará de conteúdo regularmente assim que seu site estiver instalado e funcionando.
Além do conteúdo do artigo, há material escrito que você também precisa ter no processo de compilar uma página da web. Por exemplo, informações de contato, nome da empresa ou qualquer outra coisa que será usada várias vezes no site
Parte 4 de 4: Transformando conceitos em sites
Etapa 1. Organize os elementos básicos
Esse arranjo de elementos se aplica a todas as páginas do seu site, como cabeçalhos, notas de rodapé e menus de navegação. Configure-o em um estilo muito simples para que você possa verificar a aparência de todas as páginas. Isso é especialmente útil conforme você avança no processo de layout da web.
Não se preocupe muito com os detalhes, tente visualizar (visualizar) a aparência do cabeçalho
Etapa 2. Crie um layout simples
Comece mudando a posição do relógio da coluna de contorno de base para o local real na página. Por exemplo, você pode querer mover o menu de navegação de amostra para a esquerda da página e a lista de títulos para a direita.
Continue experimentando layouts da web para várias páginas antes de passar para a próxima etapa. Permita que outras pessoas dêem uma olhada nele para ver se o layout que você criou parece vivo
Etapa 3. Crie uma maquete
Use um programa como o Photoshop para criar maquetes ou páginas de amostra do seu site. Use o layout que você compilou como um guia. Você pode fazer maquetes com mais rapidez e obter os resultados desejados com um programa de processamento de imagem. Os resultados dessas imagens podem ser usados posteriormente como uma referência no processo de escrever código de programação web.
Coloque o conteúdo real na maquete para que pareça bom
Etapa 4. Substitua o conceito de amostra pelo conteúdo original
Adicione conteúdo e elementos às páginas da web. Não se preocupe com as configurações de estilo da web por enquanto, apenas empilhe tudo no local correto. Isso o ajudará a revisar as alterações de estilo da web que você fizer posteriormente.
Etapa 5. Crie um guia de estilo da web
É muito importante manter uma mistura de estilos, especialmente para sites grandes. Se o site se destina a fins comerciais e já possui uma marca ou estilo próprios, isso deve ser integrado ao design do site. Itens a serem considerados ao criar um guia de estilo de página da web:
- Navegação
- Nota de cabeça
- Parágrafo
- Caractere itálico
- Personagem ousado
- Links (ativos, inativos, pairar)
- Uso de imagem
- Ícone
- Botão
- Lista
Etapa 6. Aplique o estilo da web
Depois de encontrar o estilo e o design corretos, implemente-os. CSS é uma das maneiras mais fáceis de implementar estilos em uma página da web ou no site. Veja as instruções a seguir para entender melhor os detalhes do uso de CSS.
