{"id":84319,"date":"2019-11-23T15:33:09","date_gmt":"2019-11-23T15:33:09","guid":{"rendered":"https:\/\/fredericocarvalho.pt\/?p=84319"},"modified":"2021-09-28T21:04:41","modified_gmt":"2021-09-28T20:04:41","slug":"uma-estrategia-para-construir-um-site","status":"publish","type":"post","link":"https:\/\/fredericocarvalho.pt\/uma-estrategia-para-construir-um-site\/","title":{"rendered":"Como criar uma estrat\u00e9gia para construir um site: o arranque"},"content":{"rendered":"<p>Como sabemos um site geralmente ocupa um dom\u00ednio (<a href=\"http:\/\/www.oseunome.com\" target=\"_blank\" rel=\"noopener\">www.oseunome.com<\/a>)<\/p><p>Ter um site \u00e9 como ter uma casa pr\u00f3pria, uma plataforma que interliga v\u00e1rias outras plataformas e utilizadores, ao mesmo tempo que potencia a mensagem que desejamos partilhar, concentrando informa\u00e7\u00e3o, projetando orienta\u00e7\u00e3o, educa\u00e7\u00e3o e uma introdu\u00e7\u00e3o aos objectivos da empresa, credibilizando assim a organiza\u00e7\u00e3o.&nbsp;<\/p><p>Para construir um site precisa de escolher a plataforma para constru\u00e7\u00e3o de sites, escolher o dom\u00ednio do seu site (www.) e o terceiro passo passa por configurar e personalizar o seu website.<\/p><p>Por norma, as p\u00e1ginas web devem obedecer a um design comum e a itens de navega\u00e7\u00e3o, formando um grupo integrado de p\u00e1ginas orientadas, com links para ajudar o visitante a encontrar informa\u00e7\u00e3o e a navegar por \u00e1reas de interesse.&nbsp;<\/p><p>Exemplo do Menu de um site: Sobre &gt; Servi\u00e7os &gt; Media &gt; Blog &gt; Contactos<\/p><p>Criar um site: da tecnologia \u00e0 experi\u00eancia do utilizador<\/p><p>Qualquer empresa, organiza\u00e7\u00e3o ou pessoa pode criar um site na Internet. A tecnologia utilizada para a constru\u00e7\u00e3o de sites evoluiu muito, sendo hoje poss\u00edvel trabalhar com freelancers, ag\u00eancias ou investindo o seu pr\u00f3prio tempo na constru\u00e7\u00e3o da sua p\u00e1gina.&nbsp;<\/p><p>O desenvolvimento da tecnologia, trouxe v\u00e1rias plataformas tais como Wix, Weebly, Squarespace entre outros, que facilitam pessoas com poucos conhecimentos t\u00e9cnicos a construir os seus pr\u00f3prios sites. O maior custo de usar estas plataformas \u00e9 para muitas pessoas oculto. <br>Recomendo que use WordPress, que tem 60% do mercado global de CMS (Gestor de Conte\u00fados) sendo uma das plataformas mais populares. Sites como CNN, TIME.com, Observador.pt, Spotify, entre outros usam esta plataforma.<\/p><p>A estrutura gr\u00e1fica e funcional de um site deve transparecer a proposta de valor da empresa, sendo atrativo e focado nas necessidades do p\u00fablico-alvo da empresa em quest\u00e3o.&nbsp;<br><\/p><p>Finalmente, divirta-se com este projeto criativo e desfrute do processo.<br><\/p><p>A preocupa\u00e7\u00e3o com a experi\u00eancia do utilizador vai tornar o site numa importante ferramenta de fideliza\u00e7\u00e3o dos clientes.<\/p><blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>\u00c9 importante compreender que a constru\u00e7\u00e3o de p\u00e1ginas na web \u00e9 uma parte integrante da cria\u00e7\u00e3o de relacionamentos com clientes curiosos ou potenciais clientes, dado a crescente utiliza\u00e7\u00e3o de conte\u00fados valiosos nestas p\u00e1ginas, que podem materializar-se sob a forma de casos de estudo, ebooks, relat\u00f3rios, v\u00eddeo-aulas, entre outros.<\/p><\/blockquote><p>A especializa\u00e7\u00e3o dos profissionais que trabalham em UX (user experience), que estudam e avaliam as formas como os utilizadores interagem com foco no Design, Acessibilidade, Marketing, Desempenho do Sistema, Ergonomia, Utilidade e Fatores Humanos, \u00e9 muito importante.&nbsp;<\/p><p>Determinar quais estrat\u00e9gias de convers\u00e3o e o que pode funcionar ao n\u00edvel da experi\u00eancia do utilizador para um neg\u00f3cio espec\u00edfico, pode ser assustador, mas a an\u00e1lise \u00e9 o seu aliado.<\/p><p>Num estudo recente da Forrester Research, um interface bem projetado pode aumentar a taxa de convers\u00e3o do seu site&nbsp; at\u00e9 200%, e um melhor design pode atingir taxas de convers\u00e3o at\u00e9 400%.&nbsp;<br><\/p><p>Ao envolverem-se nas emo\u00e7\u00f5es dos utilizadores, conhecendo-os melhor, os designers com este acr\u00e9scimo podem come\u00e7ar a contar hist\u00f3rias e dar informa\u00e7\u00f5es que s\u00e3o relevantes, aumentando desta forma intera\u00e7\u00e3o marca-cliente.<\/p><p>A este prop\u00f3sito, veja-se&nbsp; um dos pioneiros da intelig\u00eancia artificial, Ray Kurzweil, no seu livro <em>How to Create a Mind<\/em>: <em>The Secret of Human Thought Reveal <\/em>(2012), que refere que os seres humanos s\u00e3o incr\u00edveis m\u00e1quinas de reconhecimento de padr\u00f5es, porque t\u00eam a capacidade de reconhecer muitos tipos diferentes e,&nbsp; em seguida, transformar em etapas concretas e acion\u00e1veis.&nbsp;<\/p><p>&nbsp;Os padr\u00f5es na constru\u00e7\u00e3o de sites em responsive webdesign evoluem rapidamente, mas h\u00e1 muitos padr\u00f5es estabelecidos que funcionam bem em dispositivos m\u00f3veis e computadores.<\/p><p>&nbsp;A maioria dos layouts usados por p\u00e1ginas da Web responsivas pode ser categorizada em um de cinco padr\u00f5es: mostly fluid, column drop, layout shifter, tiny tweaks e off canvas.<br><\/p><p>Curiosamente,independentemente das diferen\u00e7as culturais, consumimos conte\u00fados (livros, revistas, p\u00e1ginas web, entre outros) do topo para baixo, e a maioria das pessoas l\u00ea da esquerda para a direita.<br><\/p><p>Naturalmente que os utilizadores que visitam um site ou uma landing page, raramente v\u00e3o ler todas as palavras escritas. Mas, para garantir que uma p\u00e1gina web \u00e9 interessante, apelativa, com um design persuasivo e capaz de captar a aten\u00e7\u00e3o do utilizador, \u00e9 importante que a mesma tenha sempre em conta 4 aspectos fundamentais:&nbsp;&nbsp;<\/p><p><\/p><p><strong>1. Clareza<\/strong><br><\/p><p>Quando nos deparamos com algo pela primeira vez, perguntamos imediatamente: &#8220;O que \u00e9 isto?&#8221;. Quando um visitante chega a um site ou landing page, precisa sempre de respostas. Por isso, a primeira coisa que l\u00ea, deve fornecer-lhe respostas a quest\u00f5es como:&nbsp;&nbsp;<\/p><ul class=\"wp-block-list\"><li>O que \u00e9 este site?&nbsp;<\/li><li>O que posso fazer aqui? \/ O que estou \u00e0 procura?<\/li><li>Porque devo faz\u00ea-lo? \/ De que forma \u00e9 \u00fatil para mim?<\/li><li>Qual o motivo para comprar a esta marca e n\u00e3o a outra da concorr\u00eancia?<\/li><\/ul><p>Normalmente, prestamos aten\u00e7\u00e3o aos padr\u00f5es. De facto, procuramos muitos, mesmo que inconscientemente.&nbsp;<\/p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Um estudo interessante da Nielsen Norman Group (2016) sobre a navega\u00e7\u00e3o do utilizador, revela que o mesmo,&nbsp; quando visita um site, espera encontrar o logotipo no canto superior esquerdo, seguido da navega\u00e7\u00e3o, no canto superior direito. Os utilizadores lembram-se mais do logo da marca quando foi exibido no lado esquerdo da p\u00e1gina, em compara\u00e7\u00e3o com o direito. Esta diferen\u00e7a foi estatisticamente significativa.<\/p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Um site que quebra estes padr\u00f5es, pode deixar o utilizador \u201cperdido\u201d, frustrado ou curioso.<br><\/p><p><strong>2. Atra\u00e7\u00e3o visual<\/strong><br><\/p><p>As primeiras impress\u00f5es s\u00e3o sempre as mais importantes. Se os visitantes de um site (ou landing page) compreenderem que est\u00e3o no s\u00edtio certo e que aquilo que a p\u00e1gina oferece \u00e9 interessante e corresponde aos seus interesses ou necessidades, o trabalho seguinte ser\u00e1 sensibiliz\u00e1-los para o funil de vendas.<\/p><p>A apar\u00eancia de um site (ou da landing page), \u00e9 o principal motivador destas primeiras impress\u00f5es. Por isso, \u00e9 importante ter cuidado com os layouts complexos, a falta de aux\u00edlios \u00e0 navega\u00e7\u00e3o e o ignorar dos padr\u00f5es do design para web, especialmente no que respeita ao uso de cores. Aten\u00e7\u00e3o a letras demasiado pequenas, muito texto ou resultado de pesquisa, dentro do pr\u00f3prio site, insuficientes ou incompletos.<\/p><p>Um estudo da&nbsp; Google sobre este tema, revela que existem dois fatores-chave, associados ao design de uma p\u00e1gina, que determinam as primeiras impress\u00f5es que um site causa nos utilizadores. S\u00e3o eles:&nbsp;<br><\/p><ol class=\"wp-block-list\"><li>A complexidade visual (quanto mais simples for o design, melhor);<\/li><li>A atratividade e familiaridade (qu\u00e3o representativo o design de uma p\u00e1gina \u00e9, considerando uma determinada categoria de sites em que se insere).<\/li><\/ol><p>Os resultados demonstram que, tanto a complexidade visual, quanto a familiaridade do site (semelhan\u00e7a com outros), desempenham pap\u00e9is cruciais no processo de forma\u00e7\u00e3o de um julgamento est\u00e9tico por parte do visitante. Este processo acontece dentro de prazos incrivelmente curtos: entre 17 e 50 milissegundos. Para termos um termo de compara\u00e7\u00e3o, um piscar de olhos m\u00e9dio, demora entre 100 a 400 milissegundos.&nbsp;<\/p><p><\/p><p><strong>3. Forte hierarquia visual<\/strong><br><\/p><p>A hierarquia visual \u00e9 um dos princ\u00edpios mais importantes do webdesign. Em breves palavras, \u00e9 a ordem pela qual o olho humano percebe o que v\u00ea.<\/p><p>A t\u00edtulo de exemplo, num site, salvo raras exce\u00e7\u00f5es, n\u00e3o faz sentido ter um menu na homepage com 10 itens. Uma vez que isto significa que todos estes itens ter\u00e3o a mesma import\u00e2ncia para o utilizador, havendo um maior risco de que o mesmo se perca na informa\u00e7\u00e3o e, com isso, perca o interesse.&nbsp;<\/p><p>Onde pretende que o utilizador efetivamente clique? Menos itens no menu \u00e9 positivo para o utilizador, porque facilita a procura de informa\u00e7\u00e3o; positivo para a organiza\u00e7\u00e3o que tem o site, porque direciona o visitante para aquilo que, em \u00faltima inst\u00e2ncia, importa (o objetivo do site\/landing page); e positivo numa \u00f3tica de otimiza\u00e7\u00e3o dos motores de pesquisa, j\u00e1 que a p\u00e1gina inicial do site ter\u00e1 mais \u201cautoridade\u201d e, com isso, melhor posicionamento no motor de pesquisa.<br><\/p><p>Quanto mais concisa for a navega\u00e7\u00e3o dentro de um site, mais autoridade ter\u00e3o as p\u00e1ginas interiores.&nbsp;&nbsp;<br><\/p><p>Certas partes do seu site e da sua landing page s\u00e3o mais importantes do que outras (formul\u00e1rios, chamadas para a a\u00e7\u00e3o, propostas de valor, etc.).&nbsp;<\/p><p>O utilizador pode ser atra\u00eddo pelo tamanho ou pela representatividade que essas \u00e1reas t\u00eam dentro da p\u00e1gina, mas tamb\u00e9m pela cor.&nbsp;<br><\/p><p><strong>4. Conserve a aten\u00e7\u00e3o a todo custo<\/strong><br><\/p><p>O design precisa de ter uma hierarquia visual forte, com foco nos itens que s\u00e3o realmente importantes para conservar a aten\u00e7\u00e3o do utilizador.<br><\/p><p>Utilize imagens grandes e relevantes. No caso de usar fotos de pessoas, procure especialmente aquelas em que o olhar est\u00e1 direcionado para o utilizador.<br><\/p><p>Outro aspecto importante \u00e9 o contraste, a diferen\u00e7a entre duas cores, j\u00e1 que as nossas mentes s\u00e3o projetadas para detectar estas diferen\u00e7as. Preto e branco s\u00e3o as cores que criam sempre o maior contraste poss\u00edvel.&nbsp;<\/p><p>Sabe quais s\u00e3o as duas formas mais f\u00e1ceis de eliminar a aten\u00e7\u00e3o de um utilizador? Uma parede de texto seguido.<br><\/p><p>Frases irrelevantes. Exemplo: \u201cBem-Vindo(a) ao nosso site\u201d, \u201cA nossa filosofia\u201d&#8230;<br><\/p><p>Procure que o seu site (ou Landing page) tenha um foco no utilizador, uma solu\u00e7\u00e3o centrada no cliente. Os utilizadores geralmente v\u00eaem o conte\u00fado da Web o mais r\u00e1pido poss\u00edvel, para avaliar se querem investir mais tempo na leitura de algo.<br><\/p><p>Existem h\u00e1bitos de leitura n\u00e3o padronizados devido a comportamentos multi-tasking e \u00e0s caracter\u00edsticas de diferentes dispositivos existentes, contudo, um dos comportamentos comprovados na navega\u00e7\u00e3o das p\u00e1ginas web \u00e9 o padr\u00e3o de leitura em Z.&nbsp;<\/p><p>Em primeiro lugar, o leitor procura uma linha horizontal, na parte superior da p\u00e1gina, seja porque fixa a zona da barra de menu ou simplesmente por um h\u00e1bito de leitura que j\u00e1 tem, da esquerda para a direita e a partir do topo.&nbsp;<\/p><p>Quando o olho atinge o fim desta primeira linha, com base num h\u00e1bito de leitura j\u00e1 adquirido, h\u00e1 um desvio da aten\u00e7\u00e3o e uma leitura mais superficial da informa\u00e7\u00e3o que est\u00e1 no meio.<\/p><p>&nbsp;Por fim, o utilizador percorre a p\u00e1gina e repete uma procura horizontal de conte\u00fado, desta vez j\u00e1 na parte mais inferior da p\u00e1gina.<\/p><p>Este padr\u00e3o de leitura e de organiza\u00e7\u00e3o da informa\u00e7\u00e3o, \u00e9 aplic\u00e1vel, praticamente, a qualquer interface web, uma vez que inclui os principais requisitos para um bom site (ou Landing page), como hierarquia da informa\u00e7\u00e3o, branding e chamadas para a\u00e7\u00e3o.&nbsp;<\/p><p>O padr\u00e3o Z \u00e9 perfeito, sobretudo, para interfaces onde a simplicidade \u00e9 uma prioridade e a chamada para a a\u00e7\u00e3o \u00e9 o principal objetivo.<br><\/p><h2 class=\"wp-block-heading\"><strong>Que tipos de p\u00e1ginas existem num site?<\/strong><\/h2><p>Temos normalmente 3 tipos de p\u00e1ginas:<br><\/p><p>1) P\u00e1ginas de navega\u00e7\u00e3o: Ajudam os utilizadores a encontrar conte\u00fado e a ter acesso ao mesmo. O principal objetivo \u00e9 enviar os utilizadores para uma p\u00e1gina espec\u00edfica, geralmente a p\u00e1gina inicial ou p\u00e1gina de resultados de pesquisa.<br><\/p><p>2) P\u00e1ginas de consumo: Cont\u00eam artigos, v\u00eddeos, p\u00e1ginas de produto, servi\u00e7os, informa\u00e7\u00f5es sobre pre\u00e7os, entre outros.<br><\/p><p>3) P\u00e1ginas de intera\u00e7\u00e3o: Criam uma intera\u00e7\u00e3o com o utilizador, levando-o a realizar uma a\u00e7\u00e3o. As p\u00e1ginas de pesquisa ou que cont\u00eam um formul\u00e1rio de inscri\u00e7\u00e3o, s\u00e3o um exemplo deste tipo de p\u00e1ginas, que permitem que os utilizadores insiram e manipulem dados.<br><\/p><p>Cada tipo de p\u00e1gina est\u00e1 projetada para um g\u00e9nero diferente de tarefa por parte do utilizador.&nbsp;<\/p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Compreender o tipo de p\u00e1ginas que precisa de ter num site, ajuda a adaptar o design do interface e a garantir que corresponde \u00e0s necessidades e expectativas do visitante.&nbsp;<\/p><p>Ao projetar o mapa do seu site, \u00e9 importante avaliar se se trata de uma p\u00e1gina de navega\u00e7\u00e3o, p\u00e1gina de consumo, p\u00e1gina de intera\u00e7\u00e3o ou v\u00e1rias.&nbsp;<br><\/p><p>Se pretende desenvolver um site, deve garantir que trabalha com algu\u00e9m que conhe\u00e7a de convers\u00f5es e marketing, como tamb\u00e9m um bom designer, com conhecimentos de user experience.&nbsp;<\/p><p>&nbsp;&nbsp;&nbsp;Quando falamos de webdesign, n\u00e3o significa apenas desenvolver um site ou landing page agrad\u00e1vel e atraente, mas tamb\u00e9m pensar sobre a import\u00e2ncia da funcionalidade e da experi\u00eancia do consumidor.<br><\/p><figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"820\" height=\"312\" src=\"https:\/\/fredericocarvalho.pt\/wp-content\/themes\/reco\/assets\/images\/transparent.gif\" data-lazy=\"true\" data-src=\"https:\/\/fredericocarvalho.pt\/wp-content\/uploads\/2019\/11\/frederico-carvalho-formacao-marketing-digital.png\" alt=\"formacao com frederico carvalho\" class=\"wp-image-84316\" data-srcset=\"https:\/\/fredericocarvalho.pt\/wp-content\/uploads\/2019\/11\/frederico-carvalho-formacao-marketing-digital.png 820w, https:\/\/fredericocarvalho.pt\/wp-content\/uploads\/2019\/11\/frederico-carvalho-formacao-marketing-digital-550x209.png 550w, https:\/\/fredericocarvalho.pt\/wp-content\/uploads\/2019\/11\/frederico-carvalho-formacao-marketing-digital-555x211.png 555w, https:\/\/fredericocarvalho.pt\/wp-content\/uploads\/2019\/11\/frederico-carvalho-formacao-marketing-digital-768x292.png 768w, https:\/\/fredericocarvalho.pt\/wp-content\/uploads\/2019\/11\/frederico-carvalho-formacao-marketing-digital-640x244.png 640w, https:\/\/fredericocarvalho.pt\/wp-content\/uploads\/2019\/11\/frederico-carvalho-formacao-marketing-digital-480x183.png 480w\" data-sizes=\"auto, (max-width: 820px) 100vw, 820px\" \/><\/figure><p>Este artigo faz parte do conte\u00fado que pode encontrar no Livro Marketing Digital para Empresas e no <a href=\"https:\/\/fredericocarvalho.pt\/curso-intensivo-marketing-digital\">Curso de Marketing Digital<\/a> | <a href=\"https:\/\/fredericocarvalho.pt\/marketing-digital-curso\/\">https:\/\/fredericocarvalho.pt\/marketing-digital-curso\/<\/a> .<br><\/p>","protected":false},"excerpt":{"rendered":"<p>Como sabemos um site geralmente ocupa um dom\u00ednio (www.oseunome.com) Ter um site \u00e9 como ter uma casa pr\u00f3pria, uma plataforma que interliga v\u00e1rias outras plataformas&#8230;<\/p>\n","protected":false},"author":1,"featured_media":84321,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[15,2071],"tags":[2293,2292,2291,2290,2289],"class_list":["post-84319","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gestao","category-marketing-digital","tag-como-construir-um-site","tag-construcao-de-sites","tag-construir-um-site","tag-webdesign","tag-website"],"acf":[],"_links":{"self":[{"href":"https:\/\/fredericocarvalho.pt\/wp-json\/wp\/v2\/posts\/84319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fredericocarvalho.pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fredericocarvalho.pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fredericocarvalho.pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fredericocarvalho.pt\/wp-json\/wp\/v2\/comments?post=84319"}],"version-history":[{"count":1,"href":"https:\/\/fredericocarvalho.pt\/wp-json\/wp\/v2\/posts\/84319\/revisions"}],"predecessor-version":[{"id":91118,"href":"https:\/\/fredericocarvalho.pt\/wp-json\/wp\/v2\/posts\/84319\/revisions\/91118"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fredericocarvalho.pt\/wp-json\/wp\/v2\/media\/84321"}],"wp:attachment":[{"href":"https:\/\/fredericocarvalho.pt\/wp-json\/wp\/v2\/media?parent=84319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fredericocarvalho.pt\/wp-json\/wp\/v2\/categories?post=84319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fredericocarvalho.pt\/wp-json\/wp\/v2\/tags?post=84319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}