20 Most Effective Pop-up Design Examples
For many people, pop-ups are the bane of browsing the Internet. They unabashedly appear on your screen, vexing or scaring you into running as fast and as far away as your mouse will take you. Usually, we turn them off without even looking at what they have to offer. That’s because we automatically associate pop-ups with something bad. We tend to dislike anything standing between us and the content we’re looking for. It’s similar to ads on TV or YouTube – if we could, we would skip them every single time. But the undeniable fact is that pop-ups work, and they work well. Especially when they’re created with care and timed to appear at precisely the right moment.
Almost all brands, no matter how big or small, use pop-ups. The reason they do it is to capture your attention. It’s as simple as that. In most cases, they want to inform you about a special discount or invite you to subscribe to their newsletter. But to prevent you from scurrying away, their pop-ups need to be compelling. The combination of great design and effective copy is a surefire way of ensuring visitors stay on a site, and these brands have excelled at the pop-up game:
The pop-up on A.N Other’s website appears after several scrolls when you’ve already reached the bottom of their homepage. By that time, you’ve already met the brand and seen their products. A pop-up that invites you to leave your email address and get a 10% discount off your first purchase is actually a more-than-welcome intruder. Aesthetically speaking, the pop-up looks clean and elegant, matching the vibe of the site. The copy is on-point, too. It’s short and informative, ensuring the visitors immediately understand how subscribing can benefit them.
Mihan Aromatics™’s pop-up looks like an integral part of their site. The photo featured on it shows one hand gently touching the palm of the other. It is beautifully edited so that it appears dreamlike. It also matches the fullscreen video placed at the top of the page, showing a close-up shot of a girl’s back. The pop-up also contains a succinct invitation to subscribe to the company’s newsletter, written in a refined, sans-serif font.
Red Clay Hot Sauce enriched their pop-up with some witty copy. This is a company that makes hot sauces, hence their “saucy offer” to get a 15% discount off the first order upon signing up for their newsletter. The pop-up is further adorned with an illustration of a hand holding a pepper, which is one of the base-ingredients found in their products. They found a way to create an interesting pop-up by combining elements associated with what they do, which is a nice way of encouraging users to press the “Subscribe” button. Another great thing is that the pop-up does not show up immediately, but only after several scrolls.
Pop-ups don’t necessarily have to be displayed in the middle of the screen. On St. Leo’s site, you will find the pop-up at the bottom of the page. It appears without fanfare, so subtly you may even miss it or mistake it for a sticky footer. The invitation to subscribe to the company’s newsletter is written in an all-caps, black, serif font, placed on a white background. It’s simple, unobtrusive, yet effective.
To ensure people don’t click the “X” button immediately upon seeing the pop-up, brands come up with appealing offers that are hard to say no to. Mysa Skincare’s pop-up invites you to subscribe to their newsletter and save a tempting 15% off the first order. They’ve also placed a photo of one of their products next to the text, creating a gorgeously designed pop-up that you will most likely close only after having entered your email address.
Provider Store creates slow made Japanese homewares. A gentle color palette is widely used throughout the site, and the pop-up is no different. It includes a picture of two bowls in predominantly pastel hues that look very appealing to the eye. There’s also a cute illustration of a shopping bag, positioned just above the text that tells you that you can get a discount for the first purchase if you sign up for their newsletter.
Starface’s pop-up looks too cute to be closed the moment you see it. It’s colored in a candy pink shade that most users will find appealing. The pop-up’s design is essentially simple, containing the brand’s logo, two empty fields where you can enter your email address and phone number, and a disclaimer. But what’s interesting, aside from the color of the background, are the attractive font combinations. The logo is written in large, all-caps letters. The invitation to get in touch with the company is in an outlined font, while the rest of the text is written using a monospace font. What’s also interesting is the mouse cursor, shaped like a literal starface. When you see a mix of all of these elements, it’s hard not to cave in and fill in your details.
Moooi’s pop-up features a recreation of a well-known illustration. The picture, which was created by Alcide Dessalines d’Orbigny and first appeared in the book “Voyage dans l’Amérique méridionale,” is of a specific type of monkey – the white-eared titi a.k.a. the Bolivian gray titi. On Moooi’s site, the monkey is not hugging a branch, as it is in the original. Instead, he’s standing on a bank, holding what looks like a snowball. Aside from floral illustrations, Moooi’s designs often feature monkeys, so it’s not surprising one of them is there to greet you as soon as you visit the site. You can also choose to subscribe as a customer, professional, or a member of the press. Based on your selection, Moooi will send you unique offers.
Top Themes for Creatives
View Collection
Chicolle is a skincare brand with an urban website. Their simple pop-up gives off slightly brutalist vibes. It contains just the offer to get a discount upon signing up for their newsletter. The fonts used for the text are black, large, and bold, and they are beautifully contrasted by a yellow background. The pop-up is placed on the left-hand side of the screen, letting you uninterruptedly enjoy the main content. In fact, if it wasn’t background color, you probably wouldn’t even notice it. This is another wonderful example that proves you don’t have to use an in-your-face pop-up to grab the users’ attention. Sometimes all it takes is a clever combination of typography and colors.
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.
