Não é mais crie um imagem visual da aparência que você deseja que seu site tenha. Faça o layout de seu site antes de criá-lo, ele pode lhe dar uma ideia de como os elementos serão exibidos e do que você precisa. É um processo simples que você pode fazer no Illustrator.
Como construir um site no Illustrator
Qualquer versão do Illustrator pode ser útil, pois usaremos apenas ferramentas básicas do aplicativo. Antes de começar, lembre-se que todos os elementos de um site devem estar a um clique de distância e menos é sempre mais.
Configure o documento
- Abra o aplicativo Illustrator.
- Criar uma Novo Documento, use o comando de atalho Ctrl + N.
- Digite o nome do arquivo.
- Insira as dimensões da folha. Essas medidas correspondem a uma imagem em um grande monitor.
- Largura 1024 px.
- Altura 1479 px. Este valor pode variar de acordo com os elementos que você precisa adicionar ao seu site.
- Escolher Orientação vertical.
- Por se tratar de um design focado no resultado digital, escolha o modo de cor RGB.
Organize as áreas do site
Neste ponto, você já deve estar claro sobre os elementos que deseja adicionar à sua página da web. Adicione retângulos coloridos a dividir as áreas de uma página, como cabeçalho, corpo e rodapé.
- Ao finalizar camada de bloqueio não mover esses elementos.
- Crie uma nova camada para colocar os elementos da web.
Dentro de cada área faça uma subdivisão para cada conteúdo. Por exemplo, uma caixa para marcar o lugar onde uma imagem vai ou retângulos para marcar o lugar de um texto.
- Bloqueie esta nova camada e crie outra para conteúdo como botões, imagens e texto.
Adicionar diretrizes
Use as diretrizes como referência para que cada elemento da web seja colocado de forma adequada. As imagens, o texto, o logotipo e os botões têm que estar bem estruturados.
- Basta clicar na régua na prancheta e arrastar o cursor para um ponto na folha.
- Você pode desativar os guias a qualquer momento pressionando as teclas Ctrl + ponto e vírgula.
Inserir elementos da web
Agora adicione todos os elementos que seu site possui. Adicione o logotipo ao cabeçalho junto com o título ou um banner. Imagens e gráficos são importantes para dar um acabamento verdadeiro, assim como o ícones de mídia social.
Adicione o texto da página levando em consideração o estilo da fonte que você vai usar, assim como os botões. À medida que avança, você pode ver mais claramente quais elementos você precisa e quais você pode dispensar.
Adicionar cores
Finalmente, desbloqueie as duas camadas anteriores e remova os blocos cinza em cada área do site. A cada área como cabeçalho, corpo e rodapé, atribua a cor que terão.
Para os outros elementos como figuras ou textos dentro do site, você também deve atribuir uma cor a ele. Quando tudo estiver pronto, salve o documento com a opção Arquivo / Salvar para web, para salvá-lo em um formato leve.
Razões para fazer o layout de um site
No desenvolvimento profissional de qualquer site, o processo de análise é essencial para o sucesso do projeto. A ideia é poder interpretar graficamente a aparência de um site e economizar muitas horas de programação.
Ao projetar um site, você pode entender como ele funciona e se a abordagem inicial atende aos requisitos para ser uma solução viável. Mostrar uma imagem gráfica do site para o cliente antes de começar economiza muito tempo no redesenho.
O design inicial dá uma ideia do comportamento da página e do layout do conteúdo. Quanto mais simples essa imagem inicial for exibida, mais fácil será de interpretar.
