{"id":56831,"date":"2024-10-28T07:00:00","date_gmt":"2024-10-28T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=56831"},"modified":"2025-05-26T12:22:12","modified_gmt":"2025-05-26T19:22:12","slug":"design-de-email","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/design-de-email\/","title":{"rendered":"Seu Guia para Design de Email: 15 Melhores Pr\u00e1ticas para Marketing por Email"},"content":{"rendered":"<p>Voc\u00ea pode ter ouvido antes que o <a target=\"_blank\" href=\"https:\/\/www.litmus.com\/resources\/email-marketing-roi\" rel=\"noopener\">email gera mais de $30<\/a> para cada d\u00f3lar que voc\u00ea gasta nele.<\/p>\n<p>Isso \u00e9 um retorno sobre o investimento bastante poderoso para qualquer coisa \u2014 mas <em>especialmente<\/em> para uma campanha de marketing.<\/p>\n<p>Assim, ele praticamente consolida a import\u00e2ncia do marketing por email para o sucesso de pequenas empresas.<\/p>\n<p>Mas, infelizmente, os emails n\u00e3o podem ter essa influ\u00eancia se ningu\u00e9m os estiver abrindo ou lendo!<\/p>\n<p>Quando foi a \u00faltima vez que um email realmente chamou sua aten\u00e7\u00e3o ou conquistou seu cora\u00e7\u00e3o?<\/p>\n<p>Cativou voc\u00ea em rela\u00e7\u00e3o a uma marca?<\/p>\n<p>Fez voc\u00ea rir?<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"750\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/01_subject_line.webp\" alt=\"exemplo de caixa de entrada de email destacando duas linhas de assunto interessantes: &quot;Inspecionado profissionalmente, aprovado pela Fender&quot; e &quot;N\u00e3o!&quot; \" class=\"wp-image-50455 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/01_subject_line.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/01_subject_line-300x141.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/01_subject_line-1024x480.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/01_subject_line-768x360.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/01_subject_line-1536x720.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/01_subject_line-600x281.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/01_subject_line-1200x563.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/01_subject_line-730x342.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/01_subject_line-1460x684.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/01_subject_line-784x368.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/01_subject_line-1568x735.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/01_subject_line-877x411.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\/750;\" \/><\/figure>\n<p>Ou, talvez o mais importante: levou voc\u00ea a clicar, converter e se tornar um cliente fiel?<\/p>\n<p>Estamos certos de que n\u00e3o foi apenas sobre o que foi dito, mas <em>como<\/em> foi dito.<\/p>\n<p>\u00c9 aqui que entra o design de Email.<\/p>\n<p>Utilizar truques como otimizar a velocidade de carregamento, apoiar-se na teoria das cores, construir um fluxo que aproveite a maneira inata de as pessoas lerem, e criar um layout que seja amig\u00e1vel em todos os dispositivos e em todos os n\u00edveis de habilidade <em>naturalmente<\/em> cria emails irresist\u00edveis.<\/p>\n<p>E emails irresist\u00edveis s\u00e3o abertos, lidos e trazem o engajamento necess\u00e1rio para que o trabalho de marketing por email valha o retorno.<\/p>\n<p>Aqui est\u00e1 o porqu\u00ea e como projetar seus pr\u00f3prios emails.<\/p>\n<h2 id=\"h-what-do-we-mean-by-email-newsletter-design\" class=\"wp-block-heading\">O que entendemos por Design de Newsletter por Email?<\/h2>\n<p>Todos n\u00f3s j\u00e1 fizemos isso antes. Escrever um email \u00e9 simples, certo? (Na maioria das vezes, pelo menos.)<\/p>\n<p>N\u00e3o t\u00e3o r\u00e1pido.<\/p>\n<p><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/guia-de-marketing-por-email\/\" rel=\"noopener\">Marketing eficaz por email<\/a> envolve <em>muito<\/em> mais do que apenas digitar uma mensagem e apertar enviar.<\/p>\n<p>Se o seu email n\u00e3o possui uma linha de assunto chamativa, conte\u00fado relevante, um layout inteligente e elementos visualmente atraentes \u2014 \u00e9 muito f\u00e1cil para os destinat\u00e1rios ignor\u00e1-lo na avalanche que \u00e9 a caixa de correio deles.<\/p>\n<p><strong>O design de Email \u00e9 o processo de elabora\u00e7\u00e3o e estrutura\u00e7\u00e3o cuidadosa dos emails para garantir que sejam visualmente atraentes, f\u00e1ceis de ler e inspirem a\u00e7\u00e3o.<\/strong><\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1350\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/02_email_newsletter_design.webp\" alt=\"captura de tela de um boletim Currents com o assunto &quot;palavras que voc\u00ea nunca deve dizer novamente&quot; e outros elementos importantes como imagens e um link para visualizar no navegador\" class=\"wp-image-50457 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/02_email_newsletter_design.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/02_email_newsletter_design-300x253.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/02_email_newsletter_design-1024x864.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/02_email_newsletter_design-768x648.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/02_email_newsletter_design-1536x1296.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/02_email_newsletter_design-600x506.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/02_email_newsletter_design-1200x1013.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/02_email_newsletter_design-730x616.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/02_email_newsletter_design-1460x1232.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/02_email_newsletter_design-784x662.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/02_email_newsletter_design-1568x1323.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/02_email_newsletter_design-877x740.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\/1350;\" \/><\/figure>\n<p>Em ess\u00eancia, o design de emails de marketing concentra-se mais no layout visual dos seus emails do que no conte\u00fado em si. Envolve organizar e otimizar texto, imagens e informa\u00e7\u00f5es chave de uma forma que torne o email inignor\u00e1vel. Dado que as pessoas geralmente passam rapidamente pelos emails, um email bem projetado garante que a sua mensagem seja fiel \u00e0 marca, clara e at\u00e9 cativante.<\/p>\n<p>E um guia de design de <em>Email<\/em> bem elaborado pode ensinar voc\u00ea a dar vida a todos os elementos acima para fortalecer sua voz, atrair novos clientes e construir relacionamentos de longo prazo com seu p\u00fablico.<\/p>\n<p>\u00c9 exatamente isso que voc\u00ea est\u00e1 prestes a ler, agora mesmo.<\/p>\n<h2 id=\"h2_why-email-design-matters\" class=\"wp-block-heading\">Por que o Design de Email \u00e9 Importante<\/h2>\n<p>J\u00e1 falamos sobre por que os propriet\u00e1rios de pequenas empresas e os profissionais de marketing devem se concentrar em <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/cresca-sua-lista-de-emails\/\" rel=\"noopener\">aumentar suas listas de email<\/a> \u2014 o marketing por email tem um \u00f3timo retorno sobre o investimento!<br><br>O que especificamente \u00e9 t\u00e3o importante sobre o design dos seus emails? Ele tem uma maneira de aumentar as aberturas e o engajamento dos emails.<\/p>\n<p>Vamos mostrar-lhe como.<\/p>\n<h3 class=\"wp-block-heading\">Maximize a Legibilidade<\/h3>\n<p>Um email bem estruturado com uma clara hierarquia, amplo espa\u00e7o em branco, fontes cuidadosamente escolhidas e elementos de design pensados garante que os destinat\u00e1rios possam ler rapidamente, facilmente e at\u00e9 com entusiasmo qualquer conte\u00fado que voc\u00ea deseje compartilhar com eles. Aqui n\u00e3o h\u00e1 festa de marketing mon\u00f3tona!<\/p>\n<h3 class=\"wp-block-heading\">Impulsione A\u00e7\u00f5es Mensur\u00e1veis<\/h3>\n<p>Em \u00faltima an\u00e1lise, emails bem projetados orientam seus destinat\u00e1rios para um pr\u00f3ximo passo claro, seja inscrever-se em um evento, fazer uma compra ou visitar um site.<\/p>\n<p>Quando o design e o conte\u00fado se alinham perfeitamente, fica f\u00e1cil para os destinat\u00e1rios agirem de acordo com sua mensagem, e para voc\u00ea definir e atingir metas mensur\u00e1veis em torno de convers\u00f5es.<\/p>\n<h3 class=\"wp-block-heading\">Construa Confian\u00e7a na Marca<\/h3>\n<p>Usar consistentemente as cores, fontes e logotipos da sua marca no design do email refor\u00e7a a identidade da sua marca. Quando os destinat\u00e1rios veem um email que visualmente est\u00e1 alinhado com uma marca que j\u00e1 conhecem, isso cria confian\u00e7a, tornando-os mais propensos a abrir emails futuros!<\/p>\n<p>N\u00f3s adoramos esse impulso de marketing t\u00e3o doce.<\/p>\n<h3 class=\"wp-block-heading\">Receba Todos os Leitores Atrav\u00e9s da Acessibilidade<\/h3>\n<p>O <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/otimos-exemplos-de-acessibilidade-na-web\/\" rel=\"noopener\">design de Email<\/a> deve sempre considerar a acessibilidade, tornando-o f\u00e1cil de compreender para o maior n\u00famero poss\u00edvel de pessoas.<\/p>\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>Acessibilidade<\/h3>\n    <p>A acessibilidade \u00e9 a pr\u00e1tica de tornar um site acess\u00edvel para o maior n\u00famero poss\u00edvel de usu\u00e1rios. Sites acess\u00edveis podem ser visualizados por qualquer pessoa, em qualquer dispositivo.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/accessibility\/\"\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<p>Escolhas cuidadosas de design que abordaremos a fundo na pr\u00f3xima se\u00e7\u00e3o \u2014 como tamanhos de fonte adequados, contraste de cores e texto alternativo para imagens \u2014 garantem que mais pessoas sejam bem-vindas para interagir com seu conte\u00fado, independentemente de como elas acessam seu email.<\/p>\n<h2 id=\"h2_15-email-design-best-practices\" class=\"wp-block-heading\">15 Melhores Pr\u00e1ticas de Design de Email<\/h2>\n<p>D\u00ea uma olhada nas suas m\u00e9tricas de marketing atuais.<\/p>\n<p>Voc\u00ea est\u00e1 projetando emails que atingem o alvo todas as vezes?<\/p>\n<p>Se n\u00e3o, \u00e9 hora de parar de desperdi\u00e7ar seus recursos e come\u00e7ar a ser mais eficaz.<\/p>\n<p>A pr\u00f3xima se\u00e7\u00e3o ir\u00e1 gui\u00e1-lo atrav\u00e9s de algumas das melhores pr\u00e1ticas para criar uma experi\u00eancia de Email que capta aten\u00e7\u00e3o, entrega valor e encoraja a\u00e7\u00e3o.<\/p>\n<h3 class=\"wp-block-heading\">1. Coluna \u00danica Mant\u00e9m Simplicidade<\/h3>\n<p>Normalmente recomendamos escolher um layout de coluna \u00fanica nos seus emails de marketing por v\u00e1rias raz\u00f5es:<\/p>\n<ul class=\"wp-block-list\"><li>Primeiro, \u00e9 simplesmente <strong>mais f\u00e1cil para voc\u00ea projetar<\/strong>!<\/li><li>Outra raz\u00e3o \u00e9 que isso torna muito <strong>mais f\u00e1cil para os leitores escanearem rapidamente e tomarem uma a\u00e7\u00e3o<\/strong>, o que \u00e9 verdadeiramente o que muitos querem ao lidar com emails em sua caixa de entrada. Este layout simplificado tamb\u00e9m \u00e9 mais \u00e0 prova de falhas para tecnologias assistivas processarem, tornando-o mais acess\u00edvel.<\/li><li>E por \u00faltimo, mas certamente n\u00e3o menos importante, <strong>emails de coluna \u00fanica s\u00e3o mais adapt\u00e1veis a diferentes tamanhos de tela<\/strong>, tornando-os mais amig\u00e1veis para dispositivos m\u00f3veis. (Um fator importante que falaremos mais adiante.)<\/li><\/ul>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1000\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/03_single_column_keeps_it_simple.webp\" alt=\"lado a lado com um layout de coluna \u00fanica e um layout de coluna dupla com um x atrav\u00e9s dele rotulado como &quot;v\u00e1rias colunas&quot; \" class=\"wp-image-50458 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/03_single_column_keeps_it_simple.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/03_single_column_keeps_it_simple-300x188.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/03_single_column_keeps_it_simple-1024x640.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/03_single_column_keeps_it_simple-768x480.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/03_single_column_keeps_it_simple-1536x960.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/03_single_column_keeps_it_simple-600x375.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/03_single_column_keeps_it_simple-1200x750.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/03_single_column_keeps_it_simple-730x456.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/03_single_column_keeps_it_simple-1460x913.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/03_single_column_keeps_it_simple-784x490.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/03_single_column_keeps_it_simple-1568x980.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/03_single_column_keeps_it_simple-877x548.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\/1000;\" \/><\/figure>\n<h3 class=\"wp-block-heading\">2. Familiarize-se com o Padr\u00e3o Comum de Leitura em F<\/h3>\n<p>Identificado pelo Grupo Nielsen Norman por meio de um estudo de rastreamento ocular, o <a target=\"_blank\" href=\"https:\/\/www.nngroup.com\/articles\/f-shaped-pattern-reading-web-content\/\" rel=\"noopener\">padr\u00e3o de leitura em forma de F<\/a> \u00e9 uma das maneiras mais comuns de os leitores examinarem blocos de conte\u00fado.<\/p>\n<p>O padr\u00e3o funciona assim:<\/p>\n<ol class=\"wp-block-list\"><li>O leitor inicia com uma varredura horizontal na parte superior do conte\u00fado, formando a linha superior da letra &#8220;F&#8221;.<\/li><li>Em seguida, eles descem e fazem a varredura da pr\u00f3xima se\u00e7\u00e3o horizontal que chama a aten\u00e7\u00e3o, essa linha inferior do &#8220;F&#8221; \u00e9 geralmente mais curta que a primeira.<\/li><li>Por \u00faltimo, eles seguem um caminho vertical ao longo do lado esquerdo do conte\u00fado, completando o formato de &#8220;F&#8221;!<\/li><\/ol>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1005\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/04_design_tip_create_an_f_reading_pattern.webp\" alt=\"exemplo de padr\u00e3o de leitura em F mostrando o conceito ao lado de um email real para ilustrar como nossos olhos naturalmente escaneiam emails em um padr\u00e3o de &quot;F&quot;\" class=\"wp-image-50459 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/04_design_tip_create_an_f_reading_pattern.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/04_design_tip_create_an_f_reading_pattern-300x188.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/04_design_tip_create_an_f_reading_pattern-1024x643.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/04_design_tip_create_an_f_reading_pattern-768x482.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/04_design_tip_create_an_f_reading_pattern-1536x965.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/04_design_tip_create_an_f_reading_pattern-600x377.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/04_design_tip_create_an_f_reading_pattern-1200x754.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/04_design_tip_create_an_f_reading_pattern-730x459.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/04_design_tip_create_an_f_reading_pattern-1460x917.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/04_design_tip_create_an_f_reading_pattern-784x492.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/04_design_tip_create_an_f_reading_pattern-1568x985.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/04_design_tip_create_an_f_reading_pattern-877x551.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\/1005;\" \/><\/figure>\n<p>Ao projetar seus emails, aqui est\u00e1 como otimizar levando em considera\u00e7\u00e3o esse comportamento de escaneamento:<\/p>\n<ul class=\"wp-block-list\"><li>Coloque as informa\u00e7\u00f5es mais importantes onde os leitores provavelmente v\u00e3o focar, seguindo o padr\u00e3o em F.<\/li><li>Comece novos par\u00e1grafos ou se\u00e7\u00f5es com palavras que chamem a aten\u00e7\u00e3o para continuar a captar o olhar \u00e0 medida que ele se move para baixo.&nbsp;<\/li><li>Certifique-se de que o elemento mais proeminente no seu email se destaque imediatamente e tente coloc\u00e1-lo no caminho do olhar conforme ele percorre o padr\u00e3o. Mais adiante neste artigo, falaremos sobre como escolher o melhor tipo e tamanho de fonte, assim como aplicar o contraste efetivamente para atrair a aten\u00e7\u00e3o.<\/li><\/ul>\n<h3 class=\"wp-block-heading\">3. Adote a T\u00e9cnica da Pir\u00e2mide Invertida dos Escritores<\/h3>\n<p>O layout de pir\u00e2mide invertida \u00e9 uma poderosa estrat\u00e9gia de design emprestada de escritores e jornalistas. No mundo do email, trata-se de colocar as informa\u00e7\u00f5es mais cr\u00edticas primeiro, e ent\u00e3o guiar rapidamente os leitores at\u00e9 um <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/exemplos-de-chamada-para-acao\/\" rel=\"noopener\">chamado \u00e0 a\u00e7\u00e3o (CTA) claro<\/a> em forma de tri\u00e2ngulo de cabe\u00e7a para baixo.<\/p>\n<p>A estrutura \u00e9 simples:<\/p>\n<p>Comece com um t\u00edtulo ou gancho chamativo, seguido por informa\u00e7\u00f5es de suporte concisas, e termine com uma CTA proeminente.<\/p>\n<p>E n\u00e3o \u00e9 apenas sobre as palavras que voc\u00ea usa. Seja criativo com fontes, cores e design! E use o espa\u00e7o em branco estrategicamente para realmente envolver o leitor.<\/p>\n<p>Ao minimizar distra\u00e7\u00f5es e manter o conte\u00fado simplificado e empolgante, o layout de pir\u00e2mide invertida conduz o olhar do leitor naturalmente para o CTA, tornando mais prov\u00e1vel que ele interaja com ele.<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1800\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/05_design_tip_structure_elements_within_an_inverted_pyramid.webp\" alt=\"exemplo de design usando uma pir\u00e2mide invertida mostrando a empresa, alguns links principais e depois diminuindo atrav\u00e9s de uma imagem at\u00e9 o bot\u00e3o &quot;compre agora&quot;\" class=\"wp-image-50460 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/05_design_tip_structure_elements_within_an_inverted_pyramid.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/05_design_tip_structure_elements_within_an_inverted_pyramid-267x300.webp 267w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/05_design_tip_structure_elements_within_an_inverted_pyramid-910x1024.webp 910w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/05_design_tip_structure_elements_within_an_inverted_pyramid-768x864.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/05_design_tip_structure_elements_within_an_inverted_pyramid-1365x1536.webp 1365w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/05_design_tip_structure_elements_within_an_inverted_pyramid-600x675.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/05_design_tip_structure_elements_within_an_inverted_pyramid-1200x1350.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/05_design_tip_structure_elements_within_an_inverted_pyramid-730x821.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/05_design_tip_structure_elements_within_an_inverted_pyramid-1460x1643.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/05_design_tip_structure_elements_within_an_inverted_pyramid-784x882.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/05_design_tip_structure_elements_within_an_inverted_pyramid-1568x1764.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/05_design_tip_structure_elements_within_an_inverted_pyramid-877x987.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\/1800;\" \/><\/figure>\n<h3 class=\"wp-block-heading\">4. Considere Emojis (S\u00e9rio!)<\/h3>\n<p>Seja transmitindo desd\u00e9m (?) ou compartilhando not\u00edcias emocionantes sem escrever uma \u00fanica palavra (?): os emojis s\u00e3o uma op\u00e7\u00e3o de comunica\u00e7\u00e3o poderosa e moderna.<\/p>\n<p>\u00c0 parte as anedotas, foi descoberto que os emojis <a target=\"_blank\" href=\"https:\/\/www.wordstream.com\/blog\/ws\/2015\/11\/19\/twitter-emoji\" rel=\"noopener\">aumentam o engajamento nas redes sociais<\/a>. Ent\u00e3o, por que n\u00e3o tentar us\u00e1-los para fazer o mesmo nos seus emails de marketing?<\/p>\n<p>Quando usados com cuidado (isso \u00e9 cr\u00edtico!), <strong>emojis podem adicionar personalidade e interesse visual aos seus emails<\/strong>, ajudando-os a se destacar e manter os destinat\u00e1rios lendo. Eles criam uma conex\u00e3o emocional instant\u00e2nea e tornam sua mensagem mais envolvente.<\/p>\n<p>A parte mais importante desta melhor pr\u00e1tica \u00e9 entender o seu p\u00fablico e a mensagem em quest\u00e3o para garantir que os emojis usados se ajustem e aprimorem-na, sem distrair dela.<\/p>\n<h3 class=\"wp-block-heading\">5. Otimizar Tamanho da Imagem<\/h3>\n<p>Os profissionais de marketing por email da Campaign Monitor constru\u00edram seus templates de email para terem 600 pixels de largura no desktop e 320 pixels no mobile. Al\u00e9m disso, os primeiros 300-500 pixels geralmente s\u00e3o o que as pessoas conseguem ver em um email antes de precisarem rolar a tela. Com tudo isso em mente, quaisquer imagens que voc\u00ea usar nos emails de marketing n\u00e3o devem exceder esses par\u00e2metros.<\/p>\n<p>Mas n\u00e3o se trata apenas de medidas, trata-se tamb\u00e9m de &#8220;peso&#8221; \u2014 que impacta o tempo de carregamento. <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/otimizar-imagens-para-a-web\/\" rel=\"noopener\">Comprima as imagens para minimizar o tamanho do arquivo<\/a> para que carreguem mais r\u00e1pido e estejam em conformidade com as regulamenta\u00e7\u00f5es dos clientes de email.<\/p>\n<p>Tem d\u00favidas sobre qual formato de arquivo usar para suas imagens?<\/p>\n<ul class=\"wp-block-list\"><li>JPEGs s\u00e3o n\u00edtidos e pequenos e ainda ideais para apresentar fotografias profissionais.<\/li><li>PNGs comprimem bem.<\/li><li>E os arquivos SVG s\u00e3o leves e permanecem n\u00edtidos em qualquer escala, tornando-os bons para \u00edcones e logotipos.<\/li><\/ul>\n<p>Uma observa\u00e7\u00e3o importante \u00e9 que, independentemente de como voc\u00ea trate as imagens, elas devem <strong>sempre estar incorporadas no seu email.<\/strong> Por qu\u00ea?<\/p>\n<p>Porque os anexos hoje s\u00e3o facilmente marcados como spam.<\/p>\n<h3 class=\"wp-block-heading\">6. Mantenha a Identidade Visual Consistente<\/h3>\n<p>Um grande motivo para os emails n\u00e3o serem abertos, ou serem rapidamente exclu\u00eddos quando s\u00e3o, \u00e9 que eles parecem estar vindo de forma inesperada. Muitas vezes, isso \u00e9 resultado de uma marca fraca.<\/p>\n<p>Incorporar a identidade visual da sua marca em cada email \u00e9 essencial para refor\u00e7ar o reconhecimento da marca. Sem isso, os destinat\u00e1rios podem pensar que est\u00e3o recebendo spam que n\u00e3o solicitaram \u2014 aumentando assim suas taxas de rejei\u00e7\u00e3o e cancelamento de inscri\u00e7\u00e3o.<\/p>\n<p>O truque aqui \u00e9 garantir que seus emails apresentem elementos de design chave da sua marca por meio de:<\/p>\n<ul class=\"wp-block-list\"><li><strong>Destacando os elementos centrais da sua marca<\/strong>, como fontes, cores e imagens em todas as comunica\u00e7\u00f5es por email.<\/li><li><strong>Garantindo que o design dos seus emails esteja sincronizado<\/strong> com seu site, <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/construir-paginas-de-destino-geradoras-de-leads-no-wordpress\/\" rel=\"noopener\">p\u00e1ginas de aterrissagem<\/a>, presen\u00e7a nas redes sociais, etc., para criar uma frente unificada.<\/li><li><strong>Posicionando seu logotipo de maneira proeminente<\/strong> no cabe\u00e7alho ou rodap\u00e9 de cada email para refor\u00e7ar a identidade da marca.<\/li><li><strong>Criando modelos reutiliz\u00e1veis<\/strong> uma vez que voc\u00ea tenha acertado a vibra\u00e7\u00e3o certa, para agilizar futuras campanhas de email e garantir consist\u00eancia.<\/li><\/ul>\n<h3 class=\"wp-block-heading\">7. Priorize a Experi\u00eancia M\u00f3vel<\/h3>\n<p>No final de 2023, mais da metade de todo o tr\u00e1fego na web ao redor do mundo <a target=\"_blank\" href=\"https:\/\/www.statista.com\/statistics\/277125\/share-of-website-traffic-coming-from-mobile-devices\/\" rel=\"noopener\">ocorreu em dispositivos m\u00f3veis<\/a>.<\/p>\n<p>Em outras palavras, n\u00e3o h\u00e1 como ignorar essas pequenas e inteligentes telas quando se trata de design de email.<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1800\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/06_design_tip_use_responsive_design.webp\" alt=\"Design responsivo mostrando um email de Six Flags no desktop e a adapta\u00e7\u00e3o desse design no mobile com algumas reorganiza\u00e7\u00f5es para aproveitar o espa\u00e7o\" class=\"wp-image-50461 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/06_design_tip_use_responsive_design.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/06_design_tip_use_responsive_design-267x300.webp 267w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/06_design_tip_use_responsive_design-910x1024.webp 910w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/06_design_tip_use_responsive_design-768x864.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/06_design_tip_use_responsive_design-1365x1536.webp 1365w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/06_design_tip_use_responsive_design-600x675.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/06_design_tip_use_responsive_design-1200x1350.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/06_design_tip_use_responsive_design-730x821.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/06_design_tip_use_responsive_design-1460x1643.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/06_design_tip_use_responsive_design-784x882.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/06_design_tip_use_responsive_design-1568x1764.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/06_design_tip_use_responsive_design-877x987.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\/1800;\" \/><\/figure>\n<p>O design que se ajusta de acordo com o tamanho e tipo de tela \u00e9 conhecido como design responsivo. Felizmente, a maioria das ferramentas de design de Email \u2014 como Mailchimp, Stripo, Unlayer e dezenas de outras \u2014 s\u00e3o responsivas e ir\u00e3o redimensionar e reorganizar automaticamente os emails para <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/como-otimizar-seu-site-para-dispositivos-moveis\/\" rel=\"noopener\">garantir que sejam amig\u00e1veis para dispositivos m\u00f3veis<\/a>.<\/p>\n<p>Contudo, existem v\u00e1rias coisas que voc\u00ea pode fazer para garantir que isso n\u00e3o d\u00ea errado e suas newsletters de email estejam sempre impec\u00e1veis:<\/p>\n<ul class=\"wp-block-list\"><li>Como j\u00e1 mencionamos aqui e ali, um <strong>design simplificado e simples<\/strong> \u00e9 frequentemente o melhor para emails, especialmente quando se pensa na legibilidade em dispositivos m\u00f3veis. Al\u00e9m disso, layouts simples carregam mais r\u00e1pido, o que todos n\u00f3s queremos quando estamos em movimento.<\/li><li><strong>Os bot\u00f5es devem ser grandes o suficiente para serem facilmente tocados com o polegar<\/strong>. A regra, bem, do polegar \u00e9 de <strong>44&#215;44 pixels<\/strong>. Tamb\u00e9m deve haver espa\u00e7o suficiente ao redor dos bot\u00f5es para que os usu\u00e1rios possam clicar sem tocar acidentalmente em links pr\u00f3ximos.<\/li><li>O <strong>espa\u00e7o em branco<\/strong> \u00e9 mais importante do que nunca para a legibilidade em dispositivos m\u00f3veis, ent\u00e3o use-o generosamente, mas com sabedoria.<\/li><li>Coloque seu <strong>conte\u00fado mais importante pr\u00f3ximo ao topo do seu email<\/strong> para que ele seja vis\u00edvel antes da rolagem.<\/li><li>Dispositivos m\u00f3veis geralmente exibem <strong>linhas de assunto mais curtas<\/strong> (cerca de 30 a 40 caracteres), ent\u00e3o mantenha-as curtas e diretas.<\/li><li>O <strong>tamanho total do email deve ser inferior a 100KB<\/strong>, ou demorar\u00e1 muito para carregar ou ser\u00e1 cortado pelo cliente de email.<\/li><\/ul>\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<h3 class=\"wp-block-heading\">8. D\u00ea-me Algum Espa\u00e7o, Por Favor!<\/h3>\n<p>No design, o espa\u00e7o em branco refere-se ao espa\u00e7o vazio ou negativo ao redor dos elementos.<\/p>\n<p>Desempenha um papel crucial no design de email ao ajudar a organizar o conte\u00fado com base na import\u00e2ncia, melhorando a legibilidade e a facilidade de leitura, e direcionando a aten\u00e7\u00e3o para os componentes-chave.<\/p>\n<p>Honestamente, o espa\u00e7o em branco \u00e9 uma daquelas coisas que voc\u00ea simplesmente reconhece quando v\u00ea \u2014 quando bem aplicado, \u00e9 a diferen\u00e7a entre uma intera\u00e7\u00e3o agrad\u00e1vel e calma e uma que parece ultrapassada, sufocante e dif\u00edcil de assimilar.<\/p>\n<p>Dito isso, aqui est\u00e3o algumas dicas b\u00e1sicas a considerar sobre a implementa\u00e7\u00e3o de espa\u00e7os em branco em emails:<\/p>\n<ul class=\"wp-block-list\"><li><strong>Deixe espa\u00e7o suficiente<\/strong> (tamb\u00e9m conhecido como espa\u00e7o) ao redor de par\u00e1grafos, imagens e outras se\u00e7\u00f5es para evitar que o email pare\u00e7a desorganizado.<\/li><li><strong>Igualize as margens<\/strong> entre todos os seus blocos de texto, para ajudar a guiar o olho do leitor suavemente de uma se\u00e7\u00e3o para a pr\u00f3xima.<\/li><li><strong>Aumente o espa\u00e7amento entre linhas de texto<\/strong> para melhorar a legibilidade.<\/li><li><strong>Adicione mais espa\u00e7o ao redor das \u00e1reas chave<\/strong> para atrair naturalmente a aten\u00e7\u00e3o para elas, sem floreios de design adicionais.<\/li><li><strong>Resista \u00e0 tenta\u00e7\u00e3o de colocar demasiado conte\u00fado em um \u00fanico email<\/strong>. Mantendo texto e imagens espa\u00e7ados, voc\u00ea reduz a desordem visual e torna a sua mensagem mais diger\u00edvel.<\/li><li>Lembre-se, <strong>menos \u00e9 frequentemente mais<\/strong> quando se trata de layout de email!<\/li><\/ul>\n<h3 class=\"wp-block-heading\">9. Crie Emails com Hierarquia Clara<\/h3>\n<p>Criar hierarquia \u2014 organizar elementos de uma maneira que indica o n\u00edvel de import\u00e2ncia \u2014 em um email de marketing garante que seus destinat\u00e1rios possam navegar facilmente pelo conte\u00fado, absorver as informa\u00e7\u00f5es principais e realizar as a\u00e7\u00f5es desejadas.<\/p>\n<p>Semelhante \u00e0 aplica\u00e7\u00e3o de espa\u00e7o em branco, dominar a hierarquia \u00e9 algo que vem com a observa\u00e7\u00e3o e pr\u00e1tica. Mas, uma vez que voc\u00ea entende, voc\u00ea <em>entende<\/em>.<\/p>\n<p>Ainda assim, existem algumas dicas bastante diretas que voc\u00ea pode usar ao redigir emails para ajudar a guiar o olho do leitor e transmitir sua mensagem de forma eficaz:<\/p>\n<ul class=\"wp-block-list\"><li><strong>Cabe\u00e7alhos de Funcionalidades <\/strong>ao introduzir pontos chave. Os t\u00edtulos devem ser maiores e mais destacados que todo o resto do texto, sinalizando claramente as partes mais importantes de sua mensagem. Subt\u00edtulos podem introduzir informa\u00e7\u00f5es de suporte.<\/li><li><strong>Use texto maior e mais destacado<\/strong> para atrair naturalmente a aten\u00e7\u00e3o. Textos menores podem adicionar contexto conforme necess\u00e1rio.<\/li><li><strong>Cores contrastantes<\/strong> fazem elementos importantes se destacarem. Destaque sua CTA mais importante com sua cor mais ousada que contrasta com o fundo. E n\u00e3o use demais essa cor ou voc\u00ea perder\u00e1 efic\u00e1cia.&nbsp;<\/li><li><strong>Imagens bem como espa\u00e7os em branco<\/strong> podem direcionar a aten\u00e7\u00e3o do leitor para informa\u00e7\u00f5es importantes.<\/li><li><strong>Iconografia com setas<\/strong> tamb\u00e9m pode ajudar os leitores a entender o que olhar primeiro, ou a seguir.<\/li><\/ul>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1759\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/07_design_tip_create_header_hierarchy.webp\" alt=\"exemplo de hierarquia de cabe\u00e7alhos apontando o H1 no topo, seguido por um H2 abaixo e depois um H3 mais abaixo\" class=\"wp-image-50462 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/07_design_tip_create_header_hierarchy.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/07_design_tip_create_header_hierarchy-273x300.webp 273w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/07_design_tip_create_header_hierarchy-931x1024.webp 931w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/07_design_tip_create_header_hierarchy-768x844.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/07_design_tip_create_header_hierarchy-1397x1536.webp 1397w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/07_design_tip_create_header_hierarchy-600x660.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/07_design_tip_create_header_hierarchy-1200x1319.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/07_design_tip_create_header_hierarchy-730x803.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/07_design_tip_create_header_hierarchy-1460x1605.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/07_design_tip_create_header_hierarchy-784x862.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/07_design_tip_create_header_hierarchy-1568x1724.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/07_design_tip_create_header_hierarchy-877x964.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\/1759;\" \/><\/figure>\n<h3 class=\"wp-block-heading\">10. Escolha Suas Fontes Cuidadosamente<\/h3>\n<p>\u00c9 importante encontrar um equil\u00edbrio entre a marca e a legibilidade ao <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/melhores-fontes-do-google\/\" rel=\"noopener\">escolher fontes<\/a> para seus emails. No entanto, provavelmente dar\u00edamos maior import\u00e2ncia \u00e0 legibilidade \u2014 que \u00e9 fortemente influenciada pela escolha das fontes.<\/p>\n<ul class=\"wp-block-list\"><li><strong>Para cabe\u00e7alhos e blocos curtos de texto<\/strong>, opte por fontes sans-serif que s\u00e3o limpas, modernas e exibem claramente na maioria das telas. Essas fontes tendem a ser mais leg\u00edveis em pequenas doses e tamanhos grandes, tornando-as ideais para t\u00edtulos e outros trechos que chamam a aten\u00e7\u00e3o.<\/li><li><strong>Para par\u00e1grafos mais longos<\/strong>, as fontes serifadas s\u00e3o tipicamente mais f\u00e1ceis de ler. \u00c9 por isso que muitos jornais e revistas usam fontes serifadas para trechos mais extensos de texto.<\/li><\/ul>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1005\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/08_design_tip_use_readable_fonts.webp\" alt=\"sans serif versus serif mostrando as partes curvas da letra &quot;A&quot; que fazem uma fonte ser serifada\" class=\"wp-image-50463 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/08_design_tip_use_readable_fonts.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/08_design_tip_use_readable_fonts-300x188.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/08_design_tip_use_readable_fonts-1024x643.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/08_design_tip_use_readable_fonts-768x482.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/08_design_tip_use_readable_fonts-1536x965.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/08_design_tip_use_readable_fonts-600x377.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/08_design_tip_use_readable_fonts-1200x754.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/08_design_tip_use_readable_fonts-730x459.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/08_design_tip_use_readable_fonts-1460x917.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/08_design_tip_use_readable_fonts-784x492.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/08_design_tip_use_readable_fonts-1568x985.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/08_design_tip_use_readable_fonts-877x551.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\/1005;\" \/><\/figure>\n<p>Al\u00e9m de escolher o estilo certo, voc\u00ea tamb\u00e9m quer <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/fontes-seguras-para-a-web\/\" rel=\"noopener\">priorizar fontes seguras para a web<\/a>, que s\u00e3o amplamente suportadas na maioria dos navegadores da web, clientes de email e sistemas operacionais. Usar fontes seguras para a web garante que seus emails ter\u00e3o a apar\u00eancia que voc\u00ea pretendia, seja abertos no Gmail, Outlook ou qualquer outro servi\u00e7o popular.<\/p>\n<p>As fontes sans-serif seguras para web mais populares incluem:<\/p>\n<ul class=\"wp-block-list\"><li><span style=\"font-family: Arial;\">Arial<\/span><\/li><li><span style=\"font-family: Helvetica;\">Helvetica<\/span><\/li><li><span style=\"font-family: Verdana;\">Verdana<\/span><\/li><li><span style=\"font-family: Tahoma;\">Tahoma<\/span><\/li><li><span style=\"font-family: Lucida Sans;\">Lucida Sans<\/span><\/li><li><span style=\"font-family: Geneva;\">Geneva<\/span><\/li><\/ul>\n<p>As fontes serifadas comuns seguras para web incluem:<\/p>\n<ul class=\"wp-block-list\"><li><span style=\"font-family: Times New Roman;\">Times New Roman<\/span><\/li><li><span style=\"font-family: Garamond;\">Garamond<\/span><\/li><li><span style=\"font-family: Georgia;\">Georgia<\/span><\/li><\/ul>\n<h3 class=\"wp-block-heading\">11. Tamanho da Fonte Entre 10 e 16 Pontos<\/h3>\n<p>O tamanho da fonte \u00e9 t\u00e3o importante quanto o estilo da fonte. \u00c9 tamb\u00e9m sobre branding misturado com equil\u00edbrio.<\/p>\n<p>Embora n\u00e3o existam padr\u00f5es r\u00edgidos para tamanhos de fontes em emails, \u00e9 <strong>melhor manter sua fonte acima do tamanho de 10 pontos, <\/strong>pois tamanhos menores podem ser dif\u00edceis de ler.<\/p>\n<p>Na outra extremidade, 16 pontos \u00e9 um tamanho grande agrad\u00e1vel, mas qualquer valor acima disso tem o potencial de parecer distorcido ou &#8220;quebrar&#8221; seu design em certas plataformas de email.<\/p>\n<p>\u00c9 importante lembrar que as diretrizes de acessibilidade recomendam pelo menos uma fonte de 16 pontos. Para encontrar o melhor ajuste, recomendamos fortemente experimentar com o tamanho para ver o que funciona melhor para o seu estilo de email t\u00edpico em plataformas, dispositivos e leitores de tela.<\/p>\n<h3 class=\"wp-block-heading\">12. Considere o Impacto das Cores<\/h3>\n<p>A cor, \u00e9 claro, impacta a forma como seus emails s\u00e3o percebidos.<\/p>\n<p>N\u00e3o apenas as cores ajudam a retratar sua marca, elas tamb\u00e9m podem <strong>impactar a legibilidade e informar os destinat\u00e1rios sobre a hierarquia do conte\u00fado.<\/strong><\/p>\n<p>Considere o tom que deseja transmitir ao usar cores em emails. Enquanto o azul que muitos sites famosos usam (Facebook, Dell, etc.) pode transmitir confian\u00e7a, o amarelo pode melhorar o humor, o verde pode introduzir paz e o preto pode ajudar a passar uma mensagem mais s\u00f3bria (ou luxuosa).<\/p>\n<p>A forma como voc\u00ea usa as cores juntas tamb\u00e9m \u00e9 importante. Para 40 ideias diferentes de como combinar cores para transmitir sua mensagem de forma clara e direta, n\u00e3o perca nosso guia recente sobre <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/esquemas-de-cores-para-sites\/\" rel=\"noopener\">esquemas de cores para sites<\/a>.<\/p>\n<h3 class=\"wp-block-heading\">13. N\u00e3o Esque\u00e7a do Modo Escuro<\/h3>\n<p>A plataforma de Email Litmus descobriu que cerca de <a target=\"_blank\" href=\"https:\/\/www.litmus.com\/blog\/email-client-market-share-infographic\" rel=\"noopener\">35% dos seus assinantes<\/a> (e aumentando) que usam o email da Apple visualizam seus emails no modo escuro: uma configura\u00e7\u00e3o que escurece o esquema de cores de tudo o que um destinat\u00e1rio v\u00ea em seu dispositivo.<\/p>\n<p>Muitos clientes de Email tentam ajustar automaticamente os emails para o modo escuro, mas esse processo nem sempre \u00e9 perfeito. Para garantir que seus emails fiquem \u00f3timos em configura\u00e7\u00f5es claras e escuras, considere o seguinte:<\/p>\n<ul class=\"wp-block-list\"><li><strong>Utilize PNGs transparentes<\/strong> porque essas imagens n\u00e3o t\u00eam fundo. Ao usar PNGs transparentes, voc\u00ea evita contrastes de fundo desagrad\u00e1veis quando seu email transita de claro para escuro.<\/li><li><strong>Contorne logos pretos em branco<\/strong> porque se parte do seu logo \u00e9 preta, ela pode se fundir a um fundo escuro e parecer mal, muito rapidamente. Para evitar isso, adicione uma pequena borda branca ao redor dos elementos pretos. Isso os torna vis\u00edveis no modo escuro, enquanto ainda permite que eles se integrem perfeitamente se o fundo for branco.<\/li><\/ul>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/09_design_tip_optimize_for_dark_mode.webp\" alt=\"lado esquerdo mostra um logotipo aparecendo no modo escuro sem borda e mal leg\u00edvel vs um logotipo com uma borda branca para que apare\u00e7a no modo escuro\" class=\"wp-image-50465 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/09_design_tip_optimize_for_dark_mode.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/09_design_tip_optimize_for_dark_mode-300x169.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/09_design_tip_optimize_for_dark_mode-1024x576.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/09_design_tip_optimize_for_dark_mode-768x432.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/09_design_tip_optimize_for_dark_mode-1536x864.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/09_design_tip_optimize_for_dark_mode-600x338.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/09_design_tip_optimize_for_dark_mode-1200x675.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/09_design_tip_optimize_for_dark_mode-730x411.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/09_design_tip_optimize_for_dark_mode-1460x821.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/09_design_tip_optimize_for_dark_mode-784x441.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/09_design_tip_optimize_for_dark_mode-1568x882.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/09_design_tip_optimize_for_dark_mode-877x493.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<ul class=\"wp-block-list\"><li><strong>Otimizando as cores para ambas as paletas<\/strong> significa que as cores nos seus bot\u00f5es, links, \u00edcones e outros podem parecer totalmente diferentes no modo escuro do que voc\u00ea est\u00e1 acostumado. Para evitar contraste pobre, cores estridentes ou problemas de legibilidade, considere suavizar levemente seus tons para garantir que sejam agrad\u00e1veis aos olhos em todos os modos.<\/li><li><strong>Teste! Teste! Teste! <\/strong>Uma vez que voc\u00ea tenha projetado seu email para o modo escuro, \u00e9 importante testar como ele \u00e9 renderizado. Envie um email de teste para voc\u00ea mesmo e verifique sua apar\u00eancia tanto no modo claro quanto no escuro, em diferentes clientes de email.&nbsp;<\/li><\/ul>\n<h3 class=\"wp-block-heading\">14. O Texto de Email Acess\u00edvel \u00e9 Essencial<\/h3>\n<p>Uma vez que o email \u00e9 uma extens\u00e3o da sua marca, o design de acessibilidade de email \u00e9 t\u00e3o importante quanto o design de acessibilidade de <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/\" rel=\"noopener\">site<\/a>.<\/p>\n<p>Aqui est\u00e1 uma dica para garantir que seus emails sejam bonitos e consum\u00edveis para todos os membros do p\u00fablico:<\/p>\n\n<ul class=\"wp-block-list\">\n    \n    <li><strong>Certifique-se de que informa\u00e7\u00f5es importantes<\/strong> \u2014 c\u00f3digos promocionais, datas, hor\u00e1rios e CTAs \u2014 sejam apresentadas como texto pelo menos uma vez, em vez de estarem somente embutidas em imagens. Isso garante que todos os destinat\u00e1rios, incluindo aqueles que utilizam leitores de tela ou com imagens desativadas, ainda possam acessar conte\u00fados cruciais.<\/li>\n    \n    \n    <li><strong>Use texto alternativo para imagens<\/strong>. Se um assinante tiver imagens desativadas, o texto alternativo ainda fornecer\u00e1 contexto e transmitir\u00e1 a mensagem.&nbsp;<\/li>\n    \n    \n    <li><strong>Um tamanho m\u00ednimo de fonte de 16 pontos<\/strong> \u00e9 recomendado para legibilidade.<\/li>\n    \n    \n    <li><strong>Alinhar texto \u00e0 esquerda<\/strong> pois textos alinhados \u00e0 esquerda s\u00e3o mais f\u00e1ceis de ler do que par\u00e1grafos centralizados, que podem interromper o fluxo para os leitores.<\/li>\n    \n    \n    <li><strong>Letras e linhas muito pr\u00f3ximas<\/strong> podem reduzir a legibilidade, portanto, forne\u00e7a espa\u00e7o suficiente entre elas.<\/li>\n    \n    \n    <li><strong>Depender exclusivamente de cores para transmitir todo o seu significado pode ser confuso<\/strong> para aqueles com daltonismo. Al\u00e9m disso, a maioria dos leitores de tela n\u00e3o interpreta cores. Em vez disso, use texto e \u00edcones al\u00e9m da cor para transmitir informa\u00e7\u00f5es.<\/li>\n    \n    \n    <li><strong>Fa\u00e7a o texto se destacar<\/strong> claramente contra o fundo, criando um forte contraste de cores. Uma propor\u00e7\u00e3o de contraste de pelo menos 4.5:1 \u00e9 recomendada para garantir legibilidade para todos os usu\u00e1rios.<\/li>\n    \n<\/ul>\n\n<p>Se voc\u00ea nunca precisou verificar o contraste de um design antes, existem muitas ferramentas gratuitas e \u00fateis online \u2014 <a target=\"_blank\" href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" rel=\"noopener\">como esta do WebAIM<\/a>.<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"997\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/10_contrast_ratios.webp\" alt=\"rela\u00e7\u00f5es de contraste de baixo para alto mostrando que as maiores s\u00e3o melhores, 5:1, 6:1, e 21:1\" class=\"wp-image-50466 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/10_contrast_ratios.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/10_contrast_ratios-300x187.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/10_contrast_ratios-1024x638.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/10_contrast_ratios-768x479.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/10_contrast_ratios-1536x957.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/10_contrast_ratios-600x374.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/10_contrast_ratios-1200x748.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/10_contrast_ratios-730x455.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/10_contrast_ratios-1460x910.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/10_contrast_ratios-784x489.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/10_contrast_ratios-1568x977.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/10_contrast_ratios-877x546.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\/997;\" \/><\/figure>\n<h3 class=\"wp-block-heading\">15. Teste A\/B e Itere<\/h3>\n<p>Um dos passos mais cruciais para garantir o sucesso do design de email \u00e9 <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/teste-a-b\/\" rel=\"noopener\">realizar testes A\/B<\/a>.<\/p>\n<p>Este processo envolve criar duas vers\u00f5es de um email e enviar cada uma para diferentes segmentos da sua lista de assinantes. Ao analisar os resultados \u2014 como taxas de abertura, taxas de cliques ou convers\u00f5es \u2014 voc\u00ea pode determinar qual vers\u00e3o tem mais resson\u00e2ncia com seu p\u00fablico.<\/p>\n<p>Vamos cobrir os passos r\u00e1pidos e pr\u00e1ticos de realizar um teste A\/B de email:<\/p>\n<p><strong>Passo 1: Defina o que voc\u00ea vai testar<\/strong>. Concentre-se em um elemento por vez, como layout da c\u00f3pia do email, n\u00famero de imagens ou cor do bot\u00e3o de CTA. Isso permite que voc\u00ea isole o impacto de cada mudan\u00e7a.<\/p>\n<p><strong>Passo 2: Segmentar<\/strong>. Divida sua lista de assinantes em dois grupos iguais para uma compara\u00e7\u00e3o justa. Certifique-se de que ambos os grupos representem bem o seu p\u00fablico geral.<\/p>\n<p><strong>Etapa 3: Defina metas<\/strong>. Determine como o sucesso se parece. Voc\u00ea est\u00e1 buscando mais aberturas, taxas de clique mais altas ou mais convers\u00f5es? Ter uma meta clara ir\u00e1 orientar sua an\u00e1lise.<\/p>\n<p><strong>Passo 4: Analisar resultados<\/strong>. Uma vez enviados os emails, compare as m\u00e9tricas com base em seus objetivos. Identifique qual vers\u00e3o teve melhor desempenho e por qu\u00ea.<\/p>\n<p><strong>Etapa 5: Implementar aprendizados<\/strong>. Aplique os elementos vencedores aos futuros designs de email e continue testando outros componentes, para manter as melhorias em andamento.<\/p>\n<h2 id=\"h2_4-more-resources-for-website-and-email-marketing-success\" class=\"wp-block-heading\">4 Recursos Adicionais para o Sucesso do Site e do Marketing por Email<\/h2>\n<p>Procurando mais maneiras de alcan\u00e7ar excel\u00eancia em design de email e site?<\/p>\n<p>N\u00f3s reunimos alguns dos nossos recursos favoritos para alcan\u00e7ar ainda mais sucesso ao navegar pelo mundo do marketing online:<\/p>\n<ul class=\"wp-block-list\"><li><strong>Para um novo visual no design do site ou um primeiro curso intensivo<\/strong>, n\u00e3o perca os <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/\" rel=\"noopener\">Top 7 Elementos B\u00e1sicos do Design de Sites<\/a>.&nbsp;<\/li><li><strong>Est\u00e1 tentando decidir se \u00e9 hora de investir em uma atualiza\u00e7\u00e3o digital?<\/strong> Confira <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/hora-de-redesenhar-o-site\/\" rel=\"noopener\">Hora de Redesenhar o Site? 7 Maneiras de Saber<\/a>.&nbsp;<\/li><li><strong>Decidiu que seu site precisa de uma reforma?<\/strong> Permita-nos ser seu guia em <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/lista-de-verificacao-para-redesenho-de-site\/\" rel=\"noopener\">Sua Lista de Verifica\u00e7\u00e3o para Redesenho de Site para uma Renova\u00e7\u00e3o Incr\u00edvel<\/a>.&nbsp;<\/li><li><strong>O design n\u00e3o \u00e9 <em>tudo<\/em>. A capacidade de entrega tamb\u00e9m \u00e9 chave para o sucesso do marketing por Email.<\/strong> <a href=\"https:\/\/shareasale.com\/r.cfm?b=834775&amp;u=4337179&amp;m=64312&amp;urllink=wpmailsmtp%2Ecom%2Fpricing%2F&amp;afftrack=DHblog\" target=\"_blank\" rel=\"noopener\">WP Mail SMTP<\/a> aumenta a confiabilidade do Email para usu\u00e1rios do WordPress.<\/li><\/ul>\n<h2 id=\"h2_which-best-practices-for-email-campaigns-will-you-try\" class=\"wp-block-heading\">Quais as Melhores Pr\u00e1ticas para Campanhas de Email Voc\u00ea Vai Experimentar?<\/h2>\n<p>Assim mesmo (OK, foi meio longo, desculpe!), agora voc\u00ea tem 15 pr\u00e1ticas recomendadas comprovadas de design de email em seu kit de ferramentas, desde a otimiza\u00e7\u00e3o para dispositivos m\u00f3veis e a cria\u00e7\u00e3o de hierarquias claras at\u00e9 a escolha das fontes certas, aprendendo os detalhes dos espa\u00e7os em branco e, claro, testes A\/B.<\/p>\n<p>O pr\u00f3ximo passo \u00e9 bastante simples \u2014 saia e comece a aplicar essas dicas \u00e0s suas campanhas de email e veja os resultados por si mesmo!<\/p>\n<p>Sentindo mais press\u00e3o do que nunca? Desacelere, n\u00f3s temos a solu\u00e7\u00e3o ideal.<\/p>\n<p>Para aqueles leitores que precisam obter mais assinantes, visitantes e vendas, mas simplesmente <em>n\u00e3o<\/em> t\u00eam tempo para atualizar seu site e campanhas de marketing, confira nossa <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/pt\/servicos-profissionais\/marketing\/\" rel=\"noopener\">equipe de Servi\u00e7os Pro<\/a>.<\/p>\n<p>De SEO a m\u00eddias sociais e al\u00e9m, nossos especialistas diversificados e habilidosos podem fazer exatamente o que voc\u00ea precisa para impulsionar a experi\u00eancia de marketing e ajudar a crescer o seu pequeno neg\u00f3cio.<\/p>\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>","protected":false},"excerpt":{"rendered":"<p>Quer cativar sua audi\u00eancia com emails projetados de forma impec\u00e1vel? Essas 15 melhores pr\u00e1ticas de design de email podem gerar resultados poderosos \u2014 experimente e veja!<\/p>\n","protected":false},"author":1061,"featured_media":50445,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"h-what-do-we-mean-by-email-newsletter-design\",\"O que entendemos por Design de Newsletter por Email?\"],[\"h2_why-email-design-matters\",\"Por que o Design de Email \u00e9 Importante\"],[\"h2_15-email-design-best-practices\",\"15 Melhores Pr\u00e1ticas de Design de Email\"],[\"h2_4-more-resources-for-website-and-email-marketing-success\",\"4 Recursos Adicionais para o Sucesso do Site e do Marketing por Email\"],[\"h2_which-best-practices-for-email-campaigns-will-you-try\",\"Quais as Melhores Pr\u00e1ticas para Campanhas de Email Voc\u00ea Vai Experimentar?\"]]","hide_toc":false,"footnotes":""},"categories":[14389],"tags":[],"class_list":["post-56831","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing-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>Seu Guia para Design de Email: 15 Melhores Pr\u00e1ticas para Marketing por Email - 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\/design-de-email\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Seu Guia para Design de Email: 15 Melhores Pr\u00e1ticas para Marketing por Email\" \/>\n<meta property=\"og:description\" content=\"Quer cativar sua audi\u00eancia com emails projetados de forma impec\u00e1vel? Essas 15 melhores pr\u00e1ticas de design de email podem gerar resultados poderosos \u2014 experimente e veja!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/design-de-email\/\" \/>\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-10-28T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T19:22:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/1460x1095-BLOG-HERO-Your-Guide-to-Email-Design.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=\"Justin Lorenc\" \/>\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=\"Justin Lorenc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"22 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Seu Guia para Design de Email: 15 Melhores Pr\u00e1ticas para Marketing por Email - 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\/design-de-email\/","og_locale":"en_US","og_type":"article","og_title":"Seu Guia para Design de Email: 15 Melhores Pr\u00e1ticas para Marketing por Email","og_description":"Quer cativar sua audi\u00eancia com emails projetados de forma impec\u00e1vel? Essas 15 melhores pr\u00e1ticas de design de email podem gerar resultados poderosos \u2014 experimente e veja!","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/design-de-email\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-10-28T14:00:00+00:00","article_modified_time":"2025-05-26T19:22:12+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/1460x1095-BLOG-HERO-Your-Guide-to-Email-Design.jpg","type":"image\/jpeg"}],"author":"Justin Lorenc","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Justin Lorenc","Est. reading time":"22 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/design-de-email\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/design-de-email\/"},"author":{"name":"Justin Lorenc","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/a90bf07c44c60e052befbc7cffb482eb"},"headline":"Seu Guia para Design de Email: 15 Melhores Pr\u00e1ticas para Marketing por Email","datePublished":"2024-10-28T14:00:00+00:00","dateModified":"2025-05-26T19:22:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/design-de-email\/"},"wordCount":4363,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/design-de-email\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/1460x1095-BLOG-HERO-Your-Guide-to-Email-Design.jpg","articleSection":["Marketing"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/design-de-email\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/design-de-email\/","name":"Seu Guia para Design de Email: 15 Melhores Pr\u00e1ticas para Marketing por Email - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/design-de-email\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/design-de-email\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/1460x1095-BLOG-HERO-Your-Guide-to-Email-Design.jpg","datePublished":"2024-10-28T14:00:00+00:00","dateModified":"2025-05-26T19:22:12+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/design-de-email\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pt\/design-de-email\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/design-de-email\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/1460x1095-BLOG-HERO-Your-Guide-to-Email-Design.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/10\/1460x1095-BLOG-HERO-Your-Guide-to-Email-Design.jpg","width":1460,"height":1095},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/design-de-email\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Seu Guia para Design de Email: 15 Melhores Pr\u00e1ticas para Marketing por Email"}]},{"@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\/a90bf07c44c60e052befbc7cffb482eb","name":"Justin Lorenc","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-27-at-10.26.05-AM-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-27-at-10.26.05-AM-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/01\/Screen-Shot-2022-01-27-at-10.26.05-AM-150x150.png","caption":"Justin Lorenc"},"description":"Justin is a Digital Marketing Email Specialist based in Boston, MA. He is responsible for improving the value and success of our email marketing campaigns here at DreamHost. In his free time, he enjoys playing guitar, running, reading, and eating a good meal. Connect with him on LinkedIn.","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/justinlorenc\/"}]}},"lang":"pt","translations":{"pt":56831,"en":50449,"es":50432,"de":52163,"pl":52169,"ru":56841,"uk":56844,"it":68738,"fr":71050,"nl":71086},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/56831","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\/1061"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=56831"}],"version-history":[{"count":3,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/56831\/revisions"}],"predecessor-version":[{"id":59394,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/56831\/revisions\/59394"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/50445"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=56831"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=56831"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=56831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}