Para muitas pessoas, os pop-ups são a ruína de navegar na Internet. Eles aparecem descaradamente na tela, irritando ou assustando você para que corra o mais rápido e tão longe quanto o seu mouse possa levá-lo. Normalmente, nós os desligamos sem sequer olhar para o que eles têm a oferecer. Isso porque associamos automaticamente os pop-ups a algo ruim. Tendemos a não gostar de qualquer coisa que se interponha entre nós e o conteúdo que procuramos. É semelhante aos anúncios na TV ou no YouTube-se pudéssemos, iríamos ignorá-los todas as vezes. Mas o fato inegável é que os pop-ups funcionam, e funcionam bem. Especialmente quando eles são criados com cuidado e programados para aparecer precisamente no momento certo.
Quase todas as marcas, não importa quão grandes ou pequenas, usam pop-ups. Eles fazem isso para chamar sua atenção. É simples assim. Na maioria dos casos, eles desejam informá-lo sobre um desconto especial ou convidá-lo a assinar seu boletim informativo. Mas, para evitar que você saia correndo, seus pop-ups precisam ser atraentes. A combinação de excelente design e cópia eficaz é uma maneira infalível de garantir que os visitantes permaneçam em um site, e essas marcas se destacaram no jogo pop-up:
O pop-up no site de AN Other aparece após vários rola quando você já atingiu a parte inferior da página inicial. Nessa época, você já conheceu a marca e viu seus produtos. Um pop-up que o convida a deixar seu endereço de e-mail e obter um desconto de 10% em sua primeira compra é, na verdade, um intruso mais do que bem-vindo. Esteticamente falando, o pop-up parece limpo e elegante, combinando com a vibração do site . A cópia também está correta. É curto e informativo, garantindo que os visitantes entendam imediatamente como a assinatura pode beneficiá-los.
Mihan Aromatics 
o pop-up parece uma parte integrante do site . A foto mostra uma mão tocando suavemente a palma da outra. É lindamente editado de forma que parece onírico . Também corresponde ao vídeo em tela cheia colocado no topo da página, mostrando um close-up das costas de uma garota. O pop-up também contém um convite sucinto para assinar o boletim informativo da empresa, escrito em uma fonte refinada e sem serifa.
Molho quente Red Clay enriqueceu seu pop-up com algumas cópias espirituosas . Esta é uma empresa que fabrica molhos picantes, daí a sua “ oferta picante ” para obter um desconto de 15% na primeira encomenda ao subscrever a sua newsletter. O pop-up é ainda adornado com uma ilustração de uma mão segurando uma pimenta , que é um dos ingredientes básicos encontrados em seus produtos. Eles encontraram uma maneira de criar um pop-up interessante combinando elementos associados ao que eles fazem, o que é uma boa maneira de encorajar os usuários a clicar no botão “Inscrever-se”. Outra coisa boa é que o pop-up não aparece imediatamente, mas apenas depois de várias rolagens.
Os pop-ups não precisam necessariamente ser exibidos no meio da tela. Em St. Site do Leo , você encontrará o pop-up na parte inferior da página . Ele aparece sem alarde, então sutilmente você pode até perdê-lo ou confundi-lo com um rodapé pegajoso. O convite para assinar o boletim informativo da empresa é escrito em letras maiúsculas, preto e serifado, colocado sobre um fundo branco. É simples, discreto, mas eficaz.
Para garantir que as pessoas não cliquem no botão “X” imediatamente ao ver o pop-up, as marcas apresentam ofertas atraentes às quais é difícil dizer não . O pop-up de Mysa Skincare convida você a assinar o boletim informativo e economizar tentadores 15% fora da primeira ordem. Eles também colocaram uma foto de um de seus produtos ao lado do texto, criando um pop-up com um design maravilhoso que provavelmente você só fechará depois de inserir seu endereço de e-mail.
Provider Store cria utensílios domésticos japoneses de fabricação lenta. Uma paleta de cores suaves é amplamente utilizada em todo o site, e o pop-up não é diferente. Inclui uma imagem de duas taças em predominantemente tons pastel que parecem muito atraentes à vista . Há também uma ilustração fofa de uma sacola de compras, posicionada logo acima do texto, que informa que você pode obter um desconto na primeira compra se assinar o boletim informativo deles.
Starface parece muito fofo para ser fechado no momento em que você o vê. Ele é colorido em um tom rosa doce que a maioria dos usuários achará atraente. O design do pop-up é essencialmente simples, contendo o logotipo da marca, dois campos vazios onde você pode inserir seu endereço de e-mail e número de telefone e um aviso de isenção de responsabilidade. Mas o que é interessante, além da cor de fundo, são as combinações de fontes atraentes . O logotipo é escrito em letras maiúsculas grandes. O convite para contato com a empresa é em fonte contornada, enquanto o restante do texto é escrito em fonte monoespaçada. O que também é interessante é o cursor do mouse, em forma de estrela literal . Quando você vê uma mistura de todos esses elementos, é difícil não ceder e preencher seus detalhes.
Moooi apresenta uma recriação de um poço ilustração conhecida . A imagem, que foi criada por Alcide Dessalines d’Orbigny e apareceu pela primeira vez no livro”Voyage dans l’Amérique méridionale”, é de um tipo específico de macaco-o titi de orelhas brancas a.k.a. o titi cinza boliviano. No site do Moooi, o macaco não está abraçando um galho, como está no original. Em vez disso, ele está em um banco, segurando o que parece uma bola de neve. Além das ilustrações florais , os designs de Moooi costumam apresentar macacos, então não é surpreendente que um deles seja lá para cumprimentá-lo assim que você visitar o site. Você também pode optar por se inscrever como cliente, profissional ou membro da imprensa. Com base na sua seleção, Moooi enviará a você ofertas exclusivas.
Temas principais para criativos
Manon
Portfólio e tema da agência
UltraViolette
Portfólio de design Tema
Cinerama
Um tema para estúdios de cinema e cineastas
Chicolle é uma marca de cuidados com a pele com um site urbano. O pop-up simples emite vibrações ligeiramente brutalistas . Ele contém apenas a oferta para obter um desconto na assinatura do boletim informativo. As fontes usadas para o texto são pretas, grandes e em negrito e têm um belo contraste com um fundo amarelo. O pop-up é colocado no lado esquerdo da tela , permitindo que você aproveite o conteúdo principal sem interrupções. Na verdade, se não fosse a cor de fundo, você provavelmente nem perceberia. Este é outro exemplo maravilhoso que prova que você não precisa usar um pop-up na cara para chamar a atenção dos usuários. Às vezes, basta uma combinação inteligente de tipografia e cores .
On Monoware’s site, the pop-up subtly appears on the screen on the left side of the page. Once you discover what the company does and see the striking imagery on their site, only then does the “Keep in touch” pop-up emerge. It’s clean and minimal, written using the same fonts as on the rest of the site. Its simple design makes it blend in well with the rest of the content, while its position ensures it does not annoy users.
Dims. have opted for a simple, yet interesting pop-up design. The pop-up emerges on the right side of the screen, and again, it does not disrupt the aesthetic cohesiveness of the site. As for the text in the pop-up, the simple syntagma “nice emails” makes all the difference. Along with some other cool words, such as “tidbits”, it makes their suggestion to subscribe sound warm and friendly.
Marco Ice Cream’s pop-up combines dark, large typography, monospace fonts, and a contrasting pastel yellow background. This symbiosis is highly effective, so much so that it’s almost impossible for anyone to close the pop-up before reading what the text says first. And it tells you that you can get a discount if you sign up. The cursor is also interesting – it’s quite big, and it looks like a hand-drawn arrow.
Gantri invites you to join their email list with a beautifully designed pop-up. It is divided into two parts – the left side features a photo of one of Gentri’s lamps, while the right includes inciting copy and a space to enter your email address. The colors on the image are calming and the text is concise, resulting in a pop-up that is very pleasing to the eye.
Not-Another-Bill’s pop-up is divided into several sections, each colored in a different hue. Blocks of soft pink, navy blue, dark green, and beige wonderfully complement each other. They also work great as a background for the contrasting white text and fields where you can enter your details to sign up for their newsletter.
The pop-up on Maisonette’s site emerges after several scrolls. It’s shaped like a large, blue circle that takes up a significant portion of the screen. At the top of the pop-up, there is a cute photo of a boy holding an envelope, inviting you to become “Email Buddies” with the brand. Maisonette makes clothes for children, so such visuals and copy make perfect sense. They also inform you about the discount you can get off your first order and what kind of content they will send to you if you decide to sign up for the newsletter.
Living Edge is an Australian furniture retailer. Their website is filled with gorgeous images of their products, and one such photo is added to the pop-up. The image shows two figurines greeting each other, with raised arms and painted smiley faces. It’s fun to look at and the pop-up itself is not obtrusive (it’s displayed in the bottom left corner of the screen). You can also choose between two options – “home” and “professional”, where the latter refers to architects and interior designers. Depending on your choice, you will receive newsletters tailored to your needs.
This is an example of a pop-up that grabs your attention because of its bold color. Salt Surf have opted for a medium light shade of blue that is impossible to miss. The black and white text looks beautiful on such a background. The concoction of all these elements results in a contemporary-looking pop-up that is bold but not overwhelmingly so.
Another Tomorrow is a sustainable fashion brand. Their pop-up includes a picture of a model wearing one of their creations. The colors are soft, delicate, easy on the eye. The copy content is particularly effective. If you subscribe, the brand promises to get you a 50% discount off your first purchase and allows you early access to pre-sale.
The pop-up on the Name of Love’s website is not subtle at all. It stretches almost over the entire screen, addressing you with “Hey, Girl”. This is a brand that makes dresses for bridesmaids. They’re all about women and love, hence the greeting. The pop-up background is colored in a soft red-ish color, which is omnipresent on their site and is also used on the brand’s favicon.
Ji Oh’s pop-up overlay includes a dreamy, black-and-white background picture of a girl wearing one of the brand’s outfits. The aesthetic of the image matches that of their homepage, which also includes black-and-white visuals. The text inserted on the pop-up is short and simple, written in white, refined letters that perfectly complement the featured picture.
Conclusion
As the examples from our roundup demonstrate, it’s essential to give your pop-ups character and make them compelling. Design them so they match the aesthetic of your site and brand and ensure your main message is front and center. In that case, users won’t be so quick to close them.
Use images that depict what you do and showcase your products, and combine them with text that explains how people can benefit from pressing that call-to-action button. Keep your copy short and straight-to-the-point. You can also lure people in with attractive color combinations or just one bold color.
If you’re scared that your users might run away if a pop-up appears the instant your site loads, go for scroll-triggered pop-ups. You can even place them on either side of the screen, to not disrupt the visitor’s browsing experience.
