{"id":10224,"date":"2016-09-08T11:11:38","date_gmt":"2016-09-08T14:11:38","guid":{"rendered":"https:\/\/king.host\/blog\/?p=10224"},"modified":"2025-01-28T15:37:53","modified_gmt":"2025-01-28T18:37:53","slug":"tudo-para-criar-identidade-visual-de-um-site-perfeito","status":"publish","type":"post","link":"https:\/\/king.host\/blog\/tecnologia\/tudo-para-criar-identidade-visual-de-um-site-perfeito\/","title":{"rendered":"Tudo para criar a identidade visual de um site perfeito"},"content":{"rendered":"

Para criar a identidade visual de um site, ao contr\u00e1rio do que muitos pensam, n\u00e3o s\u00e3o apenas a escolha de cores e imagens, ou logotipos<\/a> e banners digitais<\/a>, al\u00e9m de outros elementos visuais, que devem ser levados em conta.<\/p>\n

Muitos outros aspectos, como a usabilidade<\/strong>, a chamada UX<\/strong> (User Experi\u00eancia), o peso dos arquivos<\/strong>, a hierarquia das informa\u00e7\u00f5es<\/strong> e o conte\u00fado dos textos<\/strong> (e n\u00e3o s\u00f3 isso), precisam ser cuidadosamente estudados e planejados para formarem um conjunto harm\u00f4nico e que torne a experi\u00eancia de navega\u00e7\u00e3o agrad\u00e1vel e intuitiva, fazendo o usu\u00e1rio se sentir \u00e0 vontade para encontrar o que precisa com facilidade e interagir de forma natural com o conte\u00fado do site.<\/p>\n

Para ajudar voc\u00ea a entender como criar a identidade visual de um site<\/a>, separamos essas e outras dicas e explicamos alguns detalhes de como us\u00e1-las da melhor maneira poss\u00edvel.<\/p>\n

\"banner<\/a><\/p>\n

Como criar a identidade visual de um site<\/h2>\n

A regra \u201cAbove the Fold\u201d<\/h3>\n

Quando voc\u00ea abre um site, ele se apresenta em sua tela at\u00e9 um certo ponto, a partir do qual voc\u00ea ter\u00e1 que usar a barra de rolagem para ver as demais informa\u00e7\u00f5es.<\/p>\n

Esta \u00e1rea vis\u00edvel na primeira apari\u00e7\u00e3o da p\u00e1gina na tela \u00e9 chamada de \u201cAbove the Fold\u201d. E uma das regras de identidade visual para sites diz que as informa\u00e7\u00f5es mais importantes devem sempre estar presentes neste momento, obedecendo a hierarquia das informa\u00e7\u00f5es<\/strong>.<\/p>\n

Hierarquia das informa\u00e7\u00f5es no site<\/h3>\n

N\u00e3o h\u00e1 como criar uma identidade visual para sites sem se atentar para a hierarquia das informa\u00e7\u00f5es. Usualmente a primeira informa\u00e7\u00e3o a aparecer, no topo da p\u00e1gina, \u00e9 uma chamada que descreve em poucas palavras (no m\u00e1ximo umas 5) o motivo daquele site existir, a vantagem que traz para voc\u00ea. O logotipo, muitas vezes, est\u00e1 pr\u00f3ximo desta informa\u00e7\u00e3o.<\/p>\n

Em seguida, pode haver um par\u00e1grafo curto (2 linhas, no m\u00e1ximo) descrevendo com um pouco mais de detalhes a oferta daquele site.<\/p>\n

E se o objetivo deste site \u00e9 \u201cconverter\u201d alguma a\u00e7\u00e3o (venda, preenchimento de um formul\u00e1rio, baixar um arquivo etc.) um CTA (Call to Action), uma chamada incentivando o visitante a clicar em um bot\u00e3o para acionar uma dessas a\u00e7\u00f5es, deve aparecer em destaque, em cores vivas e chamativas.<\/p>\n

Outros elementos que aparecem na identidade visual de um site s\u00e3o: um menu, links para m\u00eddias sociais, depoimentos de clientes, portf\u00f3lios, informa\u00e7\u00f5es relevantes sobre a empresa e links para not\u00edcias relacionadas ao site, entre outros.<\/p>\n

Escolhendo as cores do site<\/h3>\n

Entender qual \u00e9 o significado das cores<\/a> \u00e9 fundamental para se construir a identidade visual para sites. O azul<\/strong>, normalmente, transmite tradi\u00e7\u00e3o e confian\u00e7a; o verde<\/strong>, crescimento e harmonia com a natureza; o vermelho<\/strong> pode ser excita\u00e7\u00e3o, paix\u00e3o ou mesmo aventura; o laranja<\/strong>, aconchego e calor; o rosa<\/strong> \u00e9 muito ligado ao feminino e assim por diante.<\/p>\n

Al\u00e9m do significado, \u00e9 importante compor uma paleta de cores harm\u00f4nicas, que se complementem e transmitam a hierarquia das informa\u00e7\u00f5es e campos do site com naturalidade.<\/p>\n

Se voc\u00ea optar por usar por cores contrastantes, pode funcionar, se o posicionamento de seu site, produto ou servi\u00e7o corresponder a essa percep\u00e7\u00e3o, como uma site de v\u00eddeo games ou de esportes radicais, por exemplo.<\/p>\n

Velocidade de abertura do site<\/h3>\n

Ao escolher as imagens e arquivos do seu site, \u00e9 importante que eles n\u00e3o fa\u00e7am as p\u00e1ginas abrirem lentamente. Esperar mais que 3 ou 4 segundos para isso pode fazer seu cliente desistir e retornar ao navegador em busca das informa\u00e7\u00f5es que busca com mais velocidade.<\/p>\n

Usabilidade e intuitividade<\/h3>\n

Se as pessoas j\u00e1 n\u00e3o suportam esperar um pouco para ver sua p\u00e1gina abrir, imagine se come\u00e7arem a achar complicado navegar por ela, achar as informa\u00e7\u00f5es que desejam, entender o significado dos \u00edcones que voc\u00ea escolheu ou dos textos que elaborou.<\/p>\n

\u00cdcones<\/strong> s\u00e3o excelente para auxiliar na usabilidade, mas eles t\u00eam que ser de f\u00e1cil entendimento, evite ilustra\u00e7\u00f5es que possam ser d\u00fabias e gerar mais confus\u00e3o do que esclarecimento.<\/p>\n

Quanto aos textos<\/strong>, eles s\u00e3o fundamentais na defini\u00e7\u00e3o da identidade visual de um site. Fa\u00e7a-os curtos, com 2 ou 3 linhas no m\u00e1ximo para cada par\u00e1grafo. Use negrito em palavras importantes, t\u00edtulos e subt\u00edtulos claros, al\u00e9m de bullets e listas de t\u00f3picos, que facilitam a forma\u00e7\u00e3o de um esquema mental.<\/p>\n

Caso queira criar textos mais longos, use indica\u00e7\u00f5es do tipo \u201csaiba mais\u201d ou \u201cveja mais detalhes\u201d, pois assim o usu\u00e1rio saber\u00e1 que um texto mais longo o aguarda.<\/p>\n

Com estas dicas, ao visualizar a p\u00e1gina, o leitor a \u201cescaneia<\/strong>\u201d e j\u00e1 tem ideia se o conte\u00fado o interessa realmente, despertando sua curiosidade.<\/p>\n

Estas foram algumas dicas para desenvolver a identidade visual de um site<\/strong>. Mas, no fundo, o mais importante \u00e9 entender o que \u00e9 identidade visual: o conjunto de elementos visuais, como cores, s\u00edmbolos, formas, tipografias e ilustra\u00e7\u00f5es, que comp\u00f5em a comunica\u00e7\u00e3o de uma empresa, transmitindo seu posicionamento e diferenciais.<\/p>\n

Com esta defini\u00e7\u00e3o em mente, ser\u00e1 muito mais f\u00e1cil seguir estas dicas e saber quando devem ou n\u00e3o ser relativizadas, em fun\u00e7\u00e3o de caracter\u00edsticas espec\u00edficas que voc\u00ea quer transparecer em seu site.<\/p>\n

E da mesma forma que ao criar logo para empresas o recomend\u00e1vel \u00e9 contratar um design profissional, adote esta mesma pr\u00e1tica ao desenvolver a identidade visual para sites.<\/p>\n

Este post foi escrito por Pedro Renan, CMO da We do Logos<\/a>, founder da Logovia, especialista em Inbound e Marketing de conte\u00fado.<\/p>\n","protected":false},"excerpt":{"rendered":"

Para criar a identidade visual de um site, ao contr\u00e1rio do que muitos pensam, n\u00e3o s\u00e3o apenas a escolha de cores e imagens, ou logotipos e banners digitais, al\u00e9m de outros elementos visuais, que devem ser levados em conta. Muitos outros aspectos, como a usabilidade, a chamada UX (User Experi\u00eancia), o peso dos arquivos, a […]<\/p>\n","protected":false},"author":276,"featured_media":33675,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1337,8],"tags":[1373],"class_list":["post-10224","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-ux-ui","category-tecnologia","tag-design-e-ux-ui"],"_links":{"self":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/10224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/users\/276"}],"replies":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/comments?post=10224"}],"version-history":[{"count":4,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/10224\/revisions"}],"predecessor-version":[{"id":40834,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/10224\/revisions\/40834"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media\/33675"}],"wp:attachment":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media?parent=10224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/categories?post=10224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/tags?post=10224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}