29 Modal Design to Act as Inspiration for Your Next Design fotos

Here goes my semi-poetic explanation of modals.

Modals are like post-it notes you leave on the fridge for your housemate to remind them of the meal on the second shelf of the fridge.

You let them know what's inside it just before they open its door and oversee the food on the second shelf.

Modal windows in UI design function the same as these notes. They are not part of the main display of an app or a website but neither totally unrelated to them.

Better put, modals are UI elements displayed in front of the page and require the user to engage with them to continue interacting with the page. 

I collected several examples across apps and websites to inspire you to create the best modal window for you. 

Let's go 🚀

‍

1- Cuepath

Cuepath is a tool to ensure patients take the right pills at the right time and day. As a product designed for seniors, it needed a good onboarding user experience to make users happy and healthy. 

See how it uses a funny modal to welcome its users. The gif makes the modal more engaging and attention-grabbing. 

2- Logcomex

Logcomex is an intelligence tool for foreign trade. Using models with illustrations and CTA buttons with a short copy is what makes this one a good example. 

3- GroveHR

GroveHR uses a video to enrich the user experience of the welcome modal. And there are other functions where they use modals. They also achieve user segmentation via a short survey at the beginning of the onbaording process within a modal window. 

4- Acclip

Acclip is another SaaS product to use a welcome modal to onboard its users. See the consistency between the chatbot button, the modal, and the dashboard's overall design, and it is perfect!

5- TimeSolv

TimeSolv's modal is both informative and welcoming. Its copy deserves attention as its tone is formal but far from long and boring. The bullet points make it easy to follow. 

6- Indicata

Another place to use modals instead of the middle is the right side of the page. Indicata displays a modal to announce the release of its new market report. The call to action buttons and the overall design are basic yet inspiring for all. 

7- KeyHole

Modals are not necessarily popup windows appearing on users' screens. They can be triggered by any interaction of the users with the page. In KeyHole's case, the modal appears when a user clicks on a button to start the onbaording process. 

8- CitizenShipper

Responsive design is the key to success if you are a designer. So, your modals also need a bit of responsivity for all mobile devices. Check out how CitizenShipper's mobile modal for welcome is a good example. 

9- Adobe Acrobat Reader

One of Adobe's great tools, Adobe Acrobat Reader, displays a modal to take you on a tour of the tool. 

The dark mode in the overall design reflects onto the modal, and the contrasting colors make the image and the copy more visible.

10- Airbnb

I have loved the color palette and simple UI design of Airbnb since I first saw it. Look at this modal; doesn't it seem comfy?

11- Booking.com

Loyalty programs are nice to have for businesses.Booking.com shows your progress in an engaging modal window with a progress bar. 

12- Bundle

I started to use Bundle since I realized I had given up keeping up with the current happenings in the world. Reading news articles of interest in one app is a good solution. They utilize a modal to announce their feature, which shows you the weather forecast for your location.

13- Clue

Clue is my best period tracking app so far. This modal window offers you a premium subscription to have more detailed info about your period symptoms. What I like about this simple modal is its effective UI design. 

14- Coursera

I love learning new things, and Coursera is my to-go app for discovering online opportunities for learning. It shows a modal window to ask me to take a survey about the application. It is neither much nor lacking anything. It is as it should be: kind, clear, and concise...

15- Google Drive

While using Drive with a business account, a new feature allows you to create workspaces. It encourages you to create one with these tile-like modal windows, both sleek and attention-grabbing. 

16- Dropbox

Yet another great tool for organizing and creating files is Dropbox. This basic modal window lists the benefits of having a premium account with a bullet list and a little illustration that feels calm and creative, which I liked most. 

17- Duolingo

It had been a long time since I didn't open Duolingo to continue learning French. When I did, Duo welcomed me with this cute modal window 🥺

18 - Webflow

I liked how Webflow greeted me when I signed up for the trial. This is a brief welcome message with a kind request to share my feedback. Also, I always appreciate the representation of the black community in in-app images like this one. 

19- Grammarly

I have used Grammarly almost every day since my years in college. The modals from its web dashboard prove why I prefer using it. The design of the windows is always a good mix of copy and visuals. The message on them is as open as possible, and the flat design of the visuals goes hand in hand with that. 

20- Invision

Using modals for feature announcements is a familiar thing, but Invision stands out with two gifs shown in the modal. These gif images show a short video of how to use this new feature, which is exactly what we need in feature announcements. They are like tooltip popups that make your job easier. 

21- Linkedin

As you already know, I enjoy flat design, and Linkedin's colorful illustration in this modal looks so good. Also, adding two option buttons to a modal is a smart way to use it. 

22- Linktree

Linktree uses a modal like a resource center to share new feature announcements with users. 

But more importantly, the modal they use for offering a pro-plan looks better and more beautiful. 

23- Loom

Another great way to use modals is by giving users offer plans. See Loom's marketing strategy to incentivize inviting team members to the app via a modal.

24- Monday.com

Monday.com gives notice with a modal to let me know my trial is over. The CTA button is designed with a proper message. 

25- Dimensional

I explored Dimensional recently, and it is so much fun to answer questions, especially while commuting. Here, the modal announces a new feature with as few words as possible. I liked that even if the modal's color doesn't contrast with the background, the images provide that contrast and keep the focus on them. 

26- Splitwise

Splitwise uses the same strategy as Loom. The offering is displayed on a modal window, and the contrast between CTA's and the background is near perfect. 

27- Spotify

I find Spotify's modal designs quite interesting and to-the-point. They always find engaging data to make me curious about. Towards the end of the year, they reminded me of the first song I played this year on Spotify. 

28- Bumble

I can't say I'm a big fan of Bumble's UX/UI design, but it's a sure thing they know how to use modals. See, for example, the modal below, and it gives me enough information to become a premium member and a compelling offer for today.

29- Figma

I want to end this article with my fav modal. Figma knows how to do it! Look how cute the copy and the image in this modal are. Lovely 😻

See also this feature announcement modal in Figma. 

‍

‍