{"id":67748,"date":"2023-05-19T12:30:50","date_gmt":"2023-05-19T15:30:50","guid":{"rendered":"https:\/\/rockcontent.com\/br\/?p=67748"},"modified":"2025-09-18T15:55:54","modified_gmt":"2025-09-18T18:55:54","slug":"como-criamos-the-beat-newsletter-interativa","status":"publish","type":"post","link":"https:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/","title":{"rendered":"Olhar de designer: como constru\u00edmos (e reconstru\u00edmos) nossa newsletter interativa"},"content":{"rendered":"<p>Como voc\u00ea provavelmente sabe, aqui no blog da <strong>Rock Content<\/strong> buscamos trazer s\u00f3 o que \u00e9 relevante para profissionais de marketing e donos de marca.&nbsp;<\/p>\n<p>E, assim como muitas marcas, <a href=\"https:\/\/interactive.rockcontent.com\/br\/thebeat\" target=\"_blank\" rel=\"noreferrer noopener\">n\u00f3s temos uma newsletter semanal<\/a> para entregar para nossos leitores, direto ao ponto, tudo o que aconteceu durante a semana e como cada tema impacta suas estrat\u00e9gias\u2014contamos com o ponto de vista de nossos especialistas em cada assunto para isso.<\/p>\n<p>O que difere a <strong>The Beat<\/strong> de qualquer outra newsletter de marketing, no entanto, \u00e9 que ela \u00e9 <a href=\"https:\/\/pingback.com\/br\/resources\/newsletter-interativa\/\" target=\"_blank\" rel=\"noreferrer noopener\">completamente interativa<\/a>, constru\u00edda em uma plataforma pr\u00f3pria para isso.&nbsp;<\/p>\n<p>Eu sou designer aqui na <strong>Rock Content<\/strong>, e sou respons\u00e1vel por construir toda semana as edi\u00e7\u00f5es interativas da The Beat (sim, designer. N\u00e3o programadora, nem profissional de TI. Juro que sei pouco de HTML e CSS).<\/p>\n<p>Como eu sei que o conceito de newsletter interativa n\u00e3o \u00e9 t\u00e3o popular e que, talvez, muitos profissionais de marketing se perguntem se \u00e9 poss\u00edvel trazer isso para suas pr\u00f3prias marcas, hoje eu vou contar um pouquinho dos bastidores da produ\u00e7\u00e3o da The Beat: como a ideia surgiu, qual ferramenta usamos, como \u00e9 o processo de produ\u00e7\u00e3o semanal e, de extra, porque atualizamos o projeto em janeiro de 2023.<\/p>\n<p>Vem comigo?<\/p>\n<h2 class=\"wp-block-heading\">Os primeiros rabiscos da nossa newsletter&nbsp;<\/h2>\n<p>A primeira edi\u00e7\u00e3o da The Beat foi lan\u00e7ada em janeiro de 2022. Mas, antes dessa primeira ir ao ar, muita coisa aconteceu.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/image-2.gif\" alt=\"\" class=\"wp-image-67767\"\/><\/figure>\n<\/div>\n<p>O projeto que inspirou a cria\u00e7\u00e3o da The Beat foi o <a href=\"https:\/\/www.nytimes.com\/interactive\/2023\/05\/12\/briefing\/the-weekender.html#card1\"><em>The Weekender<\/em><\/a>, do <em>New York Times<\/em>. \u00c9 um projeto que re\u00fane onze artigos selecionados por editores do Times com not\u00edcias para aproveitar o final de semana.&nbsp;&nbsp;<\/p>\n<p>Ao desenvolver nosso projeto de newsletter, nossos objetivos eram claros:&nbsp;<\/p>\n<ul class=\"wp-block-list\">\n<li>alcan\u00e7ar uma nova audi\u00eancia;<\/li>\n<li>diversificar nossa produ\u00e7\u00e3o de conte\u00fado;<\/li>\n<li>produzir um conte\u00fado rico e estrat\u00e9gico;<\/li>\n<li>usar o Ion em um novo formato;<\/li>\n<li>fazer lan\u00e7amentos semanais.<\/li>\n<\/ul>\n<p>Ah, sim. <strong>Ion <\/strong>\u00e9 a <a href=\"https:\/\/rockcontent.com\/br\/produtos\/ion\/\" target=\"_blank\" rel=\"noreferrer noopener\">plataforma de cria\u00e7\u00e3o de conte\u00fados e p\u00e1ginas interativas<\/a> da <strong>Rock Content<\/strong>, e a ferramenta que utilizamos para construir a The Beat semanalmente. Vou falar mais sobre isso logo menos. Por hora, seguimos com o planejamento inicial da newsletter.<\/p>\n<p><!--HubSpot Call-to-Action Code --><span class=\"hs-cta-wrapper\" id=\"hs-cta-wrapper-3e17b080-8880-480b-8e30-d303567c3088\"><span class=\"hs-cta-node hs-cta-3e17b080-8880-480b-8e30-d303567c3088\" id=\"hs-cta-3e17b080-8880-480b-8e30-d303567c3088\"><!--[if lte IE 8]>\n\n<div id=\"hs-cta-ie-element\"><\/div>\n\n<![endif]--><a href=\"https:\/\/cta-redirect.hubspot.com\/cta\/redirect\/355484\/3e17b080-8880-480b-8e30-d303567c3088\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"hs-cta-img\" id=\"hs-cta-img-3e17b080-8880-480b-8e30-d303567c3088\" style=\"border-width:0px;\" src=\"https:\/\/no-cache.hubspot.com\/cta\/default\/355484\/3e17b080-8880-480b-8e30-d303567c3088.png\"  alt=\"Crie conte\u00fados e experi\u00eancias interativas com Ion! Solicite uma demo \u279c\"\/><\/a><\/span><script charset=\"utf-8\" src=\"https:\/\/js.hscta.net\/cta\/current.js\"><\/script><script type=\"text\/javascript\"> hbspt.cta.load(355484, '3e17b080-8880-480b-8e30-d303567c3088', {\"useNewLoader\":\"true\",\"region\":\"na1\"}); <\/script><\/span><!-- end HubSpot Call-to-Action Code --><\/p>\n<h2 class=\"wp-block-heading\">Hora do briefing ou do ataque de p\u00e2nico?<\/h2>\n<p>Objetivos definidos, projeto desenhado. Era hora de come\u00e7ar a estruturar como gostar\u00edamos que fosse a \u201ccarinha\u201d da nossa newsletter. Para isso, eu (designer respons\u00e1vel) e o time de conte\u00fado fizemos uma reuni\u00e3o de briefing para alinhar quais eram as expectativas para o projeto.<\/p>\n<p><em>Esse aqui \u00e9 normalmente o momento em que as pessoas tem ideias incr\u00edveis e muito malucas, e eu sou obrigada a falar <\/em><strong><em>n\u00e3o<\/em><\/strong><em>!&nbsp;<\/em><\/p>\n<p>&nbsp;Em nossa reuni\u00e3o de briefing, decidimos que o projeto de The Beat deveria ter:<\/p>\n<ul class=\"wp-block-list\">\n<li>Menu fixo na lateral;<\/li>\n<li>Formul\u00e1rio para inscri\u00e7\u00e3o na newsletter;<\/li>\n<li>Espa\u00e7o para o depoimento do editor;&nbsp;<\/li>\n<li>Se\u00e7\u00f5es com layout diferenciado: Jam Session, Entrevistas, Notas da Semana;&nbsp;<\/li>\n<li>Interatividade:&nbsp;\n<ul>\n<li>Quizzes;&nbsp;<\/li>\n<li>Rea\u00e7\u00f5es;<\/li>\n<li>Gr\u00e1ficos Animados;&nbsp;<\/li>\n<li>Momento UAU na \u00faltima dobra;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Como designer, neste momento, minha principal preocupa\u00e7\u00e3o era desenvolver um layout que pudesse ser facilmente atualizado e que atendesse a todos os itens que o time trouxe.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/image.gif\" alt=\"\" class=\"wp-image-67763\"\/><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\">Bora trabalhar! Construindo o layout&nbsp;<\/h2>\n<p>Inicialmente, pensamos em utilizar um dos <a href=\"https:\/\/rockcontent.com\/products\/ion\/quick-starts\/\" target=\"_blank\" rel=\"noreferrer noopener\">templates do Ion<\/a>. Mas, como se tratava de um projeto altamente personalizado, percebi que a melhor op\u00e7\u00e3o era ter um layout pr\u00f3prio.&nbsp;<\/p>\n<h3 class=\"wp-block-heading\">O meu processo<\/h3>\n<p>Para mim, \u00e9 muito mais f\u00e1cil criar e visualizar o layout quando eu desenho ele no meu caderno. Digamos que eu fa\u00e7o mockup de baixa fidelidade.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/rockcontent.com\/wp-content\/uploads\/2023\/05\/rascunho-693x1024.jpeg\" alt=\"\" width=\"347\" height=\"512\"\/><\/figure>\n<\/div>\n<p>Como voc\u00ea pode ver, n\u00e3o \u00e9 nada muito elaborado. Na verdade, \u00e9 um desenho bem simples, mas me ajuda a pensar em como encaixar os diferentes elementos na p\u00e1gina.&nbsp;<\/p>\n<p>Lembra da lista de coisas que decidimos que a The Beat deveria ter? O resultado ficou assim:<\/p>\n<h4 class=\"wp-block-heading\">1. Menu fixo na lateral<\/h4>\n<p>Com toda certeza um dos recursos que deram mais trabalho.&nbsp;<\/p>\n<p>O Ion tem v\u00e1rios recursos que facilitam fixar um elemento na tela. Ent\u00e3o, fragmentei o layout para se adaptar ao que precis\u00e1vamos para a The Beat e, assim, pude usar as ferramentas que o pr\u00f3prio Ion oferece.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/rockcontent.com\/wp-content\/uploads\/2023\/05\/image-30-1024x497.png\" alt=\"\"\/><figcaption><em>No Ion, trabalhamos com um grid de 12 colunas. A solu\u00e7\u00e3o encontrada para ter o menu lateral foi usar 3 colunas para o menu, e, nas outras 9 colunas, construir o conte\u00fado.<\/em><\/figcaption><\/figure>\n<\/div>\n<h4 class=\"wp-block-heading\">2. Formul\u00e1rio<\/h4>\n<p>Aqui n\u00e3o tem muito mist\u00e9rio, a maior parte dos nossos criativos em Ion possuem um formul\u00e1rio. O nosso cuidado foi de ter uma mensagem confirmando que a inscri\u00e7\u00e3o havia sido enviado e criar uma segmenta\u00e7\u00e3o em nosso CRM para inscritos na The Beat.<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/Formulario-min.gif\" alt=\"\" class=\"wp-image-67786\"\/><\/figure>\n<h4 class=\"wp-block-heading\">3. Espa\u00e7o para o depoimento do editor&nbsp;&nbsp;&nbsp;&nbsp;<\/h4>\n<p>Logo ap\u00f3s a introdu\u00e7\u00e3o da edi\u00e7\u00e3o, temos uma \u201ccarta ao leitor\u201d, algumas palavras do co-fundador da <strong>Rock Content<\/strong>, Victor Pe\u00e7anha.<\/p>\n<p>Esse \u00e9 um layout extremamente simples mas, para deix\u00e1-lo um pouco mais atrativo e din\u00e2mico de uma edi\u00e7\u00e3o para outra, personalizamos a foto do Pe\u00e7anha com diferentes cores de fundo, e alternamos elas entre cada edi\u00e7\u00e3o.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/imagens-pecanha.png\" alt=\"\" class=\"wp-image-67777\"\/><\/figure>\n<\/div>\n<h4 class=\"wp-block-heading\">4. Se\u00e7\u00f5es com layout diferenciado<\/h4>\n<p>Quando a The Beat come\u00e7ou, j\u00e1 sab\u00edamos que quer\u00edamos que, ao rolar a p\u00e1gina, o leitor percebesse que o conte\u00fado era variado. E, por isso, decidimos que a melhor op\u00e7\u00e3o era mudar o layout.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/Layouts-the-beat.png\" alt=\"\" class=\"wp-image-67788\"\/><\/figure>\n<\/div>\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n<h4 class=\"wp-block-heading\">5. Interatividade<\/h4>\n<p>Estamos falando do Ion, a ferramenta da <strong>Rock Content<\/strong> que <a href=\"https:\/\/rockcontent.com\/br\/produtos\/ion\/\" target=\"_blank\" rel=\"noreferrer noopener\">facilita a constru\u00e7\u00e3o de experi\u00eancias interativas<\/a>. Ent\u00e3o, \u00e9 claro que n\u00e3o poder\u00edamos deixar de adicionar alguns momentos de interatividade na newsletter.<\/p>\n<p><strong>Reveal<\/strong><\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/Reveal-min.gif\" alt=\"\" class=\"wp-image-67787\"\/><\/figure>\n<p><strong>Quiz<\/strong><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/image-28.png\" alt=\"\" class=\"wp-image-67793\"\/><\/figure>\n<\/div>\n<p><strong>Anima\u00e7\u00f5es<\/strong><\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/grafico-min.gif\" alt=\"\" class=\"wp-image-67790\"\/><\/figure>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/animacao-min-1.gif\" alt=\"\" class=\"wp-image-67792\"\/><\/figure>\n<p><!--HubSpot Call-to-Action Code --><span class=\"hs-cta-wrapper\" id=\"hs-cta-wrapper-3e17b080-8880-480b-8e30-d303567c3088\"><span class=\"hs-cta-node hs-cta-3e17b080-8880-480b-8e30-d303567c3088\" id=\"hs-cta-3e17b080-8880-480b-8e30-d303567c3088\"><!--[if lte IE 8]>\n\n<div id=\"hs-cta-ie-element\"><\/div>\n\n<![endif]--><a href=\"https:\/\/cta-redirect.hubspot.com\/cta\/redirect\/355484\/3e17b080-8880-480b-8e30-d303567c3088\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"hs-cta-img\" id=\"hs-cta-img-3e17b080-8880-480b-8e30-d303567c3088\" style=\"border-width:0px;\" src=\"https:\/\/no-cache.hubspot.com\/cta\/default\/355484\/3e17b080-8880-480b-8e30-d303567c3088.png\"  alt=\"Crie conte\u00fados e experi\u00eancias interativas com Ion! Solicite uma demo \u279c\"\/><\/a><\/span><script charset=\"utf-8\" src=\"https:\/\/js.hscta.net\/cta\/current.js\"><\/script><script type=\"text\/javascript\"> hbspt.cta.load(355484, '3e17b080-8880-480b-8e30-d303567c3088', {\"useNewLoader\":\"true\",\"region\":\"na1\"}); <\/script><\/span><!-- end HubSpot Call-to-Action Code --><\/p>\n<h3 class=\"wp-block-heading\">Mas nem tudo s\u00e3o flores\u2026<\/h3>\n<p>Olhando para tudo o que foi apresentado aqui, parece que deu tudo certo nesta primeira vers\u00e3o da The Beat. Afinal, tudo o que t\u00ednhamos idealizado foi para o ar\u2026&nbsp;<\/p>\n<p>Bom, a gente conseguiu colocar 80% do desejado no ar, sim\u2026. mas, tem os outros 20%.<\/p>\n<h4 class=\"wp-block-heading\">Rea\u00e7\u00f5es<\/h4>\n<p>Dentro da se\u00e7\u00e3o \u201cfrase da semana\u201d, o time de conte\u00fado queria que fosse poss\u00edvel reagir ao conte\u00fado (assim como fazemos no Facebook ou LinkedIn, por exemplo) e que, ap\u00f3s o leitor clicar em sua rea\u00e7\u00e3o, aparecesse um gr\u00e1fico mostrando qual emo\u00e7\u00e3o teve mais intera\u00e7\u00f5es.&nbsp;<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/image-10.png\" alt=\"\" class=\"wp-image-67752\"\/><\/figure>\n<\/div>\n<p>Infelizmente, para a primeira vers\u00e3o da The Beat, n\u00e3o conseguimos colocar isso no ar.&nbsp;<\/p>\n<p>A solu\u00e7\u00e3o para trazer algum elemento de intera\u00e7\u00e3o que envolvesse rea\u00e7\u00f5es foi colocar, sim, emo\u00e7\u00f5es para as pessoas clicarem mas, no lugar do gr\u00e1fico com o n\u00famero de clicks, colocamos um GIF divertido para cada rea\u00e7\u00e3o.&nbsp;<\/p>\n<h4 class=\"wp-block-heading\">Momento UAU na \u00faltima dobra<\/h4>\n<p>Precis\u00e1vamos de algo para marcar que o leitor havia chegado ao final da newsletter.&nbsp;<\/p>\n<p>A solu\u00e7\u00e3o, mais uma vez, veio atrav\u00e9s de GIFs. Criamos, seguindo a identidade visual da <strong>Rock Content<\/strong>, quatro GIFs que s\u00e3o intercalados a cada edi\u00e7\u00e3o na \u00faltima dobra da newsletter.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/gifs_thebeat.gif\" alt=\"\" class=\"wp-image-67778\"\/><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\">O resultado? Uma newsletter interativa de sucesso&nbsp;<\/h2>\n<p>Em 22 de dezembro lan\u00e7amos uma vers\u00e3o de teste, divulgando a The Beat apenas para o time interno da <strong>Rock Content<\/strong>. Colhemos uma s\u00e9rie de feedbacks, fizemos os ajustes necess\u00e1rios e, ent\u00e3o, a primeira vers\u00e3o da The Beat em ingl\u00eas para o p\u00fablico geral foi lan\u00e7ada em janeiro de 2022. A edi\u00e7\u00e3o em portugu\u00eas foi lan\u00e7ada um tempo depois, em mar\u00e7o.&nbsp;<\/p>\n<p>Ao longo do ano, fomos trazendo melhorias gradativas, observando o comportamento dos leitores dentro da p\u00e1gina <a href=\"https:\/\/rockcontent.com\/br\/produtos\/ion\/\" target=\"_blank\" rel=\"noreferrer noopener\">atrav\u00e9s das tags em Ion<\/a> (outro ponto para a <a href=\"https:\/\/interactive.rockcontent.com\/guia-completo-conteudo-interativo\" target=\"_blank\" rel=\"noreferrer noopener\">interatividade<\/a>: conseguimos saber exatamente como as pessoas est\u00e3o se comportando na p\u00e1gina, colher dados atrav\u00e9s dos quizes e, assim, sermos mais assertivos a cada edi\u00e7\u00e3o). Passei, inclusive, o bast\u00e3o de construir a p\u00e1gina semanal para outra designer do time, uma vez que o template estava pronto e facil de replicar.&nbsp;<\/p>\n<p>Neste tempo, a The Beat se consolidou. Sa\u00edmos de menos de 15 mil inscritos somando os p\u00fablicos nativos em portugu\u00eas, ingl\u00eas e espanhol, para uma comunidade de mais de 90 mil profissionais ao redor do mundo que acompanham o que mais importa em marketing, conte\u00fado e vendas semanalmente com a gente.&nbsp;<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/image-9.png\" alt=\"\" class=\"wp-image-67751\"\/><figcaption><em>Um dos coment\u00e1rios bacanas recebidos no lan\u00e7amento da vers\u00e3o brasileira da The Beat<\/em><\/figcaption><\/figure>\n<\/div>\n<p>Em dezembro de 2022, eu voltei a assumir a The Beat. E, passado um ano, era hora de oficialmente revisitar o template base da nossa newsletter e entender o que ainda fazia sentido, e o que poderia ser melhorado.&nbsp;<\/p>\n<h2 class=\"wp-block-heading\">The Beat 2.0<\/h2>\n<p>N\u00f3s publicamos a nova vers\u00e3o da The Beat em janeiro de 2023. Nossos principais objetivos com essa otimiza\u00e7\u00e3o foram melhorar a <a href=\"https:\/\/pingback.com\/br\/resources\/google-mudancas-busca-mobile\/\" target=\"_blank\" rel=\"noreferrer noopener\">experi\u00eancia para mobile<\/a> e ter um template que fosse ainda mais f\u00e1cil de ser atualizado semanalmente.&nbsp;<\/p>\n<p>O que mudou:<\/p>\n<p><strong>A vers\u00e3o mobile foi 100% repensada<\/strong>. Fonte, espa\u00e7amentos, menu\u2026<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/image-17.png\" alt=\"\" class=\"wp-image-67760\"\/><\/figure>\n<p>O layout para desktop tamb\u00e9m foi otimizado. Agora, na maioria dos artigos, trabalhamos com duas colunas.<\/p>\n<p>No menu lateral adicionamos um bot\u00e3o de \u201cinscreva-se\u201d.<\/p>\n<p>Mantivemos as diferentes se\u00e7\u00f5es da newsletter com artigos, entrevistas, podcasts e frase da semana.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/image-21-1024x460.png\" alt=\"\" class=\"wp-image-67779\"\/><\/figure>\n<\/div>\n<p>N\u00f3s tamb\u00e9m padronizamos e otimizamos o uso de tags na The Beat, para melhorar ainda mais nossa leitura e interpreta\u00e7\u00e3o de dados e experi\u00eancia do leitor.&nbsp;<\/p>\n<p>As tags s\u00e3o como n\u00f3s podemos mapear e entender as intera\u00e7\u00f5es em um criativo no Ion. Para voc\u00ea entender melhor, aqui est\u00e1 um exemplo:<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/rockcontent.com\/wp-content\/uploads\/2023\/05\/image-26-1024x553.png\" alt=\"\"\/><\/figure>\n<\/div>\n<ol class=\"wp-block-list\">\n<li>Artigo mais lido<\/li>\n<li>No menu, qual artigo foi o mais clicado<\/li>\n<li>Qual resposta teve mais cliques em uma de nossas enquetes<\/li>\n<\/ol>\n<p>Tamb\u00e9m mudamos a se\u00e7\u00e3o \u201cFrase da Semana\u201d, pois estava muito complicado encontrar fotos em alta qualidade dos autores.&nbsp;<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2023\/05\/quote-antes-e-depois.png\" alt=\"\" class=\"wp-image-67789\"\/><figcaption>Antes\/Depois<\/figcaption><\/figure>\n<\/div>\n<p>E seguimos em melhoria cont\u00ednua.<\/p>\n<p>Crescendo nossa comunidade de profissionais que confiam em nossa newsletter para se manter por dentro do mercado. Trazendo uma experi\u00eancia fora da curva, diferente de qualquer outra newsletter de marketing, de uma forma muito mais simples do que o resultado final faz parecer \u2014 que jamais seria poss\u00edvel sem o Ion.&nbsp;<\/p>\n<p>Eu te convido, caso voc\u00ea ainda n\u00e3o conhe\u00e7a, a passar pela The Beat e experimentar todos os elementos que trouxe aqui (nada como a pr\u00e1tica para tornar tudo mais palp\u00e1vel). <a href=\"https:\/\/interactive.rockcontent.com\/br\/thebeat\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Aqui voc\u00ea consegue acessar a nossa \u00faltima edi\u00e7\u00e3o<\/strong><\/a>. E, claro, caso ainda n\u00e3o seja inscrito, nem preciso dizer que tamb\u00e9m recomendo fortemente que fa\u00e7a isso.<\/p>\n<p>Por fim, se voc\u00ea tamb\u00e9m quer trazer conte\u00fados interativos para a sua audi\u00eancia e, com isso, melhorar a experi\u00eancia do usu\u00e1rio e trazer muito mais resultados para a sua marca, eu tamb\u00e9m sugiro que voc\u00ea <a href=\"https:\/\/rockcontent.com\/br\/produtos\/ion\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>clique aqui para conhecer mais sobre o Ion<\/strong><\/a> e, se quiser, agendar uma demo gratuita da plataforma.\u00a0<\/p>\n<p><!--HubSpot Call-to-Action Code --><span class=\"hs-cta-wrapper\" id=\"hs-cta-wrapper-3e17b080-8880-480b-8e30-d303567c3088\"><span class=\"hs-cta-node hs-cta-3e17b080-8880-480b-8e30-d303567c3088\" id=\"hs-cta-3e17b080-8880-480b-8e30-d303567c3088\"><!--[if lte IE 8]>\n\n<div id=\"hs-cta-ie-element\"><\/div>\n\n<![endif]--><a href=\"https:\/\/cta-redirect.hubspot.com\/cta\/redirect\/355484\/3e17b080-8880-480b-8e30-d303567c3088\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"hs-cta-img\" id=\"hs-cta-img-3e17b080-8880-480b-8e30-d303567c3088\" style=\"border-width:0px;\" src=\"https:\/\/no-cache.hubspot.com\/cta\/default\/355484\/3e17b080-8880-480b-8e30-d303567c3088.png\"  alt=\"Crie conte\u00fados e experi\u00eancias interativas com Ion! Solicite uma demo \u279c\"\/><\/a><\/span><script charset=\"utf-8\" src=\"https:\/\/js.hscta.net\/cta\/current.js\"><\/script><script type=\"text\/javascript\"> hbspt.cta.load(355484, '3e17b080-8880-480b-8e30-d303567c3088', {\"useNewLoader\":\"true\",\"region\":\"na1\"}); <\/script><\/span><!-- end HubSpot Call-to-Action Code --><\/p>\n<p>Se voc\u00ea ainda est\u00e1 na d\u00favida se conte\u00fados interativos realmente funcionam, deixo aqui algumas outras leituras recomendadas para te inspirar:<\/p>\n<p><a href=\"https:\/\/pingback.com\/br\/resources\/case-conversoes-com-ebook-interativo\/\" target=\"_blank\" rel=\"noreferrer noopener\">Como aumentei em 20,7% a Taxa de Convers\u00e3o de um E-book por meio da Interatividade<\/a><\/p>\n<p><a href=\"https:\/\/pingback.com\/br\/resources\/case-de-sucesso-conversoes-ion\/\" target=\"_blank\" rel=\"noreferrer noopener\">Case de sucesso: como consegui 431% mais convers\u00f5es para a Rock Content com a plataforma Ion em dois meses<\/a><\/p>\n<p><a href=\"https:\/\/pingback.com\/br\/resources\/conteudo-interativo-impulsionar-resultados\/\" target=\"_blank\" rel=\"noreferrer noopener\">Dados recentes mostram que conte\u00fados interativos podem impulsionar seus resultados [+ curso gratuito]<\/a><\/p>\n<p><em>E j\u00e1 que estamos falando sobre a The Beat, que tal <a href=\"https:\/\/interactive.rockcontent.com\/br\/thebeat\" target=\"_blank\" rel=\"noreferrer noopener\">se inscrever agora<\/a>? L\u00e1, voc\u00ea encontrar\u00e1 todas as tend\u00eancias que importam no cen\u00e1rio do Marketing Digital. Aproveite!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Como voc\u00ea provavelmente sabe, aqui no blog da Rock Content buscamos trazer s\u00f3 o que \u00e9 relevante para profissionais de marketing e donos de marca.&nbsp; E, assim como muitas marcas, n\u00f3s temos uma newsletter semanal para entregar para nossos leitores, direto ao ponto, tudo o que aconteceu durante a semana e como cada tema impacta [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":67749,"comment_status":"closed","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,24],"tags":[],"class_list":["post-67748","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-everybody-writes","category-noticias"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Olhar de designer: como constru\u00edmos (e reconstru\u00edmos) nossa newsletter interativa<\/title>\n<meta name=\"description\" content=\"Neste artigo explicamos como criamos a The Beat, newsletter interativa da Rock Content, as ferramentas que utilizamos e como atualizamos o projeto em 2022.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Olhar de designer: como constru\u00edmos (e reconstru\u00edmos) nossa newsletter interativa\" \/>\n<meta property=\"og:description\" content=\"Neste artigo explicamos como criamos a The Beat, newsletter interativa da Rock Content, as ferramentas que utilizamos e como atualizamos o projeto em 2022.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/\" \/>\n<meta property=\"og:site_name\" content=\"Pingback\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-19T15:30:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-18T18:55:54+00:00\" \/>\n<meta name=\"author\" content=\"Pingback\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Olhar de designer: como constru\u00edmos (e reconstru\u00edmos) nossa newsletter interativa\" \/>\n<meta name=\"twitter:description\" content=\"Neste artigo explicamos como criamos a The Beat, newsletter interativa da Rock Content, as ferramentas que utilizamos e como atualizamos o projeto em 2022.\" \/>\n<meta name=\"twitter:creator\" content=\"@pingbackoficial\" \/>\n<meta name=\"twitter:site\" content=\"@pingbackoficial\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pingback\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/\",\"url\":\"https:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/\",\"name\":\"Olhar de designer: como constru\u00edmos (e reconstru\u00edmos) nossa newsletter interativa\",\"isPartOf\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2023-05-19T15:30:50+00:00\",\"dateModified\":\"2025-09-18T18:55:54+00:00\",\"author\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66\"},\"description\":\"Neste artigo explicamos como criamos a The Beat, newsletter interativa da Rock Content, as ferramentas que utilizamos e como atualizamos o projeto em 2022.\",\"breadcrumb\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/pingback.com\/br\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Olhar de designer: como constru\u00edmos (e reconstru\u00edmos) nossa newsletter interativa\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#website\",\"url\":\"https:\/\/pingback.com\/br\/resources\/\",\"name\":\"Pingback Blog\",\"description\":\"Marketing for builders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pingback.com\/br\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66\",\"name\":\"Pingback\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"caption\":\"Pingback\"},\"description\":\"Pingback: Marketing for builders.\",\"sameAs\":[\"https:\/\/pingback.com\",\"https:\/\/www.instagram.com\/pingbackoficial\/\",\"https:\/\/www.linkedin.com\/company\/pingbackoficial\/\",\"https:\/\/x.com\/pingbackoficial\",\"https:\/\/www.youtube.com\/@pingbackoficial\"],\"url\":\"https:\/\/pingback.com\/br\/resources\/author\/adm1n\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Olhar de designer: como constru\u00edmos (e reconstru\u00edmos) nossa newsletter interativa","description":"Neste artigo explicamos como criamos a The Beat, newsletter interativa da Rock Content, as ferramentas que utilizamos e como atualizamos o projeto em 2022.","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:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/","og_locale":"pt_BR","og_type":"article","og_title":"Olhar de designer: como constru\u00edmos (e reconstru\u00edmos) nossa newsletter interativa","og_description":"Neste artigo explicamos como criamos a The Beat, newsletter interativa da Rock Content, as ferramentas que utilizamos e como atualizamos o projeto em 2022.","og_url":"https:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/","og_site_name":"Pingback","article_published_time":"2023-05-19T15:30:50+00:00","article_modified_time":"2025-09-18T18:55:54+00:00","author":"Pingback","twitter_card":"summary_large_image","twitter_title":"Olhar de designer: como constru\u00edmos (e reconstru\u00edmos) nossa newsletter interativa","twitter_description":"Neste artigo explicamos como criamos a The Beat, newsletter interativa da Rock Content, as ferramentas que utilizamos e como atualizamos o projeto em 2022.","twitter_creator":"@pingbackoficial","twitter_site":"@pingbackoficial","twitter_misc":{"Escrito por":"Pingback","Est. tempo de leitura":"14 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/","url":"https:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/","name":"Olhar de designer: como constru\u00edmos (e reconstru\u00edmos) nossa newsletter interativa","isPartOf":{"@id":"https:\/\/pingback.com\/br\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/#primaryimage"},"image":{"@id":"https:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/#primaryimage"},"thumbnailUrl":"","datePublished":"2023-05-19T15:30:50+00:00","dateModified":"2025-09-18T18:55:54+00:00","author":{"@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66"},"description":"Neste artigo explicamos como criamos a The Beat, newsletter interativa da Rock Content, as ferramentas que utilizamos e como atualizamos o projeto em 2022.","breadcrumb":{"@id":"https:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/pingback.com\/br\/resources\/como-criamos-the-beat-newsletter-interativa\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/pingback.com\/br\/resources\/"},{"@type":"ListItem","position":2,"name":"Olhar de designer: como constru\u00edmos (e reconstru\u00edmos) nossa newsletter interativa"}]},{"@type":"WebSite","@id":"https:\/\/pingback.com\/br\/resources\/#website","url":"https:\/\/pingback.com\/br\/resources\/","name":"Pingback Blog","description":"Marketing for builders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pingback.com\/br\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66","name":"Pingback","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","caption":"Pingback"},"description":"Pingback: Marketing for builders.","sameAs":["https:\/\/pingback.com","https:\/\/www.instagram.com\/pingbackoficial\/","https:\/\/www.linkedin.com\/company\/pingbackoficial\/","https:\/\/x.com\/pingbackoficial","https:\/\/www.youtube.com\/@pingbackoficial"],"url":"https:\/\/pingback.com\/br\/resources\/author\/adm1n\/"}]}},"_links":{"self":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts\/67748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/comments?post=67748"}],"version-history":[{"count":1,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts\/67748\/revisions"}],"predecessor-version":[{"id":78600,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts\/67748\/revisions\/78600"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/media?parent=67748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/categories?post=67748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/tags?post=67748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}