4 Dicas de design gráfico importantes para deixar seu site mais atrativo

25/07/18     Artigo Design Gráfico dicas Web Design

O Design gráfico é um dos fatores mais importantes a ser definido quando estamos abrindo uma empresa, pois através dele conseguimos expressar de forma simples e intuitiva a personalidade de nossa marca. Assim como a roupa que vestimos, é assim o design gráfico para sua empresa, uma identidade visual bem feita e estudada é fator crucial para o bom entendimento do posicionamento de sua marca diante de seus clientes e também ajuda a criar vínculos de forma eficiente, diferentemente de marcas que não tem um design gráfico estudado.

Quando o design gráfico é pouco estudado fica difícil para a marca se posicionar, identificar sua personalidade, proposta e em alguns casos até o serviço! As cores, formas, posicionamentos de elementos e imagens, tudo é utilizado e estudado para um bom reconhecimento da marca, e para seu site isso não é diferente.

Seu site, pelo menos na parte online pode ser a primeira forma de contato visual de sua marca com seus futuros clientes e, quando você cria um design único, facilitará bastante a forma com que eles irão reagir a sua marca, assim ajudando a todos a compreenderem sua marca da forma que você deseja que seja entendida e vista.

Hoje compartilharei algumas dicas de design gráfico para sites que você deve tomar nota e colocar em prática, você pode utilizar em seu site atual ou nos próximos sites que for criar. As dicas serão de nível básico, porém em alguns casos específicos será necessário um pouco de noção em programação e hoje existem muitas ferramentas online que facilitam na edição dos sites, uma delas que conheço e facilita bastante na hora da edição é a Wix, onde você pode criar um site grátis  e de forma super fácil e intuitiva.

Surgindo qualquer dúvida sobre as dicas é só colocar nos comentários, para iniciar vamos do básico que é a…

Identidade visual

A identidade visual de uma marca é composta por pontos identificáveis visualmente que farão associação direta a ela de forma gráfica, alguns destes pontos são:

  • Cores;
  • Formas;
  • Texturas;
  • Movimentos;
  • Tipografia;

Partindo para seu site, ele deverá ser utilizado seguindo obrigatoriamente todas as cores compostas de seu logo, formas representativas e bases de sua estratégia visual. Para um exemplo mais claro veja estas imagens abaixo, qual destas duas páginas iniciais estão de acordo com a identidade visual da marca?

Leve em consideração as cores e formas

Utilize as cores de seu logo em partes específicas do site, não precisa que todos os elementos de seu site fiquem identificáveis com as cores de seu logo, elementos simples como botões, links, banners, títulos, já são o suficiente para reforçar a identidade de sua marca ao decorrer do site. A próxima dica é aproveitar as cores quentes de sua identidade visual em…

CTAs ou chamadas para a ação

As CTAs (Call To Actions), são áreas onde é necessário a utilização de artifícios de design para chamar atenção de seu cliente a algo ou parte específica do site. Para estas áreas eu recomendo que sempre utilize as cores mais quentes de sua marca, caso contrário elas não irão chamar tanta a atenção. Veja um exemplo abaixo de um logo com identidade visual com a cor roxa:

Como você pode ver a área com a cor mais quente da marca (laranja) é a que mais chama atenção, você não precisa ficar limitado a criação de um banner inteiramente com a cor da identidade visual de sua marca, basta a utilização do botão com a cor mais quente que já é o suficiente para atrair olhares. A outra forma para expressar sua identidade visual em seu site é através de…

Imagens coerentes com a marca

Você pode explorar e utilizar imagens relacionadas a seu produto ou serviço, mas nada se compara quando esta foto está com as cores referenciando sua marca, as cores da imagem ajudam a reforçar a identidade de sua marca.

No momento da utilização de imagens, tenha como preferência imagens que carregam consigo pequenas partes ou elementos de formas sutis, como as cores de sua identidade visual. Caso você trabalhe com banco de imagens, você pode definir qual tipo de imagem e paleta de cores preferível, e em alguns casos você pode até editar a imagem para que ela fique o mais próximo possível.

Veja este exemplo abaixo da identidade visual das imagens no site:

Exemplo com imagem de tonalidades adequadas.

Assim como falei anteriormente sobre a Wix, além da possibilidade da criação de um site completo gratuitamente, eles contam com um banco de imagens gigantesco e livres para você utilizar em sites criados na ferramenta, não só como imagens profissionais como ilustrações, vídeos, cliparts e muito mais. Com certeza você achará imagens coerentes com sua marca, mas não fique pensando também que você ficará limitado somente ao banco de dados de imagens gratuitas do acervo Wix, você poderá subir sua própria imagem ou vídeo sem problema algum e a ferramenta ficará ao encargo de processá-las e publicar da melhor forma, portanto sem preocupação com relação a estas mídias no Wix.

Outra coisa que achei incrível, é que no próprio Wix, você pode comprar imagens da ShutterStock sem sair do criador e por fim, conectar suas contas das redes sociais como Facebook, Instagram, Flickr e sites de armazenamento como o Google Drive, Drop box entre outros, assim utilizando as imagens que estão em cada conta, fantástico!

Obs.: Após publicar suas imagens no site, elas estarão disponíveis para usar quando possível, a ferramenta guarda todas as suas mídias em um banco de dados interno só seu onde você poderá utilizar as imagens que foram utilizadas anteriormente em qualquer ocasião.

Além da identidade visual, outro detalhe que as pessoas pecam na hora da utilização das imagens, é na resolução, uma das coisas mais chatas é vermos imagens em resolução baixa, fora o desconforto visual, dificultando a identificação e passando a ideia de descuido, então atenção neste quesito.

Por último na parte de imagens (não é da parte de design, porém ajuda bastante :) ), sempre tome em conta o peso da imagem. Em alguns casos salvamos imagens pesadas e acabam prejudicando o desempenho de nosso site na parte de carregamento, então trabalhe com imagens com no máximo 700kb de peso, porém o ideal é sempre estar próximo a casa dos 200kb para menos. A próxima e última dica é a atenção ao…

Posicionamento das informações

Quais as informações que você deseja que seu cliente veja primeiro? A história de sua empresa? Seus serviços? Produtos? Não importa, quando o assunto é relevância de conteúdo, o posicionamento conta muito, não somente em questões de qual informação aparece primeiro no site.

Hoje a página inicial não é mais tão relevante comparado as páginas internas de seu site, quando algum cliente procura por seus serviços no Google, assim que ele clica no resultado de pesquisa ele é direcionado para página específica do que ele estava procurando e não para a página inicial de seu site. São nestas páginas que devemos trabalhar com o posicionamento dos elementos e conteúdo, pois em alguns casos temos mais a oferecer do que o possível cliente está vendo no momento da visita. Veja este exemplo abaixo, qual das duas páginas é mais interessante para seu cliente?

No modelo acima, temos um exemplo ótimo quando a questão é, “facilitar com que o cliente entre em contato com sua marca”, o modelo trabalha com o formulário de contato estrategicamente na lateral, facilitando ainda mais o contato, que quando comparado ao da outra, o cliente demoraria um pouco mais para achar os pontos de contato, onde ele poderia até se distrair em outra página e acabar não entrando em contato, acredite, isso acontece.

Na parte de posicionamento, em alguns casos será necessário ter entendimento em programação, porém assim como recomendado, na ferramenta de criação de sites Wix, todos os temas de sites vem completos na parte de posicionamento e design bem pensado, permitindo você elaborar estratégias eficientes para todos os visitantes de seu site, além do design de site pré desenvolvido, você pode editar qualquer um de forma fácil somente arrastando os elementos e áreas de interesse como desejar, são possibilidades infinitas de edição.

Uma funcionalidade que achei muito legal e que dispensa um trabalhão são as sugestões de layout. Além da flexibilidade de edição, no painel de administração de seu site, clicando no botão “+”, você pode adicionar uma nova seção a seu site, e logo na lateral direita você verá inúmeras áreas de seção prontas para serem utilizadas, desde textos simples a galerias completas. Detalhe, não é necessário ter entendimento em programação, o painel é simplificado e sem segredo.

Alguns dos inúmeros modelos e possibilidades de design dos templates Wix

Além desta parte de posicionamento outro recurso que achei muito interessante na ferramenta é a definição de cores. Você não precisa alterar as cores de cada parte do site quando a identidade visual de sua marca muda, você pode definir a cor de seu site baseado em sua identidade visual em um único local, isso mesmo, em um único local, no fim a ferramenta define as cores de todos os elementos mais importantes da estrutura do site inteiro, assim dispensando seu trabalho e sobrando mais tempo para você focar em outras responsabilidades, a ferramenta é ótima!

Chegamos ao fim, espero que tenha gostado das dicas, caso tenha alguma dúvida, fique a vontade para deixar na área de comentários logo aí abaixo, até a próxima.



Novidades do BT por email

Coloque abaixo eu email para receber em primeira mão todas as novas matérias do BT, de tutoriais, cursos e inspirações!

Comente aqui

Publique um comentário abaixo

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

compartilhe
compartilhar no Facebook compartilhar no Twitter compartilhar no Linkedin compartilhar no Pintrest compartilhar no WhatzApp compartilhar no Skype compartilhar no pocket
Sobre o BT

Tudo começou com uma simples ajuda, um colega de trabalho estava tentando criar o seu álbum de fotos digital com uma música de fundo para poder dar de presente em seu casamento, até ai não tem nada ver com Bons Tutoriais, mas vamos chegar lá... Veja mais.

Patrocínio
Desenvolvimento de identidades visuais e estratégias de marketing digital
Recomendamos
AE Dicas Comunique 9 Minuto Design Mkt News Pixel Coffee Publicinove Revelando Ideias Sala7Design Tutorial Web Design
Criar um site

© Bons Tutoriais | Desde 2008 - Direitos reservados. ❤ Design | Ps+Ai+In | PHP+HTML+CSS | WordPress