{"id":31156,"date":"2023-01-06T13:03:30","date_gmt":"2023-01-06T16:03:30","guid":{"rendered":"\/tutoriais\/?p=31156"},"modified":"2026-01-15T20:04:30","modified_gmt":"2026-01-15T23:04:30","slug":"boas-praticas-web-design","status":"publish","type":"post","link":"\/br\/tutoriais\/boas-praticas-web-design\/","title":{"rendered":"Boas pr\u00e1ticas de web design para atrair mais visitantes para o seu site em 2026"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Ter um design atrativo &eacute; crucial para o sucesso de um site. Pesquisas indicam que <a href=\"https:\/\/www.sweor.com\/firstimpressions\" target=\"_blank\" rel=\"noopener\"><strong>38% dos visitantes<\/strong><\/a> abandonam uma p&aacute;gina caso ela n&atilde;o seja visualmente agrad&aacute;vel.&nbsp;<\/p><p class=\"wp-block-paragraph\">Se voc&ecirc; est&aacute; come&ccedil;ando a criar seu site agora, pode ser dif&iacute;cil entender o que atrai e o que afasta os visitantes.&nbsp;<\/p><p class=\"wp-block-paragraph\">Por isso, aprender sobre as melhores pr&aacute;ticas de web <a href=\"\/br\/tutoriais\/como-fazer-o-design-de-um-site\/\"><strong>design<\/strong><\/a> &eacute; um &oacute;timo ponto de partida para come&ccedil;ar a tomar decis&otilde;es estrat&eacute;gicas e evitar erros comuns na constru&ccedil;&atilde;o do site.<\/p><p class=\"wp-block-paragraph\">Neste artigo, vamos oferecer um guia completo das melhores pr&aacute;ticas de web design para te ajudar a atrair mais visitantes e tirar o m&aacute;ximo proveito do que o seu site tem a oferecer.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Build-website-in-9-easy-steps-BR.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-30342\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-melhores-praticas-de-web-design-nbsp\"><strong>Melhores Pr&aacute;ticas de Web Design&nbsp;<\/strong><\/h2><p class=\"wp-block-paragraph\"><a href=\"\/br\/tutoriais\/como-fazer-o-layout-de-um-site\/\"><strong>Fazer um layout de site<\/strong><\/a> seja atrativo n&atilde;o requer apenas aten&ccedil;&atilde;o &agrave; est&eacute;tica, mas tamb&eacute;m &agrave; experi&ecirc;ncia do usu&aacute;rio. Pesquisas indicam que problemas de funcionalidade num site levam <a href=\"https:\/\/blog.hubspot.com\/marketing\/web-design-stats-for-2020\" target=\"_blank\" rel=\"noopener\"><strong>42% dos visitantes<\/strong><\/a> a deix&aacute;-lo. A falta de recursos ou uma experi&ecirc;ncia do usu&aacute;rio negativa tamb&eacute;m diminui as taxas de convers&atilde;o e aumenta as taxas de rejei&ccedil;&atilde;o das suas p&aacute;ginas, afetando o desempenho e as estrat&eacute;gias de SEO do site.<\/p><p class=\"wp-block-paragraph\">Para te ajudar a evitar esses problemas, vamos nos aprofundar nas melhores pr&aacute;ticas de web design baseados nos seguintes princ&iacute;pios:<\/p><ul class=\"wp-block-list\">\n<li>Identidade visual<\/li>\n\n\n\n<li>Hierarquia visual&nbsp;<\/li>\n\n\n\n<li>Navega&ccedil;&atilde;o<\/li>\n\n\n\n<li>Programa&ccedil;&atilde;o&nbsp;<\/li>\n\n\n\n<li>Acessibilidade<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-identidade-visual\"><strong>Identidade Visual<\/strong><\/h2><p class=\"wp-block-paragraph\">O <a href=\"\/br\/tutoriais\/como-criar-uma-marca\/\"><em><strong>branding<\/strong><\/em><\/a> de um site cumpre um papel muito importante no web design, j&aacute; que ele molda as percep&ccedil;&otilde;es dos visitantes quanto &agrave;s suas p&aacute;ginas, ajuda a estabelecer credibilidade para sua marca e atrai potenciais consumidores.<\/p><p class=\"wp-block-paragraph\">Para facilitar o processo de constru&ccedil;&atilde;o da identidade visual da sua marca, vamos conferir os tr&ecirc;s passos essenciais para garantir um <em>branding<\/em> consistente quando estiver fazendo o design de seu site.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-conheca-seu-publico-alvo\"><strong>Conhe&ccedil;a seu P&uacute;blico-Alvo<\/strong><\/h3><p class=\"wp-block-paragraph\">Identificar seu p&uacute;blico-alvo te ajuda a compreender e definir a marca do site, al&eacute;m de facilitar o processo de personaliza&ccedil;&atilde;o do design conforme as prefer&ecirc;ncias e interesses dos seus consumidores. Abaixo indicamos v&aacute;rios m&eacute;todos para entender melhor sua audi&ecirc;ncia:<\/p><ul class=\"wp-block-list\">\n<li><strong>An&aacute;lise do p&uacute;blico alvo.<\/strong> Fa&ccedil;a pesquisas quanto &agrave; demografia e psicografia da sua audi&ecirc;ncia. Isso inclui encontrar informa&ccedil;&otilde;es como a faixa et&aacute;ria, g&ecirc;nero, localidade, status socioecon&ocirc;mico, interesses e escolhas de estilo de vida do seu p&uacute;blico alvo.&nbsp;<\/li>\n\n\n\n<li><strong>Entrevistas com clientes. <\/strong>Convide pessoas que j&aacute; compraram seus produtos ou servi&ccedil;os para uma entrevista informal. Al&eacute;m de oferecer ideias e informa&ccedil;&otilde;es quanto ao tipo de pessoa que s&atilde;o e quanto aos motivos que os fizeram escolher seus produtos, esse m&eacute;todo tamb&eacute;m te ajuda a fortalecer as conex&otilde;es com o seu p&uacute;blico.&nbsp;<\/li>\n\n\n\n<li><strong>An&aacute;lise de competidores. <\/strong>Pesquise sua concorr&ecirc;ncia, visitando seus sites e perfis nas redes sociais. Veja como os competidores posicionam suas marcas no mercado e qual o tipo de conte&uacute;do que costuma gerar mais engajamento.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Dica da Especialista\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\">O primeiro passo na constru&ccedil;&atilde;o do design de um site &eacute; conhecer seu prop&oacute;sito e seu p&uacute;blico-alvo. Por exemplo, se voc&ecirc; estiver construindo um site do tipo loja virtual para vender brinquedos educacionais, determine quem ser&atilde;o seus clientes.&nbsp;<br>Nesse processo voc&ecirc; pode descobrir que seu mercado alvo &eacute; composto principalmente por m&atilde;es de primeira viagem. Sendo assim, na hora de criar o design do site, voc&ecirc; poder&aacute; ter essa audi&ecirc;ncia em mente e fazer escolhas que sejam atrativas para ela, usando cores, fontes, layout e imagens apropriadas em seu site.<\/p>\n                <div class=\"protip__expert\">\n                    <div class=\"protip__expert-image\">\n                        <img decoding=\"async\" width=\"48\" height=\"48\" src=\"https:\/\/secure.gravatar.com\/avatar\/?s=65&d=mm&r=g\" alt=\"Editor\" \/>\n                    <\/div>\n                    <div>\n                        <p class=\"protip__expert-name\"><\/p>\n                        <p class=\"protip__expert-position\">Lead Product Designer<\/p>\n                    <\/div>\n                <\/div>\n        <\/div><\/p><h3 class=\"wp-block-heading\" id=\"h-determine-uma-paleta-de-cores\"><strong>Determine uma Paleta de Cores<\/strong><\/h3><p class=\"wp-block-paragraph\">A da escolha de um esquema de cores do seu site pode at&eacute; parecer uma tarefa bastante intuitiva. Mas fazendo isso de forma estrat&eacute;gica, voc&ecirc; poder&aacute; destacar elementos essenciais no site, al&eacute;m de moldar as percep&ccedil;&otilde;es dos seus visitantes e incentiv&aacute;-los a tomar algum tipo de a&ccedil;&atilde;o em suas p&aacute;ginas.&nbsp;<\/p><p class=\"wp-block-paragraph\">Empresas que utilizam as mesmas cores em todos seus materiais de marketing t&ecirc;m uma maior taxa de reconhecimento de marca &ndash; chegando aos <a href=\"https:\/\/www.crazyegg.com\/blog\/website-color-palettes\/\" target=\"_blank\" rel=\"noopener\"><strong>80%<\/strong><\/a>.<\/p><p class=\"wp-block-paragraph\">As melhores pr&aacute;ticas de web design para cria&ccedil;&atilde;o de uma paleta de cores atrativa incluem:<\/p><ul class=\"wp-block-list\">\n<li><strong>Explorar a <\/strong><a href=\"https:\/\/edu.gcfglobal.org\/pt\/conceitos-basicos-de-design-grafico\/teoria-das-cores\/1\/\" target=\"_blank\" rel=\"noopener\"><strong>teoria das cores<\/strong><\/a><strong>. <\/strong>Antes de criar um esquema de cores para sua marca, &eacute; importante saber quais associa&ccedil;&otilde;es algumas cores espec&iacute;ficas podem ter entre si. Depois disso, aprenda quais s&atilde;o os diferentes tipos de paletas de cores &mdash; como monocrom&aacute;ticas, tri&aacute;dicas, an&aacute;logas e complementares. Assim, voc&ecirc; poder&aacute; encontrar uma boa combina&ccedil;&atilde;o de cores para seu site e seus materiais.&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>N&atilde;o ignore o contraste. <\/strong>Usar cores com bastante contraste melhora a legibilidade dos conte&uacute;dos e a acessibilidade do site.<\/li>\n\n\n\n<li><strong>Siga a regra 60\/30\/10<\/strong>. Escolha uma cor prim&aacute;ria, que dever&aacute; compor 60% do seu site, e uma cor secund&aacute;ria para outros 30%. Os 10% finais devem ser de uma cor de destaque, que contraste ou complemente a cor prim&aacute;ria.&nbsp;<\/li>\n\n\n\n<li><strong>Implemente cores complementares<\/strong>. Em sites que possuam uma longa barra de rolagem, considere utilizar cores complementares como amarelo e roxo para distinguir as se&ccedil;&otilde;es entre si.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Por exemplo, a paleta de cores que comp&otilde;e o site do est&uacute;dio de pilates <a href=\"https:\/\/www.trevorblountpilates.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Trevor Blount<\/strong><\/a> &eacute; composta por tr&ecirc;s cores principais: creme como prim&aacute;ria, preto como secund&aacute;ria e vermelho como cor de destaque.<\/p><p class=\"wp-block-paragraph\">Essa combina&ccedil;&atilde;o cria um esquema de cores simples e harmonioso, al&eacute;m de colocar o t&iacute;tulo e a imagem em destaque como foco do site.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/fYzqFWle5i97nBCNxqaStBlB5i4ANxXwyHpCbOnRVMiuwp11-2R3FDAFVcwfQOSm3SlGesQP67sNa6TSQyAEKviqA4J71vFaHfmF56glkzF_QXKAzcw13AJUUXvJwu_lJMBoI5iZH7BFbbHME6hFlchG9vNUaMt7gMrxKVVzc4MldOG-5roH3LZ2bHRiLQ\" alt=\"Banner do site de est&uacute;dio de pilates Trevor Blount \"><\/figure>\n<\/div><p class=\"wp-block-paragraph\"><div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Dica da Especialista\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Geralmente come&ccedil;amos com uma cor prim&aacute;ria e constru&iacute;mos esquemas de cores de acordo com ela.&nbsp;<br>Se voc&ecirc; &eacute; um iniciante no mundo do design de sites e optar por uma paleta de cores an&aacute;loga ou monogr&aacute;fica, a forma mais simples de fazer o processo &eacute; escolhendo tons similares. De todo modo, se voc&ecirc; deseja que a cor prim&aacute;ria se destaque, selecione um esquema de cores tri&aacute;dico ou cores complementares.&nbsp;<br>Por fim, adicione cores neutras para balancear o design. Evite utilizar a cor preta total (#000000) para a fonte dos textos, dando prefer&ecirc;ncia para um tom levemente mais claro. Ao fazer isso voc&ecirc; reduz a fadiga visual dos leitores de conte&uacute;dos longos.<\/p>\n                <div class=\"protip__expert\">\n                    <div class=\"protip__expert-image\">\n                        <img decoding=\"async\" width=\"48\" height=\"48\" src=\"https:\/\/secure.gravatar.com\/avatar\/?s=65&d=mm&r=g\" alt=\"Editor\" \/>\n                    <\/div>\n                    <div>\n                        <p class=\"protip__expert-name\"><\/p>\n                        <p class=\"protip__expert-position\">Lead Product Designer<\/p>\n                    <\/div>\n                <\/div>\n        <\/div><\/p><h3 class=\"wp-block-heading\" id=\"h-escolha-uma-tipografia-adequada\"><strong>Escolha uma Tipografia Adequada<\/strong><\/h3><p class=\"wp-block-paragraph\">A tipografia de um site consiste no estilo, tamanho, apar&ecirc;ncia e estrutura da fonte textual. Escolher a <a href=\"https:\/\/tableless.com.br\/um-guia-completo-de-tipografia-para-a-web\/\" target=\"_blank\" rel=\"noopener\"><strong>tipografia<\/strong><\/a> certa para seu site n&atilde;o apenas melhora a est&eacute;tica das suas p&aacute;ginas, como tamb&eacute;m otimiza a experi&ecirc;ncia do usu&aacute;rio e a acessibilidade geral do site.<\/p><p class=\"wp-block-paragraph\">Por exemplo, para passar mensagens s&eacute;rias e informa&ccedil;&otilde;es importantes, escolha um estilo de fonte simples que n&atilde;o distraia os leitores.<\/p><p class=\"wp-block-paragraph\">Outras pr&aacute;ticas de web design para melhorar a tipografia do seu site incluem:<\/p><ul class=\"wp-block-list\">\n<li><strong>Limite o n&uacute;mero de estilos de fontes. <\/strong>Usar muitos tipos diferentes de fonte pode deixar seu site com uma imagem pouco profissional. Optar por dois estilos de fonte que sejam diferentes por&eacute;m visualmente compat&iacute;veis &eacute; a melhor op&ccedil;&atilde;o para manter uma consist&ecirc;ncia.&nbsp;<\/li>\n\n\n\n<li><strong>Use <\/strong><a href=\"\/br\/tutoriais\/melhores-fontes-html\/\"><strong>fontes confi&aacute;veis<\/strong><\/a><strong>. <\/strong>Fontes confi&aacute;veis ou fontes <em>web-safe<\/em> tendem a renderizar seus textos da maneira desejada em diferentes navegadores e dispositivos, mantendo sua identidade visual consistente e otimizando a legibilidade do site.&nbsp;<\/li>\n\n\n\n<li><strong>Configure textos com tamanhos proporcionais<\/strong>. Uma boa regra de ouro &eacute; configurar o tamanho m&iacute;nimo das fontes do seu site em 16 pixels ou 12 pt. Para testar diferentes tamanhos de textos e pr&eacute;-visualizar como eles aparecer&atilde;o no seu site, utilize ferramentas online como o <a href=\"https:\/\/www.gridlover.net\/try\" target=\"_blank\" rel=\"noopener\"><strong>Gridlover<\/strong><\/a>.<\/li>\n\n\n\n<li><strong>Use entre <\/strong><a href=\"https:\/\/baymard.com\/blog\/line-length-readability\" target=\"_blank\" rel=\"noopener\"><strong>50 e 75<\/strong><\/a><strong> caracteres por linha. <\/strong>N&atilde;o adicione mais caracteres do que isso em cada linha textual, assim voc&ecirc; evita tornar o texto tedioso e deixar seus leitores com cansa&ccedil;o visual.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-hierarquia-visual-nbsp\"><strong>Hierarquia Visual&nbsp;<\/strong><\/h2><p class=\"wp-block-paragraph\">Organizar elementos de design de forma estrat&eacute;gica no site permite que voc&ecirc; guie os visitantes para as partes mais importantes de cada p&aacute;gina.&nbsp;<\/p><p class=\"wp-block-paragraph\">Abaixo listamos diversos fatores para levar em considera&ccedil;&atilde;o quando voc&ecirc; for criar uma hierarquia visual clara:<\/p><ul class=\"wp-block-list\">\n<li>Balan&ccedil;o<\/li>\n\n\n\n<li>Composi&ccedil;&atilde;o<\/li>\n\n\n\n<li>Escala<\/li>\n\n\n\n<li>Padr&otilde;es<\/li>\n\n\n\n<li>Espa&ccedil;os em branco<\/li>\n\n\n\n<li>Agrupamentos<\/li>\n\n\n\n<li>Texturas<\/li>\n\n\n\n<li>Elementos visuais<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-balanco\"><strong>Balan&ccedil;o<\/strong><\/h3><p class=\"wp-block-paragraph\">O balan&ccedil;o de um site &eacute; determinado pela forma com que os web designers distribuem os elementos visuais nas p&aacute;ginas. Quando estiver alocando seus elementos de design, lembre-se de fazer isso de forma proporcional, para assim conseguir criar um senso de unidade e apelo visual.&nbsp;<\/p><p class=\"wp-block-paragraph\">As se&ccedil;&otilde;es abaixo ir&atilde;o se aprofundar nas pr&aacute;ticas mais populares de design para tornar seu site mais balanceado.&nbsp;<\/p><p class=\"wp-block-paragraph\"><strong>Design Sim&eacute;trico<\/strong><\/p><p class=\"wp-block-paragraph\">Um design sim&eacute;trico cria balan&ccedil;o ao posicionar elementos uniformemente pela se&ccedil;&atilde;o central da p&aacute;gina do site. Por exemplo, se voc&ecirc; tem um item visualmente pesado na lateral direita da p&aacute;gina, um elemento igualmente pesado deve ser inserido na esquerda.&nbsp;<\/p><p class=\"wp-block-paragraph\">Esse tipo de design &eacute; bastante popular, j&aacute; que &eacute; adequado para todos os tamanhos de telas de exibi&ccedil;&atilde;o.<\/p><p class=\"wp-block-paragraph\">O site de <a href=\"\/br\/tutoriais\/como-fazer-um-portfolio-digital\/\">portf&oacute;lio digital<\/a> do <a href=\"https:\/\/www.adhamdannaway.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Adham Dannaway&rsquo;s<\/strong><\/a> &eacute; um exemplo excelente de design sim&eacute;trico. Nesse site, uma grande caricatura do rosto do criador est&aacute; posicionada no centro, como ponto focal, e os blocos de texto se espelham em termos de tamanho e posi&ccedil;&atilde;o &ndash; um de cada lado da imagem.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/WWKlgj14Ejgl_FxBsNQOj3fI19f2HsA3LXGAwPZOgmYWIwz1utUV6yBsMeCsSyjd4LQxYpPcAoNPGaKobqVVy89AVxplkVlF1X5d4ecJ7K-7XfdWq-i_5VxhrvDbEcLLoptUeAmKuE_m4W7u8rCtvNLKLPA1ywjr76xPIGWCmQ6qsTqwuDqETYBXhEOV8A\" alt=\"Banner do site do portf&oacute;lio digital de Adham Dannaway\"><\/figure>\n<\/div><p class=\"wp-block-paragraph\"><strong>Design Assim&eacute;trico<\/strong><\/p><p class=\"wp-block-paragraph\">Por outro lado, o posicionamento dos itens de um site n&atilde;o precisa seguir a linha central de forma sim&eacute;trica. Para alcan&ccedil;ar um bom balan&ccedil;o no site, muitos designers combinam cores e texturas ou manipulam perspectivas visuais.&nbsp;<\/p><p class=\"wp-block-paragraph\">Por exemplo, se voc&ecirc; posicionar um elemento proeminente perto da linha central da p&aacute;gina, dando destaque a esse item, &eacute; ideal posicionar um elemento um pouco menor mais longe dele.&nbsp;<\/p><p class=\"wp-block-paragraph\">Veja como a Mercedes-Benz balanceia um grande elemento &mdash; a fotografia do modelo &mdash; com um bloco de textos menor pr&oacute;ximo &agrave; imagem.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/U9zhnh673XLaAf2l8hLS4u83rF8PYRU_hsw0AjqWUzIC_xaLdqbHy9IkXva4pebgNZs-uMoy8EdMW1rTpqfgqKkKY00lDUC4VmqHQc8ilsVIEa-eM0scR7yx4jAV3EFa7ivVdk3sZDAOIhcBzEll0cJbM4euOUKAM1EqmgTPAdt0c2AlAjCIfEh8KBzS7g\" alt=\"P&aacute;gina inicial do site da Mercedes-Benz\"><\/figure>\n<\/div><p class=\"wp-block-paragraph\"><strong>Design em Mosaico<\/strong><\/p><p class=\"wp-block-paragraph\">Diferente dos outros dois tipos, um design em mosaico pode gerar um sentimento de inquieta&ccedil;&atilde;o. Esse tipo de layout geralmente indica a&ccedil;&atilde;o e movimento, sendo capaz de chamar aten&ccedil;&atilde;o para um elemento em destaque com um estilo moderno e din&acirc;mico.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/bx7S0QqQ2xkaARygSSu_6aQVgM_Hb43gXIs3L004ojrato3sXk3NLth4hZFpLKLlzfgjG-tZMpzXKEveTsqbLrL-qN3rMs30WPOzz8hLcKMFN64vLsIa63s557oA7Fp89ahEGyCKNnGAOgGhVEB6OS5qPpvHEPt5R008UnhzoKL7V6socWZwOk3HLzJ63g\" alt=\"Exemplo de design estilo mosaico com o site Johnson Banks\"><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-composicao\"><strong>Composi&ccedil;&atilde;o<\/strong><\/h3><p class=\"wp-block-paragraph\">A composi&ccedil;&atilde;o se refere &agrave; organiza&ccedil;&atilde;o dos elementos do site em uma estrutura coesa.&nbsp;<\/p><p class=\"wp-block-paragraph\">Um framework muito utilizado &eacute; a <a href=\"https:\/\/casadeimagem.com\/dica-de-composicao-regra-dos-tercos\/\" target=\"_blank\" rel=\"noopener\"><strong>regra dos ter&ccedil;os<\/strong><\/a>. Esse m&eacute;todo divide um design ou fotografia em duas linhas verticais e duas horizontais, assim utilizando uma grade de nove quadrados. Desse modo, o estilo oferece guias para alinhar textos, ajustar objetos e organizar elementos.<\/p><p class=\"wp-block-paragraph\">Um exemplo dessa pr&aacute;tica &eacute; a <em>landing page<\/em> da Hostinger global, onde os elementos est&atilde;o divididos em tr&ecirc;s se&ccedil;&otilde;es verticais.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/amjKpjPxaQSt5fnE_kAAsRGfPDG5waKBxhikKKKK7G5Co-_Hu8xTcVyjgoxcDozH2SGLF7jAQTaD8sbGSuGq-Z4-5evoGxG8PIF8GmiAg_rNOmKSLjksJMCemIYhDpx4ZgOa-ZU9XD_Xd0WkVVR6jkvjKZl9o0BfFEpR1T7kXqKTawuZSKiXjU_AY9QauA\" alt=\"P&aacute;gina inicial do site da Hostinger global\"><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-escala\"><strong>Escala<\/strong><\/h3><p class=\"wp-block-paragraph\">Durante o processo de cria&ccedil;&atilde;o do design do seu site, voc&ecirc; pode utilizar escalas para chamar aten&ccedil;&atilde;o para detalhes importantes. Abaixo indicamos algumas das melhores pr&aacute;ticas para voc&ecirc; se beneficiar com a utiliza&ccedil;&atilde;o de diferentes tamanhos para os elementos do site.&nbsp;<\/p><ul class=\"wp-block-list\">\n<li><strong>Opte por, no m&aacute;ximo, tr&ecirc;s tamanhos. <\/strong>Tamanhos pequeno, m&eacute;dio e grande s&atilde;o suficientes para te proporcionar variedade sem perder a ideia da hierarquia do site. Geralmente, os tamanhos variam de 14 px a 16 px para o corpo do texto, 18 px a 22 px para subt&iacute;tulos e mais de 32 px para t&iacute;tulos ou cabe&ccedil;alhos.&nbsp;<\/li>\n\n\n\n<li><strong>Aumente o tamanho de elementos importantes<\/strong>. Escolha dois elementos-chave no seu site e amplie-os para que eles fiquem em destaque na p&aacute;gina.&nbsp;<\/li>\n<\/ul><p class=\"wp-block-paragraph\">O site da <a href=\"https:\/\/www.flux-academy.com\/\" target=\"_blank\" rel=\"noopener\"><strong>FluxAcademy<\/strong><\/a>, por exemplo, enfatiza o corpo do texto ao utilizar um tamanho de fonte grande.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/syH1D1-6cjgDmRyumKH8p8LfPM8M4niT3jsNcP9n5t5TI8FSBsOwie58AmbV-lh4SPMOfHvudBzSTFhDYq-nWRUiNEnefhTtfs0hlKVD5Sn7-lWPzPtUVMIYbqr-8NO-hMQg_e5d_Mscg4Zwps00A1CTJ9EBJXXWLaCtia3zoAeKWfhefUkpVswihBc0gg\" alt=\"P&aacute;gina inicial do site FluxAcademy\"><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-padroes\"><strong>Padr&otilde;es<\/strong><\/h3><p class=\"wp-block-paragraph\">Quando as pessoas visitam um site, elas tendem a seguir um padr&atilde;o espec&iacute;fico de visualiza&ccedil;&atilde;o para fazer a leitura dos conte&uacute;dos de forma r&aacute;pida. Dependendo do tipo de conte&uacute;do, os visitantes geralmente seguem o formato das letras F e Z.&nbsp;<\/p><p class=\"wp-block-paragraph\">Fazer o design das suas p&aacute;ginas de acordo com esses padr&otilde;es ir&aacute; facilitar a leitura dos conte&uacute;dos e os fluxos de informa&ccedil;&atilde;o, assim melhorando a experi&ecirc;ncia do usu&aacute;rio. Vamos conferir esses dois padr&otilde;es com mais profundidade:<\/p><p class=\"wp-block-paragraph\"><strong>Padr&atilde;o em Z&nbsp;<\/strong><\/p><p class=\"wp-block-paragraph\">No padr&atilde;o do formato Z, os leitores escaneiam a p&aacute;gina do topo esquerdo para o topo direito, depois, voltam seu olhar de forma diagonal para o canto inferior esquerdo e ent&atilde;o cruzam para o canto inferior direito.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/5Msjjk4cvI8PDAaELM7IM3MMxtPhZpwXFw4DmLGS-jD4cMx78WowQaxnwvYpqRG1Bgr_bdtErRmrrGcGEIi_jQf4HYdwNhVDOR4Fyk7a6XE0gh7XRSUc-pTULMalLrssV481YT2F7gPTj1g4sJzdvrbrcq1FlKqPCdHYGByAbtjTo8YqcgQdgICO8wwPfQ\" alt=\"Exemplo de site com design em padr&atilde;o Z - loja virtual Quip\"><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Esse padr&atilde;o &eacute; ideal para fazer o design de p&aacute;ginas com poucos blocos de textos e elementos visuais, como as famosas <em>landing pages<\/em>.&nbsp;<\/p><p class=\"wp-block-paragraph\"><strong>Padr&atilde;o em F&nbsp;<\/strong><\/p><p class=\"wp-block-paragraph\">J&aacute; o padr&atilde;o que segue a forma da letra F indica que a visualiza&ccedil;&atilde;o dos visitantes &eacute; feita a partir da parte superior esquerda para a parte superior direita da p&aacute;gina, repetindo o processo nas linhas subsequentes.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/5jRicrao5KcJMNQOJGfiVaFlwHv0_aC-O-WqJg7bjMjz2VaMFQG8gSkHRptqI1qq9eOmryd_8sYhcvItvDtMgEzegbYJULljphUPD6tOlXh8qHpMT3qarbISQCJjaRtheXneIW53Eir9WJemJekagTo45H-LLVeu73C9rxqu9THMm2U_yxSEtKSNM0nIeA\" alt=\"Exemplo de site com design em padr&atilde;o F - jornal digital (p&aacute;gina de tecnologia)\"><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Posicionar o conte&uacute;do mais importante no topo &eacute; a melhor op&ccedil;&atilde;o para engajar os visitantes, j&aacute; que essa &eacute; a primeira coisa que eles visualizam na p&aacute;gina. Esse tipo de layout &eacute; uma escolha ideal para sites com grandes quantidades de texto, como aqueles de jornais online.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-espacos-em-branco\"><strong>Espa&ccedil;os em branco<\/strong><\/h3><p class=\"wp-block-paragraph\">O <em>whitespace <\/em>indica aquele espa&ccedil;o vazio, em branco, entre os elementos de uma p&aacute;gina. Web designers utilizam esse elemento para separar textos, direcionar a aten&ccedil;&atilde;o para pontos espec&iacute;ficos e otimizar a experi&ecirc;ncia geral do usu&aacute;rio.&nbsp;<\/p><p class=\"wp-block-paragraph\">Voc&ecirc; pode utilizar cores, texturas e at&eacute; imagens como espa&ccedil;os em branco. Algumas das boas pr&aacute;ticas de web design para utilizar o elemento <em>whitespace<\/em> incluem:<\/p><ul class=\"wp-block-list\">\n<li><strong>Use <\/strong><strong><em>whitespaces<\/em><\/strong><strong> micro e macro. <\/strong>Um espa&ccedil;o em branco micro melhora a legibilidade do conte&uacute;do ao colocar um espa&ccedil;o suficiente entre letras e par&aacute;grafos. J&aacute; o espa&ccedil;o em branco macro se refere a elementos maiores, como os cabe&ccedil;alhos e a logo do site, tornando o seu design mais balanceado e menos polu&iacute;do.<\/li>\n\n\n\n<li><strong>Delibere as op&ccedil;&otilde;es. <\/strong>Considere se um <em>whitespace <\/em>vai real&ccedil;ar ou interferir com os elementos pr&oacute;ximos a ele. Muitos espa&ccedil;os em branco podem fazer com que seu site pare&ccedil;a vazio, e n&atilde;o ter espa&ccedil;os em branco suficientes pode deix&aacute;-lo visualmente polu&iacute;do.&nbsp;<\/li>\n<\/ul><p class=\"wp-block-paragraph\">O site da revista online <a href=\"http:\/\/thepisaccochronicle.com\/\" target=\"_blank\" rel=\"noopener\"><strong>The Pisacco Chronicle<\/strong><\/a> &eacute; um &oacute;timo exemplo de uso eficiente de <em>whitespaces<\/em>. Ao colocar o espa&ccedil;o em branco entre o artigo principal e o menu de navega&ccedil;&atilde;o, o site &eacute; capaz de direcionar a aten&ccedil;&atilde;o dos visitantes para o ponto focal da p&aacute;gina.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/0lndCcmQ2ceZc57Wm_-qa-JaM0NUN0-esy_CbpnH5YVB_yEXkVt1tcfEOqq-Wuzad0CmVCoLMUb4jDT7H_2g2G98HCM3GbTEFCyKEc8NHQUr2ViKQoFIvUHQOUanMcChZOoLr_dbjnbgizirFTzpmD5nxCafkMuu41AKkTksW5_5vlbA99TlQFmvL5zxbA\" alt=\"Exemplo de site com bom uso de whitespaces no design - revista digital The Pisacco Chronicle\"><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-agrupamentos\"><strong>Agrupamentos<\/strong><\/h3><p class=\"wp-block-paragraph\">De acordo com o <a href=\"https:\/\/ember.com.br\/principio-de-proximidade-no-design-visual\/\" target=\"_blank\" rel=\"noopener\"><strong>princ&iacute;pio de proximidade<\/strong><\/a>, as pessoas compreendem que itens posicionados pr&oacute;ximos uns dos outros pertencem ao mesmo grupo de elementos. Se os itens estiverem agrupados de forma incorreta, os visitantes podem ter dificuldades em entender a estrutura do seu site e para onde devem olhar e prestar aten&ccedil;&atilde;o.&nbsp;<\/p><p class=\"wp-block-paragraph\">Para fazer agrupamentos eficientes, considere as seguintes dicas:<\/p><ul class=\"wp-block-list\">\n<li><strong>Combinar grupos com espa&ccedil;os em branco. <\/strong>Utilize o elemento de <em>whitespace<\/em> para agrupar e separar os itens de acordo com as suas funcionalidades.&nbsp;<\/li>\n\n\n\n<li><strong>Adicionar elementos extras. <\/strong>Planos de fundo e contornos atuam como indica&ccedil;&otilde;es visuais, distinguindo ou agrupando elementos conforme suas categorias.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">O formul&aacute;rio de pedidos do site internacional da <a href=\"https:\/\/www.adidas.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Adidas<\/strong><\/a> &eacute; um &oacute;timo exemplo de como o agrupamento de informa&ccedil;&otilde;es relevantes deixa tudo mais organizado para o usu&aacute;rio:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/Ny6IUQXSa5Rj8S30etIbm35pwNOPYs5bmGnkk-F6EmEjm6VvyOBFCg8ebRH5cKHGSW37Io4RB7e0FR4nwOwDwyqtKFqqz7Etd9KOR0fT_a8HMrwqvDgNFud56WXXEDeNJzYEGRxdLRAXhhbm8CMucz7jof4pA761TEQfkT7qR3pmp9bj6zrOyPGyl_LY-A\" alt=\"Formul&aacute;rio de checkout para realizar compra no site da Adidas\"><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-texturas\"><strong>Texturas<\/strong><\/h3><p class=\"wp-block-paragraph\">Texturas s&atilde;o elementos visuais que se parecem com superf&iacute;cies tridimensionais e que proporcionam contraste para o design do seu site. Elas refor&ccedil;am a estrutura do site, tornam p&aacute;ginas com muitos textos mais leg&iacute;veis, e definem o tom da sua marca.&nbsp;<\/p><p class=\"wp-block-paragraph\">Por exemplo, o site da ag&ecirc;ncia <a href=\"https:\/\/www.impactblacksheepagency.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Black Sheep<\/strong><\/a> utiliza texturas para adicionar personalidade e dimens&atilde;o para um plano de fundo s&oacute;lido que poderia ser tedioso. Assim, a marca &eacute; capaz de vincular todos os elementos visuais do site e refinar seu design.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/nXy10l6C3vYmA5E8XyVGVdBJLMd-bwWpFYuFdLWW6rjOnQoq1HHX8rJna-CMbP0XV8aa3uJKm-3qsfHwPJ4RdeBC_H8hIxZSkP8F_1mkcyEpDLhS2B8MaUpaHjyfQzJWtDpCprza-Cb3tgrT-NXsQtlDGYgEbr8hwo1Q0SVeDUbQgBDMbBS0SxpDqMtZeA\" alt=\"P&aacute;gina inicial do site da ag&ecirc;ncia Black Sheep\"><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Abaixo indicamos algumas das melhores pr&aacute;ticas de web design com rela&ccedil;&atilde;o ao processo de definir e adicionar texturas no seu site:<\/p><ul class=\"wp-block-list\">\n<li><strong>Aposte na simplicidade. <\/strong>Utilizar muitas texturas pode sobrecarregar o site e assustar os visitantes, distraindo-os e desviando a aten&ccedil;&atilde;o do que realmente importa &mdash; seu conte&uacute;do.&nbsp;<\/li>\n\n\n\n<li><strong>Defina o prop&oacute;sito da textura. <\/strong>Use texturas de forma intencional, com prop&oacute;sito, seja para dividir se&ccedil;&otilde;es ou para dar destaque a certas imagens.&nbsp;<\/li>\n\n\n\n<li><strong>O texto deve permanecer leg&iacute;vel. <\/strong>As texturas de um site n&atilde;o podem ser o centro das aten&ccedil;&otilde;es, nem devem ofuscar as informa&ccedil;&otilde;es importantes contidas na p&aacute;gina.&nbsp;<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-elementos-visuais\"><strong>Elementos Visuais<\/strong><\/h3><p class=\"wp-block-paragraph\">Imagens e v&iacute;deos de alta qualidade podem tornar seu site mais visualmente atrativo, mantendo seus visitantes engajados por mais tempo. Quando for adicionar esse tipo de elemento em suas p&aacute;ginas, lembre-se de levar em considera&ccedil;&atilde;o as melhores pr&aacute;ticas de web design sobre o assunto:<\/p><ul class=\"wp-block-list\">\n<li><strong>Coloque uma <\/strong><strong><em>hero image<\/em><\/strong><strong> em destaque. <\/strong>Exibida na se&ccedil;&atilde;o superior de uma p&aacute;gina, uma <a href=\"https:\/\/dcx.lett.digital\/hero-images\/\" target=\"_blank\" rel=\"noopener\"><strong><em>hero image<\/em><\/strong><\/a> oferece a primeira impress&atilde;o da sua marca e ajuda a construir uma rela&ccedil;&atilde;o de confian&ccedil;a com os visitantes.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/fjLra_Y6cTio2JGFmohDJa6RALiKXzsE3lSekF9vwXnHzmAN9YsJj_5-_Uda7prqNKCbALgZkhbQZzNNxmG9rZh3yJSoUL4SwQ82HTUwd8tuVLUiD0fnuYRYEbNIqso7ssOdmwjVirxQVRiejFIOIxtfS2sHQkDwPdJnp3WvTqHBpdpNeYHdqmYs5PERQQ\" alt=\"P&aacute;gina inicial do site Garoa\"><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Use carross&eacute;is com cuidado<\/strong>. Carross&eacute;is com um design de baixa qualidade podem acabar prejudicando a acessibilidade do seu site, pois se tornam uma distra&ccedil;&atilde;o para os leitores, ou se assemelham muito com an&uacute;ncios, fazendo com que os visitantes passem reto pelo conte&uacute;do em quest&atilde;o. Sendo assim, foque na simplicidade para cada slide, adicione somente o que for relevante e permita que os usu&aacute;rios possam controlar seu fluxo.&nbsp;<\/li>\n\n\n\n<li><strong>Adicione imagens e v&iacute;deos responsivos<\/strong>. O design responsivo garante que as imagens e v&iacute;deos do seu site ser&atilde;o exibidas corretamente independente do tamanho da tela ou do dispositivo usado para acess&aacute;-lo. Al&eacute;m de se atentar &agrave; responsividade, lembre-se de <a href=\"\/br\/tutoriais\/otimizar-imagens\/\"><strong>otimizar todas as suas imagens<\/strong><\/a> para que elas carreguem rapidamente.&nbsp;<\/li>\n\n\n\n<li><strong>Preste aten&ccedil;&atilde;o ao formato das imagens<\/strong>. Escolher o formato correto das imagens pode ajudar a melhorar o desempenho do seu site e a experi&ecirc;ncia dos usu&aacute;rios.&nbsp;<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-navegacao\"><strong>Navega&ccedil;&atilde;o<\/strong><\/h2><p class=\"wp-block-paragraph\">Outro aspecto importante do web design &eacute; garantir que os visitantes consigam navegar facilmente pelo seu site e encontrar as informa&ccedil;&otilde;es que desejam.&nbsp;<\/p><p class=\"wp-block-paragraph\">Nas se&ccedil;&otilde;es seguintes, vamos discutir as melhores pr&aacute;ticas de web design para cria&ccedil;&atilde;o e posicionamento de elementos de navega&ccedil;&atilde;o no seu site.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-crie-um-menu-intuitivo\"><strong>Crie um Menu Intuitivo<\/strong><\/h3><p class=\"wp-block-paragraph\">Como o menu &eacute; o primeiro elemento de navega&ccedil;&atilde;o com o qual os visitantes interagem, os designers devem ter como objetivo a cria&ccedil;&atilde;o de menus intuitivos e claros, que garantam uma experi&ecirc;ncia agrad&aacute;vel para o usu&aacute;rio.&nbsp;<\/p><p class=\"wp-block-paragraph\">Algumas das abordagens mais populares para criar menus de navega&ccedil;&atilde;o incluem:<\/p><p class=\"wp-block-paragraph\"><strong>Menu Horizontal&nbsp;<\/strong><\/p><p class=\"wp-block-paragraph\">Esse tipo de menu de navega&ccedil;&atilde;o aparece no formato de uma barra horizontal, que lista as p&aacute;ginas prim&aacute;rias do site e fica localizado no topo da p&aacute;gina. A maioria dos sites utiliza esse tipo de menu para exibir as principais se&ccedil;&otilde;es que os visitantes esperam encontrar, como as p&aacute;ginas &ldquo;Sobre&rdquo;, &ldquo;Contato&rdquo;, &ldquo;Produtos&rdquo; e &ldquo;Pre&ccedil;os&rdquo;.&nbsp;<\/p><p class=\"wp-block-paragraph\">Alternativamente, voc&ecirc; pode listar categorias espec&iacute;ficas para dar destaque a conte&uacute;dos mais importantes.&nbsp;<\/p><p class=\"wp-block-paragraph\">Vamos analisar o site <a href=\"https:\/\/www.wozber.com\/en-us\" target=\"_blank\" rel=\"noopener\"><strong>Wozber<\/strong><\/a> como exemplo. O menu horizontal &eacute; simples, listando apenas seus produtos e servi&ccedil;os.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/k-SenbrOEQGZZ5UMxEaBMctoYAV8uYNA6YwiJkN0QqCzlsG7SJ0gUtHgHughNcrlpmBbQ5JR74VDxb6nVNtpjCkA8fmrHKrDR6kaYDuUqYbuWy-UfxMDLE16bM1XF28JRHHPpF7UOJXj3c5S7HLx0tPjJvFAaVjio5_arx7G7Dk-LZfQ5PjU4Q5qUSVnlA\" alt=\"P&aacute;gina inicial do site Wozber - com destaque para o menu horizontal na barra superior\"><\/figure>\n<\/div><p class=\"wp-block-paragraph\"><strong>Menu Vertical Lateral<\/strong><\/p><p class=\"wp-block-paragraph\">Esse tipo de menu de navega&ccedil;&atilde;o exibe uma barra lateral contendo uma lista de links para p&aacute;ginas espec&iacute;ficas do site.&nbsp;<\/p><p class=\"wp-block-paragraph\">Por exemplo, o site do restaurante <a href=\"https:\/\/www.arbor-restaurant.co.uk\/\" target=\"_blank\" rel=\"noopener\"><strong>Arbor<\/strong><\/a> utiliza uma barra lateral vertical rol&aacute;vel, contendo informa&ccedil;&otilde;es sobre o restaurante, card&aacute;pio, eventos e op&ccedil;&otilde;es de reserva.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/m5PKC0Z7sC1N9858EYITCKLstJaKYm2awUji0UVjOEhaLOVCTomPSC8krkdbc_PZnUUT41wXtGv_SRFn_UyhjRNi7ESRwBJSTockl18hgT_YujjLdlW4pjDH_FXM5rELW9DQ3VWNBjmH2ouopn7c4R6DmUEantAgvVl2nfAdUeOVtk7UbqN8JfTQ5Hn5yA\" alt=\"P&aacute;gina inicial do site do restaurante Arbor com destaque para o menu vertical na barra lateral esquerda\"><\/figure>\n<\/div><p class=\"wp-block-paragraph\"><strong>Menu Suspenso ou<\/strong><strong><em> Drop-down<\/em><\/strong><\/p><p class=\"wp-block-paragraph\">Um menu suspenso lista todas as p&aacute;ginas dispon&iacute;veis no site a partir do momento em que o usu&aacute;rio clica ou passa o mouse sobre o elemento. Geralmente utilizado por lojas online, esse tipo de menu de navega&ccedil;&atilde;o &eacute; adequado para sites que contenham muitas p&aacute;ginas, j&aacute; que ele facilita o acesso a elas e evita ter um emaranhado de links no cabe&ccedil;alho.&nbsp;<\/p><p class=\"wp-block-paragraph\">O site da loja de roupas <a href=\"https:\/\/www.hm.com\/\" target=\"_blank\" rel=\"noopener\"><strong>H&amp;M&rsquo;s<\/strong><\/a> &eacute; um &oacute;timo exemplo do uso de menu <em>drop-down<\/em>. J&aacute; que a marca oferece v&aacute;rias categorias de roupas, seu site utiliza uma barra de navega&ccedil;&atilde;o na parte superior da p&aacute;gina para exibir itens mais gerais. Quando os visitantes clicam ou passam o mouse por cima de algum desses itens, um menu suspenso contendo uma lista de categorias mais espec&iacute;ficas &eacute; exibido.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/hoSeYKLQXgg4-y5OKT_u22rn2_tDsK6_ryEkV8qq95KSoUuAZ0PNdJciXawrlpb635VQXm6UxoF6zVlb6z1v9oMRJPTk9ljNiV0utOmwbUbk9c-5hh5oDeMJpScj-RNXfu3k4SI1L8-NalGFsaLlpIJw0Tzq2SkcRIvAiLoiD8ZhoCJm6fl1GROVrN0Cjg\" alt=\"Exibi&ccedil;&atilde;o do menu suspenso no site da loja H&amp;M\"><\/figure>\n<\/div><p class=\"wp-block-paragraph\"><strong>Menu Hamburger<\/strong><\/p><p class=\"wp-block-paragraph\">Esse tipo de menu aparece como um &iacute;cone de tr&ecirc;s linhas ou tr&ecirc;s pontos. Quando os visitantes clicam no &iacute;cone, um menu suspenso ou um menu lateral &eacute; exibido para revelar as categorias do site e seus links.&nbsp;<\/p><p class=\"wp-block-paragraph\">Um menu hamburger &eacute; uma &oacute;tima op&ccedil;&atilde;o para vers&otilde;es m&oacute;veis de sites, j&aacute; que ele utiliza menos espa&ccedil;o na tela. Al&eacute;m do mais, seu &iacute;cone amplamente reconhecido faz com que a interface seja bastante intuitiva.&nbsp;<\/p><p class=\"wp-block-paragraph\">O <strong>Google Maps<\/strong> &eacute; um exemplo muito popular que utiliza esse tipo de menu de navega&ccedil;&atilde;o.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/ftOahn_7pRYadA9ExzBBIiMeMszXU36UlWkWyvWNtDSmBaNZxr3rO7fC0hZayrsXlPK77n6RbNCaWtHIngy1S_KNlKys81DHVFbBwPvxJiH2hg1wY_6P_RyqiY6i15K74E-D5SKkwYASVP6m0LaBUezxd1X7W0Q_ClSZ2cpgCoKH-25lbtHuqgsCsGixNQ\" alt=\"Captura de tela do Google Maps com destaque para o bot&atilde;o correspondente ao menu hamburger\"><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-posicione-ctas-e-botoes-estrategicamente-nbsp\"><strong>Posicione CTAs e Bot&otilde;es Estrategicamente&nbsp;<\/strong><\/h3><p class=\"wp-block-paragraph\">A principal fun&ccedil;&atilde;o de um <em>call-to-action<\/em> (CTA) &eacute; levar os visitantes a tomar algum tipo de a&ccedil;&atilde;o no site e assim engajar com suas p&aacute;ginas por mais tempo. Seja um texto, uma imagem ou bot&atilde;o, voc&ecirc; deve posicionar seu CTA em um local que seja facilmente vis&iacute;vel para os usu&aacute;rios.&nbsp;<\/p><p class=\"wp-block-paragraph\"><div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Dica da Especialista\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Para criar um CTA atrativo, utilize palavras de a&ccedil;&atilde;o simples e f&aacute;ceis de entender, como &ldquo;Come&ccedil;ar&rdquo;, &ldquo;Aprender Mais&rdquo; e &ldquo;Adicionar ao Carrinho&rdquo;.<br>Fa&ccedil;a com que seu bot&atilde;o <em>call-to-action<\/em> se destaque do resto do conte&uacute;do da p&aacute;gina. A forma mais f&aacute;cil de fazer isso &eacute; utilizar uma cor contrastante &mdash; e mant&ecirc;-la para outros elementos clic&aacute;veis do site.<br>Por fim, utilize espa&ccedil;os em branco para guiar os olhos dos visitantes e posicione o CTA de forma estrat&eacute;gica para chamar mais aten&ccedil;&atilde;o.<\/p>\n                <div class=\"protip__expert\">\n                    <div class=\"protip__expert-image\">\n                        <img decoding=\"async\" width=\"48\" height=\"48\" src=\"https:\/\/secure.gravatar.com\/avatar\/?s=65&d=mm&r=g\" alt=\"Editor\" \/>\n                    <\/div>\n                    <div>\n                        <p class=\"protip__expert-name\"><\/p>\n                        <p class=\"protip__expert-position\">Lead Product Designer<\/p>\n                    <\/div>\n                <\/div>\n        <\/div><\/p><p class=\"wp-block-paragraph\">Al&eacute;m disso, considere quanto esfor&ccedil;o precisa ser feito pelo usu&aacute;rio para clicar no bot&atilde;o de CTA, especialmente no caso de dispositivos m&oacute;veis.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/tTvZih8z0iqsNh4OhDSymQ_cRD3AUvblZWK_T_lxWoE5G8A0PcAUbPa3opZpZhnWN1EnQ3Jfk0-w_R9o9nowt20Krmcg4UWkZ6O11gmKIrM-Yqm1cxP7PEpvlmg1mnYqvFAZVSMKmpqGVgeE6tPH-jQeTNJ3XhDHnGY2jqUkiwVEhqzofu8wQ4ZyLd3KIw\" alt=\"Ilustra&ccedil;&atilde;o digital indicando bom e mau uso de bot&otilde;es CTA num design de site m&oacute;vel\"><\/figure>\n<\/div><p class=\"wp-block-paragraph\">O site da <a href=\"http:\/\/netflix.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Netflix<\/strong><\/a> &eacute; um &oacute;timo exemplo de boas pr&aacute;ticas de web design em geral. No caso dos CTAs, por exemplo, os bot&otilde;es de &ldquo;Vamos l&aacute;&rdquo; e &ldquo;Entrar&rdquo; utilizam cores contrastantes, elementos de escala e <em>whitespaces<\/em> para chamar a aten&ccedil;&atilde;o dos visitantes.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/DiT4jMRieasDaz1W7UOG8n8AtmkXiZf0QMTDFdXolbBwS1libabVOTUAHV0LAFEoU6G5drvgOJto4UUx3qhUBlUkE_-Cvz4c90yz55FbauUMvET98hqCuhA-plKPHjIJUOMgNn8PT40BX8Wm_Fi0Ksbxh73HV2wnjDYEwq7kZJJsdgCI3iZYAvm2dmOvug\" alt=\"P&aacute;gina inicial do site da Netflix\"><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-adicione-um-rodape\"><strong>Adicione um Rodap&eacute;<\/strong><\/h3><p class=\"wp-block-paragraph\">Muitas vezes os visitantes rolam para o fim da p&aacute;gina esperando encontrar certas informa&ccedil;&otilde;es, como detalhes de contato, o perfil da empresa, links de redes sociais e produtos ou servi&ccedil;os adicionais oferecidos pela marca.&nbsp;<\/p><p class=\"wp-block-paragraph\">Os elementos que voc&ecirc; deve incluir no rodap&eacute; do site dependem dos seus objetivos. De modo geral, mantenha-o simples e otimizado. Para isso, siga as melhores pr&aacute;ticas de web design, como:<\/p><ul class=\"wp-block-list\">\n<li><strong>Usar uma linguagem simples. <\/strong>Evite termos amb&iacute;guos e seja objetivo, assim os visitantes sabem o que esperar da p&aacute;gina que visitar&atilde;o antes de clicar no link.&nbsp;<\/li>\n\n\n\n<li><strong>Separar o conte&uacute;do em categorias. <\/strong>Defina as p&aacute;ginas que voc&ecirc; deseja incluir no rodap&eacute; e agrupe-as de acordo com a categoria para facilitar a localiza&ccedil;&atilde;o dos conte&uacute;dos e das informa&ccedil;&otilde;es.<\/li>\n\n\n\n<li><strong>Optar por um design simples e consistente<\/strong>. Garanta que o rodap&eacute; &eacute; leg&iacute;vel e mantenha o estilo dele consistente com a sua marca.&nbsp;<\/li>\n\n\n\n<li><strong>Cuidar com os links quebrados<\/strong>. Lembre-se de que os links devem redirecionar os visitantes para as p&aacute;ginas corretas.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Um &oacute;timo exemplo de rodap&eacute; simples e eficiente &eacute; encontrado no site <a href=\"https:\/\/brainboxai.com\/en\" target=\"_blank\" rel=\"noopener\"><strong>BrainBox AI<\/strong><\/a>. Com um design minimalista, os links do rodap&eacute; redirecionam os visitantes para conte&uacute;dos que n&atilde;o s&atilde;o exibidos no menu principal, como as p&aacute;ginas de &ldquo;Carreiras&rdquo;, &ldquo;Parceiros&rdquo; e &ldquo;Artigos&rdquo;.&nbsp;<\/p><p class=\"wp-block-paragraph\">Al&eacute;m dos links de navega&ccedil;&atilde;o, o rodap&eacute; do site tamb&eacute;m convida os visitantes a se cadastrarem na newsletter da marca.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/1pBc7VgsZjj9klYSKWiCBBSXqSrCrXiK4vv1c5A8NSWjMFPnbLImPNrCQ9nZiD6xY9P4Mn0xe7A1pZE6Z1nSuitx9hmuj0DzdjK1WuvAKyidQUdmWgLGrjRuOcww_-y7kfzv13OCDMzr7BrmP1UYIPiX1PUnm5SbyZH6suc7KEQq9OALotx0uAwtoRMwog\" alt=\"Rodap&eacute; do site BrainBox AI\"><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-programacao\"><strong>Programa&ccedil;&atilde;o<\/strong><\/h2><p class=\"wp-block-paragraph\">Uma vez que voc&ecirc; tenha um design bem estruturado e visualmente atrativo, o passo seguinte &eacute; garantir que seu site rode sem problemas, seja localiz&aacute;vel nos mecanismos de busca e seguro para os visitantes navegarem.&nbsp;<\/p><p class=\"wp-block-paragraph\">Nas se&ccedil;&otilde;es seguintes vamos conhecer os padr&otilde;es dos elementos de constru&ccedil;&atilde;o do site que podem te ajudar a garantir esses pontos, incluindo estrat&eacute;gias de SEO, seguran&ccedil;a e desempenho do site, assim como abordagens <em>mobile-first <\/em>&mdash; isto &eacute;, que priorizam a vers&atilde;o m&oacute;vel.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-impulsione-o-seo\"><strong>Impulsione o SEO<\/strong><\/h3><p class=\"wp-block-paragraph\">Pr&aacute;ticas de <a href=\"\/br\/tutoriais\/o-que-e-seo\/\"><strong>SEO (search engine optimization)<\/strong><\/a> s&atilde;o cruciais em qualquer estrat&eacute;gia de marketing digital. O SEO ajuda a melhorar o ranqueamento do seu site nas p&aacute;ginas de resultado dos mecanismos de busca, atraindo mais visitantes e aumentando as convers&otilde;es do site.&nbsp;<\/p><p class=\"wp-block-paragraph\">Voc&ecirc; pode impulsionar as estrat&eacute;gias de SEO do seu site seguindo as <a href=\"\/br\/tutoriais\/30-tecnicas-de-seo-para-wordpress\/\"><strong>melhores dicas de SEO WordPress<\/strong><\/a> &mdash; testadas e comprovadas. Lembre-se que a maior parte das recomenda&ccedil;&otilde;es listadas neste tutorial tamb&eacute;m s&atilde;o aplic&aacute;veis para sites que n&atilde;o s&atilde;o constru&iacute;dos com o WordPress, como:<\/p><ul class=\"wp-block-list\">\n<li><strong>Escrever meta descri&ccedil;&otilde;es de qualidade. <\/strong>Uma descri&ccedil;&atilde;o interessante vai incentivar seus visitantes a clicarem no link do site, trazendo mais tr&aacute;fego org&acirc;nico para suas p&aacute;ginas.&nbsp;<\/li>\n\n\n\n<li><strong>Adicionar textos alternativos. <\/strong>Descrever suas imagens com <em>alt texts<\/em> melhora a acessibilidade do site para pessoas que utilizam leitores de tela e ajuda os mecanismos de busca, como o Google, a entenderem seu conte&uacute;do.&nbsp;<\/li>\n\n\n\n<li><strong>Otimizar a estrutura da URL<\/strong>. Inclua a palavra-chave da p&aacute;gina na slug da URL, assim os mecanismos de pesquisa conseguem localizar e compreender o conte&uacute;do do seu site mais facilmente.&nbsp;<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Al&eacute;m dessas t&eacute;cnicas, implemente os padr&otilde;es de codifica&ccedil;&atilde;o apresentados a seguir para melhorar ainda mais o SEO do seu site.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-use-uma-abordagem-mobile-first-nbsp\"><strong>Use uma Abordagem Mobile-First&nbsp;<\/strong><\/h3><p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.statista.com\/statistics\/277125\/share-of-website-traffic-coming-from-mobile-devices\/#:~:text=Mobile%20accounts%20for%20approximately%20half,since%20the%20beginning%20of%202017.\" target=\"_blank\" rel=\"noopener\"><strong>50% do tr&aacute;fego org&acirc;nico<\/strong><\/a> na internet vem de dispositivos m&oacute;veis como celulares, ent&atilde;o garanta que seu site esteja adaptado para esse formato de navega&ccedil;&atilde;o.&nbsp;<\/p><p class=\"wp-block-paragraph\">Com uma abordagem <em>mobile-first<\/em>, os designers criam o site m&oacute;vel antes de criar a vers&atilde;o para desktop, isto &eacute;, para computador. Apesar da estrat&eacute;gia de integra&ccedil;&atilde;o com um design responsivo ser uma boa op&ccedil;&atilde;o para a maioria dos sites, utilizar a abordagem que prioriza e come&ccedil;a a constru&ccedil;&atilde;o pela vers&atilde;o m&oacute;vel oferece vantagens significativas.&nbsp;<\/p><p class=\"wp-block-paragraph\">Por exemplo, &eacute; muito mais f&aacute;cil come&ccedil;ar com a vers&atilde;o m&oacute;vel e ent&atilde;o passar para telas maiores, j&aacute; que n&atilde;o ser&aacute; necess&aacute;rio remover elementos ou refazer todo o design para que ele se adapte &agrave;s telas de celulares e tablets.&nbsp;<\/p><p class=\"wp-block-paragraph\">Abaixo indicamos algumas das melhores pr&aacute;ticas de web design para criar um <a href=\"\/br\/tutoriais\/como-deixar-um-site-responsivo\/\"><strong>site responsivo<\/strong><\/a> que prioriza a vers&atilde;o m&oacute;vel:<\/p><ul class=\"wp-block-list\">\n<li><strong>Comece pelo conte&uacute;do<\/strong>. Priorize conte&uacute;dos importantes antes de adicionar outros elementos, assim os visitantes conseguem localizar mais facilmente as informa&ccedil;&otilde;es que est&atilde;o buscando.<\/li>\n\n\n\n<li><strong>Fa&ccedil;a com que a navega&ccedil;&atilde;o seja intuitiva<\/strong>. Use bot&otilde;es intuitivos, como um menu hamburger, j&aacute; que os visitantes costumam estar familiarizados com esses elementos e eles n&atilde;o ocupam muito espa&ccedil;o. Al&eacute;m disso, adicione uma barra de pesquisa para facilitar a busca por outros conte&uacute;dos.&nbsp;<\/li>\n\n\n\n<li><strong>Reduza pop-ups disruptivos<\/strong>. Quando navegam pelo celular, muitos visitantes podem clicar acidentalmente num pop-up ao tentar fech&aacute;-lo, causando frustra&ccedil;&atilde;o e prejudicando a experi&ecirc;ncia do usu&aacute;rio.<\/li>\n\n\n\n<li><strong>Templates j&aacute; otimizados<\/strong>. Escolha templates que sejam naturalmente otimizados para dispositivos m&oacute;veis (e favor&aacute;veis par SEO). Por exemplo, os da <a href=\"\/br\/templates-de-sites\">Hostinger<\/a> s&atilde;o exatamente assim.<\/li>\n\n\n\n<li><strong>Logomarca profissional<\/strong>. Garanta que voc&ecirc; tenha um <strong><a href=\"\/br\/criador-de-logo\">design de logo<\/a><\/strong> profissional, visualmente atrativo e impactante para suas cria&ccedil;&otilde;es na internet.<\/li>\n\n\n\n<li><strong>Teste seu site. <\/strong>Use a ferramenta do Google (chamada <a href=\"https:\/\/search.google.com\/test\/mobile-friendly\" target=\"_blank\" rel=\"noopener\"><strong>Mobile-Friendly Test<\/strong><\/a>) ou outras ferramentas de teste para verificar se o seu site &eacute; ou n&atilde;o responsivo para rodar em dispositivos m&oacute;veis.&nbsp;<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Em sua vers&atilde;o m&oacute;vel, o site responsivo do <strong>HubSpot<\/strong> &eacute; um &oacute;timo exemplo de aplica&ccedil;&atilde;o dessa abordagem. Ele conta com textos f&aacute;ceis de serem lidos, um menu hamburger e uma barra de pesquisa para garantir uma navega&ccedil;&atilde;o agrad&aacute;vel aos usu&aacute;rios.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/CAocQXJQSBjK4eiqx3HYkvQGfcqSsWR7yH5QwqMJhcz14dMPO-qcP-zpAYlevZPnk_CAXJIty2jRi92KWd3Gr0bOHlcnKAIPpesepcq8Sdh4AVO6JNOizRIlVhbK71VXumC-oVkAMitTDzpsALWMzdQw7oPY_VAzmf9lD3ONMB1bmMXCA7qn0jL6vyTpuQ\" alt=\"Captura de tela da vers&atilde;o m&oacute;vel do site HubSpot\"><\/figure>\n<\/div><h3 class=\"wp-block-heading\" id=\"h-mantenha-seu-site-seguro\"><strong>Mantenha seu Site Seguro<\/strong><\/h3><p class=\"wp-block-paragraph\">Proteger seu site &eacute; essencial para estabelecer credibilidade e evitar vazamentos de dados e perdas financeiras. Mesmo que voc&ecirc; utilize uma plataforma segura como o WordPress, &eacute; necess&aacute;rio implementar <a href=\"\/br\/tutoriais\/como-aumentar-seguranca-no-wordpress\/\"><strong>medidas extras de seguran&ccedil;a<\/strong><\/a> para se prevenir contra ciberamea&ccedil;as.&nbsp;<\/p><ul class=\"wp-block-list\">\n<li>Adquira uma <a href=\"https:\/\/www.hostinger.com\/br\/certificado-ssl-gratis\"><strong>certifica&ccedil;&atilde;o SSL<\/strong><\/a>. Com um certificado SSL, a transfer&ecirc;ncia de dados entre seu site e o navegador dos visitantes ser&aacute; criptografada, evitando acessos de usu&aacute;rios n&atilde;o autorizados. Isso ajuda a proteger os dados dos visitantes, especialmente se seu site exige que eles enviem informa&ccedil;&otilde;es sens&iacute;veis, como dados de pagamento.&nbsp;Aprenda mais sobre <a href=\"\/br\/tutoriais\/o-que-e-ssl-tls-https\/\">o que &eacute; SSL<\/a>.<\/li>\n\n\n\n<li><strong>Proteja suas credenciais de login<\/strong>. <a href=\"\/br\/tutoriais\/senha-com-8-caracteres\/\"><strong>Crie senhas fortes<\/strong><\/a> e as atualize regularmente. Para manter suas credenciais seguras, utilize um gerenciador de senhas, como o <a href=\"https:\/\/1password.com\/\" target=\"_blank\" rel=\"noopener\"><strong>1Password<\/strong><\/a>, e habilite a autentica&ccedil;&atilde;o de dois fatores (2FA).&nbsp;<\/li>\n\n\n\n<li><strong>Instale programas de antiv&iacute;rus<\/strong>. Fa&ccedil;a varreduras regulares no seu site para verificar a exist&ecirc;ncia de malwares.&nbsp;<\/li>\n\n\n\n<li><strong>Escolha uma hospedagem de sites segura<\/strong>. Selecionar uma plataforma de hospedagem confi&aacute;vel &eacute; essencial para fortalecer as camadas de prote&ccedil;&atilde;o do seu site. A Hostinger conta com diversos recursos de seguran&ccedil;a no servidor e com certificados SSL gratuitos. Isso vale para todos os nossos planos de host, inclusive o de <strong><a href=\"\/br\/hospedagem-wordpress\">hospedagem gerenciada WordPress<\/a><\/strong>.<\/li>\n<\/ul><figure class=\"wp-block-image size-large\"><a href=\"\/br\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-32927\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h3 class=\"wp-block-heading\" id=\"h-otimize-o-desempenho-do-site-nbsp\"><strong>Otimize o Desempenho do Site&nbsp;<\/strong><\/h3><p class=\"wp-block-paragraph\">Se um site demora mais do que tr&ecirc;s segundos para carregar, <a href=\"https:\/\/neilpatel.com\/blog\/loading-time\/\" target=\"_blank\" rel=\"noopener\"><strong>40% dos visitantes<\/strong><\/a> v&atilde;o abandonar a p&aacute;gina. Sendo assim, uma de suas prioridades deve ser a otimiza&ccedil;&atilde;o do desempenho do site.&nbsp;<\/p><p class=\"wp-block-paragraph\">Primeiramente, <a href=\"\/br\/tutoriais\/teste-velocidade-site\/\"><strong>verifique a velocidade<\/strong><\/a> de carregamento do seu site utilizando ferramentas como o <a href=\"https:\/\/gtmetrix.com\/\" target=\"_blank\" rel=\"noopener\"><strong>GTmetrix<\/strong><\/a> para identificar problemas e conferir sugest&otilde;es para corrigi-los, al&eacute;m de dicas para acelerar suas p&aacute;ginas.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/yxGV6gUcRxgBUr0cnOaN4EwAUKJ6kUrx9lRe30XiUWkaTBG4Cf05Yk3H-2yIs8gUwdLpPtR373H6YrO4oUSbIyscSild4R1IrXfpZ_ogqLpCfDe91hGqqXZO_y-ZLLKDZT9KCaZaFnjjXqoPXtadoaTauIvYeIXUagTHUOMNh5rRFmqU84z57zWqaq1G3Q\" alt=\"P&aacute;gina inicial do site de teste de velocidade GTmetrix\"><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Al&eacute;m disso, considere essas boas pr&aacute;ticas quando for <a href=\"\/br\/tutoriais\/otimizacao-de-sites\/\"><strong>otimizar seu site<\/strong><\/a>:<\/p><ul class=\"wp-block-list\">\n<li><strong>Habilite o <\/strong><a href=\"\/br\/tutoriais\/como-limpar-o-cache-do-navegador\/\"><strong>sistema de cache do navegador<\/strong><\/a>. O cache armazena conte&uacute;dos no dispositivo local, ent&atilde;o os navegadores dos usu&aacute;rios n&atilde;o precisam buscar os arquivos do seu site diretamente do servidor quando visitarem seu site depois da primeira vez. Isso acelera a velocidade de carregamento da p&aacute;gina.&nbsp;<\/li>\n\n\n\n<li><strong>Minifique seu c&oacute;digo. <\/strong>Remova caracteres e linhas desnecess&aacute;rias dos seus arquivos HTML, CSS e JavaScript atrav&eacute;s do processo conhecido como <a href=\"\/br\/tutoriais\/melhorando-a-performace-minifying-css-html-e-javascript\/\"><strong>minify<\/strong><\/a>.<\/li>\n\n\n\n<li><strong>Configure uma <\/strong><a href=\"\/br\/tutoriais\/melhorando-o-desempenho-do-site-usando-cdn\/\"><strong>rede de distribui&ccedil;&atilde;o de conte&uacute;do (CDN)<\/strong><\/a><strong>.<\/strong> Optar por um plano de hospedagem que j&aacute; conta com um CDN (<em>content delivery network<\/em>), como a Hostinger, &eacute; uma forma muito conveniente de acelerar a velocidade de carregamento das suas p&aacute;ginas. Esse servi&ccedil;o entrega conte&uacute;dos est&aacute;ticos aos visitantes a partir do servidor mais pr&oacute;ximo deles, assim, o site &eacute; carregado mais rapidamente.&nbsp;<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-acessibilidade-nbsp\"><strong>Acessibilidade&nbsp;<\/strong><\/h2><p class=\"wp-block-paragraph\">&nbsp;A <a href=\"\/br\/tutoriais\/acessibilidade-web\/\"><strong>acessibilidade web<\/strong><\/a> &eacute; outro fator muito importante no design de um site, pois ela ajuda pessoas com defici&ecirc;ncias a acessarem e navegarem pelo seu conte&uacute;do com facilidade.<\/p><p class=\"wp-block-paragraph\">Quando estiver configurando os aspectos de acessibilidade do design do seu site, siga os <a href=\"https:\/\/www.w3.org\/Translations\/WCAG20-pt-br\/\" target=\"_blank\" rel=\"noopener\"><strong>padr&otilde;es de acessibilidade da W3C<\/strong><\/a>. Eles incluem processos como adicionar textos alternativos, prestar aten&ccedil;&atilde;o no contraste de cores do site, criar links acess&iacute;veis por teclado para facilitar a navega&ccedil;&atilde;o, entre outros.<\/p><p class=\"wp-block-paragraph\">Por fim, utilize <a href=\"https:\/\/www.w3.org\/WAI\/ER\/tools\/\" target=\"_blank\" rel=\"noopener\"><strong>ferramentas de teste<\/strong><\/a> aprovadas pela <strong>Iniciativa de Acessibilidade Web <\/strong>para verificar se o seu site est&aacute; seguindo os padr&otilde;es de acessibilidade da W3C.<\/p><p class=\"wp-block-paragraph\">Implementar recursos de acessibilidade no seu site vai tornar a experi&ecirc;ncia do usu&aacute;rio mais agrad&aacute;vel, atrair mais tr&aacute;fego org&acirc;nico e impulsionar suas estrat&eacute;gias de SEO.<\/p><p class=\"wp-block-paragraph\"><div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Dica da Especialista\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\">No &uacute;ltimo momento do processo de constru&ccedil;&atilde;o do seu site, &eacute; importante avaliar o web design.&nbsp;<br>Leve em considera&ccedil;&atilde;o aspectos como: o design est&aacute; servindo ao prop&oacute;sito do site? Os visitantes conseguem facilmente localizar informa&ccedil;&otilde;es e navegar pelos conte&uacute;dos?&nbsp;<br>Para fazer essa avalia&ccedil;&atilde;o, voc&ecirc; pode utilizar o construtor visual do nosso <strong><a href=\"\/br\/criador-de-sites-com-ia\">Criador de Sites com I<\/a><\/strong><a href=\"https:\/\/zyro.com\/br\/ia\/mapa-de-calor\" target=\"_blank\" rel=\"noopener\"><strong>A<\/strong><\/a>, gerado por intelig&ecirc;ncia artificial, ou optar por uma ferramenta de teste como o <a href=\"https:\/\/maze.co\/\" target=\"_blank\" rel=\"noopener\"><strong>Maze<\/strong><\/a>.<\/p>\n                <div class=\"protip__expert\">\n                    <div class=\"protip__expert-image\">\n                        <img decoding=\"async\" width=\"48\" height=\"48\" src=\"https:\/\/secure.gravatar.com\/avatar\/?s=65&d=mm&r=g\" alt=\"Editor\" \/>\n                    <\/div>\n                    <div>\n                        <p class=\"protip__expert-name\"><\/p>\n                        <p class=\"protip__expert-position\">Lead Product Designer<\/p>\n                    <\/div>\n                <\/div>\n        <\/div><\/p><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p class=\"wp-block-paragraph\">Fazer o design de um site consiste em muitas tentativas e erros. De todo modo, saber quais s&atilde;o as melhores pr&aacute;ticas de web design te oferece uma base s&oacute;lida para tomar decis&otilde;es importantes sobre o design do seu site.<\/p><p class=\"wp-block-paragraph\">Neste artigo, apresentamos informa&ccedil;&otilde;es de diversos t&oacute;picos que voc&ecirc; precisa conhecer para poder construir um site atraente e eficiente, baseado em padr&otilde;es de design UI e UX.&nbsp;<\/p><p class=\"wp-block-paragraph\">Lembre-se de que n&atilde;o h&aacute; uma &uacute;nica maneira certa de fazer o design de um site, pois &agrave;s vezes, o que funciona para um, pode n&atilde;o funcionar para outro. O ponto-chave para ter em mente &eacute; priorizar a consist&ecirc;ncia, a acessibilidade e a experi&ecirc;ncia do usu&aacute;rio.&nbsp;Esperamos que voc&ecirc; tenha achado este guia tenha &uacute;til. Se ainda estiver procurando por <a href=\"\/br\/tutoriais\/sites-para-designers\/\"><strong>inspira&ccedil;&otilde;es de design<\/strong><\/a>, temos uma lista dos dez melhores sites para te ajudar a encontrar novas ideias de web design.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ter um design atrativo &eacute; crucial para o sucesso de um site. Pesquisas indicam que 38% dos visitantes abandonam uma p&aacute;gina caso ela n&atilde;o seja visualmente agrad&aacute;vel.&nbsp; Se voc&ecirc; est&aacute; come&ccedil;ando a criar seu site agora, pode ser dif&iacute;cil entender o que atrai e o que afasta os visitantes.&nbsp; Por isso, aprender sobre as melhores [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/boas-praticas-web-design\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":305,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Boas Pr\u00e1ticas de Web Design: Tutorial Completo para %currentyear%","rank_math_description":"O web design \u00e9 um elemento cada vez mais importante no desempenho de um site e no sucesso de um neg\u00f3cio online. Descubra as melhores pr\u00e1ticas!","rank_math_focus_keyword":"","footnotes":""},"categories":[8076,8026],"tags":[7460],"class_list":["post-31156","post","type-post","status-publish","format-standard","hentry","category-design-de-sites","category-sites","tag-web-design"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/web-design-best-practices\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/boas-praticas-web-design\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/bases-creation-site-web\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/web-design-best-practices\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/web-design-best-practices\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/web-design-best-practices\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/web-design-best-practices\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/web-design-best-practices\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/web-design-best-practices\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/web-design-best-practices\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/boas-praticas-web-design\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/31156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/305"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=31156"}],"version-history":[{"count":16,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/31156\/revisions"}],"predecessor-version":[{"id":52566,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/31156\/revisions\/52566"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=31156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=31156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=31156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}