Choosing the Best Pop-Up Design for Your Goals

If you’re ready to grow your email list then a pop-up on your website is a must-have. Getting started

designing a pop-up may be a bit daunting, though. There are so many things to cover: Do you include an incentive? What design do you choose?

Allow me to help! I’ve picked out a few pop-up designs that I love and hope that my thoughts will help you choose the best pop-up design for your goals.

Keep it light and airy


This traditional lightbox-style pop-up is very simple and clean while still maintaining the look and feel of the brand. Using CSS transitions, it slides onto the homepage about three seconds after you’ve arrived. Using the angled photo, this pop-up adds visual interest while drawing a literal line down to the widest (and most important) part of the form: the email input box. This subtle but effective direction to the input plus the free shipping note in light blue really makes me want to enter my email and click that “send” button. 

Tip: If your website content is more central to the browser window, this design is a great option for you.



Be big and bold

Another sibling in the pop-up family is the full-screen. In order to really grab your user’s attention, these pop-ups completely hide the website behind them. While designing these, it’s important to maintain the look and feel of your brand just in case your customer forgets what website they’re on (hey, it happens!). This one in particular does this perfectly. The background color is the brand’s gorgeous green, and they even took it a step further and included the logo at the top of the form. This way the user always knows what site they’re on.

Another element I like about this pop-up is the offer used to entice the customer to sign up. Not only is the offer large and distinct in the headline, but it’s also reiterated in the call-to-action button. Another bonus element I enjoyed: the pretty cool JavaScript counter directly under the button! I don’t see those too often in pop-ups so that really stood out.

Tip: If your website content is stretched across the whole screen, this design would fit seamlessly.


Try clean and subtle


Here we have the simplest pop-up of the bunch: the banner. These are great because they aren’t in your face or pushy; they’re simply there for you whenever you decide you’d like to subscribe. This means a first-time visitor to your website is given the chance to browse around and then make the decision if your brand interests them to sign up for your newsletters.

These pop-ups don’t usually have imagery and since they’re so small, the copy is kept to a bare minimum. In this example in particular, the black background really made this stand out on an otherwise very colorful website. This example does include a close button, but also adds a clever “don’t miss out!” headline right in front of it to play into all your FOMO fears. 

Tip: Looking for a softer, subtler sell? This pop-up is perfect for you!

Which pop-up design speaks to you? Let us know in the comments!



Elsie Compton
Graphic Designer

Build your free WordPress website with Host2.us free hosting today!

About the Author

Leave a Reply