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

    #1 product adoption platform. Quick setup, lasting engagement.
    Start for free >
    See how UserGuiding can help you level up your product experience.
    Talk to an expert >
    #1 product adoption platform. Quick setup, lasting engagement.
    Join 20k+ product people >
    Ready to Boost
    Product Adoption?
    Meet With Our
    Onboarding Experts

    Home / UX / 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

    modal designs - Cuepath
    created with UserGuiding

    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

    Modal design - Logcomex
    created with UserGuiding

    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

    modal designs - grove hr
    created with UserGuiding

    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

    modal design - acclip
    Created with UserGuiding

    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

    modal design - timesolv
    Created with UserGuiding

    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

    modal design - indicata
    Created with UserGuiding

    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

    modal design - keyhole
    Created with UserGuiding

    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

    Created with UserGuiding

    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

    modal designs - 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

    modal designs - 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

    modal designs - 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

    modal designs - 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

    modal designs - 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

    modal designs - 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

    modal designs - 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

    modal designs - 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

    modal designs - 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

    modal designs - 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

    modal design - 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

    modal design - 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

    modal design - linktree
    modal design - 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

    loom modal design

    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

    moday modal design

    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

    dimensional modal design 1
    dimensional modal design 1

    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 modal design

    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

    spotify modal design

    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

    bumble modal design

    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. 

    Frequently Asked Questions

    What is modal in design?

    A modal in user interface design is a window shown in front of the main window. Modal windows require interaction to disappear and let the user continue with the main page. Designers use it for ends such as welcoming users, announcing features, user surveys, and upgrade messages.

    Is modal good for mobile?

    Modals are good ways to communicate with users with in-app messages and surveys. It is important to keep their number limited and make them as least annoying as possible. For that, the modals shouldn’t interfere with the overall user experience with the application’s main window.

    Are modals good for web design?

    In web design, modals are the best if you want to grab users’ attention and ensure they see your message. Just beware of being user-friendly while using modals in web design lest you frustrate them instead of exciting or helping them.

    Join 1000+ teams
    driving product success at speed

    14-day free trial, no coding needed, 30-day