Como criar um site (com imagens)

Índice:

Como criar um site (com imagens)
Como criar um site (com imagens)

Vídeo: Como criar um site (com imagens)

Vídeo: Como criar um site (com imagens)
Vídeo: ✅ [2023] COMO USAR CONTROLE DE PS4 PS5 NO PC DS4 WINDOWS 2024, Maio
Anonim

Este wikiHow ensina como criar um site que pareça profissional e tenha um bom desempenho. Embora a maior parte do design do seu site dependa, em última análise, de você, existem algumas coisas críticas a fazer - e evitar - ao criar um site.

Passos

Parte 1 de 2: como projetar seu site

Projete um site, etapa 1
Projete um site, etapa 1

Etapa 1. Determine se deseja usar um criador de site

Os sites criados do zero exigem uma compreensão bastante detalhada da codificação HTML, mas você pode criar facilmente um site usando um serviço de hospedagem gratuito como Weebly, Wix, WordPress ou Google Sites. Os criadores de sites tendem a ser muito mais fáceis de usar para designers iniciantes do que HTML.

  • Se você decidir codificar seu próprio site, precisará aprender a codificação HTML e CSS.
  • Se investir tempo e energia para criar seu site não parece atraente, você também pode contratar um designer de site para criar seu site para você. Designers autônomos podem custar entre US $ 30 por hora e bem mais de US $ 100 por hora.
Projete um site, etapa 2
Projete um site, etapa 2

Etapa 2. Mapeie seu site

Antes mesmo de abrir um criador de site, você deve saber aproximadamente quantas páginas deseja que seu site tenha, qual deve ser o conteúdo de cada uma dessas páginas e o layout geral de páginas importantes, como a página inicial e o "Sobre" página.

As páginas do seu site podem ser mais fáceis de visualizar se você desenhar imagens aproximadas de cada uma delas, em vez de apenas determinar o conteúdo que deve aparecer

Projete um site, etapa 3
Projete um site, etapa 3

Etapa 3. Use um design intuitivo

Embora haja algo a ser dito sobre novas ideias, o design básico do seu site deve seguir as diretrizes estabelecidas, como as seguintes:

  • As opções de navegação (por exemplo, guias para páginas diferentes) devem ser colocadas na parte superior da página.
  • Se você usar um ícone de menu (☰), ele deve estar no canto superior esquerdo da página.
  • Se você usar uma barra de pesquisa, ela deve estar próxima ao lado superior direito da página.
  • Links úteis (por exemplo, links para a página "Sobre" ou a página "Entre em contato") devem ser colocados na parte inferior de cada página.
Projete um site, etapa 4
Projete um site, etapa 4

Etapa 4. Seja consistente

Qualquer que seja a fonte do texto, paleta de cores, tema da imagem e opções de design que você escolher, certifique-se de usar a mesma decisão em todo o site. Pode ser incrivelmente chocante ver uma fonte ou esquema de cores usado para a página "Sobre" quando um completamente diferente foi usado para a página inicial.

  • Por exemplo, se você usa cores em tons frios exclusivamente para a página inicial do seu site, não implemente cores fortes e fortes na próxima página.
  • Lembre-se de que usar cores fortes ou conflitantes, especialmente quando as cores são exibidas de maneira dinâmica (por exemplo, em movimento), pode evocar epilepsia em um pequeno número de usuários da web. Se você decidir usar essas cores em seu site, certifique-se de adicionar um aviso de epilepsia antes de qualquer página relevante.
Projete um site, etapa 5
Projete um site, etapa 5

Etapa 5. Adicione opções de navegação

Colocar links diretos para páginas importantes em seu site na parte superior da página inicial ajudará a direcionar os visitantes de primeira viagem para o conteúdo que importa. A maioria dos criadores de sites adiciona esses links por padrão.

É importante certificar-se de que todas as páginas do seu site possam ser acessadas clicando nas opções do seu site, em vez de acessá-las apenas pelo endereço da página

Projete um site, etapa 6
Projete um site, etapa 6

Etapa 6. Use cores que se complementem

Como qualquer outro tipo de design, o design do site depende de combinações de cores visualmente agradáveis; por isso, escolher cores temáticas que combinem é crucial.

Preto, branco e cinza são uma boa combinação se você não sabe por onde começar

Projete um site, etapa 7
Projete um site, etapa 7

Etapa 7. Considere o uso de um design minimalista

O minimalismo incentiva cores de tons frios, gráficos simples, páginas de texto em preto e branco e o mínimo de enfeites possível. Como o minimalismo requer poucos elementos sofisticados, é uma maneira fácil de fazer seu site parecer profissional e atraente sem exigir muito trabalho.

  • Muitos criadores de sites têm um tema "minimalista" que você pode selecionar ao configurar seu site.
  • Uma alternativa ao minimalismo é o "brutalismo", que usa linhas mais duras, cores brilhantes, texto em negrito e imagens mínimas. O brutalismo tem menos seguidores do que o minimalismo, mas dependendo do conteúdo do seu site, pode atender melhor às suas necessidades de design.
Projete um site, etapa 8
Projete um site, etapa 8

Etapa 8. Faça escolhas exclusivas

Linhas retas e elementos da web travados em grade são apostas seguras, mas tomar algumas decisões estilísticas exclusivas dará personalidade ao seu site e ajudará seu site a se destacar.

  • Não tenha medo de contrariar tendências posicionando elementos do site de forma assimétrica ou usando elementos sobrepostos para criar uma aparência em camadas.
  • Enquanto elegantes, cantos agudos e elementos quadrados (também conhecidos como uma apresentação "baseada em cartão") são menos favoráveis do que elementos arredondados e suaves.

Parte 2 de 2: Como maximizar o desempenho do site

Projete um site, etapa 9
Projete um site, etapa 9

Etapa 1. Aproveite as opções de otimização para celular

Os navegadores móveis são responsáveis por mais tráfego da web do que os navegadores de desktop, o que significa que a quantidade de atenção que você presta à versão móvel do seu site deve ser pelo menos igual ao desenvolvimento do seu site para desktop. A maioria dos serviços de criação de sites cria automaticamente uma versão móvel do seu site, mas você deve manter as seguintes informações em mente para o seu site móvel:

  • Certifique-se de que os botões (por exemplo, links de sites) sejam grandes e fáceis de tocar.
  • Evite implementar recursos que não podem ser visualizados em dispositivos móveis (por exemplo, Flash, Java, etc.).
  • Considere ter um aplicativo móvel feito para o seu site.
Projete um site, etapa 10
Projete um site, etapa 10

Etapa 2. Evite usar muitas fotos por página

Os navegadores de desktop e de celular têm dificuldade para carregar páginas que exibem um grande número de fotos ou vídeos. Embora as imagens sejam importantes no design da web, usar mais do que algumas por página pode causar tempos de carregamento desnecessariamente longos, o que impedirá que as pessoas visitem as páginas em questão.

De modo geral, você deseja que as páginas do seu site carreguem em menos de quatro segundos

Projete um site, etapa 11
Projete um site, etapa 11

Etapa 3. Adicione uma página "Contato"

Você notará que praticamente todos os sites estabelecidos têm uma página "Fale conosco" que contém informações de contato (por exemplo, um número de telefone e um endereço de e-mail); alguns sites têm até um formulário de perguntas integrado nesta página. Adicionar uma página de "Contato" dará aos visitantes do site uma linha direta de comunicação com você, adicionando assim uma solução para potenciais frustrações.

Etapa 12 do projeto de um site
Etapa 12 do projeto de um site

Etapa 4. Crie uma página 404 personalizada

Quando alguém visita uma página específica de seu site que não foi configurada ou não existe, uma página de "Erro 404" é exibida. A maioria dos navegadores tem uma página 404 padrão, mas você pode personalizar a sua a partir das configurações do criador do seu site; em caso afirmativo, certifique-se de incluir os seguintes detalhes:

  • Uma mensagem de erro despreocupada (por exemplo, "Parabéns - você encontrou nossa página de erro!")
  • Um link para a página inicial do site
  • Uma lista de links comumente vistos
  • Uma imagem ou logotipo para seu site
Etapa 13 do projeto de um site
Etapa 13 do projeto de um site

Etapa 5. Use uma barra de pesquisa, se possível

Se o método de criação de seu site suporta a adição de uma barra de pesquisa ao seu site, é altamente recomendável que você faça isso. Isso garantirá que os usuários possam navegar rapidamente para uma página ou item específico sem ter que clicar nas opções de navegação.

As barras de pesquisa também são úteis quando seu público deseja pesquisar um termo geral sem usar tentativa e erro

Projete um site, etapa 14
Projete um site, etapa 14

Etapa 6. Invista o máximo de tempo em sua página inicial

Quando alguém chega na página inicial do seu site, essa pessoa deve obter a essência do tema do seu site imediatamente; além disso, todos os elementos da página inicial devem carregar rapidamente, incluindo opções de navegação e quaisquer imagens. Sua página inicial deve ter os seguintes aspectos:

  • Uma frase de chamariz (por exemplo, um botão para clicar ou um formulário para preencher)
  • Uma barra de ferramentas ou menu de navegação
  • Um gráfico convidativo (por exemplo, uma foto sólida, um vídeo ou um pequeno grupo de fotos com o texto que o acompanha)
  • Palavras-chave relacionadas ao serviço, tópico ou foco do seu site
Projete um site, etapa 15
Projete um site, etapa 15

Etapa 7. Teste seu site em vários navegadores em várias plataformas

Isso é extremamente importante, pois navegadores diferentes podem lidar com aspectos do seu site de maneiras diferentes. Antes de começar a promover seu site, experimente visitá-lo e usá-lo nos seguintes navegadores nas plataformas Windows, Mac, iPhone e Android:

  • Google Chrome
  • Raposa de fogo
  • Safari (apenas iPhone e Mac)
  • Microsoft Edge e Internet Explorer (somente Windows)
  • O navegador integrado em vários telefones Android diferentes (por exemplo, Samsung Galaxy, Google Nexus, etc.)
Projete um site, etapa 16
Projete um site, etapa 16

Etapa 8. Continue atualizando seu site à medida que envelhece

Tendências de design, links, fotos, conceitos e palavras-chave mudam com o passar do tempo, então você terá que continuar fazendo alterações em seu site para se manter atualizado. Isso exigirá que você verifique o desempenho do seu site ao lado de outros sites semelhantes pelo menos uma vez a cada três meses (de preferência com mais frequência).

Ajuda HTML básica

Image
Image

Amostra de página da web com HTML

Apoie o wikiHow e desbloquear todas as amostras.

Image
Image

Folha de referências em HTML

Apoie o wikiHow e desbloquear todas as amostras.

Image
Image

Amostra de página da web simples

Apoie o wikiHow e desbloquear todas as amostras.

Pontas

  • A acessibilidade do site é outro aspecto importante do desenvolvimento do site. Isso inclui legendas para públicos com deficiência auditiva, descrições de áudio para visitantes cegos e avisos de fotossensibilidade se o seu site usar efeitos potencialmente indutores de convulsões.
  • A maioria dos criadores de sites tem um conjunto de modelos que você pode usar para consolidar o layout e o design de seu site antes de adicionar seus elementos preferidos.

Avisos

  • A maioria dos criadores de sites é gratuita; no entanto, se quiser usar seu próprio domínio (por exemplo, "www.seunome.com" em vez de "www.seunome.wordpress.com"), você terá que pagar uma taxa mensal ou anual.
  • Evite o plágio e observe todas as leis de direitos autorais: não adicione imagens aleatórias da web, ou mesmo elementos estruturais, sem permissão.

Recomendado: