20 Beautiful Examples of Modal Windows

Websites often use modal windows as call-to-action tools and for pointing out important information.

For example, the call-to-action in a modal window might ask the site visitor to subscribe to the site’s newsletter. A study by user experience research firm Nielsen Norman Group revealed that 90% of the study’s participants chose to receive updates from companies via an email newsletter, versus only 10% via Facebook. This might indicate that an email newsletter can be an effective way of developing customer relationships.

Let’s look at a few examples of well-designed modal windows. The following examples are mostly within the fashion industry because that’s the industry I’m currently working in.

Anatomy of a Well-Designed Modal Window

Seamless Design

It goes without saying that modal windows should be in tune with your site’s visual style. You don’t want modal windows to appear third-party-esque.

We follow this rule over at Mylo, a menswear mobile app that I have founded. The modal window that asks our website visitors for their email address is consistent with our brand’s visual attributes. In our case, a lot of white space, clear typography, and the copy all match up with the design guidelines of our brand.


The modal window found at Jean Stories (a fashion site dedicated to denim) also stays consistent with the site’s overall visual style. Notice their consistent application of their brand’s color scheme and the incorporation of their logo within the modal window.


Clear Purpose

Modal windows should preferably have a single objective. The objective might be to let the visitor know of a site-wide discount or get him/her to sign up for the site’s newsletter.

A well-designed modal window should only request essential information. Overloading potential customers with form fields to fill out and boxes to check off is not wise because doing so might lead to inaction.

Ecommerce websites may want to consider offering an incentive in order to compel visitors to perform the desired action, such as a discount on goods in exchange for signing up to the site’s newsletter. Below are a few examples of modal windows that offer percentage-based discount incentives:



Misha NonooMisha Nonoo


Content is King

Your modal window’s copy should embody your brand’s attitude, tone, and style.

You can also state a value proposition in the modal window. For example, DuJour magazine’s modal window states their newsletter’s value proposition to potential subscribers: "The luxe content you can’t find anywhere else."


More Modal Window Examples

Below are a few more modal windows that follow the general guidelines mentioned above.

Steven AlanSteven Alan


Stella McCartneyStella McCartney

The Prince Ink CompanyThe Prince Ink Company

Need Supply Co.Need Supply Co.


The Socialite FamilyThe Socialite Family

Thisispaper ShopThisispaper Shop

Volta FootwearVolta Footwear

Austin BeerworksAustin Beerworks

Atea OceanieAtea Oceanie

Victory JournalVictory Journal

Zurb UniversityZurb University


Modal windows can be used to ask your site visitors to perform an action (such as subscribing to your email newsletter) or for sharing an important message.

A good modal window will have:

Thanks to Faiz Tariq and Carolyn Buszynski, the co-authors of this article.

Related Content

Creating Focal Points in Your Web Design

Optimal Techniques for Strategically Displaying Web Forms

What White Space Can Do For You

The Art of Distinction in Web Design

Daniel Eckler is an entrepreneur based Toronto, Canada. His most recent startup is Mylo. Past ventures include Piccsy and EveryGuyed. He has a background in New Media Arts. Learn more about him by via his website, and join him on Twitter and Facebook.

This was published on Oct 16, 2015


Andy F Oct 16 2015

“Modal windows can be used to ask your site visitors to perform an action (such as subscribing to your email newsletter)”

But they really, really shouldn’t be, because they are annoying as hell. Modals should only ever be in response to a user-initiated action (and no, scrolling doesn’t count).

Email prompts… this brings us 15 years back. In a more stylish way, yeah!

this is terrible Oct 17 2015

you’re making internet worse, please stop


    dudeguy Oct 23 2015

    How exactly is this making the internet worse? Your modals SHOULD look custom to fit your site. That doesn’t mean overly designed, but should have the same typefaces and hierarchy used on the rest of the site. It should speak visually in the same language as the rest of the brand. That’s a pretty basic design principle. If you’re concerned about modals that load without any interaction, then i’m right there with you. That should NOT BE HAPPENING. I don’t know why people keep doing that, because all it does is makes me want to run away, but I don’t think that’s something that is being encouraged with this post.

      People keep doing it because it works, just try no to be overly annoying about them :-/ remember who closed it and don’t show it on every visit…

      I hate them too.

This comment section is closed. Please contact us if you have important new information about this post.