{"id":51555,"date":"2024-03-18T01:00:00","date_gmt":"2024-03-18T08:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=51555"},"modified":"2025-05-26T12:46:00","modified_gmt":"2025-05-26T19:46:00","slug":"elementos-do-webdesign","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/","title":{"rendered":"Os 7 Elementos B\u00e1sicos do Design de Sites"},"content":{"rendered":"\n<p>O design web moderno pode parecer um pouco como alquimia: a pr\u00e1tica antiga de tentar transformar chumbo em ouro. At\u00e9 um iniciante pode reconhecer <a href=\"https:\/\/www.dreamhost.com\/academy\/what-makes-a-good-website\/\" target=\"_blank\" rel=\"noopener\">o que faz um bom site<\/a>, mas quando se trata de constru\u00ed-lo por conta pr\u00f3pria? Vamos apenas dizer que fazer ouro do zero \u00e9 mais dif\u00edcil do que parece.<\/p>\n\n\n\n<p>Encontrar o design certo para o seu site pode parecer uma jornada m\u00e1gica da vis\u00e3o \u00e0 realidade, moldando e refinando ideias at\u00e9 que elas brilhem. Na realidade, existem certos princ\u00edpios de design web moderno que, quando aplicados, aumentam significativamente a chance de que seu site n\u00e3o apenas tenha sucesso, mas se transforme em ouro digital.<\/p>\n\n\n\n<p>Aqui \u00e9 onde a situa\u00e7\u00e3o se complica: o design moderno de sites \u00e9 mais do que apenas elementos visuais e est\u00e9tica. O design do seu site afeta a otimiza\u00e7\u00e3o para motores de busca (SEO), como seu p\u00fablico percebe sua marca e como os visitantes se comportam ao acessar a p\u00e1gina. N\u00e3o \u00e9 exagero dizer que o design e o layout do seu site podem impactar toda a sua presen\u00e7a online.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>SEO<\/h3>\n    <p>A otimiza\u00e7\u00e3o de motores de busca (SEO) \u00e9 a pr\u00e1tica de melhorar a classifica\u00e7\u00e3o de um site nos resultados de pesquisa. Os resultados de pesquisa s\u00e3o agregados com base em v\u00e1rios fatores, incluindo a relev\u00e2ncia e qualidade de um site. Otimizar seu site para esses fatores pode ajudar a aumentar suas classifica\u00e7\u00f5es.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/seo\/seo\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>Ent\u00e3o, se voc\u00ea est\u00e1 come\u00e7ando do zero ou <a href=\"https:\/\/www.dreamhost.com\/blog\/2018-website-redesign-checklist\/\" target=\"_blank\" rel=\"noopener\">redesenhando um site existente<\/a>, voc\u00ea chegou ao lugar certo. Continue lendo enquanto exploramos alguns dos elementos b\u00e1sicos de design de sites, desde tend\u00eancias modernas de design at\u00e9 maneiras de n\u00e3o designers se envolverem no processo de design. Ao longo de tudo isso, aprenderemos mais sobre como um site bem projetado pode ser um bilhete dourado para o seu neg\u00f3cio online.<\/p>\n\n\n\n<h2 id=\"tech\" class=\"wp-block-heading\">Primeiro, Cuide das Coisas T\u00e9cnicas (Ou Pe\u00e7a ao Seu Host para Fazer Isso por Voc\u00ea)<\/h2>\n\n\n\n<p>Voc\u00ea pensou que um design de site eficaz era apenas sobre <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/como-escolher-o-esquema-de-cores-para-o-seu-site\/\" target=\"_blank\" rel=\"noopener\">escolher a paleta de cores certa<\/a> e as imagens, certo? Bem, voc\u00ea n\u00e3o est\u00e1 errado, por assim dizer. Estamos apenas adotando uma vis\u00e3o mais abrangente sobre o uso do design para criar uma experi\u00eancia positiva para os visitantes do seu site.<\/p>\n\n\n\n<p>Aqui est\u00e3o alguns dos problemas t\u00e9cnicos que voc\u00ea vai querer resolver antes de passar para as partes mais bonitas do design do seu site:<b><\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Tempo de carregamento do site: <\/b>N\u00e3o importa quem seja sua audi\u00eancia, <a href=\"https:\/\/www.hobo-web.co.uk\/your-website-design-should-load-in-4-seconds\/\" target=\"_blank\" rel=\"noopener\">os consumidores da internet s\u00e3o um grupo um tanto impaciente<\/a>. 47 por cento esperam que um site carregue em dois segundos ou menos, enquanto 40 por cento abandonam um site completamente se ele demorar mais de tr\u00eas segundos para carregar. Velocidades de carregamento mais r\u00e1pidas, por outro lado, reduzem suas taxas de rejei\u00e7\u00e3o (o n\u00famero de visitantes que saem depois de ver apenas uma p\u00e1gina). Se voc\u00ea precisa acelerar os tempos de carregamento para seu site, <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/velocidade-do-site-wordpress\/\" target=\"_blank\" rel=\"noopener\">confira nosso guia<\/a>.<\/li>\n\n\n\n<li><b>Tempo de Atividade: <\/b>O mesmo pode ser dito para sites que n\u00e3o carregam de todo. Interrup\u00e7\u00f5es no Centro de Dados podem custar a uma empresa uma m\u00e9dia de $9,000 por minuto enquanto seu site est\u00e1 indispon\u00edvel, de acordo com o <a href=\"http:\/\/www.datacenterdynamics.com\/content-tracks\/security-risk\/the-rising-cost-of-ddos\/96060.article\" target=\"_blank\" rel=\"noopener\">Instituto Ponemon<\/a>. Inscrever-se com um provedor de hospedagem web confi\u00e1vel pode ajudar a garantir que seu site fique dispon\u00edvel o m\u00e1ximo poss\u00edvel. Por exemplo, a <a href=\"https:\/\/www.dreamhost.com\/pt\/\" target=\"_blank\" rel=\"noopener\">DreamHost<\/a> usa unidades de estado s\u00f3lido de alta performance em nossos servidores, que s\u00e3o pelo menos 200 por cento mais r\u00e1pidas do que os discos r\u00edgidos tradicionais. <a href=\"https:\/\/www.dreamhost.com\/pt\/legal\/terms-of-service\/\" target=\"_blank\" rel=\"noopener\">Garantias de 100% de Tempo de Atividade<\/a> s\u00e3o outra medida vital a considerar ao avaliar a confiabilidade. A DreamHost \u00e9 um dos poucos fornecedores que promete que seu site estar\u00e1 online 100 por cento do tempo. At\u00e9 reembolsaremos voc\u00ea por um dia inteiro de hospedagem por cada hora que seu site estiver indispon\u00edvel.<\/li>\n\n\n\n<li><b>Compatibilidade entre navegadores: <\/b>Seu site deve ser exibido corretamente em todos os principais navegadores e sistemas operacionais. Testes de compatibilidade entre navegadores antes de seu site entrar no ar podem ajud\u00e1-lo a garantir que os usu\u00e1rios n\u00e3o enfrentar\u00e3o problemas de compatibilidade com diferentes navegadores.<\/li>\n\n\n\n<li><b>Acessibilidade: <\/b>Acessibilidade significa que cada pessoa pode acessar e usar seu site \u2013 mesmo que tenham defici\u00eancias. Aprenda como projetar um site acess\u00edvel com <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/\" target=\"_blank\" rel=\"noopener\">nosso guia definitivo<\/a>.<\/li>\n\n\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1700\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility.jpg\" alt=\"sites acess\u00edveis devem ser percept\u00edveis, oper\u00e1veis, compreens\u00edveis e robustos\" class=\"wp-image-43568 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-282x300.jpg 282w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-964x1024.jpg 964w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-768x816.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-1446x1536.jpg 1446w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-600x638.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-1200x1275.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-730x776.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-1460x1551.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-784x833.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-1568x1666.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/01-WCAG-Standards-For-Website-Accessibility-877x932.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1700;\" \/><\/figure>\n\n\n\n<h2 id=\"key\" class=\"wp-block-heading\">7 Componentes-chave do Design de Sites<\/h2>\n\n\n\n<p>Agora podemos entrar na parte divertida, como cores, tipografia, <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-write-website-ctas\/\" target=\"_blank\" rel=\"noopener\">bot\u00f5es de chamada para a\u00e7\u00e3o<\/a>, espa\u00e7os em branco, navega\u00e7\u00e3o e outros elementos de design web!<\/p>\n\n\n\n<p>Abaixo, exploraremos sete elementos b\u00e1sicos, mas lembre-se que o design web \u00e9 uma forma de arte, n\u00e3o uma ci\u00eancia. Voc\u00ea sempre pode correr riscos com o seu site se eles forem calculados e revers\u00edveis. Voc\u00ea pode at\u00e9 iniciar a pr\u00f3xima grande tend\u00eancia de design web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Layout Geral e Apar\u00eancia Visual<\/h3>\n\n\n\n<p>A apar\u00eancia geral do seu site \u00e9, claro, um componente crucial do design. As primeiras impress\u00f5es s\u00e3o cr\u00edticas, ent\u00e3o voc\u00ea quer impressionar os visitantes assim que a p\u00e1gina carrega. Os usu\u00e1rios levam apenas <a href=\"https:\/\/conversionxl.com\/blog\/first-impressions-matter-the-importance-of-great-visual-design\/\" target=\"_blank\" rel=\"noopener\">50 milissegundos para formar uma opini\u00e3o<\/a> sobre seu site ou neg\u00f3cio, o que ajudar\u00e1 a determinar se eles ficam ou saem.<\/p>\n\n\n\n<p>Abaixo, vamos abordar alguns elementos espec\u00edficos do layout e da apar\u00eancia visual do seu site nos quais voc\u00ea pode querer dedicar mais tempo.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Design Minimalista<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1200\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/02-Minimalism.jpg\" alt=\"exemplo de design de cart\u00e3o de um site, tr\u00eas fotos limpas, cada uma com uma foto de uma panela le creuset e um texto curto\" class=\"wp-image-43569 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/02-Minimalism.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/02-Minimalism-300x225.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/02-Minimalism-1024x768.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/02-Minimalism-768x576.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/02-Minimalism-1536x1152.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/02-Minimalism-600x450.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/02-Minimalism-1200x900.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/02-Minimalism-730x548.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/02-Minimalism-1460x1095.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/02-Minimalism-784x588.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/02-Minimalism-1568x1176.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/02-Minimalism-877x658.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1200;\" \/><\/figure>\n\n\n\n<p>Design minimalista (ou design minimal) significa colocar apenas os elementos necess\u00e1rios na sua p\u00e1gina inicial ou de destino. Seu design visual deve ser simples, familiar, intuitivo, limpo e acess\u00edvel. O design web minimalista utiliza o espa\u00e7o negativo ou branco para tornar a p\u00e1gina mais escane\u00e1vel e atrair os olhos dos visitantes para o que \u00e9 mais importante.<\/p>\n\n\n\n<p>Uma maneira moderna e eficaz de usar o minimalismo no seu site \u00e9 com o design de cart\u00f5es. Este \u00e9 um estilo de design web popular onde voc\u00ea agrupa texto e imagens juntos em cart\u00f5es individuais, oferecendo aos visitantes peda\u00e7os de conte\u00fado que eles podem absorver rapidamente sem se sentirem sobrecarregados.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Imagens de Destaque<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1080\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/03-Hero-Image.jpg\" alt=\"captura de tela da p\u00e1gina inicial da Milk &amp; Pepper com uma \u00fanica imagem de destaque no topo com uma foto de tr\u00eas c\u00e3es de su\u00e9ter\" class=\"wp-image-43570 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/03-Hero-Image.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/03-Hero-Image-300x203.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/03-Hero-Image-1024x691.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/03-Hero-Image-768x518.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/03-Hero-Image-1536x1037.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/03-Hero-Image-600x405.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/03-Hero-Image-1200x810.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/03-Hero-Image-730x493.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/03-Hero-Image-1460x986.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/03-Hero-Image-784x529.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/03-Hero-Image-1568x1058.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/03-Hero-Image-877x592.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1080;\" \/><\/figure>\n\n\n\n<p>As imagens de destaque tornaram-se uma tend\u00eancia no design web moderno. Tenha em mente que, se voc\u00ea for usar uma imagem de destaque (uma grande imagem que domina a p\u00e1gina), imagens de alta qualidade s\u00e3o essenciais \u2013 assim como ferramentas modernas de compress\u00e3o para reduzir o tamanho do arquivo, de modo que ter uma grande imagem n\u00e3o diminua a velocidade de carregamento da sua p\u00e1gina.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Elementos de E-commerce<\/h4>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1080\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/04-E-commerce-1.jpg\" alt=\"captura de tela da p\u00e1gina inicial da unique vintage com t\" class=\"wp-image-43571 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/04-E-commerce-1.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/04-E-commerce-1-300x203.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/04-E-commerce-1-1024x691.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/04-E-commerce-1-768x518.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/04-E-commerce-1-1536x1037.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/04-E-commerce-1-600x405.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/04-E-commerce-1-1200x810.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/04-E-commerce-1-730x493.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/04-E-commerce-1-1460x986.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/04-E-commerce-1-784x529.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/04-E-commerce-1-1568x1058.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/04-E-commerce-1-877x592.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1080;\" \/><\/figure>\n\n\n\n<p>Se o seu site \u00e9 para e-commerce, voc\u00ea tem muito mais elementos visuais para considerar, mas vamos focar em dois dos mais importantes: imagens de produtos e <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/call-to-action-cta\/\" target=\"_blank\" rel=\"noopener\">calls-to-action (CTA)<\/a>.<\/p>\n\n\n\n<p>Para sites de e-commerce, os elementos de design n\u00e3o s\u00f3 precisam ser atraentes, mas tamb\u00e9m ajudar a motivar e facilitar as compras. Imagens de produtos de alta qualidade ajudam os compradores a ver uma vis\u00e3o detalhada e atrativa dos produtos que voc\u00ea tem \u00e0 venda, tornando-as absolutamente essenciais para qualquer site que inclua compras online.<\/p>\n\n\n\n<p>Os bot\u00f5es de chamada para a\u00e7\u00e3o s\u00e3o outro elemento cr\u00edtico para sites de e-commerce. Os bot\u00f5es devem ser projetados para se destacar, colocados de forma proeminente e claramente rotulados para ajudar os compradores a moverem-se suavemente por toda a experi\u00eancia de compra.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Iconografia<\/h4>\n\n\n\n<p>Os \u00edcones podem ser \u00fateis para fornecer informa\u00e7\u00f5es complementares, mas a forma como s\u00e3o projetados precisa corresponder ao resto do seu site e \u00e0 sua marca. Existem dois tipos principais de design gr\u00e1fico para \u00edcones:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Design Esqueuom\u00f3rfico:<\/b> Quando \u00edcones s\u00e3o desenhados com detalhes, sombras, efeitos 3-D, etc.<\/li>\n\n\n\n<li><b>Design Plano ou Semi-plano:<\/b> Quando \u00edcones s\u00e3o desenhados de forma mais minimalista ou caricata, sem detalhes<\/li>\n\n\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design.jpg\" alt=\"bot\u00e3o esqueuom\u00f3rfico (com dimens\u00e3o como se o bot\u00e3o estivesse saindo da p\u00e1gina) vs. bot\u00e3o plano (1 dimens\u00e3o)\" class=\"wp-image-43572 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-1024x576.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-768x432.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-1536x864.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-1200x675.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-730x411.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-1460x821.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-784x441.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-1568x882.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/05-Skeuomorphic-Vs.-Flat-Design-877x493.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n\n<p>No passado, \u00edcones esqueuom\u00f3rficos eram mais na moda. Nos \u00faltimos anos, no entanto, vimos tend\u00eancias de design se moverem em dire\u00e7\u00e3o ao design plano e semi-plano. No entanto, tend\u00eancias n\u00e3o s\u00e3o tudo o que voc\u00ea deve considerar ao projetar seus \u00edcones; considere o que se encaixa melhor com sua marca e design geral do site.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h3 class=\"wp-block-heading\">2. Esquema de Cores<\/h3>\n\n\n\n<p>Ao escolher um esquema de cores, h\u00e1 v\u00e1rios fatores que voc\u00ea pode considerar: sua marca, sua ind\u00fastria, seu p\u00fablico-alvo e demografia, apenas para citar alguns. E com cerca de <a href=\"https:\/\/www.colormatters.com\/color-and-vision\/color-and-vision-matters\" target=\"_blank\" rel=\"noopener\">7 milh\u00f5es de tons detect\u00e1veis pelo olho humano<\/a>, voc\u00ea tem muito por onde escolher.<\/p>\n\n\n\n<p>Pense em como suas escolhas de cores podem represent\u00e1-lo. Por exemplo, azul-marinho ou verde-floresta s\u00e3o cores profissionais frequentemente usadas por advogados e m\u00e9dicos. Fot\u00f3grafos costumam usar preto e branco porque ajuda suas imagens a se destacarem.<\/p>\n\n\n\n<p>Mas mais do que apenas a sua ind\u00fastria, pense no seu p\u00fablico e nas expectativas deles. Se o seu p\u00fablico principal s\u00e3o crian\u00e7as pequenas, elas podem ser atra\u00eddas por cores vivas como vermelho e amarelo. Se os seus principais clientes s\u00e3o adolescentes e jovens adultos, cores ousadas podem ser a melhor escolha. Se voc\u00ea trabalha com adultos mais velhos, algo mais s\u00f3brio e refinado pode ser mais apropriado para eles.<\/p>\n\n\n\n<p>Uma vez que voc\u00ea escolhe uma cor prim\u00e1ria, isso pode informar o resto da sua paleta de cores. Ao projetar elementos como bot\u00f5es de navega\u00e7\u00e3o e \u00edcones, \u00e9 importante usar uma combina\u00e7\u00e3o de cores complementares com o fundo do seu site, cores de texto, etc.<\/p>\n\n\n\n<p>Precisa de mais ajuda? Confira nosso <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/como-escolher-o-esquema-de-cores-para-o-seu-site\/\" target=\"_blank\" rel=\"noopener\">guia definitivo para escolha de cores para seu site<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1736\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/06-Color-Theory.jpg\" alt=\"quatro c\u00edrculos crom\u00e1ticos, cada um mostrando um conceito diferente de teoria das cores: monocrom\u00e1tico, an\u00e1logo, complementar e tri\u00e1dico\" class=\"wp-image-43573 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/06-Color-Theory.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/06-Color-Theory-276x300.jpg 276w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/06-Color-Theory-944x1024.jpg 944w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/06-Color-Theory-768x833.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/06-Color-Theory-1416x1536.jpg 1416w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/06-Color-Theory-600x651.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/06-Color-Theory-1200x1302.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/06-Color-Theory-730x792.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/06-Color-Theory-1460x1584.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/06-Color-Theory-784x851.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/06-Color-Theory-1568x1701.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/06-Color-Theory-877x952.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1736;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">3. Tipografia<\/h3>\n\n\n\n<p>Ao pensar sobre como a paleta de cores do seu site ir\u00e1 represent\u00e1-lo e ao seu neg\u00f3cio, voc\u00ea deve fazer as mesmas perguntas sobre a <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/fontes-seguras-para-a-web\/\" target=\"_blank\" rel=\"noopener\">tipografia do seu site<\/a>. Voc\u00ea \u00e9 um profissional que deve usar uma fonte serifada distinta? Ou seu neg\u00f3cio \u00e9 mais casual e melhor representado por uma fonte sans serif leve e arejada?<\/p>\n\n\n\n<p>N\u00e3o importa o que voc\u00ea escolha, o texto do seu site <i>deve<\/i> ser facilmente leg\u00edvel, o que significa que o corpo do texto deve ter pelo menos 16 pixels, voc\u00ea deve usar uma fonte complementar para t\u00edtulos e destaques, e precisar\u00e1 de bastante contraste entre o texto e o fundo (n\u00e3o use fontes vermelhas em fundos verdes a menos que voc\u00ea queira causar dores de cabe\u00e7a em seus visitantes).<\/p>\n\n\n\n<p>Al\u00e9m disso, ainda existe alguma liberdade aqui. Voc\u00ea pode brincar com sua fonte, contanto que seja leg\u00edvel. Sinta-se \u00e0 vontade para equilibrar o convencional com o novo e experimentar algo um pouco diferente de Arial ou Times New Roman. Voc\u00ea pode <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/melhores-fontes-do-google\/\" target=\"_blank\" rel=\"noopener\">misturar fontes<\/a> contanto que elas se complementem.<\/p>\n\n\n\n<p>Evite usar <a href=\"http:\/\/www.comicsanscriminal.com\/\" target=\"_blank\" rel=\"noopener\">Comic Sans<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1013\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/07-Font-Pairings.jpg\" alt=\"exemplos de capturas de tela de um site utilizando dois tipos de fontes complementares diferentes\" class=\"wp-image-43574 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/07-Font-Pairings.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/07-Font-Pairings-300x190.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/07-Font-Pairings-1024x648.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/07-Font-Pairings-768x486.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/07-Font-Pairings-1536x972.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/07-Font-Pairings-600x380.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/07-Font-Pairings-1200x760.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/07-Font-Pairings-730x462.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/07-Font-Pairings-1460x924.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/07-Font-Pairings-784x496.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/07-Font-Pairings-1568x993.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/07-Font-Pairings-877x555.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1013;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">4. Navega\u00e7\u00e3o<\/h3>\n\n\n\n<p>A navega\u00e7\u00e3o do seu site n\u00e3o \u00e9 um espa\u00e7o onde voc\u00ea pode ser criativo.<\/p>\n\n\n\n<p>N\u00e3o caia na armadilha de efeitos de hover animados e subnavs complexos de m\u00faltiplos n\u00edveis. Elementos de navega\u00e7\u00e3o\u2013que podem existir no cabe\u00e7alho, corpo e rodap\u00e9 do site\u2013est\u00e3o l\u00e1 para direcionar seus visitantes \u00e0 informa\u00e7\u00e3o que desejam o mais r\u00e1pido poss\u00edvel. Ponto final.<\/p>\n\n\n\n<p>O primeiro menu de navega\u00e7\u00e3o deve estar no topo da p\u00e1gina, e aqui, voc\u00ea tem uma decis\u00e3o de design polarizadora a fazer: voc\u00ea usa um menu de navega\u00e7\u00e3o vertical ou um <a href=\"https:\/\/medium.com\/digital-experience-design\/to-hamburger-or-not-to-hamburger-aad8b4a07576\" target=\"_blank\" rel=\"noopener\">menu hamburger<\/a>? Os menus hamburger, que colapsam um menu vertical em tr\u00eas linhas horizontais paralelas, proporcionam uma maneira econ\u00f4mica de economizar espa\u00e7o escondendo seu menu de navega\u00e7\u00e3o fora do site (al\u00e9m de serem amig\u00e1veis para dispositivos m\u00f3veis). No entanto, um bot\u00e3o hamburger pode obscurecer informa\u00e7\u00f5es vitais \u2013 e eles tendem a ter taxas de clique mais baixas, o que significa que s\u00e3o menos eficazes para os visitantes.<\/p>\n\n\n\n<p>A navega\u00e7\u00e3o suave se estende al\u00e9m do cabe\u00e7alho do seu site. Para designs longos, com muita rolagem ou de uma \u00fanica p\u00e1gina, voc\u00ea pode querer incluir setas direcionais para ajudar os usu\u00e1rios a navegar por cada se\u00e7\u00e3o. Esses tipos de sites <a href=\"https:\/\/www.nngroup.com\/articles\/back-to-top\/\" target=\"_blank\" rel=\"noopener\">tamb\u00e9m podem se beneficiar<\/a> de um bot\u00e3o fixo \u201cVoltar ao Topo\u201d que rapidamente leva os visitantes de volta ao topo da p\u00e1gina.<\/p>\n\n\n\n<p>E finalmente, n\u00e3o se esque\u00e7a de incluir uma barra de navega\u00e7\u00e3o no rodap\u00e9 do seu site. Um rodap\u00e9 otimizado pode levar a <a href=\"https:\/\/icons8.com\/articles\/website-footer-design\/\" target=\"_blank\" rel=\"noopener\">at\u00e9 50% mais convers\u00f5es<\/a>\u2013especialmente se voc\u00ea incluir um formul\u00e1rio de contato ou um CTA como um link de inscri\u00e7\u00e3o para sua lista de emails.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/08-Navigation.jpg\" alt=\"captura de tela mostrando a navega\u00e7\u00e3o no rodap\u00e9 do dreamhost com cabe\u00e7alhos claros como produto, empresa, recursos e links listados em cada categoria\" class=\"wp-image-43575 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/08-Navigation.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/08-Navigation-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/08-Navigation-1024x576.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/08-Navigation-768x432.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/08-Navigation-1536x864.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/08-Navigation-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/08-Navigation-1200x675.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/08-Navigation-730x411.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/08-Navigation-1460x821.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/08-Navigation-784x441.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/08-Navigation-1568x882.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2021\/04\/08-Navigation-877x493.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">5. Conte\u00fado<\/h3>\n\n\n\n<p>Assim como os designers de interiores n\u00e3o param quando as paredes est\u00e3o pintadas, seu site n\u00e3o est\u00e1 pronto quando o layout, esquema de cores, tipos de letra e outros elementos est\u00e9ticos s\u00e3o escolhidos. \u00c9 hora de trazer o sof\u00e1 e pendurar fotos da fam\u00edlia na parede \u2013 prestando aten\u00e7\u00e3o em como sua mensagem interage com seu design.<\/p>\n\n\n\n<p>Os visitantes do seu site podem notar o seu design, mas est\u00e3o l\u00e1 pelo seu conte\u00fado. Sua marca \u00e9 confi\u00e1vel? Experiente? Capaz de oferecer produtos e servi\u00e7os de primeira linha? Comunicar-se de maneira clara \u00e9 cr\u00edtico; as informa\u00e7\u00f5es devem ser f\u00e1ceis de encontrar, ler e digerir \u2013 e \u00e9 a\u00ed que o conte\u00fado entra.<\/p>\n\n\n\n<p>Utilize cabe\u00e7alhos e texto de exibi\u00e7\u00e3o para organizar o conte\u00fado em se\u00e7\u00f5es, permitindo que os leitores possam visualizar e encontrar rapidamente as informa\u00e7\u00f5es que precisam. Remova qualquer informa\u00e7\u00e3o que n\u00e3o seja necess\u00e1ria. Divida conte\u00fados longos em listas \u2013 lembre-se de que sites com muito conte\u00fado competir\u00e3o com os elementos de design nos quais voc\u00ea trabalhou tanto.<\/p>\n\n\n\n<p>Aplique a mesma estrat\u00e9gia de conte\u00fado a cada p\u00e1gina. Por exemplo, at\u00e9 suas p\u00e1ginas &#8220;Sobre&#8221; e &#8220;Contato&#8221; devem ter a mesma marca e tom e transmitir as informa\u00e7\u00f5es corretas rapidamente.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. V\u00eddeos<\/h3>\n\n\n\n<p>O v\u00eddeo pode ser uma \u00f3tima maneira de envolver os visitantes do site, mantendo-os mais tempo no seu site, reduzindo as taxas de rejei\u00e7\u00e3o e at\u00e9 aumentando as convers\u00f5es. Os v\u00eddeos podem transformar p\u00e1ginas da web est\u00e1ticas em espa\u00e7os vibrantes, oferecendo um novo meio para contar a hist\u00f3ria da sua marca. O conte\u00fado de v\u00eddeo n\u00e3o s\u00f3 melhora a experi\u00eancia do usu\u00e1rio ao fornecer est\u00edmulos visuais e auditivos, mas tamb\u00e9m serve como uma ferramenta eficaz para melhorar o tempo de perman\u00eancia e as classifica\u00e7\u00f5es de SEO. Aqui est\u00e3o algumas maneiras de como adicionar v\u00eddeo pode melhorar o design do seu site:<b><\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Maior engajamento dos visitantes: <\/b>Ao apresentar informa\u00e7\u00f5es por meio de canais visuais, os v\u00eddeos mant\u00eam a aten\u00e7\u00e3o do espectador por mais tempo do que textos ou imagens est\u00e1ticas sozinhas. Seja um v\u00eddeo explicativo, uma demonstra\u00e7\u00e3o de produto ou uma hist\u00f3ria de marca envolvente, o conte\u00fado em v\u00eddeo tem a capacidade \u00fanica de engajar visitantes, incentivando-os a passar mais tempo explorando seu site.<\/li>\n\n\n\n<li><b>SEO melhorado: <\/b>Os motores de busca favorecem websites com conte\u00fado em v\u00eddeo, pois isso indica uma maior qualidade de informa\u00e7\u00e3o e engajamento do usu\u00e1rio. Incorporar v\u00eddeos relevantes ao seu conte\u00fado pode melhorar os rankings de SEO do seu site, tornando-o mais vis\u00edvel para potenciais visitantes. Al\u00e9m disso, os v\u00eddeos incentivam o compartilhamento nas plataformas de m\u00eddia social, aumentando ainda mais o alcance e a visibilidade do seu site. Otimizando t\u00edtulos, descri\u00e7\u00f5es e tags de v\u00eddeos com palavras-chave direcionadas, voc\u00ea pode aprimorar sua estrat\u00e9gia de SEO e atrair mais tr\u00e1fego para o seu site.<\/li>\n\n\n\n<li><b>Mais convers\u00f5es: <\/b>V\u00eddeos tamb\u00e9m desempenham um papel crucial na convers\u00e3o de visitantes em clientes ou assinantes. V\u00eddeos de produtos, por exemplo, permitem que potenciais compradores vejam os itens em a\u00e7\u00e3o, abordando perguntas e preocupa\u00e7\u00f5es de uma forma que descri\u00e7\u00f5es de produtos n\u00e3o conseguem. V\u00eddeos de depoimentos adicionam uma camada de confian\u00e7a e credibilidade, mostrando experi\u00eancias reais com sua marca ou produtos. Incorporando chamadas para a\u00e7\u00e3o claras dentro ou ap\u00f3s os v\u00eddeos, voc\u00ea pode guiar os espectadores para fazer uma compra, inscrever-se em uma newsletter, ou interagir com sua marca de outras formas significativas.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">7. N\u00e3o se Esque\u00e7a do Mobile<\/h3>\n\n\n\n<p>Ufa! Finalmente, estamos chegando ao fim da nossa jornada de design web com um site elegante, compacto e f\u00e1cil de usar. Pronto para fazer tudo de novo \u2013 mas menor?<\/p>\n\n\n\n<p>A quantidade de <a href=\"https:\/\/gs.statcounter.com\/platform-market-share\/desktop-mobile-tablet\/worldwide\/#monthly-201601-202402\" target=\"_blank\" rel=\"noopener\">tr\u00e1fego web m\u00f3vel superou o tr\u00e1fego de desktop<\/a> h\u00e1 anos e n\u00e3o mostra sinais de desacelera\u00e7\u00e3o. Al\u00e9m disso, o Google agora usa <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/\" target=\"_blank\" rel=\"noopener\">indexa\u00e7\u00e3o mobile-first<\/a> para classificar sites nos resultados de busca, e desde 2021, o motor de busca utiliza <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/principais-metricas-da-web-do-google\/\" target=\"_blank\" rel=\"noopener\">Core Web Vitals<\/a>, um conjunto de m\u00e9tricas para medir o qu\u00e3o bem seu site oferece uma experi\u00eancia de usu\u00e1rio de qualidade (incluindo em dispositivos m\u00f3veis), para ajudar a determinar quais sites devem receber um impulso no ranking.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Core Web Vitals (CWV)<\/h3>\n    <p>Core Web Vitals (CWV) foi desenvolvido pelo Google e representa um trio de m\u00e9tricas de experi\u00eancia do usu\u00e1rio projetadas para ajudar a criar uma experi\u00eancia de navega\u00e7\u00e3o na web mais r\u00e1pida, acess\u00edvel e de maior qualidade. As tr\u00eas m\u00e9tricas Core Web Vitals incluem Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS).<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/seo\/core-web-vitals\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>Em outras palavras, sites compat\u00edveis com dispositivos m\u00f3veis n\u00e3o s\u00e3o mais apenas um recurso agrad\u00e1vel de se ter. <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/\" target=\"_blank\" rel=\"noopener\">Eles s\u00e3o uma necessidade<\/a>.<\/p>\n\n\n\n<p>A maioria dos <a href=\"https:\/\/www.dreamhost.com\/wordpress\/how-to-find-wp-themes\/\" target=\"_blank\" rel=\"noopener\">temas WordPress<\/a> ou templates j\u00e1 est\u00e1 preparada para tr\u00e1fego m\u00f3vel. Mas se voc\u00ea projetar uma apar\u00eancia personalizada ou <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-hire-designer-to-create-custom-website\/\" target=\"_blank\" rel=\"noopener\">contratar um designer web<\/a>, voc\u00ea precisa garantir que seu site funcione igualmente bem quando acessado de todos os tipos de dispositivos.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Design Responsivo Vs. Layout Amig\u00e1vel para Celulares<\/h4>\n\n\n\n<p>\u00c9 importante tamb\u00e9m entender a diferen\u00e7a entre design de sites responsivos e design amig\u00e1vel para dispositivos m\u00f3veis ou design mobile-first.<\/p>\n\n\n\n<p>Quando um site \u00e9 responsivo, isso significa que quando um usu\u00e1rio m\u00f3vel o acessa, ele se adapta para se ajustar ao tamanho da tela.<\/p>\n\n\n\n<p>Por outro lado, um design adaptado para dispositivos m\u00f3veis pode alterar o layout para ser mais ideal para cada tamanho de tela, mudando os layouts de colunas ou os tamanhos dos bot\u00f5es para torn\u00e1-los mais f\u00e1ceis de ver e usar em diferentes tipos de dispositivos.<\/p>\n\n\n\n<p>Embora um design responsivo seja melhor do que um site que n\u00e3o se ajusta de forma alguma para os usu\u00e1rios m\u00f3veis, ele n\u00e3o \u00e9 t\u00e3o ideal quanto um design mobile-first que se ajusta para cada tamanho de tela e tipo de dispositivo. Leve isso em considera\u00e7\u00e3o ao escolher seu template ou ao trabalhar com um designer web.<\/p>\n\n\n\n<h2 id=\"stunning\" class=\"wp-block-heading\">Obtenha um Site Deslumbrante Projetado do Zero<\/h2>\n\n\n\n<p>Agora que voc\u00ea aprendeu sobre os elementos essenciais do design web moderno, \u00e9 <a href=\"https:\/\/www.dreamhost.com\/academy\/website-building-101\/\" target=\"_blank\" rel=\"noopener\">hora de construir seu site<\/a>!<\/p>\n\n\n\n<p>Na DreamHost, facilitamos para que os entusiastas do &#8220;fa\u00e7a voc\u00ea mesmo&#8221; lancem um site rapidamente com nosso <a href=\"https:\/\/www.dreamhost.com\/pt\/criador-sites-web-ia\/\" target=\"_blank\" rel=\"noopener\">Construtor de Sites WP de Arrastar e Soltar<\/a>. Mas, se voc\u00ea est\u00e1 procurando um site WordPress personalizado e polido que seja 100% \u00fanico para a sua marca, considere nosso <a href=\"https:\/\/www.dreamhost.com\/pt\/servicos-profissionais\/design\/design-web-personalizado\/\" target=\"_blank\" rel=\"noopener\">servi\u00e7o de Design de Site Personalizado<\/a>.<\/p>\n\n\n\n<p>Veja como o processo funciona: Voc\u00ea come\u00e7ar\u00e1 com uma chamada individual com seu gerente de projeto, que discutir\u00e1 seus requisitos, conte\u00fado e objetivos. Em seguida, reuniremos seu logo existente e materiais de branding em uma simples folha de refer\u00eancia de uma p\u00e1gina para garantir que o design do seu site reflita precisamente sua marca.<\/p>\n\n\n\n<p>Em seguida, nossos designers profissionais criar\u00e3o um prot\u00f3tipo personalizado do seu novo site. Voc\u00ea pode oferecer feedback e, uma vez que tenha aprovado o design, n\u00f3s o transformaremos em um site WordPress de alto desempenho. Garantimos sua satisfa\u00e7\u00e3o com o produto final, incluindo revis\u00f5es desde o in\u00edcio; voc\u00ea receber\u00e1 duas rodadas de revis\u00f5es de design e c\u00f3digo para cada p\u00e1gina do seu site.<\/p>\n\n\n\n<p>Seu site finalizado ser\u00e1 otimizado para motores de busca, adaptado para dispositivos m\u00f3veis e repleto de funcionalidades como um blog personalizado, formul\u00e1rios de contato, an\u00e1lise de dados e ferramentas de com\u00e9rcio eletr\u00f4nico. Podemos at\u00e9 mesmo fazer o upload de produtos para a sua loja online, se necess\u00e1rio.<\/p>\n\n\n\n<p>Se voc\u00ea est\u00e1 pronto para ir al\u00e9m dos templates do WordPress, conhe\u00e7a nosso servi\u00e7o de <a href=\"https:\/\/www.dreamhost.com\/pt\/servicos-profissionais\/design\/design-web-personalizado\/\" target=\"_blank\" rel=\"noopener\">Design Personalizado de Websites<\/a> hoje mesmo.<\/p>\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      A DreamHost Torna o Design de Sites F\u00e1cil\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Nossos designers podem criar um site incr\u00edvel do ZERO para combinar perfeitamente com sua marca e vis\u00e3o \u2014 tudo codificado com WordPress para que voc\u00ea possa gerenciar seu conte\u00fado daqui para frente.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pt\/servicos-profissionais\/design\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Saiba Mais                    <\/a>\n\n  <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>O design web moderno pode parecer um pouco com alquimia: a pr\u00e1tica antiga de tentar transformar chumbo em ouro. At\u00e9 um iniciante pode reconhecer o que faz um bom site, mas quando se trata de constru\u00ed-lo sozinho? Vamos apenas dizer que fazer ouro do zero \u00e9 mais dif\u00edcil do que parece. Encontrar o design certo para o seu [\u2026]<\/p>\n","protected":false},"author":1075,"featured_media":43566,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"tech\",\"Primeiro, Cuide das Coisas T\u00e9cnicas (Ou Pe\u00e7a ao Seu Host para Fazer Isso por Voc\u00ea)\"],[\"key\",\"7 Componentes-chave do Design de Sites\"],[\"stunning\",\"Obtenha um Site Deslumbrante Projetado do Zero\"]]","hide_toc":false,"footnotes":""},"categories":[14407],"tags":[],"class_list":["post-51555","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-de-sites-pt"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Os 7 Elementos B\u00e1sicos do Design de Sites - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Os 7 Elementos B\u00e1sicos do Design de Sites\" \/>\n<meta property=\"og:description\" content=\"O design web moderno pode parecer um pouco com alquimia: a pr\u00e1tica antiga de tentar transformar chumbo em ouro. At\u00e9 um iniciante pode reconhecer o que faz um bom site, mas quando se trata de constru\u00ed-lo sozinho? Vamos apenas dizer que fazer ouro do zero \u00e9 mais dif\u00edcil do que parece. Encontrar o design certo para o seu [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-18T08:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T19:46:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/1460-x-1095-BLOG-HERO-_Top-7-Basic-Elements-Of-Web-Design-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jennifer Le\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jennifer Le\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Os 7 Elementos B\u00e1sicos do Design de Sites - DreamHost Blog","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:\/\/www-dev.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/","og_locale":"en_US","og_type":"article","og_title":"Os 7 Elementos B\u00e1sicos do Design de Sites","og_description":"O design web moderno pode parecer um pouco com alquimia: a pr\u00e1tica antiga de tentar transformar chumbo em ouro. At\u00e9 um iniciante pode reconhecer o que faz um bom site, mas quando se trata de constru\u00ed-lo sozinho? Vamos apenas dizer que fazer ouro do zero \u00e9 mais dif\u00edcil do que parece. Encontrar o design certo para o seu [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-03-18T08:00:00+00:00","article_modified_time":"2025-05-26T19:46:00+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/1460-x-1095-BLOG-HERO-_Top-7-Basic-Elements-Of-Web-Design-1.jpg","type":"image\/jpeg"}],"author":"Jennifer Le","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jennifer Le","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/"},"author":{"name":"Jennifer Le","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/6e0e15f083b219af1ab8d25dcd595ddf"},"headline":"Os 7 Elementos B\u00e1sicos do Design de Sites","datePublished":"2024-03-18T08:00:00+00:00","dateModified":"2025-05-26T19:46:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/"},"wordCount":3330,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/1460-x-1095-BLOG-HERO-_Top-7-Basic-Elements-Of-Web-Design-1.jpg","articleSection":["Design de Sites"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/","name":"Os 7 Elementos B\u00e1sicos do Design de Sites - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/1460-x-1095-BLOG-HERO-_Top-7-Basic-Elements-Of-Web-Design-1.jpg","datePublished":"2024-03-18T08:00:00+00:00","dateModified":"2025-05-26T19:46:00+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/1460-x-1095-BLOG-HERO-_Top-7-Basic-Elements-Of-Web-Design-1.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2021\/04\/1460-x-1095-BLOG-HERO-_Top-7-Basic-Elements-Of-Web-Design-1.jpg","width":1460,"height":1095,"caption":"Top 7 Basic Elements Of Web Design"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Os 7 Elementos B\u00e1sicos do Design de Sites"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/6e0e15f083b219af1ab8d25dcd595ddf","name":"Jennifer Le","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","caption":"Jennifer Le"},"description":"Jennifer is Designer II at DreamHost and is responsible for branding, design, and UX\/UI. In her free time, she enjoys crafting, cooking, and camping. Follow Jennifer on LinkedIn: https:\/\/www.linkedin.com\/in\/nhijenniferle\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jenniferle\/"}]}},"lang":"pt","translations":{"pt":51555,"es":28872,"en":20576,"ru":50903,"de":51234,"uk":51568,"pl":51613,"it":67800,"fr":69191,"nl":69236},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/51555","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1075"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=51555"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/51555\/revisions"}],"predecessor-version":[{"id":62199,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/51555\/revisions\/62199"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/43566"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=51555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=51555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=51555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}