Pop-Up Design: Catch It While It’s Hot

popup designpopup example

Using email subscription forms is one of the most effective ways to get more subscribers. In this article, we’ll focus on pop-up email subscription forms; in particular, we’ll explain how to enhance your pop-up design and show some great pop-up examples for your inspiration.

The role of pop-up forms in email marketing

Pop-ups are the forms which appear in the foreground of website content and encourage users to sign up for receiving emails. They usually consist of a title, a short description, a field to fill in your email address, name, and other details, and a CTA button.

Very often pop-ups offer a lead magnet such as a discount, a free ebook, a webinar recording, an event ticket, and other freebies. For example, in one of their pop-ups, Kate Spade offers a 15% discount to all new email subscribers.

pop-up form example
Pop-up example from KateSpade website

But how can pop-ups bring leads if many of us consider them annoying? There’s a simple scientific explanation for that.

Martin Lindstrom, a writer as well as an advertisement and branding expert, shared some interesting results of a large 3-years neuromarketing study in his book “Buyology: Truth and Lies About Why We Buy.” To summarize, he proved that 90% of people’s buying behavior is unconscious, and a lot of actions users do conflict with what they claim to believe in. So, in spite of controversial opinions about pop-ups, they still work: we may claim to be annoyed by pop-ups, but we still react to them and keep signing up.

Now let’s take a look at the pop-ups in action. Sumo analyzed almost two billion pop-ups in two years and found out which elements make them a valuable contributor to the overall email marketing results.

In this experiment, the average pop-up conversion rate was 3.09%. The top 10% highest-performing pop-ups had an average conversion rate of 9.28%, some of them reaching up to 50.2%.

Sumo noticed the following trends in pop-up conversion rates:

  1. Pop-ups placed at a proper context reached over 40% conversion rates. By proper context we mean that the topic of a pop-up matches the topic of a website page it appears on.
  2. Timing of pop-ups, which fully depends on the context, brought 38.4% conversion rates thanks to a 15 seconds delay on an ebook page. Tools like Google Analytics help to resolve the mystery behind the most suitable timing in each individual case.
  3. By considering context and timing, creating a CTA which matched the context, trying to be clear and bringing value, Sumo managed to reach a 60% conversion rate.

As you can see, if you dive deeper into each individual aspect of a pop-up form and test details one by one, you can significantly improve conversions.

Pop-up design tips and tricks

Design is an aspect that shouldn’t be overlooked when it comes to driving conversions and attracting more leads. According to the “Buyology” book mentioned above, consumers usually spend 2 seconds at the most to make a buying decision. The first thing people see is design elements and colors, and only then they start reading the content. So, you literally have only a couple of seconds to grab attention, explain your point, and encourage a user to leave their email address in your form.

Let’s go ahead and look into the details of some good looking pop-up examples to find out which pop-up design strategies you may use for your own subscription forms.

Make your pop-ups in line with corporate guidelines

First and foremost, all your design assets used in any type of media — be it a website, email, or social media — should match the corporate guidelines of your company as altogether, these assets form an impression about you as a brand. That is why it’s important to stick to your corporate colors, fonts, shapes, and other design elements.

Take a look at the Whole Whale About Us page. You can see that the color palette is made out of white and grey shades complemented with light and dark blue shades. There’s a lot of negative space, a sans serif font being used across the website.

about is page design
Whole Whale About Us page

Now look at their pop-up design, which matches their website design perfectly well as there are the same colors and fonts applied in the form. What is more, an emotional photo is used to drag more attention to the pop-up. The left text part and the right picture part are fully symmetrical.

pop-up example
Example of pop-up design on Whole Whale website

Whole Whale offers three different products useful for non-profit organizations, one of them being Lighthouse, which is made to increase the effectiveness of donation pages. Notice how the pop-up design of this product also matches their corporate design guidelines, making a stronger impact overall.

pop-up design
Whole Whale Lighthouse pop-up example

Your pop-up design doesn’t have to be as neutral as the one Whole Whale use. Feel free to add it a little more character, especially if you have a personal blog or a website.

For instance, Wait But Why website is very different from the one Whole Whale own. It’s fun and bright and has lots of sketch-like illustrations.

website design example
Wait But Why website main page

Their pop-up is no exception — it’s also fun and personal. Joking about the annoying nature of pop-ups, the company only encourages users to sign up.

pop-up form example
Pop-up example on Wait But Why website

Put the theories of visual perception into practice

There are several established visual perception theories which have been used in design for ages till these days. We’ll talk about the Golden Ratio rule and the Gestalt theory, two of the most significant design theories.

The Golden Ratio rule

The Golden Ratio is approximately a 1:1.61 ratio that is found in nature and is used to create visually balanced images, highlighting certain parts of a picture.

golden ratio principle
Visual representation of the Golden Ratio principle

How can you use this in practice? For example, these proportions can help you divide an image into balanced sections, put the accent on the most significant elements of your design, or simply crop pictures in the most visually appealing way.

The picture below was cropped using the Golden Ratio principle. Notice how the most important part of the picture, a mobile phone, is placed — at the center of the spiral, where the human’s eye is drawn to naturally.

golden ratio principle inb action
Using Golden Ratio to crop photos

When you work on pop-up design, you can place CTA buttons at the center of the spiral, the image being located at the beginning of the spiral, which takes up its largest part. Here’s how a basic layout of your pop-up could look like in this case:

golden ratio principle for pop-up design
Golden Ratio used for creating a pop-up design layout

Gestalt theory

Gestalt means “unified whole” and makes the essence of the entire theory, which explains how humans perceive objects based on its placement in two-dimensional space.

There are 6 common principles of Gestalt:

  1. Similarity. Similar objects are perceived as a pattern or a group.
  2. Continuation. Objects placed on a single path are perceived as a group, and a human’s eye is guided by these visual lines.
  3. Closure. If an object is lacking in some parts, we still perceive it as a whole. Just think of the WWF logo with panda and you will understand that principle.
  4. Proximity. Objects that are placed close to each other are perceived as a group.
  5. Figure/ground. People separate elements from the background, so the larger of them will be perceived as the ground, while the smaller one as an object, or figure. This principle is often used in Escher’s works.
  6. Symmetry and order. People feel safer and calmer when they see symmetrical designs.

You don’t have to learn all these principles by heart. However, some basic knowledge of them will help you understand why asymmetrical designs may look more dynamic, and symmetrical designs more stable and safer, as well as why user’s attention will be dragged to the largest or brightest objects that stand out from the rest.

For instance, let’s look at the pop-up design example by SheSimplyShops. The company offers users to spin the wheel to get a chance to win a discount. The pop-up appears on the left side of the screen and is asymmetric: the left part seems ‘heavier’ than the right one. The wheel takes the entire left part of the pop-up, while the text and the CTA button are placed on the right surrounded by negative space. All of that creates a dynamic and energetic mood around the pop-up.

pop-up design example
Pop-up design on SheSimplyShops website

By contrast, the pop-up form by Leia is fully symmetrical and thus looks a lot calmer than the previous example. All elements are centered,visually leading to a single point — the CTA button.

pop-up form example
Example of pop-up design by Leia website

Take care of readability

If you want your pop-ups to convey the right message, they should be easy to comprehend. And when it comes to readability, your ability to work with the text and typography are crucial.

Establish a visual hierarchy, where elements such as headlines, descriptions, and buttons are separated visually — by using complementary fonts, different sizes and weights, as well as spacing. The leading, a space between the lines, and the kerning, a space between the letters, should guide the reader through your form. The most important bits of information should always be the most prominent.

To create a greater contrast, you can mix different weights of a single font as well as serifs and sans serifs. However, try to stick to no more than two fonts, so that the form won’t look messy.

A pop-up form on the Tim Ferris blog is a great example of good typography. You can clearly see the difference between the logotype, title, subtitle, author’s name, and two buttons, the more prominent of them being the desired CTA.

pop-up prominent cta
Tim Ferris blog pop-up design

The title drags the most attention thanks to the contrast between the background and the text. After that, your eye moves directly to the CTA button. Then, you move back up to read the details — the subtitle and the author’s name.

Social Triggers, in their turn, offer a lighter pop-up form based on bold typography. First, you see the intriguing title in the form of a question, your eyes immediately moving to the bight CTA button. The description is separated visually with a divider and is written in a smaller sized font.

pop-up cta example
Social Triggers pop-up design

Be conscious of your color choices

A color is a strong tool which can be used to entirely change the mood of your pop-up forms. Pastel shades will bring more of a romantic and light-hearted mood, while loud and vibrant colors could make your pop-up more extravagant.

To choose the colors that combine well together, use tools like Adobe Color. It’s free and allows you to create unique color palettes from scratch, extract them from images, or just explore colors and trends to find inspiration.

An example of a Tommy Hilfiger’s pop-up showcases a great contrast between red, blue, and white. The title is written in bold capital letters, its most important part being highlighted with red. Right away your attention is dragged from the title to the sign-up button.

pop-up color choice example
Tommy Hilfiger pop-up design

If you find minimalistic design choices more appealing, you may use a single primary color for the background and a secondary color for the text and other elements.

For example, the Horizn Studios aren’t afraid of introducing a totally black form as they use white text and buttons to contrast the monochromatic background. Such contrast as well as the faded background of a website make this form well visible.

minimalistic pop-up design
Example of pop-up design by Horizn Studios

Elvie&Leo, vice versa, use a totally white form with black text. It’s simple yet classy thanks to the smart choice of a serif font for the main message and the black button, which is contrasting with the rest of the form.

minimalistic pop-up example
Elvie&Leo pop-up design

My Deal website offers another minimalistic option with a pop of color. A red paper plane is directed to the right — that’s where a red sign up button is located. Notice how the typography is used to highlight the main message of the form.

minimalistic pop-up form
My Deal pop-up form design

Experiment with shapes and interactivity

Add a little more fun to your pop-ups to increase engagement. For instance, Jackpot Candles offer you to participate in a spin-to-win lottery.

dynamic pop-up form
Jackpot Candles spin-to-win pop-up design

When you spin the wheel, you may win one of the four prizes. That’s how the pop-up looks like when activated:

dynamic pop-up form
Design of the activated spin-to-win pop-up by Jackpot Candles

Playing with shapes allows you to drag more attention to the pop-up. Email Monday, for instance, resorted to the unusual shape of the subscription form — a circle. Combining it with a smaller circle, which shows the photo of the website founder, the brand may have all chances to get more leads.

unusual pop
Email Monday pop-up design

Your turn

To make your subscription forms eye-catching, remember these simple pop-up design principles:

  • make sure your pop-up forms are designed in the corporate style of your company;
  • remember about the Golden Ratio and the Gestalt theories when placing design elements and working with typography of your form;
  • ensure the text of your pop-ups is easy to read;
  • use colors wisely to put an accent on the most important parts of a pop-up;
  • add interactivity and play with different shapes to make your pop-ups fun and extraordinary for the users.

Ready to create your first pop-up form with SendPulse for free?

[Total: 3    Average: 5/5]
SendPulse

15,000 emails free every month.