Crie um layout de site limpo no Photoshop - Criar um layout de site é mais do que organizar imagens coloridas e preencher algum texto nos quadros de texto. É uma abordagem que fala muito sobre os negócios do seu cliente. As cores e os gráficos do site definem a natureza do negócio, enquanto a qualidade do design e o fácil fluxo de navegação do site devem vincular o usuário à organização e transformá-lo em um cliente em potencial.
Criar um layout de site bonito e de fácil acesso é obrigatório para qualquer web designer. Este tutorial destina-se a conduzi-lo através do processo de criação de um site simples e limpo de layout de site, desde o início. Durante o processo, você aprenderá pontos importantes que ajudarão você a obter mais conhecimento sobre web design. 
Anote seus requisitos antes de criar um layout de site
Antes de começar a projetar o layout de um site, você deve saber como ele será exibido e quais são os tópicos que você deve incluir no site. É crucial fazer uma lista dos elementos de layout do site que seu cliente precisa no site dele. Junto com isso, a qualidade de um bom designer é preparar uma simulação de todo o site antes que ele comece a trabalhar no modelo final.
Várias empresas de design adaptam vários níveis de estratégias de pré-design, que podem conter armação de arame, prototipagem, maquete, versões beta e muito mais. Neste tutorial, criaremos uma versão mock-up antes de iniciar o design do modelo original. Estou usando os tons de cinza que permitem identificar o bloco de maquete
Tela de pintura
Anos antes, embora existissem muito poucos SO e dispositivos limitados para acessar sites, as dimensões da página foram fixadas em um ou dois tamanhos. Hoje o cenário é completamente diferente. Os usuários finais acessam sites em computadores de vários tamanhos, telefones celulares, iPads e tablets. Nessa situação diversa, não há chance de você consertar sua página da Web em um tamanho específico. Mas existem alguns tamanhos padrão da indústria aplicados a todos os dispositivos. Você encontrará lentamente seu tamanho favorito ou seu cliente poderá indicar um site para imitar os tamanhos.
Nesse caso, estamos trabalhando nas seguintes dimensões. Não se preocupe com a altura, pois ela mudará com o tempo. Quanto mais conteúdo você adicionar ao seu site, maior será a altura.
Lembre-se de que é comum rolar a página verticalmente; portanto, você não pode fixar uma altura específica para sua página da web, a menos que não queira que o usuário role na sua página inicial como o Google. Mas, é necessário não rolar horizontalmente. Portanto, limite sua largura de acordo com os padrões do setor e não seja criativo com a rolagem horizontal.
Para a web, a resolução é limitada a 72. Há imagens e páginas de alta resolução encontradas recentemente em iPads e em alguns tablets. Mas é em uma ocasião rara, e é melhor ficar com 72, considerando a velocidade da Internet em todo o mundo.
Selecione os arquivos usando o comando Ctrl + A e desenhe guias igualmente em todo o modelo. Um site deve ser organizado com todos os elementos organizados de forma coerente entre si. E as diretrizes de layout do site ajudam você a obtê-lo facilmente.
Prepare sua maquete
A colocação do arquivo de maquete no modelo original ajuda a economizar bastante tempo. Projetar seu site se torna tão fácil que você terminará a estrutura em poucos minutos. No entanto, a maquete ajudará você a projetar os quadros. Completar os elementos do design com detalhes, organização do tipo e alinhamento levará tempo demais do que desenhar o layout do site.
Esquema de cores e outras opções
A próxima coisa a fazer depois de preparar sua estrutura é escolher um esquema de cores. Mas é melhor preparar as cores antes de começar a trabalhar no design.
Tudo se resume à mensagem de que, prepare suas armas antes de iniciar o design. Tudo, incluindo ícones, imagens e opções de cores, deve estar pronto antes de você começar a trabalhar. Organizar e planejar seu trabalho economizará mais tempo e se concentrará no design sem obstruções.
Escolher cores pode ser uma escolha do designer se a empresa for nova e não tiver uma identidade corporativa antes. Em alguns casos, os clientes dão uma idéia de quais tons eles querem que o logotipo ou plano de fundo deva ser. No caso de empresas existentes, nas quais você pode precisar reprojetar um site inteiro, pode ser necessário escolher as mesmas cores conforme as necessidades do cliente.
Existem inúmeros sites que podem ajudá-lo a escolher milhões de esquemas de cores nos arquivos. Experimente os sites a seguir para desfrutar de uma ampla variedade de combinações de cores.
Color.adobe.com
Colourlovers.com
Aqui eu escolhi alguns tons de azul para usar no site. Todo o site será planejado dentro do seguinte esquema de cores. Não se esqueça de escolher três ou quatro combinações de cores diferentes, pois não sabemos qual cliente de cores prefere. Depois que o cliente finalizar um esquema de cores, salve os valores de sombra e verifique se as cores desempenham um papel vital em todas as verticais da organização. Especialmente na identidade corporativa.
Processo de Design
Existem muitas maneiras de levar adiante seus designers. Não há regras de layout de sites rígidas e rápidas para definir ou seguir o processo de criação, é principalmente um processo que o designer escolherá para sua conveniência.
Alguns projetistas desejam construir os blocos e estruturas inteiros e começar a trabalhar nos detalhes no segundo estágio, seguidos pelo tipo e, finalmente, alinhamentos e ajustes. Alguns gostam de terminar uma parte da página de uma vez e levá-la para a próxima parte. Estamos seguindo o segundo estilo.
Terminaremos o site nas seguintes etapas
- Cabeçalho rodapé
- O que nós fazemos
- Serviços
- Formato
- Notícia
- Rodapé
Cabeçalho rodapé
A regra geral para definir as dimensões do seu cabeçalho ou banner é deixada para a sua criatividade. De acordo com as últimas tendências, os sites aparecem com uma imagem enorme que cobre toda a tela do computador. O estilo é conhecido como imagem Hero, que se tornou bastante popular recentemente.
Nesse caso, começamos com o cabeçalho de altura de 120 pixels e a altura de 550 pixels para o banner. A largura deve corresponder ao tamanho do documento.
Os desenhos com cores sólidas têm uma aparência plana que não combina bem com quadros ou imagens maiores. Para evitar a aparência plana, apliquei a camada de sobreposição de gradiente na parte superior do banner. Dá ao banner uma profundidade que se transforma lentamente de uma sombra para outra.
Em seguida, começamos a importar o logotipo e o colocamos no canto superior esquerdo do cabeçalho e outro logotipo maior no centro do banner. Você também pode observar as formas do vetor de layout do site no canto superior direito, que são usadas para compartilhar os links de mídia social.
Nesta fase, terminei de adicionar o tipo na parte Cabeçalho e banner. O nome da empresa, a mensagem da marca, com links e serviços, são adicionados no texto. Você também pode observar um botão transparente no banner.
Texto sem formatação ou em excesso, sem recursos especiais, estragará a aparência da sua página da web; a página aborrecerá o usuário em breve, o que poderá permitir que ele saia do site rapidamente. Confira a forma vetorial que eu adicionei aos links de serviços no canto superior direito do banner. O estilo é simples, mas preenche o vazio, evitando a aparência mundana.
Escolha uma imagem apropriada para a empresa. Existem milhões de imagens disponíveis na Web e não demorará muito para encontrar uma imagem que atenda às suas necessidades.
No meu caso, encontrei uma imagem de alta qualidade que acho que vai bem no meu site. Como não tenho um tema comercial para o site, posso escolher qualquer imagem que fique bem no post do banner.
Tente fazer o download de algumas imagens em HD de sites de imagens gratuitas abaixo
www.pixabay.com
Misturar é uma arte que você deve dominar para produzir belos banners. Aqui misturei três camadas para obter o efeito mostrado na imagem acima. Aqui está o que eu fiz
- Coloque a camada da imagem em cima da faixa azul
- Coloque a sobreposição de gradiente acima da imagem
- Altere a opacidade da imagem em 40% e altere o modo de mesclagem para diferença.
- Confira a paleta de camadas na imagem acima para entender como as camadas são empilhadas umas sobre as outras.
É assim que o seu cabeçalho e banner será exibido quando terminarmos de trabalhar nele. Estamos trabalhando em uma parte de uma vez e é hora de passar para o próximo nível.
O alinhamento é crucial quando se trata de digitar; tenha uma idéia de como o site deve ficar e o texto deve estar alinhado antes de iniciá-lo. Nesse nível, usei dois quadros de texto diferentes, ambos alinhados à esquerda.
O próximo passo é projetar a parte de serviços da página da web. Eu projetei uma estrela metálica em tons de cinza para mostrar vários serviços da empresa. A intenção por trás do uso do símbolo de estrela são os serviços de 5 estrelas.
Quando se trata de alinhar o texto, os Guias são seus melhores amigos. A coerência entre o tipo e os objetos pode ser obtida utilizando-se o espaço em branco e as diferenças iguais entre os elementos do design. Usei muitas diretrizes de layout de site para verificar se todos os objetos no quadro devem manter intervalos e distâncias adequados, o que gera uma quantidade razoável de espaço em branco.
O próximo passo do nosso design é criar o campo Formulário. Nesse caso, estou trabalhando oposto ao método que usamos no design do banner. Colocaremos a camada de imagem abaixo da camada de cor sólida e aplicaremos uma camada de gradiente no topo das duas camadas para obter uma aparência melhor. Brincar com os modos de mesclagem é sempre essencial ao colocar imagens maiores.
A escolha das imagens para este site não tem um tema específico relacionado a ele. Eu acho que essa imagem ajudará o site a ficar melhor.
Coloque a imagem abaixo da camada de fundo colorida. Para fixar a imagem exatamente no tamanho da camada colorida, use as opções de máscara de camada.
Dê uma olhada na paleta de camadas na imagem acima. A camada de cor azul sólida fica na parte superior da imagem, o modo de mesclagem é convertido em sobreposição e a opacidade é reduzida para 65%.
Eu usei o mapa de gradiente em cima das duas camadas. O modo de mesclagem é alterado para matiz e a opacidade permanece a mesma.
A caixa de formulário está pronta, o que nos leva ao final do quarto nível no design do site.
Nosso próximo nível consiste em dois quadros de texto simples. Assemelha-se ao nível dois da página da web e usei alinhadas as duas caixas semelhantes à parte superior. Manter a coerência no alinhamento é uma boa maneira de usar o espaço em branco.
Quando chegamos à parte final da página, é hora de examinar as dimensões do rodapé mais uma vez. O designer deve planejar a altura do rodapé com base nos links que ele deve usar lá. Nesse caso, dei 170 pixels de altura ao rodapé. A largura permanece a mesma do site.
Coloque os links e imagens conforme sua exigência.
Com isso, concluímos a parte de design do nosso site. As combinações de cores usadas são mínimas, usamos muito espaço em branco em nosso design e adicionamos texto simples com fontes mínimas. A intenção é criar uma página da web limpa, que esperamos que seja cumprida.
Veja o design de toda a página abaixo mais uma vez
