Popups are a popular strategy to grow email lists, promote offers, and just generally drive people towards performing important actions at your site. Not all popups are created equal, though, and there's a big difference in performance between an optimized popup design and an unoptimized one.
Obviously, you want your popups to be one of the former, and that's what we're focused on helping you achieve in this post.
To help you nail your popup design, we're going to come at the subject from two angles — theory and real popup examples.
That is, we'll start by sharing some key tips for popup design and implementation. Then, we'll share some real popup examples from successful sites, analyze what they're doing well, and tell you how you can create your own popup that implements those techniques.
Ready to start creating better popups at your website? Let's dive in…
8 key tips to nail your popup designs
As promised, this first section will go over some of the important theory behind designing effective popups. Beyond the design and content, we'll also delve into some other relevant areas, like when and where you display your popups.
1. Match the rest of your site
When you design your popup, you want it to feel like it's a part of your site, rather than an intrusion.
The way to achieve that is to match the style, colors, and typography of the rest of your site. That way, when your popup does appear, it will feel like part of the experience, rather than an outside force inserting itself into your site.
2. Have a clear CTA
You're probably displaying a popup on your site because you want your visitors to do “something”. That “something” could be signing up to your email list, checking out a special offer, sharing on social media, etc.
To drive people towards performing that action, you want to have a single button with a strong call to action (CTA). For an email newsletter popup, a common example is “Subscribe”. It's short, simple, and tells visitors exactly what to do (and what's going to happen).
Don't be afraid to get a little bit more creative, though. For example, if you're driving traffic to a sale, something like “Get discount” is more enticing than “Visit sale” because everyone wants a discount, right?
3. Use contrasting colors for your CTA
A compelling CTA isn't just about the text, it's also about grabbing your visitors' attention in other ways. Namely, color.
You want to use a color that contrasts with the rest of your popup to specifically draw visitors' eyeballs right to the button that you want them to click.
For example, look at how Your Guitar Academy uses a contrasting red color that draws attention while still matching the rest of the site (you can see how it's still the same red used in the logo):
4. Experiment with different formats
When you hear the word “popup”, the first thing that comes to mind is probably one of those modal popups that appear and take over your screen until you click a button.
Don't be afraid to experiment with less intrusive methods, though. For example, you can try notification bars or slide-ins to still drive action without requiring a modal interaction.
To see this in action, check out how Designmodo opts to use an unobtrusive slide-in, rather than a modal popup:
5. Use microcopy to allay fears
Microcopy is a small, unobtrusive piece of text near your CTA button that allays the fears some people might have of interacting with your popup. For example, if you have an email lead generation popup, a natural fear that most people will have is “I don't want to get spam emails”.
Using microcopy, you can eliminate those fears by saying something like “We won't ever share your email and we'll only send you X emails per week”. That way, people know exactly what they're getting into.
6. Remember mobile (and treat it differently)
Nowadays, web traffic is split about 50/50 between desktop and mobile visitors. When you're designing popups, though, it's easy to forget about that and just focus on the desktop experience of your popups.
On mobile, you'll want to consider a less obtrusive implementation than a full modal popup. Not only are these modal popups tough for people to interact with on touch devices, but Google also rolled out a penalty on aggressive mobile interstitials back in 2017.
7. Aim for personalization when possible
Personalization is the idea of matching your popup's content to the content on the page on which it displays.
So rather than having one sitewide popup, you might create different popups, each tailored toward a specific part of your site or category of content. While this does require a little more upfront work, it can pay dividends because your visitors are more likely to engage with a personalized offer.
8. Play around with the timing
Finally, while timing isn't a part of popup design from an aesthetic perspective, it's still an important part of creating an effective website popup. Rather than displaying your popup right away, you can experiment with various delays.
For example, that Designmodo popup example above only displays once a visitor has scrolled to a certain depth on the page. Because it waits until visitors are engaged to ask for their email address, there's a better chance that a visitor will be willing to enter their email.
Other options that you can experiment with are:
13 great popup design examples that get results
Now that you know some of the theory, let's dig into some real-world examples of effective popup form design.
Beyond just providing you with popup design inspiration, we'll also dig into why these popup design examples work so well.
1. Your Guitar Academy
We already touched on this example from Your Guitar Academy when talking about using a contrasting color for your CTA button. This popup does several other things well, though, so it's worth investigating in a little more detail.
First, you can see how the entire design matches the looks and colors of the rest of the site, especially the red that's used for both the CTA button and the logo. It also uses microcopy at the bottom to eliminate fears of spam emails, and it dangles a juicy incentive in exchange for people's email addresses (two free eBook guides).
2. Dip & Doze
Dip & Doze uses a creative email popup to grow its email list. At first glance, their popup design seems fairly standard, but there are actually a few interesting things going on here.
Most notably, the targeting and triggering techniques that it employs. Dip & Doze shows this popup on the shopping cart page, so people who see it are already interested in making a purchase.
By dangling this incentive on the cart page, Dip & Doze has a great chance of getting people's email addresses. Because after all, who wouldn't love 10% off something they've already added to their shopping cart?
Beyond that, Dip & Doze makes sure to match the popup to its overall design scheme, and they also use microcopy at the bottom to help combat fears of spam by saying “you can unsubscribe at any time.''
This popup design example from Designmodo is interesting mainly because of how it eschews the traditional modal popup approach. It proves that less aggressive popups — like a slide-in – can still be effective for building your email list.
4. Tim Ferris
Tim Ferris uses a fullscreen welcome mat popup, but with a twist. Rather than showing the welcome mat when a visitor arrives, which a lot of people find annoying, Tim triggers his welcome mat with exit-intent.
This creates a less intrusive experience and gives Tim one more chance to capture exiting visitors.
Beyond that, Tim uses a big bold call-to-action button with a contrasting color. And he also adds the unique touch of the “Sent Directly by Me” microcopy, which assures visitors that they're going to be hearing from Tim, rather than some marketing intern.
KlientBoost is a digital marketing agency, and this popup design example is worth attention because KlientBoost isn't trying to grow its email list like most of the examples you've seen.
Instead, KlientBoost is trying to get more clients, and they do this with a CTA to “Get Your Free Proposal”. They also use interesting illustrations, which is a theme across the entire site and helps the popup feel cohesive.
Perk sells “Tees engineered to keep up”.
To grow their email list, they use an unobtrusive slide-in that offers an intriguing incentive — access to beta products at half their regular price. This one is a great example of how offering a unique incentive can help you drive more signups to your email list.
MeUndies utilizes an interesting technique that we haven't previously discussed — urgency. In addition to offering a 15% off coupon in exchange for visitors' email addresses, MeUndies ups the ante by adding a 30-minute countdown timer.
While this is an aggressive tactic for a popup, urgency is a proven way to increase your conversion rates.
Beyond that unique twist, you can also see how the popup matches the rest of the MeUndies site in terms of style, even going so far as to add the MeUndies logo at the top of the popup.
DigitalMarketer is another good example of using popup design for more than just growing an email list. Instead, they're using their exit-intent popup to drive visitors to create a free DigitalMarketer account.
There are a couple of nice things going on here:
- A strong CTA with a contrasting button. Rather than just saying “Sign Up”, they say “Sign Up For Your Free Account” to drive home the point that it's free.
- Lots of reminders of the value of a membership, with pictures of all the content, as well as hard numbers (30+ templates…).
9. Blue Apron
Like MeUndies, Blue Apron uses urgency on its popup to drive action. However, unlike MeUndies, Blue Apron doesn't show an email opt-in form right away. Instead, they use a negative opt-out approach with two buttons:
- Get $50 off
- Reject $50 off
Obviously, most people would rather get $50 than turn down $50. The orange button color also helps drive people towards the CTA that Blue Apron wants people to click. Once someone clicks the CTA, Blue Apron takes that person straight to the signup page and automatically applies the discount.
This Uniqlo welcome popup is a great popup design example because of its focus on the key incentive that it's offering to visitors — $10 off.
The biggest headline is simple — $10 OFF — and the CTA button reinforces that message with a strong CTA of “Get My $10 Off”. There's nothing too flashy going on, but it's a great example of picking a single CTA and using every element on your popup to drive people to take the action that you want them to take.
11. Packed Party
At first glance, Packed Party's email opt-in might seem like it's breaking one of the rules of good popup design — it has a multi-color heading that would be jarring…in any other context.
However, when you realize that Packed Party sells party supplies and has colorful imagery all over its website, the multi-color headline actually becomes something that keeps the popup's design in line with the rest of the site.
12. Middle Finger Project
There are a couple of interesting things about this popup from the Middle Finger Project.
First, there's the copy on the popup. The personality oozes out of this popup, and the copy is a perfect match with the rest of the site.
Beyond that, it also uses a strong CTA that reinforces the “free” aspect of the offer. It's also interesting because of the format, opting for a notification bar-style popup rather than a traditional modal popup.
13. Convince & Convert
Like Tim Ferris, Convince & Convert uses a full welcome mat popup, but triggered with exit-intent instead of right when a visitor enters.
The CTA button is interesting here. Rather than making the negative opt-out the same size like many other websites do, Convince & Convert makes the CTA button slightly larger than the opt-out button. They also use that eye-catching orange button to grab visitors' attention, and a strong first-person CTA text to drive visitors to action.
How to create awesome popup designs like these
Now that you've gotten your dose of popup design inspiration, let's finish things out with a look at how you can create your own popups that incorporate the principles of popup design from this post.
Getsitecontrol helps to build website forms you can use to grow your email list, promote offers, survey visitors, and a lot more. With it, you'll be able to design the types of popups you saw above using a simple, code-free interface.
You'll be able to choose from a variety of templates and placements, including traditional modal popups and slide-ins:
Using simple interface controls, you'll be able to change colors, images, fonts, and more to make your popup perfectly match with your website's design.
You can customize all of the text and form fields to nail your copy and craft the perfect CTA message.
And then you can use targeting and trigger rules to control exactly where and when your popups appear, including the ability to set up that unique exit-intent trigger that so many of the popup examples above made use of: