A princípio criar o design do seu site parece bem simples, mas durante o caminho você pode facilmente se perder em meio a tantos detalhes.
“Quais cores utilizar? E quanto às imagens? Como organizar a navegação?” Estas perguntas provavelmente aparecerão durante o processo de criação do seu layout e aqui estão as respostas para te ajudar nesta jornada criativa.
A ideia
Antes de tudo tenha em mente seus objetivos, qual o resultado que espera ter quando seu layout estiver finalizado, imagine, idealize.
Este primeiro passo é importante porque ele dará as diretrizes para o seu projeto. Se precisar, liste os itens indispensáveis e os mais desejados (exemplo: banner, conteúdo dividido em colunas).
Vale lembrar que também devemos pensar se a ideia é possível de ser executada. É fácil imaginar um efeito bonito, porém nem sempre conseguimos reproduzir este efeito. Sonhe, imagine, mas mantenha o pé no chão. Analise seus concorrentes e lojas de segmentos semelhantes, veja o que eles têm como pontos positivos e negativos, use-os a seu favor.
Experiência de usuário
Um layout de sucesso deve ser pensado para o usuário, ser intuitivo, acessível, agradável e deve atender as necessidades de seus clientes. Imagine o seu público-alvo, o que eles gostam nos seus produtos, seus desejos e necessidades, como se comportam na web, some todas essas informações e crie uma experiência única para eles em seu site. Cores, imagens, conteúdo, tudo deve ser disposto na tela como uma única peça com diversos detalhes que juntos, tem harmonia. Lembre-se de que um site dinâmico e interativo faz da experiência algo agradável e até divertido.
Rascunho
Após idealizar seu projeto e listar seus desejos e necessidades, agora é hora de rascunhar. Rabisque tudo, pegue uma folha e passe as ideias visuais que imaginou para o papel. Desta forma, você não corre o risco de esquecer algo genial que imaginou e as ideias começam a tomar forma. Outra ideia também é reunir sócios e funcionários para um brainstorming.
Estrutura
Você já ouviu falar de wireframe? Wireframe é uma representação gráfica básica sobre a estrutura do site. É muito importante porque ele permite a definição da disposição dos elementos e a organização da hierarquia de informação. Antes de começar códigos ou artes no photoshop, é importante saber onde as informações serão dispostas.
Design Responsivo
Responsividade é o conceito 
mais utilizado nos últimos tempos para a criação de sites otimizados. Um site responsivo é aquele que se adapta a diversos dispositivos (smartphones, tablets), hoje é praticamente uma obrigação do desenvolvimento criar páginas responsivas, já que grande parte dos usuários ativos da internet acessam as páginas através de dispositivos móveis sensíveis ao toque. Ao projetar seu site é importante atentar-se a estas necessidades de adaptação. Em SEO, por exemplo, o Google utiliza o quesito “responsividade” como técnica de otimização.
Cores
Além da paleta de cores usual da sua empresa (as cores que representam a sua marca), você precisará de alguns tons extras, alguns para fundos, outros para sessões do site em destaque.
Tenha sempre em mente que o seu produto ou serviço deve ser o centro de toda a atenção no site. Evite utilizar fundos escuros, eles tendem a tirar o foco do que interessa e deixam o espaço menor.
Mantenha certa linearidade nas cores. Se você, por exemplo, utilizou na página inicial a cor vermelha para uma sessão X do site, continue utilizando esta mesma cor para esta sessão, assim você cria uma imagem fixa e evita confusões quanto à navegação do site.
As cores também dizem muito do seu público-alvo, geralmente sites muito coloridos não são agradáveis para um público adulto.
Procure sempre obter harmonia entre as cores, lembre-se sempre: menos é mais!
Existem sites especializados em gerar esquemas de cores, um deles é o Colourlovers, totalmente gratuito.
Tendências
É sempre válido estudar o que está sendo feito em Web Design, sempre existe alguma tendência que pode trazer uma solução técnica e estética para o projeto de layout. Atualmente a tendência mais utilizada na web é o Flat Design, presente no Material Design da Google que traz cores sólidas, formas geométricas e ícones minimalistas produzindo ótimos resultados.
Uso de imagens
Todos nós sabemos que uma imagem diz mais do que mil palavras, por isso não se esqueça desta parte. Imagens transmitem mensagens, transformam a atmosfera da página.
Se você não possui imagens próprias existem bancos de imagem grátis que disponibilizam fotografias em alta resolução para uso livre, um deles é o Unsplash, site que a cada 10 dias posta 10 novas fotografias.
Branding, a imagem da empresa
Pense na sua empresa (missão, visão e valores), posicionamento e relação com os clientes, toda a sua imagem corporativa também deve estar presente no site. Aqui não falamos somente em questão de cores da marca, mas sim de como ela é vista. O site também faz parte da imagem institucional, é necessário transmitir confiança e credibilidade mesmo no meio online.
Menu
A navegação do seu site precisa contar uma história, deve começar com a página inicial e continuar indo até as páginas descendentes. Tudo em ordem de relevância, se você oferece um produto ou serviço, estas páginas devem ser as primeiras do menu. Evite criar navegações gigantescas, pense sempre na facilidade de acesso às informações.
Destaque ao produto/serviço
O seu layout pode estar esteticamente perfeito, porém, se os seus produtos não forem o foco da atenção o alvo não foi acertado. Nunca desvie a atenção do usuário para outros conteúdos que não sejam relacionados aos seus produtos.
Sociabilidade
A interação entre o site e as redes sociais é essencial para um bom relacionamento entre a empresa e os consumidores, por isso é necessário reservar um espaço para widgets sociais:
Efeitos
Hoje em dia existem diversas possibilidades em efeitos para web sites. Efeitos deixam o site dinâmico e intuitivo, melhoram a experiência de navegação. A biblioteca Jquery é ideal para reproduzir efeitos e criar interação entre a interface do site e o usuário.
Web Fonts
Anos atrás no desenvolvimento de sites, ficávamos presos às fontes nativas dos computadores, as possibilidades em questão de tipografia eram limitadas à Arial, Verdana, Times New Roman e outras. Hoje existem as web fonts, ferramentas de uso livre que oferecem um grande número de fontes exclusivas, como o Google Web Fonts e o Adobe Edge Web Fonts.
O uso de fontes nativas no site também é importante porque não pesam no carregamento de páginas, o ideal é equilibrar o uso intercalando as fontes.
Frameworks
Framework é um conjunto de ferramentas (HTML, CSS e JavaScript) que colaboram para o desenvolvimento de sites. Essas ferramentas customizam o site e disponibilizam diversos elementos, desde botões clicáveis, ícones e tipografias até sliders e validação de formulários. Um dos mais populares na web é o Bootstrap, totalmente gratuito.
Está pronto para começar? Crie o melhor layout da web e não se esqueça dessas dicas!
Tem alguma dica para compartilhar com a gente? Deixe nos comentários!
