13 Popup Design Examples: Why They Work and How to Make Your Own

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 and analyze what they're doing well. Finally, we’ll tell you how you can create your own popup that implements those techniques.

Ready to start creating better popups for your website? Let's dive right in.

8 key tips to nail your popup designs

As promised, this first section will go over the theory behind designing effective popups. Beyond the design and content, we'll also delve into some other relevant areas, like when and where to display your popups.

1. Match the popup with 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.

2. Have a clear, enticing CTA

You're probably displaying a popup on your site because you want your visitors to “do something”. That “something” could be joining your email list, checking out a sale, grabbing a coupon, etc.

To drive people towards performing that action, you want to have a single button with a strong call to action (CTA). For example, if you're offering a coupon in exchange for an email subscription, something like “Get a discount” sounds way more enticing than “Subscribe.”

This is exactly what Swedish Linens does with their CTA. Instead of “Sign up” or “Subscribe,” their action button says: “I WANT A DISCOUNT” 👇

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 Aplos uses a contrasting yellow color that draws attention while still matching the rest of the site (you can see how it's the same yellow used in the sticky bar at the top):

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 popup types, though. For example, you can try notification bars or slide-ins. When designed well, they can 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 explaining what type of emails you’re planning to send and how often. Here are some phrases that can be helpful:

• “We won't ever share your email”
• “We'll only send you X emails per week”
• “You can unsubscribe at any time”

Here is an example of a popup with a minimalistic design and embedded microcopy at the bottom:

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 visitors.

On mobile, you'll want to consider a less obtrusive implementation than a full modal popup. Not only can these modal popups be tough for people to interact with on touch devices, but Google also rolled out a penalty on aggressive mobile interstitials back in 2017.

One of the best design practices for mobile popups is to use a sticky “Get X% off” button that opens an email form upon click. That’s exactly what Pilgrim, a European jewelry company does on its website:

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, or even to the visitor’s experience.

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.

For example, you may want to offer a special discount to returning visitors 👇

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.

Most brands choose to display their email opt-in forms after a visitor spends 3 to 5 seconds on their websites.

If you wait until visitors are engaged with your content to ask for their email address, there's a better chance they will be willing to join your list.

Other popup timing options you can experiment with are:

• Exit-intent popups
• Time-delay popups
• Waiting for a certain number of page views
• Etc.

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 design.

Beyond just providing you with popup design inspiration, we'll also dig into why these popup design examples work so well.

1. Urban Kissed

This popup from Urban Kissed is a great example of a form using a contrasting color for the 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 combination of beige and black used for both the popup and the logo. It also uses an opt-out button (“no, thanks”), and dangles a 5% discount as an incentive in exchange for people's email addresses.

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 to first-time visitors who have spent a few seconds exploring their website.

By dangling the incentive, Dip & Doze has a great chance of getting people's email addresses. Because after all, who wouldn't love 10% off something they’re interested in buying?

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 whenever you like”.

3. Scarpetta pasta

This popup design example from Scarpetta pasta is interesting mainly because it uses a GIF instead of a still image. The popup doesn’t just look attractive, it also creates a semi-immersive experience by showing the incentive in action.

4. Kanzen Skincare

Kanzen Skincare uses a fullscreen email popup, but with a twist. Rather than showing it as a “welcome mat” when a visitor arrives, which a lot of people find annoying, this brand triggers it with exit-intent.

This creates a less intrusive experience and gives Kanzen Skincare one more chance to capture exiting visitors. Beyond that, Kanzen uses a big bold call-to-action button saying: “SHOW ME THE MONEY!”. And they’ve also added a unique touch to the headline by making it fun and conversational.

5. Julia Szendrei

Julia Szendrei is an online jewelry store, and this popup design example is worth attention because it isn't trying to capture emails like most of the examples you've seen. Instead, this brand is promoting an early Black Friday sale.

This popup is targeting new and returning store visitors and pops up to invite everyone to visit a secret holiday shop, open for a limited time. They also use a GIF instead of a still image to convey the excitement about the sale.

6. Perk

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.

7. MeUndies

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.

8. DigitalMarketer

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.

10. Uniqlo

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 that action.

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. Turkish Souq

Turkish Souq uses a modal popup triggered at exit-intent to shopping prevent cart abandonment.

The promo will only pop up if a customer adds a product to the cart and starts heading to the exit before completing the purchase. The two buttons suggest going straight to checkout or viewing the cart first.

What’s noteworthy about this offer is that the customer doesn’t need to do anything to take advantage of it – the discount code will be automatically applied to their cart. They also use that eye-catching orange color that matches the website’s branding and grabs visitors' attention.

How to create awesome popup designs like these

You've gotten your dose of popup design inspiration. Now let's finish things out with a look at how you can create your own popups and incorporate the principles of popup design from this post.

Getsitecontrol helps to build website forms you can use to grow your email list, promote discount 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.

Select a template

To get started, create a trial account (which is free) and follow the relevant instructions to install Getsitecontrol on your website. Then log into your account, click the + Create widget button on the main page of the dashboard and select Premade widgets.

Premade widgets are the fastest way to create a popup because they are already set up for common marketing purposes — such as a welcome discount or an exit-intent offer — so you only need to customize the copy and image.

As an alternative to premade widgets, you can use one of the templates from the gallery.

Adjust the copy and design

Once you select a template, you can customize the text and form fields to nail your copy and craft the perfect CTA message:

Visit the Theme section to change the color theme and font to make your popup perfectly match your website's design.

If your template features an image, click on it to change it. Choose an image that better visualizes your offer from the gallery, or upload one from your computer.

Repeat the process for all pages on your popup.

Select targeting settings

When you are satisfied with the CTA and design of the popup, move on to the Targeting tab. From there, you can use targeting and trigger rules to control exactly where and when your popup will appear.

Here is a brief overview of the targeting settings:

• The first section determines the URLs where the popup will appear. The ‘*’ is a wildcard which means the popup appears on all pages of the website by default.
• The second section allows you to define the type of visitors you want to target: first-time visitors, returning visitors, visitors from certain countries, and so on.
• The third section contains a display trigger: exit-intent, time delay, scroll depth, or inactivity.
• The fourth section defines the conditions when the popup should stop appearing for the same visitor.
• The last section allows you to create a schedule for the popup to be displayed.

Feel free to change these settings however you feel is best for your purpose. You’ll find more information on the available targeting options in Getsitecontrol’s complete guide on targeting.

Create a follow-up email

Lastly, if you are using a popup to collect email addresses, you can set up an automated follow-up email your subscribers will receive when they sign up. In the email, you can thank your subscribers for joining your newsletter, deliver a promised incentive, or simply share useful information.

To avoid blank page paralysis, you can use one of the email templates available in the dashboard. Just go to the Follow-up tab and proceed to edit the email:

You can add images, GIFs, coupon boxes, buttons, and even a countdown timer to stylize your email and convey the right message. Before saving it, remember to fill out the subject, sender, and preheader fields on the right, and send the email to yourself first to make sure it looks great.

Save & close your popup and follow the prompts to activate it. That’s it, the popup is now running on your website.

Wrapping up

With Getsitecontrol, creating stylish and functional popups is a straightforward process that requires zero technical knowledge. The best part about it is that you never have to start from scratch, since you can find a suitable template for almost any purpose in the rich template gallery. At the same time, even when you select a template, you have enough editing tools to make your popup design match your website and your marketing goals.

Go ahead, register an account, and try it for yourself!