Best creative online advertising examples

B

Once in a while, a delightful online advertisement catches my attention. In the hope of sparking digital advertising creativity, this post captures and shares my favorite advertising examples.

Adobe Photoshop’s “The World is Your Canvas” Campaign

Wetransfer.com displays engaging, full-screen advertisements. Users view and interact with advertisements while actively uploading and downloading large files. In 2021 and 2022, WeTransfer served this advertisement as part of Adobe PhotoShop‘s “The World is Your Canvas” campaign.

I love the ad’s technique of using two layers and a slider to visualize an artist’s internal creative worldview and overlay it onto the artist’s real-world view, a skatepark at night. Note: The user controls the slider. The video’s audio track was not part of the Adobe advertisement.

Minions Rise of Gru — Motion Effect

I found myself nodding my head from front to back and a little side to side, enjoying the optical illusion created in this Minions The Rise of Gru still image movie promotion. The bright colors and slicing of the background design make a mesmerizing SOUND blast. I love the creativity in this online advertisement! This same eye-catching effect is on many of the movie posters and promos, too. (You can simply scroll this page to enjoy the effect!)

I found myself nodding my head front to back and a little side to side pleasantly enjoying the optical illusion created in this Minions The Rise of Gru still image promotion. The bright colors and slicing of the background design make a mesmerizing SOUND blast. Love the creativity in this online advertisement!
This promo image for Minions The Rise of Gru was in Xfnity’s Rewards Portal (June 2022)

About the author

Kelly Barkhurst

Designer to Fullstack is my place to geek out and share tech solutions from my day-to-day as a graphic designer, programmer, and business owner (portfolio). I also write on Arts and Bricks, a parenting blog and decal shop that embraces my family’s love of Art and LEGO bricks!

2 comments

  • I love it too and would love to be able to recreate this functionality. I am wondering if you know what code was used to create the slider. I’d love to incorporate it into my art website.

    • Charlotte – you can find plugins and how-tos that will get you 95% of the way by searching “Image compare” or “How to compare two images in html.” For hand coding, W3C school has an example and the slider could be used as a background with text or other elements stacked above it, similar to the original Adobe advertisement. For just the slider image compare feature, on WordPress you could use the JetPack Image Compare block, or for your current SquareSpace site maybe one of these options from Elfsight or Rebecca Grace Designs will help. Good luck! Happy creating!

By Kelly Barkhurst

Recent Posts

Archives

Categories