Designing Modals With Purpose<\/h2>\n
Every modal window should be used for a specific purpose. If you don\u2019t need to get information in front of the visitor directly then try moving it to another page or adding it dynamically into the page.<\/p>\n
Modals immediately grab attention because they appear on top of everything. This can be annoying when it\u2019s overused so try to use modals sparingly and with a strong purpose.<\/p>\n
Here are some pretty valid reasons to setup modals:<\/p>\n
- \n
- Sharing relevant information fast<\/li>\n
- Adding a login\/signup form<\/li>\n
- Showing a confirm\/deny box<\/li>\n
- Requesting something(email signup, remove adblock)<\/li>\n<\/ul>\n
Marketing is also a great reason to run modals but I recommend doing so with some restraint. Try to keep them brief and to the point.<\/p>\n
![\"tommy](\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2017\/06\/01-tommy-hilfiger-modal-optin.jpg\")
<\/a><\/p>\nThis is a great example from Tommy Hilfiger<\/a> that shows how an opt-in email field can work wonders if you know how to target the right audience.<\/p>\n
Most people have become desensitized to these modals but evidence shows they do work<\/a>.<\/p>\n
Still another reason you might use a modal is to add onto the existing UI. For example Twitter has a modal for the \u201cnew tweet\u201d window so it appears on top of the existing page.<\/p>\n
![\"compose](\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2017\/06\/02-compose-tweet-window.jpg\")
<\/a><\/p>\nModals are great and really do well at grabbing attention. Just make sure you have a valid reason for adding it onto the page.<\/p>\n
Modal Usability<\/h2>\n
There are a few design techniques I always suggest for all modal windows. By default they should be fully responsive and they shouldn\u2019t take up the entire screen.<\/p>\n
If the user can\u2019t see the page behind the modal then they have no idea why this massive window just overtook the entire page. Have some common sense with modals and try to work towards these general goals:<\/p>\n
- \n
- Make sure open\/close animations are quicker than 1 second<\/li>\n
- The user should be able to click outside the modal to close<\/li>\n
- Including a small \u201cX\u201d in the corner to close<\/li>\n
- Keep the copy brief and direct<\/li>\n<\/ul>\n
The example on John Lewis<\/a> is perfect for all of these points. It appears quickly and fades quickly once you close it.<\/p>\n
But it\u2019s also very short and gets to the point fast. You can clearly see the entire background is darkened so it\u2019s easy to click anywhere to hide the modal from view.<\/p>\n
![\"john](\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2017\/06\/03-john-lewis-website.jpg\")
<\/a><\/p>\nThis appears without warning so it can negatively affect the user experience. But these modals also convert so I understand why designers use them.<\/p>\n
Another modal technique is to connect image galleries when users click to view a photo.<\/p>\n
You\u2019ll find this on a lot of ecommerce shops like Wayfair<\/a> when you click to zoom into a product photo.<\/p>\n
![\"wayfair](\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2017\/06\/04-wayfair-modal-slideshow.jpg\")
<\/a><\/p>\nClose-ups controlled by the user are far easier to work with. These modals are expected so the user experience is enhanced with a fullpage overlay.<\/p>\n
Let\u2019s look at a few other image gallery modals to see how these trends play out.<\/p>\n
Image Galleries & Slideshows<\/h2>\n
The vast majority of modal window slideshows that I find are typically on visual portfolios. These could be websites for artists, designers, photographers, or any other visual medium.<\/p>\n
It works well because people are mostly visiting these sites to consume the portfolio work. And what a better way to consume it than through a large fullscreen image slideshow?<\/p>\n
![\"karla](\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2017\/06\/05-karla-ortiz-modal-gallery.jpg\")
<\/a><\/p>\nConcept artist Karla Ortiz<\/a> has a brilliant portfolio design that really places focus on the artwork.<\/p>\n
Notice how the entire screen goes black once you click on a piece of work. This goes further than just a typical modal window because it almost creates an entirely new screen on top of the page.<\/p>\n
It reminds me of when you press \u201cplay\u201d on a PowerPoint presentation. The entire screen fades to black so the presentation becomes your main focus.<\/p>\n
You could also do this with a white background like Steven Crosby’s portfolio<\/a>.<\/p>\n
![\"steven](\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2017\/06\/06-steven-crosby-portfolio-modal.jpg\")
<\/a><\/p>\nThis works like a modal window because you can still see the page background behind the new slideshow page. But it gives the same feeling as if presenting portfolio items in front of a group.<\/p>\n
I typically recommend fullscreen slideshows like these for all visual portfolios and for image galleries on ecommerce sites. This can also work for blogs but specifically blog posts with a lot of images.<\/p>\n
Logins & Sign Ups<\/h2>\n
One other area where I justify modal use is with login\/signup forms.<\/p>\n
For compliance with all browsers you should still have a separate page where users can login or sign up to the site. But I do feel like modals are incredibly helpful in this arena.<\/p>\n
![\"reddit](\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2017\/06\/07-reddit-modal-window.jpg\")
<\/a><\/p>\nIf you browse Reddit without an account you can login\/signup on any page. Just click the link in the top-right corner and a modal appears over the screen.<\/p>\n
There\u2019s only a few fields required to sign up for a new account. Plus you don\u2019t even need an email address so you can get going fast!<\/p>\n
If you have a very small signup form consider running it with a modal window on your site. This is not the best way to onboard for larger websites but it\u2019s more likely to increase conversions if you reduce the amount of work required to sign up.<\/p>\n
Best Modal Window Plugins<\/h2>\n
These days almost everything has its own script or plugin online for free. Why reinvent the wheel if you can build on top of what others have created?<\/p>\n
There are dozens of modal window plugins available so I\u2019ve only curated my top picks. However if you\u2019re looking for more check Google<\/a> and see what you can find.<\/p>\n
Tingle.js<\/h3>\n
![\"tinglejs](\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2017\/06\/08-tinglejs-plugin.jpg\")
<\/a><\/p>\nFirst on my list is Tingle.js<\/a> which uses CSS transitions to create modal effects. The library runs on JavaScript but also relies on a lot of newer CSS3 techniques.<\/p>\n
This modal can behave any way you want from alert boxes to photo galleries or even EULA dialogs. These modals can use photos, videos, or iframes embedded inside the content area.<\/p>\n
You\u2019ll find the full source on GitHub<\/a> along with quick documentation for getting started if you wanna give it a go.<\/p>\n
Remodal<\/h3>\n
![\"remodal](\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2017\/06\/09-remodal-js.jpg\")
<\/a><\/p>\nOne of my favorite modal plugins is Remodal<\/a>. It comes with all the basic features you\u2019d expect like quick animations, custom button styles, and background clicks that hide the window.<\/p>\n
This plugin is sadly no longer maintained but it does get minor bug fixes every so often. And it still works well as a basic jQuery plugin so you don\u2019t need to worry much about custom edits anyways.<\/p>\n
leanModal.js<\/h3>\n
![\"leanmodal](\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2017\/06\/10-remodal-window-plugin.jpg\")
<\/a><\/p>\nThe best thing about leadModal<\/a> is that it doesn\u2019t assume any specific UI design. You have full control to edit and customize the design to suit your needs whether it\u2019s a simple informational modal or a login\/signup window.<\/p>\n
This also runs on jQuery but relies somewhat on CSS to create a few animations.<\/p>\n
Adjustable width\/height, very lightweight, and super easy to setup with one line of JavaScript. Definitely a modal window plugin worth considering.<\/p>\n
Unfortunately this plugin does not support galleries or iframes so it\u2019s not a perfect solution. But for static content I couldn\u2019t recommend anything else.<\/p>\n
SweetAlert<\/h3>\n
![\"sweetalert](\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2017\/06\/11-sweetmodal-plugin.jpg\")
<\/a><\/p>\nThe Sweetalert<\/a> plugin is a unique type of modal because it mimics the default JavaScript alert box.<\/p>\n
However this modal does not take over the entire screen. In my opinion this is a much better choice over the default browser-based alert box, and the SweetAlert box still supports all the same functionality.<\/p>\n
Granted this plugin can\u2019t do much else so it\u2019s not great for info-type modals or embedded slideshows. But JS alerts can be a pain so this plugin offers a very nice alternative.<\/p>\n
And if you\u2019re looking for other recommendations here are some more plugins you might like.<\/p>\n
- \n
- VenoBox<\/a><\/li>\n
- iziModal.js<\/a><\/li>\n
- Magnific Popup<\/a><\/li>\n<\/ul>\n
Modal UI Freebies<\/h2>\n
If you\u2019re a designer then you probably use UI kits and freebies in your mockups.<\/p>\n
Modal window mockups are tougher to find but they are around if you search. I\u2019ve curated some of my favorite freebies here and these work well for all types of designs.<\/p>\n
Popup Modal PSD<\/h3>\n
![\"popup](\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2017\/06\/12-popup-modal-psd.jpg\")
<\/a><\/p>\nThis popup modal from Freebies Gallery<\/a> is fully layered and easy to work with. It was first published back in early 2012 so it should work in all versions of Photoshop CS5, CS6, and CC.<\/p>\n
Not much in the way of a background design but it has a lot of gradients and some very colorful button styles.<\/p>\n
Modals do work well as confirmation dialog boxes so you can borrow these styles yourself to see how they fare.<\/p>\n
Dark Dialog<\/h3>\n
![\"dark](\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2017\/06\/13-popup-dialog-window.jpg\")
<\/a><\/p>\nIf your design works better using a dark window check out this PSD freebie<\/a> from Blugraphic.<\/p>\n
This modal specifically uses a lightened opacity around the border to create the illusion of a shadow. It\u2019s a really neat effect since most modals actually do darken the background with a slight opacity shift.<\/p>\n
It would be pretty simple to recreate this in CSS3 so it\u2019s well worth saving if you like the dark modal design.<\/p>\n
Clean Modal<\/h3>\n
![\"colorful](\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2017\/06\/14-modal-window-colorful-psd.jpg\")
<\/a><\/p>\nOne thing I like about this simple modal<\/a> is the colorful gradient choice. This comes from 365PSD and it dates quite a few years back when gradients were the norm.<\/p>\n
But if you study the interface you\u2019ll notice it does a lot of things right. The OK button is more noticeable than the close button which encourages visitors to take action.<\/p>\n
It also has brighter colors on the button along with the checkbox. This modal could be revamped and used quite well as an email optin field too.<\/p>\n
Yes\/No Option<\/h3>\n
- iziModal.js<\/a><\/li>\n
- VenoBox<\/a><\/li>\n
![\"yes\/no](\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2017\/06\/15-psd-modal-yes-no-window.jpg\")
<\/a><\/p>\n