5 dicas de design para criar um site profissional

“A primeira impressão é a que fica”. Quan­do se tra­ta de um site profis­sion­al, um blog ou até mes­mo uma pági­na nas redes soci­ais, esse con­heci­do jargão se tor­na a mais pura ver­dade. Nada menos que 94% das primeiras impressões sobre um site são rela­cionadas ao design.

Seus vis­i­tantes bus­cam soluções efi­cientes em todos os sen­ti­dos, a começar pela apre­sen­tação. Por mais com­ple­to e rel­e­vante que seja o con­teú­do, a maio­r­ia das pes­soas descar­ta pági­nas que não sejam visual­mente atraentes, intu­itivos ou fáceis de nave­g­ar.

A importân­cia do design em um site
O design de um site vai muito além da escol­ha de cores ale­gres, letras impac­tantes ou belas ima­gens. Esse con­jun­to deve ser cuida­dosa­mente plane­ja­do para levar o cliente a tomar a ação dese­ja­da — seja a com­pra de um pro­du­to, a inscrição em um cur­so, a leitu­ra de um arti­go até o final ou o com­par­til­hamen­to de infor­mações úteis com sua rede de ami­gos.

A grande função do design em um site é faz­er com que sua mar­ca seja ime­di­ata­mente recon­heci­da; que todos os ele­men­tos grá­fi­cos traduzam a iden­ti­dade e a mis­são da empre­sa, agre­gan­do val­or ao pro­du­to, além de trans­mi­tir profis­sion­al­is­mo, con­fi­ança e segu­rança ao vis­i­tante.

Assim, o design deve aju­dar o cliente a sim­pa­ti­zar com sua pági­na e realizar ações de for­ma sim­ples e nat­ur­al.

Mas como cri­ar um site que con­tenha infor­mações úteis e rel­e­vantes e que, ao mes­mo tem­po, apre­sente um design orig­i­nal, atraente e de aspec­to profis­sion­al?

Estru­tu­ra e con­teú­do
De acor­do com uma pesquisa real­iza­da pela Adobe em 2015, se os entre­vis­ta­dos tivessem ape­nas 15 min­u­tos para aces­sar um con­teú­do, 66% dis­ser­am dar pri­or­i­dade a algo que exibisse um design boni­to e bem pro­je­ta­do ao invés de con­teú­do puro e sim­ples. Essa mes­ma pesquisa apon­tou que 38% das pes­soas aban­don­am o site, caso o con­teú­do não apre­sente um lay­out atra­ti­vo ou ima­gens de boa qual­i­dade.

Isso sig­nifi­ca que é pri­mor­dial equi­li­brar as neces­si­dades do seu negó­cio com um toque de beleza, esti­lo e elegân­cia, ao mon­tar a estru­tu­ra do seu site.

Siga as próx­i­mas dicas com atenção para garan­tir que você forneça a mel­hor exper­iên­cia pos­sív­el para seus vis­i­tantes.

1. Optan­do pela mel­hor estru­tu­ra de lay­out
   Seu primeiro desafio será a escol­ha do lay­out para seu novo site. Em uma ráp­i­da pesquisa, você pode perce­ber que são várias as opções de estru­tu­ra em: número de col­u­nas, posição da bar­ra de menu, taman­ho do rodapé… basi­ca­mente, toda a dia­gra­mação da pági­na.

Não existe uma fór­mu­la mág­i­ca para apre­sen­tar o lay­out per­feito para seus vis­i­tantes. Cada tipo de estru­tu­ra é mais ade­qua­da para uma pro­pos­ta difer­ente.

Por exem­p­lo, se você foca em tex­tos des­critivos para ger­ar resul­ta­dos, o ide­al é que a área de pub­li­cações seja maior e mais desta­ca­da, enquan­to sites de cap­tação de clientes para televen­das devem dire­cionar a atenção às infor­mações de con­ta­to.

Mes­mo que você não ten­ha exper­iên­cia com web­de­sign, o Cri­ador de Sites da Host­Ga­tor per­mite que você monte uma pági­na com a sua cara e com um lay­out ade­qua­do. Você tem à dis­posição vários temas pron­tos para escol­her e per­son­alizar.

1. Definin­do as cores do site
   Qual é a sua cor favorita? Essa respos­ta cer­ta­mente irá vari­ar de pes­soa para pes­soa. Cada indi­ví­duo responde de maneira difer­ente a deter­mi­na­dos estí­mu­los, sejam eles ver­bais ou visuais.

No entan­to, a ciên­cia já com­pro­vou que o cére­bro humano pos­sui um cer­to padrão de com­por­ta­men­to ao se deparar com as mais difer­entes tonal­i­dades. É a chama­da psi­colo­gia das cores.

A Psi­colo­gia em mar­ket­ing e pub­li­ci­dade já é uti­liza­da há bas­tante tem­po para definir tendên­cias de com­pra ou com­por­ta­men­tos do con­sum­i­dor. A uti­liza­ção de deter­mi­na­da com­bi­nação de cores, de maneira ger­al, pode atrair ou repelir clientes ou futur­os com­pradores de seu pro­du­to ou serviço.

As cores para um site profis­sion­al devem ser cuida­dosa­mente pen­sadas, a fim de provo­car as emoções cer­tas, influ­en­cian­do de maneira pos­i­ti­va as decisões do vis­i­tante.

É ver­dade, não exis­tem regras ou cores cer­tas ou erradas, aque­las que trazem grande número de con­ver­sões, cliques ou ven­das. A com­bi­nação ide­al depen­derá do obje­ti­vo do seu site e do per­fil de vis­i­tante dese­ja­do. E para chegar a um resul­ta­do efi­ciente, você pre­cisa anal­is­ar todas as opções.

A Psi­colo­gia tam­bém rev­ela o sig­nifi­ca­do das cores e como elas podem influ­en­ciar, provo­can­do emoções, sen­ti­men­tos, per­cepções e dese­jos:

Amare­lo: É a cor do sol. Trans­mite calor, ale­gria e otimis­mo. É bril­hante, remete ao ouro e à ener­gia.
Laran­ja: É uma cor mar­cante, trans­mite entu­si­as­mo e dis­posição. Rep­re­sen­ta a cria­tivi­dade e a ousa­dia.
Ver­mel­ho: É um cor quente e poderosa. Sim­boliza o amor, a sen­su­al­i­dade, o fogo e tam­bém a urgên­cia e a atenção.
Roxo: Cor da cria­tivi­dade, da imag­i­nação, da intu­ição e sabedo­ria. Tam­bém evo­ca a espir­i­tu­al­i­dade e o mist­i­cis­mo.
Azul: Cor pro­fun­da que remete à cal­ma e à tran­quil­i­dade. Inspi­ra o equi­líbrio, a con­fi­a­bil­i­dade e a força.
Verde: É a cor da natureza. Sim­boliza o cresci­men­to, a fer­til­i­dade e tam­bém a esper­ança e a saúde.
Cin­za: Cor neu­tra, mas que traduz elegân­cia e int­elec­tu­al­i­dade.
Pre­to: É con­sid­er­a­da ausên­cia de cor. Usual­mente uti­liza­da em com­bi­nação com out­ras cores, é a respon­sáv­el pelo acaba­men­to, requinte, con­ferindo cred­i­bil­i­dade e esti­lo.
Bran­co: É a soma de todas as cores. Sim­boliza a pureza, a serenidade e a paz.
Por fim, as for­mas geométri­c­as uti­lizadas ao lon­go de seu site tam­bém são capazes de trans­mi­tir deter­mi­na­dos sen­ti­men­tos.

Quadra­dos e retân­gu­los: As for­mas retas deno­tam obje­tivi­dade, racional­i­dade e igual­dade. Inspi­ram con­fi­ança, segu­rança e a esta­bil­i­dade de deter­mi­na­da mar­ca;
Cír­cu­los: Em razão do for­ma­to curvilí­neo, os cír­cu­los pro­movem a ideia de movi­men­to con­tín­uo, de infini­to, de abundân­cia, atem­po­ral­i­dade e plen­i­tude;
Triân­gu­los: Muito uti­liza­dos em con­tex­tos reli­giosos, eles indicam ener­gia, o vig­or, a direção e a espir­i­tu­al­i­dade. Os triân­gu­los tam­bém evo­cam o cresci­men­to, o equi­líbrio, a har­mo­nia e a pro­por­cional­i­dade.
Para tomar a mel­hor decisão na hora de com­bi­nar cores, você pode con­ferir este guia com dezenas de estu­dos de caso.

1. Escol­hen­do as fontes
   Assim como as cores, a tipografia uti­liza­da em seu site pode cri­ar uma exper­iên­cia pos­i­ti­va ou neg­a­ti­va para os vis­i­tantes.

A Quick Sprout real­i­zou um lev­an­ta­men­to inter­es­sante, onde con­sta­tou as seguintes tendên­cias sobre fontes:

O taman­ho da fonte para o cor­po do site não deve ser infe­ri­or a 11 pon­tos, para não difi­cul­tar a leitu­ra e, con­se­quente­mente, faz­er com que a pes­soa per­maneça mais tem­po em sua pági­na;
Mais de 60% de blogs famosos e rel­e­vantes usam letras no taman­ho 13 ou 14;
Quase 70% de sites pop­u­lares man­têm o taman­ho da fonte do títu­lo entre 17 e 25 pon­tos, garan­ti­n­do que assim obtiver­am mel­hores resul­ta­dos; em mais de 50% dos casos, as fontes uti­lizadas para o títu­lo foram Ari­al ou Geor­gia;
As fontes para o cor­po do tex­to mais uti­lizadas por 90% dos maiores blogs são:
– Ver­dana: usa­da em 34% dos casos;
– Luci­da Grande: usa­da em 24% dos casos;
– Ari­al: usa­da em 18% dos casos;
– Geor­gia: usa­da em 14% dos casos.
Fontes com ou sem ser­i­fa? Em uma definição genéri­ca, as ser­i­fas são os pequenos traços e pro­longa­men­tos que ocor­rem no fim das hastes das letras. Assim, temos as famílias de fonte serif (com ser­i­fa) e sans serif (sem ser­i­fa).

E se você está se per­gun­tan­do o porquê dess­es detal­h­es, sai­ba que a escol­ha da fonte para deter­mi­na­do local do seu site pode impactar dire­ta­mente no lay­out e, con­se­quente­mente, na exper­iên­cia do usuário.

Fontes com ser­i­fa são ampla­mente uti­lizadas em mate­ri­ais impres­sos, mas podem não fun­cionar muito bem em con­teú­dos online, difi­cul­tan­do a com­preen­são e a leitu­ra, prin­ci­pal­mente se o aces­so for de um tablet ou smart­phone, cujas telas são bem menores. Por essa razão, as fontes sem ser­i­fa são uti­lizadas pela maio­r­ia dos sites no cor­po do tex­to.

1. Design de con­teú­do
   De maneira resum­i­da, tudo o que você bus­ca na inter­net é con­teú­do.

Seja para con­sul­tar a pre­visão do tem­po, realizar uma com­pra, ver­i­ficar men­sagens ou com­par­til­har fotos e vídeos nas redes soci­ais, é um con­teú­do o que você está pesquisan­do, con­sumin­do ou envian­do.

E para que seu site seja facil­mente encon­tra­do por seu públi­co-alvo, seu con­teú­do pre­cisa otimiza­do para as fer­ra­men­tas de bus­ca.

Essas fer­ra­men­tas têm como maiores pilares a relevân­cia e a qual­i­dade dos con­teú­dos. Eles uti­lizam ess­es e out­ros atrib­u­tos para ran­quear e exibir os resul­ta­dos a quem está procu­ran­do por deter­mi­na­da infor­mação, pro­du­to ou serviço.

Diante dis­so, você deve ado­tar as seguintes práti­cas para ficar bem posi­ciona­do e, con­se­quente­mente, ser encon­tra­do:

Disponi­bi­lizar con­teú­do orig­i­nal e rel­e­vante, que defin­i­ti­va­mente aten­da ao que seu públi­co está procu­ran­do, fornecen­do, inclu­sive, a solução de prob­le­mas;
Pro­por­cionar uma exper­iên­cia mar­cante e praze­rosa, inde­pen­den­te­mente do for­ma­to uti­liza­do (tex­to, fotos ou vídeos);
Uti­lizar palavras-chave que estão em con­formi­dade com o que o seu públi­co está pesquisan­do;
Prover ima­gens de boa qual­i­dade, rela­cionadas com o tex­to em questão e em quan­ti­dade sufi­ciente para que­brar grandes blo­cos de infor­mação;
Dis­por o con­teú­do de maneira que ele pos­sa ser aces­sa­do de qual­quer dis­pos­i­ti­vo, sem per­da de qual­i­dade.
Faz­er uso racional dos espaços em bran­co do site, pro­por­cio­nan­do uma leitu­ra leve, agradáv­el e com­preen­si­va.
Ah, e não subes­time os pop ups! Muitas empre­sas con­seguiram aumen­tos con­sid­eráveis em suas ven­das empre­gan­do essas janelin­has para exibir ofer­tas exclu­si­vas.

Assim como o tex­to deve ser con­vin­cente, o design do pop up deve ser pro­je­ta­do para cumprir a sua mis­são, seja uma ven­da, o down­load de um e‑book ou a inscrição em uma newslet­ter.

1. Uti­lizan­do ima­gens
   “Uma imagem vale mais que mil palavras”. Há sécu­los, esse dita­do pop­u­lar resume o poder da comu­ni­cação visu­al. Ain­da que tex­to apre­sente o for­ma­to ide­al para ser recon­heci­do pelos motores de bus­ca, ninguém con­segue nave­g­ar por muito tem­po em um site que con­tenha ape­nas grandes blo­cos de infor­mação escri­ta, sem fotos, ima­gens ou ilus­trações. A exper­iên­cia aca­ba fican­do monó­tona para o usuário.

Como bem infor­ma um arti­go (em inglês) pub­li­ca­do pela Moz, “as pes­soas enten­dem ima­gens mais rap­i­da­mente que palavras, lem­bram-se delas por mais tem­po e, se há uma dis­crepân­cia entre o que vemos e o que ouvi­mos, nos­sos cére­bros escol­hem acred­i­tar naqui­lo que veem.”

Assim, as ima­gens são um fator fun­da­men­tal para enrique­cer a exper­iên­cia do usuário, har­mo­nizar o site, bem como para trans­mi­tir emoções e des­per­tar dese­jo e moti­vação em seus leitores, prop­i­cian­do o enga­ja­men­to com sua mar­ca.

Dessa for­ma, ima­gens ideais são aque­las capazes de envolver seu públi­co con­sciente e sub­con­scien­te­mente.

Hoje viven­ci­amos uma ver­dadeira cor­ri­da con­tra o tem­po e as ima­gens são recur­sos valiosos, capazes de trans­mi­tir diver­sas infor­mações em um úni­co for­ma­to. Daí a importân­cia de mesclar ilus­trações e tex­tos num lay­out ide­al, sat­is­fazen­do de maneira mais abrangente as expec­ta­ti­vas de seus clientes.

Das boas práti­cas para o uso de ima­gens em sites profis­sion­ais, desta­camos:

Pro­cure uti­lizar ima­gens de alta qual­i­dade, orig­i­nais ou com licença livre para o uso. Busque por ban­cos de ima­gens con­fiáveis;
Dedique um tem­po real­izan­do a edição das ima­gens para que fiquem dimen­sion­adas cor­re­ta­mente e cer­ti­fique-se de que a sat­u­ração e o bril­ho este­jam ade­qua­dos. Explore os efeitos visuais para torná-las exclu­si­vas;
Escol­ha ima­gens que sejam com­patíveis com os inter­ess­es do seu públi­co.
VEJA TAMBÉM: Como otimizar as ima­gens do seu site
Para que o site aten­da aos obje­tivos pro­pos­tos é pre­ciso plane­jar, estu­dar, tes­tar.

Como você pôde perce­ber, nen­hum aspec­to do design do seu site deve ser pen­sa­do aleato­ri­a­mente. Des­de a escol­ha do nome e do domínio até a definição das cores ou das ima­gens, pas­san­do pelo con­teú­do, você deve deter­mi­nar cuida­dosa­mente cada detal­he, de maneira analíti­ca.

O design de um site profis­sion­al é um grande proces­so de plane­ja­men­to. Con­tu­do, não é mais necessário ser um design­er profis­sion­al para pro­duzir con­teú­do grá­fi­co de qual­i­dade para seu site e redes soci­ais.

Tudo o que você pre­cisa é de uma platafor­ma com mod­e­los de design per­son­al­izáveis e uma pita­da de cria­tivi­dade. É claro, depois das dicas que você apren­deu aci­ma, ficou ain­da mais fácil, não é?

Mãos à obra!

Este arti­go foi escrito por Luciana Nogueira Soares, Brazil Growth Lead do Can­va.