{"id":35373,"date":"2020-02-17T05:12:25","date_gmt":"2020-02-17T13:12:25","guid":{"rendered":"https:\/\/kinsta.com\/?p=63976"},"modified":"2023-08-22T05:45:05","modified_gmt":"2023-08-22T08:45:05","slug":"melhores-praticas-web-design","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/","title":{"rendered":"Melhores Pr\u00e1ticas de Web Design para o seu Pr\u00f3ximo Projeto de Website"},"content":{"rendered":"<p>O que causa a grande discrep\u00e2ncia entre o que alguns\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/custo-de-website-wordpress\/\">desenvolvedores de WordPress cobram em compara\u00e7\u00e3o com outros<\/a>? A resposta a esta pergunta requer considera\u00e7\u00e3o pela raz\u00e3o por detr\u00e1s da qual voc\u00ea quer um website em primeiro lugar.<\/p>\n<p>Alguns desenvolvedores se concentram no produto final literal: a combina\u00e7\u00e3o de c\u00f3digo que resulta em um design de site agrad\u00e1vel o suficiente.<\/p>\n<p>Mas os desenvolvedores com conhecimento de marketing se preocupam com<i> mais<\/i> do que apenas construir algo que pare\u00e7a legal. Eles atuam como consultores para clientes que buscam atingir objetivos espec\u00edficos com seus websites.<\/p>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/03\/web-design-estritamente-ligado-objectivos-negocio.jpg\" alt=\"O web design est\u00e1 estritamente ligado aos seus objectivos de neg\u00f3cio\" width=\"1321\" height=\"732\"><figcaption class=\"wp-caption-text\">O web design est\u00e1 estritamente ligado aos seus objectivos de neg\u00f3cio<\/figcaption><\/figure>\n<p>Com isto em mente, <a href=\"https:\/\/kinsta.com\/pt\/blog\/contrate-um-desenvolvedor-do-wordpress\/\">contratar algu\u00e9m para construir um website<\/a> que n\u00e3o pare\u00e7a interessado em\/n\u00e3o fa\u00e7a perguntas sobre os seus objetivos finais \u00e9 <strong>uma bandeira vermelha<\/strong>. \u00c9 importante chamar a aten\u00e7\u00e3o para o fato de que mesmo o mais belo web design pode<i> n\u00e3o<\/i> ser o ideal quando se trata de conseguir que os visitantes se convertam em clientes.<\/p>\n<p>Dito isto, 94% das pessoas\u00a0<a href=\"https:\/\/www.business.com\/articles\/tyler-horvath-responsive-web-design\/\">julgam a sua credibilidade<\/a> com base no design do seu site.<\/p>\n<p>Portanto, em vez disso, voc\u00ea precisa se concentrar no uso do seu design para oferecer a experi\u00eancia de usu\u00e1rio ideal. Voc\u00ea deve facilitar aos visitantes a busca de informa\u00e7\u00f5es, visitando seu site em primeiro lugar, enquanto os orienta para atividades de\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/acompanhamento-de-conversoes\/\">convers\u00e3o de objetivos<\/a>.<\/p>\n<p>Estas melhores pr\u00e1ticas de web design focam-se na interse\u00e7\u00e3o entre a cria\u00e7\u00e3o de um belo website e um que serve o seu neg\u00f3cio.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h3 class=\"p1\">Prefere assistir \u00e0 <a href=\"https:\/\/www.youtube.com\/watch?v=uS9wnNsamzA\">vers\u00e3o em v\u00eddeo<\/a>?<\/h3>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=uS9wnNsamzA\"><\/kinsta-video>\n<h2>O que define as Melhores Pr\u00e1ticas de Web Design?<\/h2>\n<p>Para ter certeza, todos e sua m\u00e3e t\u00eam opini\u00f5es sobre o que constitui um site bem desenhado.<\/p>\n\n<p>Mas vamos controlar as opini\u00f5es de todos, adiando para os especialistas.<\/p>\n<p>De acordo com a\u00a0<a href=\"https:\/\/www.orbitmedia.com\/blog\/web-design-standards\/\">Orbit Media<\/a>, voc\u00ea pode agrupar as melhores pr\u00e1ticas de web design nestas tr\u00eas categorias b\u00e1sicas de padr\u00f5es:<\/p>\n<ul>\n<li><strong>Padr\u00f5es de marca:<\/strong> Voc\u00ea pode estar mais familiarizado referindo-se a este mesmo conceito como &#8220;branding&#8221;, &#8220;guias de estilo&#8221;, ou &#8220;quadros de humor&#8221;. Estes padr\u00f5es incluem tudo o que tem a ver com o aspecto de um website e envolve o uso de cores, tipografia e elementos que s\u00e3o espec\u00edficos para o neg\u00f3cio em particular.<\/li>\n<li><strong>Normas de codifica\u00e7\u00e3o:<\/strong> Os sites devem ser constru\u00eddos de acordo com os\u00a0<a href=\"http:\/\/www.w3.org\/standards\/\">padr\u00f5es de programa\u00e7\u00e3o<\/a> acordados pelo W3C, a comunidade internacional que trabalha em conjunto para desenvolver padr\u00f5es web.<\/li>\n<li><strong>Padr\u00f5es de acessibilidade:<\/strong> O acesso \u00e0 informa\u00e7\u00e3o \u00e9 um direito humano b\u00e1sico, que foi reconhecido pela Conven\u00e7\u00e3o das Na\u00e7\u00f5es Unidas sobre os Direitos das Pessoas com Defici\u00eancia. Al\u00e9m disso, tornar o seu site acess\u00edvel tem <a href=\"https:\/\/www.searchenginejournal.com\/accessibility-seo-and-sales\/281899\/\">efeitos positivos<\/a> &#8211; n\u00e3o apenas nas vendas, mas tamb\u00e9m na\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-significa-seo\/\">SEO<\/a>. O W3C compartilha uma lista b\u00e1sica de padr\u00f5es que voc\u00ea precisa seguir para\u00a0<a href=\"http:\/\/www.w3.org\/standards\/webdesign\/accessibility\">projetar um site acess\u00edvel<\/a>. Mais adiante neste artigo, detalharemos as melhores pr\u00e1ticas de web design relacionadas.<\/li>\n<\/ul>\n<p>Vamos ver como desenvolver pr\u00e1ticas de web design com base em cada um destes padr\u00f5es:<\/p>\n<h2>Padr\u00f5es de marca<\/h2>\n<p>Os sites que n\u00e3o t\u00eam uma marca consistente podem ser estressantes para interagir e causar confus\u00e3o. Como tal, n\u00e3o deve ser surpresa que cerca de 38% dos visitantes tenham dito que\u00a0<a href=\"https:\/\/blogs.adobe.com\/creative\/files\/2015\/12\/Adobe-State-of-Content-Report.pdf\">deixar\u00e3o de se envolver com um website<\/a> se o conte\u00fado ou layout n\u00e3o for atrativo.<\/p>\n<p>Tendo em mente que a apar\u00eancia n\u00e3o \u00e9<i> tudo<\/i>, aqui est\u00e3o alguns princ\u00edpios b\u00e1sicos de design a considerar para criar um website que as pessoas queiram usar:<\/p>\n<h3>Saldo<\/h3>\n<p><i>O equil\u00edbrio<\/i> \u00e9 o princ\u00edpio do design que prescreve como distribuir eficazmente os elementos visuais. Em geral, um design equilibrado parece limpo e natural e tem boa simetria (embora isso <a href=\"https:\/\/wpamelia.com\/visual-design-guide\/\">n\u00e3o seja necessariamente uma <i>condi\u00e7\u00e3o<\/i> de equil\u00edbrio<\/a>).<\/p>\n<p>Voc\u00ea pode incorporar equil\u00edbrio no web design em termos de layout da p\u00e1gina.<\/p>\n<p>Centrar texto ou outros elementos em toda a p\u00e1gina \u00e9 uma forma f\u00e1cil de o fazer. Em geral, as p\u00e1ginas web s\u00e3o constru\u00eddas sobre um sistema de grade, o que cria uma forma de equil\u00edbrio. Voc\u00ea pode usar a propriedade de<i> flutua\u00e7\u00e3o<\/i> CSS para posicionar elementos e equilibr\u00e1-los ao longo da p\u00e1gina.<\/p>\n<p>O equil\u00edbrio pode ser alcan\u00e7ado de 3 maneiras:<\/p>\n<h4>1. Desenho sim\u00e9trico<\/h4>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/exemplo-desenho-simetrico.jpg\" alt=\"Exemplo de desenho sim\u00e9trico\" width=\"1321\" height=\"944\"><figcaption class=\"wp-caption-text\">Exemplo de desenho sim\u00e9trico<\/figcaption><\/figure>\n<p>Arranjando elementos de forma uniforme em toda a p\u00e1gina web. Por exemplo, se voc\u00ea tem um elemento pesado \u00e0 esquerda, voc\u00ea deve ter um elemento pesado \u00e0 direita. Como mencionado, a centraliza\u00e7\u00e3o \u00e9 a forma mais f\u00e1cil de alcan\u00e7ar a simetria, mas por vezes pode parecer plana ou aborrecida.<\/p>\n<p>Para evitar fazer a p\u00e1gina parecer mon\u00f3tona, voc\u00ea pode criar equil\u00edbrio usando diferentes elementos, como o equil\u00edbrio de uma imagem grande com um bloco de texto. Existe tamb\u00e9m um tipo de equil\u00edbrio sim\u00e9trico chamado<i> equil\u00edbrio radial<\/i>, onde os objetos irradiam a partir de um ponto central.<\/p>\n<h4>2. Design assim\u00e9trico<\/h4>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/exemplo-desenho-assimetrico.jpg\" alt=\"Exemplo de desenho assim\u00e9trico\" width=\"1321\" height=\"944\"><figcaption class=\"wp-caption-text\">Exemplo de desenho assim\u00e9trico<\/figcaption><\/figure>\n<p>Mais desafiador de fazer bem, o design assim\u00e9trico envolve a distribui\u00e7\u00e3o desigual dos elementos em uma p\u00e1gina. Por exemplo, voc\u00ea pode ter um elemento grande no centro, que \u00e9 equilibrado por um elemento menor mais distante.<\/p>\n<p>Voc\u00ea pode usar outros elementos de design, como cor ou textura, para equilibrar um design assim\u00e9trico.<\/p>\n<h4>3. Off-balance<\/h4>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/exemplo-desenho-off-balance.jpg\" alt=\"Exemplo de desenho off-balance\" width=\"1321\" height=\"944\"><figcaption class=\"wp-caption-text\">Exemplo de desenho off-balance<\/figcaption><\/figure>\n<p>Esses tipos de desenhos sugerem movimento e a\u00e7\u00e3o, o que pode deixar as pessoas desconfort\u00e1veis. Se o seu site pretende fazer as pessoas pensarem, ent\u00e3o um design fora do equil\u00edbrio \u00e9 para si.<\/p>\n<h3>Composi\u00e7\u00e3o<\/h3>\n<p>O termo<i> composi\u00e7\u00e3o<\/i> refere-se \u00e0 coloca\u00e7\u00e3o e organiza\u00e7\u00e3o de elementos de design.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/composicao-pt.jpg\" alt=\"Composi\u00e7\u00e3o\" width=\"1320\" height=\"883\"><figcaption class=\"wp-caption-text\">Composi\u00e7\u00e3o<\/figcaption><\/figure>\n<p>A <a href=\"https:\/\/www.photographymad.com\/pages\/view\/rule-of-thirds\">Regra dos Ter\u00e7os<\/a> \u00e9 comumente usada para criar uma composi\u00e7\u00e3o equilibrada, especialmente com fotos.<\/p>\n<h3>Espa\u00e7amento<\/h3>\n<p>Os elementos devem ser espa\u00e7ados uniformemente para que os usu\u00e1rios possam diferenciar se\u00e7\u00f5es ou blocos.<\/p>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/papel-espacamento-web-design.jpg\" alt=\"O papel do espa\u00e7amento no web design\" width=\"1321\" height=\"684\"><figcaption class=\"wp-caption-text\">O papel do espa\u00e7amento no web design<\/figcaption><\/figure>\n<p>Voc\u00ea tamb\u00e9m deve introduzir o espa\u00e7o negativo ou o espa\u00e7o entre e em torno do tema de uma imagem. O espa\u00e7o negativo pode reduzir o ru\u00eddo visual, aumentar a legibilidade e trazer equil\u00edbrio.<\/p>\n<p>Voc\u00ea pode introduzir espa\u00e7o negativo adicionando margens e acolchoamento em torno de seus elementos de design.<\/p>\n<h3>Ponto Focal<\/h3>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/chamar-atencao-elemento.jpg\" alt=\"Chamar a aten\u00e7\u00e3o para um elemento\" width=\"1321\" height=\"732\"><figcaption class=\"wp-caption-text\">Chamar a aten\u00e7\u00e3o para um elemento<\/figcaption><\/figure>\n<p>Crie uma \u00e1rea de foco onde voc\u00ea quer chamar a aten\u00e7\u00e3o. Deve ser a parte mais importante da sua p\u00e1gina e, idealmente, cada p\u00e1gina deve focar apenas<i> um<\/i> ponto focal importante.<\/p>\n<h3>Cor<\/h3>\n<p><i>A cor<\/i> \u00e9 um elemento de design importante quando se trata de branding. Idealmente, voc\u00ea est\u00e1 entrando no processo de web design com um entendimento das <a href=\"https:\/\/kinsta.com\/pt\/blog\/esquemas-de-cores-site\/\">cores<\/a> que voc\u00ea quer associar \u00e0 sua marca.<\/p>\n<p>Para web design especificamente, ajuda a come\u00e7ar com um quadro de humor para a sua marca.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/exemplo-paleta-cores-kinsta.jpg\" alt=\"Exemplo da paleta de cores da Kinsta\" width=\"1320\" height=\"443\"><figcaption class=\"wp-caption-text\">Exemplo da paleta de cores da Kinsta<\/figcaption><\/figure>\n<p>Escolha uma cor prim\u00e1ria e secund\u00e1ria (a cor secund\u00e1ria pode<i> complementar<\/i> ou<i> contrastar<\/i> a cor prim\u00e1ria), e uma tonalidade mais clara e escura para cada uma. Limite o uso de cores para que v\u00e1rios sotaques n\u00e3o se tornem desagrad\u00e1veis.<\/p>\n<p><a href=\"https:\/\/color.adobe.com\/create\">Adobe Color<\/a> fornece uma excelente ferramenta gratuita para testar v\u00e1rias combina\u00e7\u00f5es de cores para criar uma paleta de trabalho para os elementos do site.<\/p>\n<p>Al\u00e9m disso, ao decidir sobre cor, \u00e9 importante considerar aqueles que s\u00e3o dalt\u00f4nicos, o que inclui at\u00e9\u00a0<a href=\"http:\/\/www.colourblindawareness.org\/colour-blindness\/\">4,5% da popula\u00e7\u00e3o mundial<\/a>.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/exemplo-como-design-regular-pareceria-usuarios-daltonicos.jpg\" alt=\"Exemplo de como um design regular pareceria para os usu\u00e1rios dalt\u00f4nicos\" width=\"1320\" height=\"441\"><figcaption class=\"wp-caption-text\">Exemplo de como um design regular pareceria para os usu\u00e1rios dalt\u00f4nicos<\/figcaption><\/figure>\n<p>Existem tr\u00eas tipos de daltonismo (daltonismo total, vis\u00e3o bicolor e vis\u00e3o crom\u00e1tica deficiente), por isso certifique-se de que o seu design ainda \u00e9 utiliz\u00e1vel em considera\u00e7\u00e3o \u00e0queles que podem n\u00e3o ser capazes de diferenciar as cores.<\/p>\n<h4>Contraste<\/h4>\n<p>Ao escolher a cor, \u00e9 importante estar consciente das propor\u00e7\u00f5es de cor e <strong>contraste<\/strong>.<\/p>\n<p><i>O contraste de cores<\/i> refere-se \u00e0 diferen\u00e7a de luz entre o primeiro plano e o segundo plano. O uso de cores suficientemente contrastantes permite que a visibilidade do site seja facilmente distinguida. Em geral, use op\u00e7\u00f5es de cores de alto contraste &#8211; como texto preto sobre fundo branco &#8211; para tornar o seu site leg\u00edvel.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/mau-contraste-pode-problematico.jpg\" alt=\"Mau contraste pode ser problem\u00e1tico\" width=\"1320\" height=\"1299\"><figcaption class=\"wp-caption-text\">Mau contraste pode ser problem\u00e1tico<\/figcaption><\/figure>\n<p>A <i>raz\u00e3o de<\/i> contraste \u00e9 o valor num\u00e9rico atribu\u00eddo \u00e0 diferen\u00e7a em contraste entre os elementos da p\u00e1gina.<\/p>\n<p>O <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/\">World Content Accessibility Guidelines (WCAG) 2.0<\/a> recomenda uma rela\u00e7\u00e3o de contraste de 4.5:1 para texto normal. WebAIM compartilha algumas<a href=\"https:\/\/webaim.org\/articles\/contrast\/#ratio\"> combina\u00e7\u00f5es pr\u00e9-determinadas<\/a> que se ajustam \u00e0 rela\u00e7\u00e3o de contraste ideal para ajud\u00e1-lo a visualizar esta melhor pr\u00e1tica de web design.<\/p>\n<p>Para ajudar a navegar usando esta rela\u00e7\u00e3o, certifique-se de que ao desenhar o seu website, est\u00e1 a visualizar todos os p\u00fablicos (incluindo aqueles com problemas de acessibilidade). \u00c9 mais f\u00e1cil fazer isto do que planear para resolver estes problemas depois do fato.<\/p>\n<p>Considere todos os aspectos do site com os quais as pessoas ir\u00e3o interagir, incluindo\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/adicionar-codigo-ao-cabecalho-e-rodape-do-wordpress\/\">cabe\u00e7alhos, rodap\u00e9s<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-menu-plugins\/\">menus<\/a> &#8211; todos os quais precisam ser facilmente vis\u00edveis para serem utiliz\u00e1veis.<\/p>\n<p>Algumas ferramentas que voc\u00ea pode usar para verificar as rela\u00e7\u00f5es de contraste de cor incluem:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.levelaccess.com\/color-contrast-checker\/\">Verificador de contraste de cor<\/a> por acesso de n\u00edvel.<\/li>\n<li><a href=\"https:\/\/contrast-ratio.com\/\">Rela\u00e7\u00e3o de Contraste<\/a>.<\/li>\n<li><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">WCAG 2.0 AA &#038; AAA\u00a0ferramenta de verifica\u00e7\u00e3o de contraste de cor<\/a>, que \u00e9 baseada nas diretrizes do WCAG 2.0.<\/li>\n<\/ul>\n<h3>Tipografia<\/h3>\n<p>A tipografia do site \u00e9 outra considera\u00e7\u00e3o importante para a marca.<\/p>\n<p>Embora existam muitas fontes diferentes para <a href=\"https:\/\/kinsta.com\/pt\/blog\/fontes-modernas\/\">encontrar fontes potenciais<\/a> para usar em seu site, voc\u00ea vai querer primeiro considerar as op\u00e7\u00f5es que ser\u00e3o exibidas de forma consistente, independentemente das fontes que o usu\u00e1rio final tenha instalado em seu computador.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/pt\/blog\/fontes-wordpress\/#google-fonts\">O Google Fonts<\/a> oferece uma grande variedade de <a href=\"https:\/\/kinsta.com\/pt\/blog\/fontes-seguras-na-web\/\">fontes gratuitas<\/a> seguras para a web com as quais voc\u00ea pode contar para exibir corretamente, independentemente das fontes\/programas instalados pelo usu\u00e1rio. Certifique-se de incluir as fontes no seu quadro de humor para ver se elas combinam com a sua est\u00e9tica de cor.<\/p>\n<p>Se voc\u00ea estiver tendo problemas para fazer combina\u00e7\u00f5es, o Google Fonts pode sugerir emparelhamentos populares. Voc\u00ea tamb\u00e9m pode usar um site como o <a href=\"https:\/\/fontpair.co\/\">FontPair<\/a> para obter sugest\u00f5es.<\/p>\n<p>Tente limitar os pesos da fonte que voc\u00ea usa, pois ter que carregar muitos arquivos pode contribuir para a velocidade lenta da p\u00e1gina. Nesse sentido, considere a <a href=\"https:\/\/kinsta.com\/pt\/blog\/fontes-locais\/\">hospedagem local do Google Fonts<\/a> para introduzir benef\u00edcios adicionais de desempenho.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/tipografia-pobre-ripografia-ideal.jpg\" alt=\"Tipografia pobre vs tipografia ideal\" width=\"1320\" height=\"386\"><figcaption class=\"wp-caption-text\">Tipografia pobre vs tipografia ideal<\/figcaption><\/figure>\n<p>Quando se trata de selecionar elementos tipogr\u00e1ficos baseados nas melhores pr\u00e1ticas de web design, como regra geral, use\u00a0<a href=\"https:\/\/www.invisionapp.com\/inside-design\/best-practices-pairing-fonts\/\">fontes sem serifas para os cabe\u00e7alhos<\/a> e fontes serifas para o conte\u00fado. No m\u00ednimo, n\u00e3o use fontes decorativas para o conte\u00fado corporal, pois ser\u00e1 dif\u00edcil de ler.<\/p>\n<p>Al\u00e9m disso, n\u00e3o se sinta tentado a usar uma grande variedade de fontes diferentes no seu website. Uma boa regra \u00e9 usar uma fonte para o seu logotipo, outra para os seus menus\/cabe\u00e7alhos e mais uma para o conte\u00fado corporal. Nesse sentido, tente emparelhar fontes que se complementam, tais como as da mesma fam\u00edlia de fontes.<\/p>\n<h3>Hierarquia de Elementos<\/h3>\n<p><i>Hierarquia<\/i> refere-se \u00e0 disposi\u00e7\u00e3o dos elementos de design que mostram a import\u00e2ncia relativa. Isto \u00e9 conseguido atrav\u00e9s da manipula\u00e7\u00e3o de elementos como contraste visual, tamanho e posicionamentos para chamar a aten\u00e7\u00e3o.<\/p>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/03\/exemplo-hierarquia-elementos.jpg\" alt=\"Exemplo de hierarquia de elementos\" width=\"1321\" height=\"1177\"><figcaption class=\"wp-caption-text\">Exemplo de hierarquia de elementos<\/figcaption><\/figure>\n<p>Por exemplo, o <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-reduzir-a-taxa-de-rejeicao\/#14-structure-your-content-wisely\">conte\u00fado deve ser dividido em blocos l\u00f3gicos<\/a> para que os usu\u00e1rios possam distinguir as se\u00e7\u00f5es umas das outras.<\/p>\n<p>Voc\u00ea pode fazer isso atrav\u00e9s do uso de <strong>cabe\u00e7alhos de conte\u00fado<\/strong>, o que n\u00e3o s\u00f3 facilita aos usu\u00e1rios saltar para as partes que eles querem ler, mas tamb\u00e9m quebrar grandes quantidades de texto em peda\u00e7os leg\u00edveis para que os leitores de tela sejam capazes de determinar o contexto de cada se\u00e7\u00e3o.<\/p>\n<p>Se voc\u00ea est\u00e1 procurando algumas ilustra\u00e7\u00f5es visuais \u00fateis desses conceitos de design e muito mais, o blog da Tilda Publishing cobre alguns dos\u00a0<a href=\"http:\/\/blog-en.tilda.cc\/articles-website-design-mistakes\">erros mais comuns de design de p\u00e1ginas da web<\/a>\u00a0e como corrigi-los.<\/p>\n<h2>Melhores Pr\u00e1ticas de Design\/Formata\u00e7\u00e3o na Web<\/h2>\n<p>De acordo com a\u00a0<a href=\"https:\/\/www.orbitmedia.com\/blog\/web-design-standards\/\">pesquisa da Orbit Media<\/a>, existem alguns padr\u00f5es comuns de web design observados nos 50 principais sites de marketing.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/padroes-web-design.jpg\" alt=\"Padr\u00f5es de web design\" width=\"1320\" height=\"1158\"><figcaption class=\"wp-caption-text\">Padr\u00f5es de web design<\/figcaption><\/figure>\n<p>Por &#8220;padr\u00f5es&#8221;, eles significam que 80% dos sites utilizam uma abordagem de design semelhante:<\/p>\n<ul>\n<li>Logotipo no canto superior esquerdo.<\/li>\n<li>Navega\u00e7\u00e3o horizontal principal atrav\u00e9s do topo de cada p\u00e1gina.<\/li>\n<li>Proposta de valor elevada na p\u00e1gina inicial localizada &#8220;acima da dobra&#8221;. Note que a maioria dos web designers lhe dir\u00e1 que n\u00e3o h\u00e1 uma altura de pixel padr\u00e3o para os navegadores, e tecnicamente n\u00e3o h\u00e1 &#8220;dobra&#8221;. Mas, em geral, elementos importantes do design devem aparecer no alto das p\u00e1ginas que s\u00e3o geralmente vis\u00edveis para a maioria dos visitantes, mesmo sem rolagem.<\/li>\n<\/ul>\n<p>Aqui est\u00e3o algumas das melhores pr\u00e1ticas de web design para elementos comuns do site:<\/p>\n<h3>Imagens<\/h3>\n<p>As melhores pr\u00e1ticas de web design para o\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/otimizar-imagens-para-web\/\">uso de imagens<\/a> podem inspirar muitos volumes de conselhos, mas vamos focar no m\u00ednimo nesta discuss\u00e3o das melhores pr\u00e1ticas de web design:<\/p>\n<ul>\n<li><strong>Adicionando texto ALT.<\/strong> As imagens<i> n\u00e3o podem<\/i> ser processadas utilizando leitores de ecr\u00e3, a menos que seja utilizado texto ALT. Adicionar\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-seo\/#9-image-alt-text\">texto ALT tamb\u00e9m contribui para SEO<\/a>, mas algumas pessoas usam o texto ALT apenas para complementar a sua estrat\u00e9gia de palavras-chave. Um uso mais \u00fatil do texto ALT seria descrever a imagem &#8211; embora voc\u00ea pudesse certamente satisfazer as aranhas de busca e os leitores de tela ao mesmo tempo com a abordagem correta.<\/li>\n<li><strong>O uso de imagens com rostos humanos<\/strong> tende a ser mais eficaz do que outros gr\u00e1ficos ou anima\u00e7\u00f5es. Isso torna as pessoas mais propensas a se envolverem com a imagem, pois os humanos s\u00e3o atra\u00eddos pelo que percebem como verdadeira empatia e emo\u00e7\u00f5es.<\/li>\n<li><strong>Use imagens responsivas<\/strong>, que crescem ou encolhem, dependendo do tamanho do navegador. Isto ajuda tanto na velocidade do site como na SEO.<\/li>\n<li><strong>Nunca se esque\u00e7a dos <a href=\"https:\/\/kinsta.com\/pt\/blog\/favicon-no-wordpress\/\">favicons<\/a><\/strong>. Os favicons s\u00e3o os pequenos \u00edcones que aparecem ao lado do t\u00edtulo do site e tamb\u00e9m nos resultados das pesquisas. Ele ajuda no reconhecimento da marca e melhora o UX do site.<\/li>\n<\/ul>\n<h3>Navega\u00e7\u00e3o do site<\/h3>\n<p>Os usu\u00e1rios esperam poder encontrar facilmente o conte\u00fado que est\u00e3o procurando em um site. Portanto, \u00e9 importante que a <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhorar-a-navegacao-do-website\/\">navega\u00e7\u00e3o no site<\/a> seja simples e direta.<\/p>\n<p><i>Navega\u00e7\u00e3o de website <\/i>\u00e9 um termo geral que se refere \u00e0\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/google-sitelinks\/#6-build-internal-links\">arquitetura de link interno de um website<\/a>. N\u00e3o se esque\u00e7a que o principal objetivo da navega\u00e7\u00e3o \u00e9 <i>ajudar<\/i> os utilizadores a encontrar facilmente conte\u00fados relevantes no seu website.<\/p>\n<p>A arquitetura de links internos do seu site constitui a <a href=\"https:\/\/kinsta.com\/pt\/blog\/sitemap-wordpress\/\">base do seu mapa do site<\/a>, o que ajuda os motores de busca a acederem mais facilmente ao seu conte\u00fado. Descobriu-se que ter um site bem desenhado onde o conte\u00fado \u00e9 f\u00e1cil de encontrar afeta positivamente o tr\u00e1fego do site que voc\u00ea receber\u00e1 dos mecanismos de busca (juntamente com uma maior chance de <a href=\"https:\/\/kinsta.com\/pt\/blog\/google-sitelinks\/\">obter links para o site do Google<\/a>).<\/p>\n<h3>Navega\u00e7\u00e3o por menus<\/h3>\n<p>Existem v\u00e1rios aspectos que comp\u00f5em a\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/melhorar-a-navegacao-do-website\/\">navega\u00e7\u00e3o no website<\/a>, mas o seu menu principal deve ser um foco principal, pois ser\u00e1 uma das primeiras coisas com que os utilizadores interagem quando visitam o seu website.<\/p>\n<p>Existem diferentes heur\u00edsticas de design do menu do site, mas as mais populares incluem:<\/p>\n<h4>Menu de navega\u00e7\u00e3o<\/h4>\n<p>O ideal \u00e9 que este esteja localizado na frente e no centro de um website. Isto pode envolver o\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/menu-suspenso-wordpress\/\">uso de um menu dropdown<\/a> se houver v\u00e1rias categorias. No entanto, os menus dropdown <a href=\"https:\/\/www.websaucestudio.com\/website-navigation-best-practices-and-seo-value\/\">n\u00e3o s\u00e3o recomendados<\/a>, especialmente quando se trata de SEO t\u00e9cnico (eles s\u00e3o mais dif\u00edceis de rastejar). Al\u00e9m disso, foi descoberto que a maioria das pessoas\u00a0<a href=\"http:\/\/www.useit.com\/alertbox\/annoyances.html\">n\u00e3o gosta de menus dropdown<\/a>.<\/p>\n<p>Isto porque o olho humano trabalha mais r\u00e1pido que a m\u00e3o, e por isso as pessoas acham irritante quando j\u00e1 decidiram o que clicar e algo mais cai &#8211; o que pode levar a uma diminui\u00e7\u00e3o nas visitas \u00e0s p\u00e1ginas.<\/p>\n<h4>Menu de Hamb\u00fargueres<\/h4>\n<p>Usado principalmente para um design otimizado para celular, um menu de hamb\u00fargueres \u00e9 normalmente localizado no lado superior esquerdo ou direito da p\u00e1gina. Ele aparece como um quadrado com tr\u00eas linhas que podem ser expandidas com um clique. No entanto, muitos designers\u00a0<a href=\"https:\/\/speckyboy.com\/analyzing-effectiveness-hamburger-menus-web-design\/\">desprezam o menu de hamb\u00fargueres<\/a>, que inspirou os desenvolvedores web a considerar novas formas de tornar a navega\u00e7\u00e3o em sites m\u00f3veis divertidos e funcionais.<\/p>\n<p>Aqui est\u00e3o algumas dicas para projetar a navega\u00e7\u00e3o com base nas melhores pr\u00e1ticas de web design:<\/p>\n<ul>\n<li><strong>Adicione uma barra de pesquisa<\/strong> para ajudar os usu\u00e1rios a encontrar facilmente o conte\u00fado (aqui est\u00e1 como\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/pesquisa-wordpress\/\">melhorar a funcionalidade de pesquisa do WordPress<\/a>). Isto \u00e9 especialmente \u00fatil para sites que t\u00eam muito conte\u00fado, como um blog de not\u00edcias.<\/li>\n<li>Desenhe seu site <strong>seguindo a regra dos tr\u00eas cliques<\/strong>, que diz que os usu\u00e1rios devem ser capazes de encontrar a informa\u00e7\u00e3o desejada com n\u00e3o mais do que tr\u00eas cliques do mouse. Isto porque os utilizadores <a href=\"https:\/\/www.cludo.com\/blog\/search-vs-navigate-people-behave-websites-search-navigate\/\">preferem realmente navegar num site<\/a> em vez de procurar nos resultados da pesquisa, quando poss\u00edvel.<\/li>\n<li><strong>Fa\u00e7a seus t\u00edtulos de menu descritivos<\/strong> (com palavras-chave em mente), o que ajuda os usu\u00e1rios a encontrar itens mais facilmente e tamb\u00e9m contribui positivamente para SEO.<\/li>\n<li><strong>A posi\u00e7\u00e3o dos itens do menu \u00e9 importante.<\/strong> Coloque as p\u00e1ginas mais importantes na frente do seu menu para que sejam de f\u00e1cil acesso.<\/li>\n<li><strong>Mantenha os itens de menu em um m\u00e1ximo de 7<\/strong>, n\u00e3o s\u00f3 para manter o design do site limpo, mas tamb\u00e9m porque ter muitas categorias de itens de menu pode potencialmente afetar sua capacidade de classifica\u00e7\u00e3o na pesquisa. O Google pode interpretar estas categorias aparentemente n\u00e3o relacionadas como um sinal de que o seu site n\u00e3o decidiu sobre um nicho espec\u00edfico.<\/li>\n<\/ul>\n<p>Para um formato mais conveniente, aqui est\u00e1 um pr\u00e1tico infogr\u00e1fico:<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/03\/melhores-praticas-web-design-navegacao-menu.jpg\" alt=\"Melhores pr\u00e1ticas de web design para navega\u00e7\u00e3o no menu\" width=\"1320\" height=\"1802\"><figcaption class=\"wp-caption-text\">Melhores pr\u00e1ticas de web design para navega\u00e7\u00e3o no menu<\/figcaption><\/figure>\n<h2>Normas de Codifica\u00e7\u00e3o<\/h2>\n<p>Com tantos sites criados e consumidos globalmente, h\u00e1 certamente a necessidade de um conjunto padronizado de princ\u00edpios de codifica\u00e7\u00e3o. Alguns aspectos destas normas web incluem:<\/p>\n<h3>SEO<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-significa-seo\/\">SEO<\/a> pode ser usado para aumentar o n\u00famero de visitantes do seu site <i>organicamente<\/i> (sem o uso de an\u00fancios). Uma vez que \u00e9 demasiado complicado escavar adequadamente em SEO numa pequena subse\u00e7\u00e3o de um artigo, consulte a nossa <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-seo\/\">lista de verifica\u00e7\u00e3o de SEO<\/a>\u00a0e as nossas dicas para os\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-plugins-seo-para-wordpress\/\">melhores plugins de SEO para WordPress<\/a> para se familiarizar com este aspecto das melhores pr\u00e1ticas de web design.<\/p>\n<p>Note que as seguintes dicas de padr\u00f5es de codifica\u00e7\u00e3o funcionam em conjunto com SEO.<\/p>\n<h3>Capacidade de resposta m\u00f3vel<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/pt\/blog\/design-responsivo-web\/\">O design responsivo<\/a> est\u00e1 preocupado em criar uma grande experi\u00eancia de usu\u00e1rio, independentemente do dispositivo ou navegador utilizado para acessar o seu site.<\/p>\n<p>\u00c9 mais importante hoje do que nunca projetar seu site para ser responsivo, pois mais de 60% dos usu\u00e1rios de internet <a href=\"https:\/\/www.ciodive.com\/news\/70-of-internet-traffic-comes-from-mobile-phones\/510120\/\">acessam a internet atrav\u00e9s de seus telefones celulares<\/a>, e <a href=\"https:\/\/www.infront.com\/blog\/the-blog\/8-statistics-that-prove-responsive-web-design-is-essential-to-seo\">metade das transa\u00e7\u00f5es de com\u00e9rcio eletr\u00f4nico<\/a> s\u00e3o feitas atrav\u00e9s de plataformas m\u00f3veis. Para al\u00e9m disso, o novo algoritmo de pesquisa do Google tamb\u00e9m\u00a0<a href=\"https:\/\/www.businessnewsdaily.com\/7808-google-search-ranking-mobile.html\">d\u00e1 prioridade aos sites amigos dos telem\u00f3veis<\/a>.<\/p>\n<figure style=\"width: 210px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/03\/exemplo-design-responsivo.jpg\" alt=\"Exemplo de design responsivo\" width=\"210\" height=\"365\"><figcaption class=\"wp-caption-text\">Exemplo de design responsivo<\/figcaption><\/figure>\n<p>Ter um site responsivo n\u00e3o s\u00f3 ajuda os usu\u00e1rios a navegar no seu site mais facilmente, mas tamb\u00e9m contribui para aumentar o envolvimento e as convers\u00f5es. <a href=\"https:\/\/www.thinkwithgoogle.com\/\">Os usu\u00e1rios recomendam marcas<\/a> com as quais eles t\u00eam uma experi\u00eancia positiva de site m\u00f3vel-responsivo e, inversamente, n\u00e3o s\u00f3\u00a0<a href=\"https:\/\/www.socpub.com\/articles\/the-5-mobile-marketing-mistakes-infographic-14849\">parariam de comprar de marcas<\/a> com uma m\u00e1 experi\u00eancia de site m\u00f3vel, mas tamb\u00e9m desencorajariam ativamente outras marcas de o fazer.<\/p>\n<p>No entanto, apesar da demanda por um local receptivo, estima-se que\u00a0<a href=\"https:\/\/bpstudios.com\/Blog\/March-2017\/15-Web-Design-Statistics-You-Should-Know\">91% das pequenas empresas n\u00e3o t\u00eam um<\/a>. Eles devem &#8211; como projetar um site m\u00f3vel-responsivo certamente compensa. 62% das empresas\u00a0<a href=\"https:\/\/econsultancy.com\/blog\/11044-more-companies-are-designing-their-sites-for-tablet-and-mobile-stats\/\">relataram um aumento nas vendas<\/a> depois de projetar um site m\u00f3vel-responsivo.<\/p>\n<p>Leia o recurso da Kinsta sobre como <a href=\"https:\/\/kinsta.com\/pt\/blog\/google-mobile-first-index\/\">tornar o seu site mais amig\u00e1vel ao celular<\/a>, que inclui uma lista dos melhores\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/plugins-wordpress-mobile\/\">plugins m\u00f3veis WordPress<\/a>\u00a0para download, e certifique-se de verificar esta <a href=\"https:\/\/kinsta.com\/pt\/blog\/temas-wordpress-mais-rapidos\/\">lista curada dos melhores temas WordPress<\/a>, onde voc\u00ea poderia navegar atrav\u00e9s de muitos temas responsivos.<\/p>\n<p>O Google tamb\u00e9m oferece algumas dicas de como\u00a0<a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/responsive\/\">projetar um site que responda<\/a>.<\/p>\n<h3>Seguran\u00e7a do site<\/h3>\n<p>Outra pr\u00e1tica de codifica\u00e7\u00e3o importante? Criar programas e websites seguros em que os utilizadores possam confiar as suas informa\u00e7\u00f5es pessoais sens\u00edveis. Ao contr\u00e1rio da cren\u00e7a popular, os hackers n\u00e3o procuram ativamente sites<i> espec\u00edficos<\/i> para hackear, e \u00e9 por isso que mesmo sites pequenos s\u00e3o\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-hackeado\/\">vulner\u00e1veis a ataques<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Kinsta oferece <a href=\"https:\/\/kinsta.com\/pt\/docs\/informacoes-de-servico\/remocao-de-malware\/\">uma penhor de seguran\u00e7a de malware<\/a> com cada plano e, caso algo ruim aconte\u00e7a, especialistas em seguran\u00e7a ir\u00e3o consertar seu site.<\/p>\n<\/aside>\n\n<p>Como um todo, o WordPress \u00e9 <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-wordpress-e-seguro\/\">geralmente seguro<\/a>, mas ajuda a tomar precau\u00e7\u00f5es extras para manter o seu site seguro contra ataques.<\/p>\n<p>Aqui est\u00e3o algumas das melhores pr\u00e1ticas de seguran\u00e7a do site:<\/p>\n<ul>\n<li><strong>Obtenha um certificado SSL,<\/strong> que \u00e9 especialmente importante para sites que lidam com pagamentos e informa\u00e7\u00f5es pessoais. O <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-funciona-o-ssl\/\">certificado SSL<\/a>\u00a0encripta a informa\u00e7\u00e3o enviada atrav\u00e9s das redes para que os hackers tenham dificuldade em descodific\u00e1-la. Al\u00e9m disso, \u00e9 um padr\u00e3o da ind\u00fastria. O Chrome alerta os visitantes quando o site que eles est\u00e3o visitando n\u00e3o tem um certificado SSL. Al\u00e9m disso, o Chrome est\u00e1 agora\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/err_ssl_obsolete_version\/\">a depreciar as vers\u00f5es antigas do TLS<\/a>\u00a0e come\u00e7ou a mostrar avisos adicionais.<br \/>\n<a href=\"https:\/\/kinsta.com\/pt\/blog\/http-para-https\/\">A ativa\u00e7\u00e3o do HTTPS<\/a> (parte da instala\u00e7\u00e3o de um certificado SSL) \u00e9 tamb\u00e9m um fator oficial de classifica\u00e7\u00e3o no Google.<\/li>\n<li><strong>Mantenha as suas credenciais de login seguras.<\/strong> V\u00e1rios ataques s\u00e3o causados por hackers que tentam ganhar acesso a um site \u00e0 for\u00e7a. Ele ajuda a ter uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/login-wordpress-url\/\">p\u00e1gina de login separada\/ocultada<\/a> (use o plugin\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/wps-hide-login\/\">WP Hide Login<\/a>) e a limitar o n\u00famero de tentativas de login. Use o plugin\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/login-lockdown\/\">Login LockDown<\/a>, que grava o endere\u00e7o IP e o timestamp de cada tentativa de login falhada e bloqueia a fun\u00e7\u00e3o de login se o n\u00famero de tentativas falhadas a partir do mesmo intervalo de IP for atingido em um curto per\u00edodo de tempo. Al\u00e9m disso, crie uma senha segura com mais de 6 caracteres e que seja uma mistura de letras mai\u00fasculas e min\u00fasculas, n\u00fameros e caracteres especiais. Mude sua senha frequentemente. Voc\u00ea tamb\u00e9m pode usar autentica\u00e7\u00e3o de dois fatores para fazer login se voc\u00ea estiver procurando por seguran\u00e7a extra.<\/li>\n<li><strong>Mantenha o n\u00facleo, plugins e temas do WordPress atualizados.<\/strong> N\u00e3o se esque\u00e7a de descarregar plugins ou temas a partir de uma fonte respeit\u00e1vel. Um bom sinal \u00e9 se o plugin\/tema tem m\u00faltiplas instala\u00e7\u00f5es e foi atualizado recentemente. Voc\u00ea tamb\u00e9m deve ler revis\u00f5es para decidir por si mesmo se o plugin \u00e9 de confian\u00e7a (certifique-se de\u00a0<a href=\"https:\/\/kinsta.com\/pt\/topicos\/plugins-wordpress\/\">verificar os listados aqui<\/a>). Nesse ponto, baixe um plugin de seguran\u00e7a WordPress, como\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/plugins-de-seguranca-wordpress\/#wordfence-security\">Wordfence<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/plugins-de-seguranca-wordpress\/#sucuri\">Sucuri<\/a> ou\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/plugins-de-seguranca-wordpress\/#defender\">Defender<\/a>, pois 73,2% das instala\u00e7\u00f5es mais populares do WordPress que s\u00e3o vulner\u00e1veis podem ser detectadas\u00a0<a href=\"https:\/\/www.wpwhitesecurity.com\/wordpress-security-news-updates\/statistics-70-percent-wordpress-installations-vulnerable\/\">usando ferramentas automatizadas gratuitas<\/a>. Aqui est\u00e1 uma lista mais aprofundada\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/plugins-de-seguranca-wordpress\/\">dos melhores plugins de seguran\u00e7a<\/a>.<\/li>\n<li><strong>Use um servidor web seguro.<\/strong> Para aqueles que n\u00e3o sabem, pode n\u00e3o parecer que o seu web host tenha algo a ver com a seguran\u00e7a do site, mas\u00a0<a href=\"https:\/\/www.wpwhitesecurity.com\/state-of-security-of-wordpress-blogs-and-websites\/\">41% dos ataques<\/a> ocorrem atrav\u00e9s de uma vulnerabilidade de seguran\u00e7a na plataforma de hospedagem. Procure um provedor de hospedagem que inclua recursos como: criptografia e f<a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-um-firewall\/\">irewall do lado do servidor<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/nginx-vs-apache\/\">servidores web NGINX ou Apache<\/a>, antiv\u00edrus e software anti-malware, sistemas de seguran\u00e7a no local, e a disponibilidade de certificados SSL e um CDN.<\/li>\n<\/ul>\n<p>Para mais informa\u00e7\u00f5es sobre seguran\u00e7a do WordPress, confira nosso abrangente recurso sobre\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/seguranca-wordpres\/\">como manter seu site WordPress seguro<\/a>.<\/p>\n<h3>Velocidade da p\u00e1gina<\/h3>\n<p>Cerca de metade dos usu\u00e1rios espera que um site seja carregado em <a href=\"https:\/\/www.bluecorona.com\/blog\/20-web-design-facts-small-business-owners\/\">2 segundos ou menos<\/a>, e se demorar mais do que isso, 40% das pessoas n\u00e3o hesitar\u00e3o em saltar da p\u00e1gina, (provavelmente) nunca mais retornar\u00e3o.<\/p>\n<p>Al\u00e9m das visitas ao site, a velocidade da p\u00e1gina \u00e9 importante, pois tamb\u00e9m afeta a convers\u00e3o e a receita. Para cada segundo de velocidade de carregamento de p\u00e1ginas adicionada, as vendas\u00a0<a href=\"https:\/\/www.lyfemarketing.com\/blog\/web-design-best-practices\/\">cair\u00e3o at\u00e9 27%<\/a>. O aumento da velocidade do site pode evitar a perda de <a href=\"https:\/\/www.infront.com\/blog\/the-blog\/8-statistics-that-prove-responsive-web-design-is-essential-to-seo\">7% das poss\u00edveis convers\u00f5es<\/a>.<\/p>\n<p>Aqui est\u00e3o algumas formas de fazer com que as suas p\u00e1ginas web sejam carregadas mais rapidamente:<\/p>\n<ul>\n<li>Use uma <strong>rede de entrega de conte\u00fado (CDN)<\/strong>, que leva arquivos est\u00e1ticos como imagens, <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/\">CSS<\/a> e JavaScript, e \u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/cdn-para-wordpress\/\">os entrega nos servidores mais pr\u00f3ximos da localiza\u00e7\u00e3o f\u00edsica do usu\u00e1rio<\/a>.<\/li>\n<li><strong>Considere como voc\u00ea usa as imagens.<\/strong> O site usa em m\u00e9dia 1,8MB de imagens, o que representa\u00a0<a href=\"https:\/\/speedcurve.com\/blog\/web-performance-page-bloat\/\">60% do tamanho de um site<\/a>. Para ajudar com isso, reconsidere a forma como voc\u00ea configura a sua p\u00e1gina web. Se voc\u00ea quiser manter a velocidade da p\u00e1gina rapidamente, tente reduzir o n\u00famero de imagens grandes usadas em seu design e certifique-se de\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/otimizar-imagens-para-web\/\">otimiz\u00e1-las<\/a>.<\/li>\n<li>Se o seu site precisa usar muitas imagens grandes, <strong>use plugins<\/strong> que incluem funcionalidades para\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/ativar-compressao-gzip\/\">compress\u00e3o GZIP<\/a>, cache ou otimiza\u00e7\u00e3o de imagens, como\u00a0<a href=\"https:\/\/wp-rocket.me\/\">WP Rocket<\/a> and <a href=\"https:\/\/imagify.io\/\">Imagify<\/a>. Eles podem ajudar a tornar os seus arquivos menores (sem sacrificar a qualidade) para que eles carreguem mais r\u00e1pido.<\/li>\n<li><strong>Considere o n\u00famero de plugins e arquivos que voc\u00ea mant\u00e9m em seu banco de dados WordPress<\/strong>, pois eles tamb\u00e9m podem afetar a velocidade de carregamento da p\u00e1gina. Limpa aqueles que n\u00e3o usas. Enquanto estiver nisso, mantenha seu PHP, <a href=\"https:\/\/kinsta.com\/pt\/blog\/manutencao-101-do-wordpress\/#keeping-your-wordpress-site-updated\">n\u00facleo do WordPress e plugins atualizados para suas \u00faltimas vers\u00f5es<\/a>.<\/li>\n<\/ul>\n<p>Confira nosso abrangente recurso para\u00a0<a href=\"https:\/\/kinsta.com\/pt\/aprenda\/velocidade-de-sites\/\">otimiza\u00e7\u00e3o da velocidade do site<\/a>.<\/p>\n<h2>Padr\u00f5es de Acessibilidade<\/h2>\n<p>A Internet foi concebida para funcionar para todas as pessoas, independentemente do hardware, software, linguagem que utilizam, da sua capacidade ou localiza\u00e7\u00e3o. No entanto, muitos sacrificam a acessibilidade por um belo design.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/03\/accessibilidade-chave-todo-site.jpg\" alt=\"Acessibilidade \u00e9 a chave para todo site\" width=\"1320\" height=\"732\"><figcaption class=\"wp-caption-text\">Acessibilidade \u00e9 a chave para todo site<\/figcaption><\/figure>\n<p><i>Acessibilidade<\/i> refere-se \u00e0 pr\u00e1tica de tornar o seu site utiliz\u00e1vel por<i> todos<\/i>.<\/p>\n<p>Al\u00e9m daqueles com defici\u00eancias que afetam o acesso, <a href=\"https:\/\/www.w3.org\/WAI\/intro\/accessibility.php\">o W3<\/a> diz que a acessibilidade do site tamb\u00e9m \u00e9 ben\u00e9fica:<\/p>\n<ul>\n<li>Aqueles que utilizam dispositivos com telas pequenas, diferentes modos de entrada, etc.<\/li>\n<li>Os idosos.<\/li>\n<li>Pessoas com &#8220;defici\u00eancias tempor\u00e1rias&#8221;, incluindo um membro quebrado, \u00f3culos perdidos, ou uma condi\u00e7\u00e3o m\u00e9dica.<\/li>\n<li>Usu\u00e1rios com &#8220;limita\u00e7\u00f5es situacionais&#8221;, como aqueles que acessam a Internet em dispositivos sob a luz solar intensa ou em um ambiente onde n\u00e3o podem ouvir \u00e1udio, como o transporte p\u00fablico.<\/li>\n<li>Indiv\u00edduos com uma conex\u00e3o lenta \u00e0 Internet.<\/li>\n<\/ul>\n<p>A acessibilidade deve ser uma preocupa\u00e7\u00e3o de todos, pois todos n\u00f3s somos afetados por ela de alguma forma.<\/p>\n<h3>Raz\u00f5es para tornar o seu Site Acess\u00edvel<\/h3>\n<p>Ainda n\u00e3o sabe se vale a pena gastar o seu tempo em acessibilidade nesta discuss\u00e3o sobre as melhores pr\u00e1ticas de web design?<\/p>\n<p>Considere estas raz\u00f5es:<\/p>\n<ul>\n<li><strong>\u00c9 um requisito da ADA.<\/strong> A Lei dos Americanos Portadores de Defici\u00eancia (ADA) foi aprovada em 1990 para proteger os direitos civis das pessoas com defici\u00eancia contra a discrimina\u00e7\u00e3o. Abrange coisas como transporte, telecomunica\u00e7\u00f5es, emprego e at\u00e9 c\u00f3digos de constru\u00e7\u00e3o. Como esta lei foi aprovada quase 30 anos antes &#8211; uma \u00e9poca em que a internet n\u00e3o era t\u00e3o onipresente &#8211; os legisladores est\u00e3o\u00a0<a href=\"https:\/\/www.ada.gov\/anprm2010\/web%2520anprm_2010.htm\">procurando alter\u00e1-la<\/a>.<\/li>\n<li><strong>Promove a inclusividade.<\/strong> Uma pesquisa do Pew Research Center mostra que as pessoas com defici\u00eancia <a href=\"http:\/\/www.pewresearch.org\/fact-tank\/2017\/04\/07\/disabled-americans-are-less-likely-to-use-technology\/\">tr\u00eas vezes menos probabilidade<\/a> de entrar na internet do que as suas contrapartes sem defici\u00eancia, o que \u00e9 uma pena, uma vez que as estat\u00edsticas mostram que cerca de\u00a0<a href=\"http:\/\/www.talentinnovation.org\/_private\/assets\/DisabilitiesInclusion_PressRelease.pdf\">30% dos profissionais<\/a> t\u00eam uma defici\u00eancia, sendo que 62% das pessoas com defici\u00eancia &#8220;voam por baixo do radar&#8221; por medo de enviesamento negativo.<\/li>\n<li><strong>Vai ajud\u00e1-lo a ganhar mais neg\u00f3cios.<\/strong> Ao ser mais inclusivo, voc\u00ea trar\u00e1 uma rede de pessoas com defici\u00eancia, o que representa\u00a0<a href=\"https:\/\/www.boia.org\/blog\/how-to-prevent-a-web-accessibility-lawsuit\">7 trilh\u00f5es de d\u00f3lares em renda dispon\u00edvel.<\/a><\/li>\n<li><strong>Benef\u00edcios de SEO.<\/strong> Os motores de busca recompensam os sites que s\u00e3o compat\u00edveis com a acessibilidade, a fim de incentivar mais sites a serem acess\u00edveis.<\/li>\n<\/ul>\n<h3>Como tornar o seu site mais acess\u00edvel<\/h3>\n<p>Uma maneira f\u00e1cil de tornar o seu site mais acess\u00edvel \u00e9 instalar o plugin\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/wp-accessibility\/\">WP Accessibility<\/a>, que acrescenta funcionalidades de acessibilidade, incluindo:<\/p>\n<ul>\n<li>Uma barra de ferramentas onde os usu\u00e1rios podem redimensionar as fontes e visualizar seu site em alto contraste e em escala de cinza.<\/li>\n<li>Comparar o contraste de cores para verificar se ele se encaixa no padr\u00e3o do ADA.<\/li>\n<li>Remo\u00e7\u00e3o de atributos de t\u00edtulo de imagens inseridas no conte\u00fado. A maioria dos leitores de ecr\u00e3 n\u00e3o consegue sentir isto e ler o texto de \u00e2ncora em vez disso.<\/li>\n<li>Habilitando links de pular, que s\u00e3o links de p\u00e1ginas internas que permitem aos usu\u00e1rios pular diretamente para o conte\u00fado, o que \u00e9 \u00fatil para as pessoas que usam leitores de tela.<\/li>\n<\/ul>\n<p>Alguns passos adicionais a tomar:<\/p>\n<ul>\n<li><strong>Adicione legendas ou uma transcri\u00e7\u00e3o<\/strong> se o seu site produz m\u00eddia como\u00a0<a href=\"https:\/\/kinsta.com\/pt\/blog\/reprodutores-de-audio-wordpress\/\">\u00e1udio<\/a>, audiolivros, v\u00eddeos, <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-podcast\/\">podcasts<\/a>, etc., para beneficiar os surdos\/mudos, assim como as pessoas que querem consumir o seu conte\u00fado, mas n\u00e3o podem consumir m\u00eddia em p\u00fablico.<\/li>\n<li><strong>Crie links e menus acess\u00edveis por teclado<\/strong> para pessoas com defici\u00eancias motoras e s\u00f3 pode utilizar um teclado (n\u00e3o um rato) para navegar no seu site. Os menus dropdown s\u00e3o desencorajados, mas voc\u00ea pode corrigir isso atribuindo atalhos para cada item dropdown (tais como: pressione &#8220;1&#8221; para a p\u00e1gina inicial, &#8220;2&#8221; para a p\u00e1gina about, etc.).<\/li>\n<li>Por fim, <strong>teste o seu site para verificar a acessibilidade do mesmo<\/strong>. A Iniciativa de Acessibilidade na Web n\u00e3o endossa nenhuma ferramenta espec\u00edfica, mas oferece uma <a href=\"https:\/\/www.w3.org\/WAI\/ER\/tools\/\">lista de ferramentas que<\/a> voc\u00ea pode usar para auditar seus esfor\u00e7os.<\/li>\n<\/ul>\n<h2>Reflex\u00f5es finais: Melhores Pr\u00e1ticas de Web Design para o seu Pr\u00f3ximo Projeto de Website<\/h2>\n<p>Bons sites n\u00e3o devem ser definidos por um design objetivamente bom. Igualmente importante \u00e9 a usabilidade do site, a facilidade de navega\u00e7\u00e3o e a acessibilidade. Armado com estas melhores pr\u00e1ticas de web design, voc\u00ea tem tudo o que precisa para <strong>criar algo que pare\u00e7a e funcione bem<\/strong>.<\/p>\n\n<p>Tenha em mente que estas s\u00e3o as<i> melhores pr\u00e1ticas de<\/i> web design. \u00c9 prov\u00e1vel que voc\u00ea n\u00e3o consiga seguir cada um deles exatamente, dependendo da natureza do seu site. Mas antes que voc\u00ea possa quebrar as regras, ajuda ao menos estar ciente do porqu\u00ea elas existem.<\/p>\n<p>Perdemos alguma coisa importante? Partilhe as suas melhores pr\u00e1ticas de web design nos coment\u00e1rios abaixo!<\/p>\n<p>Sugest\u00e3o de leitura: <a href=\"https:\/\/kinsta.com\/pt\/blog\/cursos-de-web-design\/\">Melhores Cursos de Web Design Online<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>O que causa a grande discrep\u00e2ncia entre o que alguns\u00a0desenvolvedores de WordPress cobram em compara\u00e7\u00e3o com outros? A resposta a esta pergunta requer considera\u00e7\u00e3o pela raz\u00e3o &#8230;<\/p>\n","protected":false},"author":48,"featured_media":35396,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[324,64],"topic":[1039,1019,1015],"class_list":["post-35373","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-accessibility","tag-webdesign","topic-design-sites-wordpress","topic-identidade-visual-do-site","topic-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Melhores Pr\u00e1ticas de Web Design Para o seu Pr\u00f3ximo Projeto de Website<\/title>\n<meta name=\"description\" content=\"Um bom design n\u00e3o se resume \u00e0 est\u00e9tica. Igualmente importante: usabilidade do site, facilidade de navega\u00e7\u00e3o, &amp; acessibilidade. Saiba mais sobre as melhores pr\u00e1ticas de web design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Melhores Pr\u00e1ticas de Web Design para o seu Pr\u00f3ximo Projeto de Website\" \/>\n<meta property=\"og:description\" content=\"Um bom design n\u00e3o se resume \u00e0 est\u00e9tica. Igualmente importante: usabilidade do site, facilidade de navega\u00e7\u00e3o, &amp; acessibilidade. Saiba mais sobre as melhores pr\u00e1ticas de web design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-17T13:12:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-22T08:45:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/praticas-web-design-proximo-projecto.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Maddy Osman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Um bom design n\u00e3o se resume \u00e0 est\u00e9tica. Igualmente importante: usabilidade do site, facilidade de navega\u00e7\u00e3o, &amp; acessibilidade. Saiba mais sobre as melhores pr\u00e1ticas de web design.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/praticas-web-design-proximo-projecto.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@maddyosman\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Maddy Osman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"25 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/\"},\"author\":{\"name\":\"Maddy Osman\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/8ebe30416d11374fc13b3a0d0b25cb89\"},\"headline\":\"Melhores Pr\u00e1ticas de Web Design para o seu Pr\u00f3ximo Projeto de Website\",\"datePublished\":\"2020-02-17T13:12:25+00:00\",\"dateModified\":\"2023-08-22T08:45:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/\"},\"wordCount\":5506,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/praticas-web-design-proximo-projecto.jpg\",\"keywords\":[\"accessibility\",\"webdesign\"],\"articleSection\":[\"Desenvolvimento WordPress\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/\",\"name\":\"Melhores Pr\u00e1ticas de Web Design Para o seu Pr\u00f3ximo Projeto de Website\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/praticas-web-design-proximo-projecto.jpg\",\"datePublished\":\"2020-02-17T13:12:25+00:00\",\"dateModified\":\"2023-08-22T08:45:05+00:00\",\"description\":\"Um bom design n\u00e3o se resume \u00e0 est\u00e9tica. Igualmente importante: usabilidade do site, facilidade de navega\u00e7\u00e3o, & acessibilidade. Saiba mais sobre as melhores pr\u00e1ticas de web design.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/praticas-web-design-proximo-projecto.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/praticas-web-design-proximo-projecto.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Melhores Pr\u00e1ticas de Web Design para o seu Pr\u00f3ximo Projecto de Website\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Identidade Visual do Site\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/identidade-visual-do-site\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Melhores Pr\u00e1ticas de Web Design para o seu Pr\u00f3ximo Projeto de Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/8ebe30416d11374fc13b3a0d0b25cb89\",\"name\":\"Maddy Osman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6dd84956bec2e4b407d1b071a666ba85?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6dd84956bec2e4b407d1b071a666ba85?s=96&d=mm&r=g\",\"caption\":\"Maddy Osman\"},\"description\":\"Maddy Osman creates engaging content with SEO best practices for marketing thought leaders and agencies that have their hands full with clients and projects. Learn more about her process and experience on her website, The Blogsmith and read her latest articles on Twitter: @MaddyOsman.\",\"sameAs\":[\"http:\/\/www.the-blogsmith.com\",\"https:\/\/x.com\/maddyosman\"],\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/maddy\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Melhores Pr\u00e1ticas de Web Design Para o seu Pr\u00f3ximo Projeto de Website","description":"Um bom design n\u00e3o se resume \u00e0 est\u00e9tica. Igualmente importante: usabilidade do site, facilidade de navega\u00e7\u00e3o, & acessibilidade. Saiba mais sobre as melhores pr\u00e1ticas de web design.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/","og_locale":"pt_PT","og_type":"article","og_title":"Melhores Pr\u00e1ticas de Web Design para o seu Pr\u00f3ximo Projeto de Website","og_description":"Um bom design n\u00e3o se resume \u00e0 est\u00e9tica. Igualmente importante: usabilidade do site, facilidade de navega\u00e7\u00e3o, & acessibilidade. Saiba mais sobre as melhores pr\u00e1ticas de web design.","og_url":"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2020-02-17T13:12:25+00:00","article_modified_time":"2023-08-22T08:45:05+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/praticas-web-design-proximo-projecto.jpg","type":"image\/jpeg"}],"author":"Maddy Osman","twitter_card":"summary_large_image","twitter_description":"Um bom design n\u00e3o se resume \u00e0 est\u00e9tica. Igualmente importante: usabilidade do site, facilidade de navega\u00e7\u00e3o, & acessibilidade. Saiba mais sobre as melhores pr\u00e1ticas de web design.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/praticas-web-design-proximo-projecto.jpg","twitter_creator":"@maddyosman","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Maddy Osman","Tempo estimado de leitura":"25 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/"},"author":{"name":"Maddy Osman","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/8ebe30416d11374fc13b3a0d0b25cb89"},"headline":"Melhores Pr\u00e1ticas de Web Design para o seu Pr\u00f3ximo Projeto de Website","datePublished":"2020-02-17T13:12:25+00:00","dateModified":"2023-08-22T08:45:05+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/"},"wordCount":5506,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/praticas-web-design-proximo-projecto.jpg","keywords":["accessibility","webdesign"],"articleSection":["Desenvolvimento WordPress"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/","url":"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/","name":"Melhores Pr\u00e1ticas de Web Design Para o seu Pr\u00f3ximo Projeto de Website","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/praticas-web-design-proximo-projecto.jpg","datePublished":"2020-02-17T13:12:25+00:00","dateModified":"2023-08-22T08:45:05+00:00","description":"Um bom design n\u00e3o se resume \u00e0 est\u00e9tica. Igualmente importante: usabilidade do site, facilidade de navega\u00e7\u00e3o, & acessibilidade. Saiba mais sobre as melhores pr\u00e1ticas de web design.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/praticas-web-design-proximo-projecto.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/02\/praticas-web-design-proximo-projecto.jpg","width":1460,"height":730,"caption":"Melhores Pr\u00e1ticas de Web Design para o seu Pr\u00f3ximo Projecto de Website"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Identidade Visual do Site","item":"https:\/\/kinsta.com\/pt\/topicos\/identidade-visual-do-site\/"},{"@type":"ListItem","position":3,"name":"Melhores Pr\u00e1ticas de Web Design para o seu Pr\u00f3ximo Projeto de Website"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/8ebe30416d11374fc13b3a0d0b25cb89","name":"Maddy Osman","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6dd84956bec2e4b407d1b071a666ba85?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6dd84956bec2e4b407d1b071a666ba85?s=96&d=mm&r=g","caption":"Maddy Osman"},"description":"Maddy Osman creates engaging content with SEO best practices for marketing thought leaders and agencies that have their hands full with clients and projects. Learn more about her process and experience on her website, The Blogsmith and read her latest articles on Twitter: @MaddyOsman.","sameAs":["http:\/\/www.the-blogsmith.com","https:\/\/x.com\/maddyosman"],"url":"https:\/\/kinsta.com\/pt\/blog\/author\/maddy\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/35373","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/48"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=35373"}],"version-history":[{"count":13,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/35373\/revisions"}],"predecessor-version":[{"id":51181,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/35373\/revisions\/51181"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35373\/translations\/en"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35373\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35373\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35373\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35373\/translations\/it"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35373\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35373\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35373\/translations\/jp"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35373\/translations\/dk"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35373\/translations\/se"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/35373\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/35396"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=35373"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=35373"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=35373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}