photoshop [CONCEITO/PRÁTICA] Criando um Layout

[Jm' 962]

Introdução

 

Este tutorial servirá como recurso para a Profissional Design Challenge #10, estará dividido entre: Conceito, Prática e alguns exemplos.

 

Caso queira facilidade para acessar apenas uma parte do conteúdo, pressione Ctrl+F e digite-o.

 

 

Conceito

Quais são as características de um bom layout para um site?

 

Sites, assim como outras peças de comunicação, baseiam-se em tendências de mercado. São elas que indicam padrões de cores, fotos, ilustrações, tipografias e diagramação. Todavia, não é somente através de tendências que construímos os layouts. Para nossos clientes, consideramos, prioritariamente os seguintes fatores:

 

 

Personalidade da empresa, da marca, ou do profissional

 

É possível transmitir um pouco (ou muito) da personalidade da empresa através do layout. A combinação de cores, a escolha de tipografia, as imagens, os gráficos e a diagramação somados podem construir um ar sério ou despojado, tradicional ou moderno, mostrando uma empresa de visão e presença ou apenas informar que você é mais um no mercado.

 

Considere o seu site como a sua embalagem na internet. Imagine que você está disputando o espaço em uma prateleira virtual. A embalagem mais bonita não é sempre mais atraente?

 

Cores mais fortes como o vermelho e o laranja podem dar um aspecto mais agressivo; azul e cinza transpassam credibilidade; verde e tons de amarelo algo mais natural; preto, chumbo e marrom tradição e elegância.

 

A tipografia também compõe esse processo. Fontes serifadas são mais indicadas para textos longos, e devem ser dispostas em parágrafos curtos e soltos (não justificados). Fontes alongadas e sem serifas ficam melhores em títulos. Elas passam noções de limpeza, modernidade e dinamismo.

 

Na composição de um layout, sempre que possível, procuramos trabalhar com elementos que representem a empresa e que mostrem a preocupação que temos com os detalhes. Assim, inserimos texturas, ícones, símbolos, ilustrações e gráficos que facilitem a compreensão da mensagem pelo cliente final e favoreçam a sua formação de opinião à favor da empresa.

 

 

Diagramação e hierarquia

 

Um site tem que ser clean. Sua solução gráfica deve ser simples, porém não simplória. E a linha que separa esses dois conceitos é extremamente tênue.

 

Colocar muitas chamadas e caixas de texto, pop ups, balões, quadradinhos piscando, animações e afins vai deixar o site poluído e pesado. Se o internauta já está no seu site a etapa mais importante para atraí-lo já foi percorrida. Por isso, deixar a marca gigante e querer que absolutamente tudo chame a atenção não vai fazer diferença para quem está navegando. Pelo contrário, sem hierarquia e facilidade de encontrar informações seu potencial cliente pode simplesmente apertar um botão e fechar a janela.

 

Por outro lado, a falta de elementos pode deixar a sua página "pelada" e transmitir a sensação de que você não tem muito a informar, pouco a acrescentar.

 

 

Fotos de qualidade

 

A qualidade de imagem faz diferença em um layout. Muitas vezes construímos sites muito bonitos e expressivos que são destruídos quando inserimos imagens escuras, desfocadas, de pessoas e/ou objetos com as quais nosso público-alvo não se identifica.

 

É muito comum o cliente falar "Ah, para isso eu tenho muitas fotos" e na hora de fazermos a seleção praticamente nada se aproveitar. Apesar de uma sessão de fotos com um bom tratamento de imagens ser muito mais dispendiosa, o investimento vale a pena quando analisamos o resultado final.

 

Nunca podemos esquecer que mesmo através da internet estamos vendendo sonhos. Se não encantarmos os internautas eles não comprarão o que quer que seja que estivermos oferecendo.

 

 

Legibilidade

 

A legibilidade é um fator crucial. Principalmente para conteúdos longos.

 

O tamanho da fonte, as cores de contraste e os fundos precisam ser projetados para facilitar a leitura. Fundos claros contrastam e combinam com fontes escuras. É uma opção segura.

 

Sobreposições de azul com vermelho, verde e vermelho, amarelo com roxo, laranja com azul, rosa com roxo e similares devem ser evitadas a todo custo em grandes massas de texto, mas podem ser interessantes em títulos. Tudo varia conforme os tons e tamanhos escolhidos. Neste sentido, são necessários muitos testes.

 

 

Navegabilidade

 

Sites precisam ser fáceis de navegar. O que for link tem que ter cara de link e as informações precisam ser fáceis de encontrar. Tudo o que tiver muitos níveis de profundidade de acesso pode acabar não sendo visto pelas aranhas dos sistemas de busca e não ser devidamente indexado.

 

 

 

Prática

Aprenda a criar um layout com efeitos usando o photoshop. O layout criado tem bastante detalhes e requer um bom conhecimento na ferramenta.

 

Para auxiliá-los na Profissional Design Challenge (vulgo PDC), estarei disponibilizando dois modos de tutoriais práticos: Em video-aula e em texto.

 

Quero deixar claro que todo conteúdo é de responsabilidade de seus autores.

 

Para conferir o tutorial escrito, basta abrir o seguinte link:

Tutorial: Criando layout no Photoshop

 

Porém, recomendo a vocês o tutorial em forma de vide-aula, pois, além de ser mais explicativo, é mais conceituado.

 

 

E, se por algum acaso, vocês se interessem pelo assunto e queiram realmente criar seu website, template, há uma outra video-aula interessante (que torna isso possível). Confira:

 

 

 

 

Exemplos

Aqui será disponibilizado vários exemplos de layouts, que irão servir como inspirações para o seu. Espero que consiga um bom resultado.

 

 

website layout 81 by ~tehacesequence on deviantART

 

 

Fourias Ju Website Layout by ~IkeGFX on deviantART

 

 

Image Hosting Layout by ~ejsing on deviantART

 

 

Aceo layout by ~Fictionfourtyfour on deviantART

 

 

 

Créditos

Agradeço a todos pela atenciosa leitura.

 

 

Conteúdo

Jm'

Criação de sites, Desenvolvimento de sites, Web Design em Curitiba - Conceito Ideal

 

 

Formatação

Jm'

 

 

Atenciosamente,

Equipe Design Zone.

[Marcoslfgf 0]

Otimo conteúdo creio que ajudara muita gente,

Obrigado por compartilha conosco,

WC agradece.

[xXIAnonymousIXx 0]

Eu gostei muito

Agora vou fazer meu photoshop sempre assim

[Dawnt 0]

ótimo, gostei muito, Obrigado por postar

Jm..

[-'[M]ath 0]

' gostei porem nao tenho o photoshop nem a pratica eu vo esta fazendo um curso pra depois usa isso ' mais mesmo assim obrigado !

[Leão 16]

O que faria sem a sua ajuda Jm'? *-*

Obrigado pelo tutorial, por causa dele pude participar do PDC Especial ^^

 

Abraços.