Users are often annoyed by pop-UPS that force them to fill out forms or answer questions, but are they all that bad? There are pop-ups that help users, give advice or offer discounts on products.

Thus, a pop-up window is usually a small window that suddenly appears in the foreground of the visual interface of a web page. Pop-UPS can be an advertisement, an information block, a contact form, etc. is rather small and contrasting, but we will define all the elements of the pop-up design and the factors that affect how users perceive it in order, not all at once.

Pop-up windows

Shiny appearance

Pop-ups can serve different purposes and influence how a pop-up is initiated. If it is an advertisement or an advertising banner, it will appear without any action, only within a certain time after opening a web page. The other matter is an informative pop-up window. It must be initiated by a click. An informative pop-up has an explanatory function, for example, it helps to fill out a form. Pop-UPS can also be an additional block of content with secondary information on this or that point, so that only interested users read it. This can help you organize content and maintain the distance rules on your website. A pop-up window with a contact form is better not to appear suddenly, because users do not treat it well. Pop contact must be opened by a specific button, that would be perfect.

El Mundo Al Revés with Simple Pop-Ups

There are four colorful blocks with service descriptions on this website. Each block is supplemented by a contextual informative section. It is easy to initiate it by click and close it by a cross button.

The bigger, the better?

Size is important for many elements of website design, are there any pop-ups in this list? They are certainly there, but the question is whether a pop-up window should be small or large. For comparison: a small pop-up window, say 30-40% of an entire web page, will be accurate, beautiful and will not visually block the other content. However, if you want your pop-up to attract the attention of users and make the content clearly visible, you should make this window larger and occupy about 80% of the space on the web page. Another tip: if a pop-up window is small enough, make the background blurry or darkened. This leads to a better visual exposure of a small window.

Blog Photodoto with a beautiful pop-up design

What we see here is a pretty cool pop-up window made in the right proportions in terms of the size of the web page. It is characterized by its bright color choice and darkening background effect.

Color scheme

Color is an essential element in all aspects of web design, that’s right. But which color choice wins pop-ups? The best color palette is the one based on contrast. After all, the purpose of a pop-up window is to make people take action, so you need to design a CTA / promo code button or other detail that will lead to bright color actions. In this matter, the main color should be neutral, such as white, gray or brown.

Agricultural Website Design with Bright Yellow Pop-Up

This pop-up design is contrasting, but in a slightly different way than we discussed. It does not use two opposite colors, it is monochrome with a striking yellow tone. It looks just great on a dark background.


The content of a pop-up window is very small, so its main task is to be convincing and very wise. These 2 or 3 lines of text that you write in this section will decide the future of your online campaign. Some convincing words that you can use are: save, free, results, want, ready, need, receive, try, negotiate, discount, deal, fast, now, hurry up, be the first, last chance, etc.

The website I Love Lou with Pop-Up Contest

The pop-up window of this French website contains a convincing CTA button. It means “play and win” in English.

Give a choice

It’s a very good thing to create a pop-up window that asks a question and offers two simple “yes” or “no” answers. For example, you want your visitors to try a free demo version of your new product, and you have a question: “Would you like to try our new product for free?’. Of course, you can create a single CTA button with the text “yes”, “try”, “try now”, “test”, “try”, etc. But you can create two buttons (preferably of different colors) with the following text: “Yes, I want it” and “No, I don’t want anything for free”. These are only approximate variants, but the meaning is clear. In this matter, you need to make users understand that now they have a chance after there will be nothing free.

Leave a Reply

Your email address will not be published.