Skip to the content

Getting started with Facebook Canvas for experience design

Getting started with Facebook Canvas for experience design

Facebook Canvas Ad
Photo credit: Facebook Canvas

Have you heard of Facebook’s new mobile ad experience, Facebook Canvas?

Our clients are always interested in new approaches to reach their target audience, and when we heard about the benefits of Canvas and how it’s designed to help brands engage customers within detail brand experiences, we had to find out more.

We asked one of our UX designers, Cameron Chaussee, to explore uses for this new tool. This is Cameron's experience of getting started with Facebook Canvas:

Recently, I was approached to design an interactive ad in Canvas. According to its website, Canvas is an immersive and expressive experience for businesses to tell their stories and showcase their products, so I was immediately intrigued. As a UX designer, any chance I get to design for new technology while designing in the technology, makes for a happy designer. After a quick sign-up, the Canvas Builder app (which is free) will appear in your Facebook page’s Publishing Tools section near the bottom. As an FYI, note that you can only use Canvas on a Facebook page, not on personal Facebook profiles.

After an initial brainstorming session, we defined a story with a few rough sketches identifying some basic functionality and story beats. We based our expertise on a demo video we saw on the Canvas landing page. With no budget, and a need for images of Las Vegas, we found Commons Wikimedia. Most of the content there is considered to be creative commons, which basically means free and you don’t have to worry about licensing. You get a pretty decent range of subject matter, image sizes, and some video. I also found pixabay.com, which has free HD video clips and is licensed as a CC0 public domain, also basically meaning free and free from worry about licensing.

Canvas Builder Option

After watching a quick demo video, I logged on to Facebook and started blocking out my layout. Canvas does a great job of combining videos, still images, and a call-to-action button for a truly immersive experience for companies to tell their story on Facebook for mobile.

Your layouts can consist of five different components: buttons, carousels, photos, text blocks, and videos. Each component has a variety of layout options and the ability to add a URL to the component. Users can swipe through a carousel of images, tilt to view panoramic images, and zoom in to view images in detail.

Canvas Builder has a simple and intuitive UI, and it offers a great Live Preview of the app you are building. I built our experience both on a PC and a Mac, and I noticed some differences in the Live Preview on the two platforms. For example, on a PC, videos don’t auto-play in Live Preview, but on a Mac they do.

Live Preview has a great option to send a preview to your phone and multiple users through the Facebook app on your phone. Text renders slightly differently from desktop to mobile. In addition, whether video will play depends on your mobile OS. iPhones auto-played video, whereas Android had no real rhyme or reason for which videos auto-played and which didn’t. Canvas Builder worked well in Safari and was pretty buggy in Windows 10 Edge.

Canvas Builder Option

When you’re done building your experience, you’ll publish, but make sure all your typos are fixed, because you can’t edit once you publish. You do get an option to save a copy that you can edit. Once published, Facebook also has great analytical tools to help you understand how well the Canvas ad performed, including reach (paid and/or organic), engagements, and clicks.

I was given the challenge to learn, design, build, and deploy the ad in 10 hours, but after some additional time researching potential options, the project ended up taking 18 hours. If this is your first time using Canvas Builder, you may want to allow more time for execution. Overall, it’s a pretty cool web app—a little buggy, but has a lot of potential. I recommend it and would definitely use it again.

If you want to investigate Facebook Canvas, get in touch