Encontramos os 12 melhores designs de pop-up que você pode copiar hoje
Publicados: 2022-04-06Os pop-ups são uma maneira infalível de aumentar sua lista de e-mail e aumentar suas taxas de conversão de comércio eletrônico. Vimos as principais marcas de comércio eletrônico usarem pop-ups para melhorar suas taxas de conversão em até 37% e diminuir a taxa de abandono de carrinho em pelo menos 20% .
Histórias de sucesso como essas contam com pop-ups lindamente projetados que visam um público altamente específico. Em um artigo anterior , discutimos os segmentos de usuários que toda loja de comércio eletrônico deve segmentar com pop-ups. Hoje, vamos nos concentrar no segundo fator: design pop-up.
Reunimos 12 exemplos impressionantes de pop-up como inspiração para ajudá-lo a criar seu próprio design de pop-up.
Vamos começar!
12 exemplos de design pop-up de alta conversão
Todos esses 12 exemplos do mundo real de designs pop-up foram criados usando o OptiMonk. Isso significa que você pode copiar facilmente todos os seus elementos de design usando nossos vários modelos diferentes e nosso editor de arrastar e soltar.
1. Beije meu Keto
Este pop-up de boas-vindas inicia o processo de construção de um relacionamento duradouro com os clientes, conhecendo-os melhor.
A pergunta simples e a cópia do botão igualmente simples incentivam os visitantes a se envolverem com o pop-up (sem mencionar a promessa de um código promocional de 10% de desconto).
Kiss My Keto também usou uma imagem de alta qualidade que exibe seu produto e reforça sua identidade de marca divertida e despreocupada.
2. Christopher Cloos
Christopher Cloos é uma marca com raízes escandinavas, e seu design pop-up segue a típica estética escandinava: elegante, com linhas retas e fontes simplistas. Este é um ótimo exemplo de um design pop-up sólido que reforça o estilo da marca.
Outro aspecto importante do design do pop-up é o cronômetro de contagem regressiva, que chama a atenção dos visitantes e aumenta o senso de urgência para que eles tenham maior probabilidade de usar seu código de desconto.
E finalmente, no que está se tornando um tema, a equipe de design Christopher Cloos escolheu uma imagem que representa perfeitamente o “sentimento” de seus óculos de sol.
3. Óbvio
Nem todos os pop-ups precisam de imagens para capturar a atenção dos clientes. Às vezes, a cópia de um pop-up pode ser forte o suficiente por conta própria.
Isso é especialmente verdadeiro quando o pop-up usa cores fortes que chamam a atenção, como a combinação de rosa quente e preto abaixo. Observe como o Obvi reforça sua mensagem com emojis, o que torna o design pop-up mais jovem.
Para facilitar ainda mais a absorção da mensagem do pop-up, o círculo no canto superior esquerdo resume a oferta.
4. BlendJet
Este exemplo ilustra a importância de garantir que seu pop-up corresponda ao design do seu site. Há uma harmonia na escolha das cores que parece muito agradável aos olhos.
Os únicos contrastes na paleta de cores vêm das imagens que ilustram a oferta (o que os clientes receberão de graça). Os produtos saem da página, e esse é exatamente o objetivo.
5. O Oodie
Há vários pontos a serem destacados sobre este ótimo exemplo de design pop-up do The Oodie.
Primeiro, a maneira como a imagem se funde com o pop-up é visualmente impressionante e suporta a cópia: “Você gostaria de um abraço?”
A escolha do vermelho vivo para o popup, em contraste com o rosa mais suave do moletom, é exemplar. Um botão de call-to-action azul se destaca e garante que os visitantes não ignorem o CTA atraente: “Reveal My Code”.
Finalmente, a cópia maior e mais proeminente é “E $ 25 de desconto”, que é uma forma de chamar a atenção para a mensagem principal do pop-up.
6. The Curmeric Co.
The Turmeric Co. usa um elemento de design de círculo proeminente para destacar sua oferta.
Esse design pop-up é simples, com espaço em branco suficiente para evitar sobrecarregar os visitantes do site e ainda incorporar um cronômetro de contagem regressiva e um botão de chamada para ação descritivo.
A pequena imagem não apenas mostra o produto, mas também captura a imagem ativa e saudável da marca.
7. Nuvem de Coco
Coconut Cloud coloca todo o foco em seus produtos. E isso faz sentido… eles parecem deliciosos!
Este design pop-up foi desenvolvido em apoio a um sorteio de Halloween. Ao mostrar aos visitantes tudo o que eles podem ganhar, o Coconut Cloud os atrai e os incentiva a participar.
Finalmente, este pop-up inclui um prazo. Assim como um cronômetro de contagem regressiva, um prazo firme cria um senso de urgência.
8. Os STEMKids
A cópia inteligente neste exemplo de design pop-up TheSTEMKids realmente rouba o show.
O conteúdo do pop-up começa com um rasurado do número “$10,00”. Quando combinado com o “Nada para envio” em negrito, torna o valor exato da oferta óbvio para todos os visitantes do site.
9. Bibado
Como muitos outros exemplos de design pop-up nesta lista, o Bibado usou uma cor contrastante para o botão de chamada para ação. O sucesso de uma impressão é determinado pelo fato de um cliente clicar no botão CTA, por isso faz sentido destacá-la.
Também adoramos a maneira como o Bidabo destacou a oferta em seu próprio retângulo inicial.
10. Qure
O design pop-up do Qure é um bom exemplo de como fazer duas ofertas ao mesmo tempo.
O título principal (5% de desconto) é destacado com texto grande, mas a oferta extra recebe sua própria caixa para ênfase. Há uma pequena imagem que mostra o presente gratuito que você receberá.
A imagem maior faz um ótimo trabalho ao estabelecer continuidade com a nova marca futurista de Qure.
11. Sim, por favor, saúde
É importante lembrar que são os humanos que estarão olhando seus pop-ups. Isso significa que as emoções são sempre uma consideração importante ao projetar pop-ups.
A Yes Please Health ajuda seus clientes a se empolgarem com a oferta com uma imagem colorida de uma pessoa sorrindo e mostrando o produto.
Eles misturam essa imagem com o fundo do pop-up, fazendo com que pareça muito bem amarrado.
Finalmente, eles usam uma cópia divertida e lúdica para atrair o cliente.
12. Flips de Fuller
Fuller's Flips usa imagens com grande efeito neste pop-up. Ao mostrar uma imagem de antes e depois, eles estão mostrando claramente o valor que seu serviço oferece.
O uso do emoji âncora também é um toque agradável, combinando bem com a promessa de trazer a você um “estilo costeiro de Hamptons”.
Recapitular
O design pop-up não é uma ciência exata. Como esses exemplos de pop-up mostraram, há muitas abordagens diferentes que você pode adotar.
Sua própria abordagem deve ser consistente com a personalidade da sua marca, o design do seu site e a mensagem que você está tentando transmitir. Você certamente encontrará um modelo que marcará todas as três caixas na biblioteca de modelos de mais de 300 modelos do OptiMonk !
Para saber mais sobre como criar pop-ups de alta conversão, confira nosso Guia definitivo de pop-ups.