Criar um Site Limpo de Layout no Photoshop – Criando um layout do site é mais do que organizar imagens coloridas e enchimento de algum texto em quadros de texto. É uma abordagem que fala muito sobre o negócio do seu cliente. As cores e gráficos do site definem a natureza do negócio, enquanto a qualidade do design e o fluxo de navegação fácil do site devem vincular o usuário à organização e transformá-lo em um cliente em potencial.
projetar um layout de site bonito e facilmente acessível é obrigatório para todos os aspirantes a web designer. Este tutorial destina-se a levá-lo através do processo de criação de um site de layout de site simples e limpo a partir do zero. Durante o processo, você aprenderá pontos importantes que o ajudarão a obter mais conhecimento sobre web design.
Escrever os seus requisitos antes de projetar um layout do site.
Antes de começar a projetar um layout de site, você deve saber como seu site ficará e quais são os tópicos que você deve incluir no site. É crucial fazer uma lista de elementos de layout do site que seu cliente precisa em seu site. Junto com isso, a qualidade de um bom designer é preparar uma simulação de todo o site antes de começar a trabalhar no modelo final.
Iniciar Seu Curso de Design
animação 3D, modelagem, simulação, desenvolvimento de jogos & outros
Vários projetar empresas a adaptar a vários níveis, da pré-concepção de estratégias, que podem conter fio de enquadramento, protótipos, maquetes, 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.
Canvas
anos antes, embora houvesse muito poucos sistemas operacionais e dispositivos limitados para acessar sites, As dimensões da página foram fixadas em um ou dois tamanhos. Hoje o cenário é totalmente diferente. Os usuários finais acessam sites em Desktops de vários tamanhos, telefones celulares, iPads e Tablets. Não há chance de você corrigir sua página da web para um tamanho específico nesta situação diversificada. Mas existem alguns tamanhos padrão da indústria aplicados para cada dispositivo. Você vai lentamente encontrar o seu tamanho favorito, ou seu cliente pode encaminhá-lo para um site para imitar os tamanhos.
neste caso, estamos trabalhando nas seguintes dimensões. Não se preocupe com a altura, pois ela vai mudar com o tempo. Quanto mais conteúdo você estiver adicionando ao seu site, mais a altura será.
lembre-se, é comum rolar a página verticalmente, para que você não conserte uma altura específica para sua página da web, a menos que não queira que o usuário role em sua página inicial como 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. Existem imagens e páginas de maior resolução encontradas em iPads e alguns tablets recentemente. 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 bem organizado com cada elemento organizado de forma coerente um com o outro. E as Diretrizes de layout do site ajudam você a obtê-lo facilmente.
Prepare sua maquete.
colocar seu arquivo de maquete em seu modelo original ajuda você a economizar muito tempo. Projetar seu site se torna tão fácil que você acabará completando a estrutura em poucos minutos. No entanto, a maquete só o ajudará a projetar os quadros. Completar os elementos do design com detalhes, arranjo de tipos e alinhamento levará muito tempo do que desenhar o layout do site.
esquema de cores e outras opções
a próxima coisa A Depois de preparar sua estrutura é escolher um esquema de cores. Mas, é melhor preparar suas cores antes de começar a trabalhar no design.
a coisa toda 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 começar a trabalhar. Organizar e planejar seu trabalho economizará mais tempo e se concentrará no design sem obstrução no meio.
escolher cores pode ser uma escolha de designer se a empresa for nova e não tiver uma identidade corporativa antes. Os clientes dão uma idéia de quais tons eles querem que o logotipo ou plano de fundo deve ser em alguns casos. Na questão das empresas existentes, onde você pode precisar redesenhar um site inteiro, você pode ter que escolher as mesmas cores de acordo com as necessidades do cliente.
existem inúmeros sites que podem ajudá-lo a escolher milhões de esquemas de cores dos arquivos. Experimente os seguintes sites para desfrutar de uma ampla escolha de combinação de cores.
cor.Adobe.com
Colourlovers.com
Aqui eu escolhi alguns tons de azul para usar para o 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 cor o cliente preferirá. Assim que o cliente finalizar um esquema de cores, salve os valores de sombra e certifique-se de que as cores desempenhem um papel vital em todas as verticais da organização, especialmente na identidade corporativa.
processo de design
existem muitas maneiras de continuar seus designers. Não há regras de layout de site rígidas e rápidas para definir ou seguir o processo de design; é principalmente um processo que o designer escolherá para sua conveniência.
alguns designers querem construir os blocos e quadros inteiros e começar a trabalhar em detalhes no segundo estágio, seguido pelo tipo e, finalmente, alinhamentos e ajustes. Alguns gostam de terminar uma parte da página ao mesmo tempo e levá-la para a próxima parte. Estamos seguindo o segundo estilo.
Vamos terminar o site no seguinte passos
- Cabeçalho & Rodapé
- o Que fazer
- Serviços
- Formulário
- Notícias
- Rodapé
Cabeçalho & Rodapé
A regra geral para definir as dimensões de seu cabeçalho ou banner é deixado à sua criatividade. De acordo com as últimas tendências, os sites aparecem com uma imagem enorme que cobre toda a tela do seu computador. O estilo é referido como imagem de herói, que se tornou bastante popular recentemente.Nesse caso, começamos com o cabeçalho de altura de 120 pixels e uma altura de 550 pixels para o banner. A largura deve corresponder ao tamanho do documento.
projetos com cor sólida têm uma aparência plana que não vai bem com quadros ou imagens maiores. Para evitar a aparência plana, apliquei uma 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.
Seguinte, nós começamos a importar o Logotipo e colocá-lo no canto superior esquerdo do cabeçalho e outro maior do logotipo no centro da faixa. Você também pode observar as formas vetoriais de layout do site no canto superior direito, que são usadas para compartilhar os links de mídia social.
nesta fase, que eu terminar de adicionar o tipo de Cabeçalho & Banner parte. Nome da empresa, mensagem de marca, com links e serviços, são adicionados no texto. Você também pode observar um botão transparente no Banner.
texto Simples ou muito do tipo sem características especiais vai estragar a aparência de sua página web, a página em breve vai aborrecer o usuário, o que pode deixá-lo sair do seu site rapidamente. Confira a forma vetorial que 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 o negócio. Existem milhões de imagens disponíveis na web, e não vai demorar muito para encontrar uma imagem que se adapte às suas necessidades.
no meu caso, encontrei uma imagem de alta qualidade que acho que vai bem com o meu site. Não tenho um tema de negócios para o site, então sou livre para escolher qualquer imagem que pareça boa no banner.
tente baixar algumas imagens HD dos sites de imagens de estoque gratuitos abaixo
www..com.
Blending é uma arte que você deve dominar para produzir belas banners. Aqui eu misturei três camadas para obter o efeito mostrado na imagem acima. Aqui está o que eu fiz
- Coloque a imagem de camada em cima da cor azul banner
- Coloque o Gradiente de sobreposição acima da imagem
- Alterar a opacidade da imagem de 40 por cento e alterar o modo de mistura para a diferença.
- confira a paleta de camadas na imagem acima para entender como as camadas são empilhadas umas sobre as outras.
Este é o Cabeçalho & Banner vai olhar como acabamos de terminar o trabalho. Estamos trabalhando em uma parte ao mesmo tempo, e é hora de passar para o próximo nível.
Alinhamento é crucial quando se trata de tipo de; tenha uma ideia de como seu site deve ficar e o texto deve ser 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. 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 da estrela é Serviços de 5 estrelas.
Quando se trata de alinhar o texto, os Guias são os seus melhores amigos. A coerência dentro do tipo e dos objetos pode ser obtida fazendo bom uso do espaço em branco e das lacunas iguais entre os elementos do design. Eu usei muitas Diretrizes de layout do site para ver que todos os objetos no quadro devem manter lacunas e distâncias adequadas, O que traz uma boa quantidade de espaço em branco.
O próximo passo do nosso projeto é criar o campo de Formulário. Nesse caso, estou trabalhando em frente 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 em cima das duas camadas para obter uma aparência melhor. Jogar com os modos de mesclagem é sempre essencial ao colocar imagens maiores.
A escolha das imagens deste site não tem nenhum tema específico relacionado a ele. Acho que essa imagem ajudará o site a parecer melhor.
Coloque a imagem abaixo coloridas camada de plano de fundo. Para fixar a imagem exatamente ao tamanho da camada colorida, use opções de máscara de camada.
dê uma olhada na paleta de camadas na imagem acima. A camada de cor Azul Sólida está na parte superior da imagem, o modo de mesclagem é convertido em sobreposição e a opacidade é reduzida para 65%.
eu usei o gradiente mapa em cima das duas camadas. O modo de mesclagem é alterado para matiz e a opacidade permanece a mesma.
a caixa do formulário está pronta, o que nos leva ao final do quarto nível no design do nosso site.
o Nosso próximo nível é composto de dois quadros de texto. Assemelha-se ao nível dois da página da web, e eu usei alinhou as duas caixas semelhantes ao topo. Manter a coerência no alinhamento é uma boa maneira de usar o espaço em branco.
Como chegamos a parte final da página, é hora de olhar para as dimensões do rodapé novamente. O designer tem que planejar a altura do rodapé com base nos links que ele deve usar lá. Nesse caso, dei uma altura de 170 Pixels ao meu rodapé. A largura permanece a mesma do site.
coloque os links e imagens de acordo com sua necessidade.
com isso, concluímos a parte de design do nosso site. As combinações de cores que usamos são mínimas; fazemos uso de 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.
por favor, dê uma olhada no design da página inteira abaixo mais uma vez.
