If your product lives on a screen, like Grammarly’s grammar checker, a web browser extension that checks the grammatical soundness of your writing, including great screenshots of your product when you email your customers about it is a must. Smart brands know that to drive¬†clicks and sales, it’s imperative to show¬†readers what they can expect from a product, especially if it’s an app¬†or¬†digital tool. We were inspired by Grammarly’s recent product announcement email, which used screenshots to show the tool¬†in action:
Why it’s great
There are a few key design elements of this email that make it super reader-friendly:
- The single column modular design is an easy-to-follow structure that’s optimal for mobile viewing
- The call-to-action¬†buttons are bulletproof¬†and easy to spot
- The text-to-image ratio makes the email¬†easy to skim
- The screenshots of the product show the reader what it does without requiring much reading
In today’s workshop, we’ll focus on rebuilding the modular layout of this email, and we’ll also offer tips for including product screenshots in email campaigns.
Creating¬†a modular structure
Let’s open up the BEE editor (it’s free, and you don’t have to register to start using it)!
Today we’ll choose a basic single-column template and get started building the structure of the message. Grammarly’s email uses¬†modular design, meaning¬†the body of the email’s content is arranged into identically-structured blocks (i.e., modules) that are easy to stack (shown below in pink markup).
Modular design has become a very popular trend in email marketing‚ÄĒfor email marketers, designers, and for email marketing platforms (just think of how many tools are modular and drag-n-drop, including our BEE editor). One of the biggest benefits of modular design is that it improves your email workflow and workload¬†by¬†speeding up the way you build an email.
In BEE, here’s how modular design can save you time and improve design consistency.
First, we’ll create a basic template for the modules in the Grammarly email. They’re simple: just a header and image.
We’ll update and format the text next.
…in order to make an instant copy of the module:
Notice the text formatting we applied remains consistent. We can quickly make two copies of this module so that each section of the email is formatted consistently (centered Arial text, bold, size 18px, followed by an image placeholder).
From here, we’ll simply update the content and¬†drag in the corresponding images.
In just a few seconds, the bulk of our email is composed. That’s the beauty of modular design in action.
Tips for taking great¬†screenshots
When your product is an app, digital tool, or service, it can be slightly more challenging¬†to convey to readers what it does and how it works. It’s a lot different from photographing a new clothing line or another item people can see and buy in a store.
One way brands communicate¬†the capabilities of a digital product or service is with icons or illustrations, like Grammarly did in another¬†recent email:
Simple illustrations like these visually communicate to the reader what Grammarly Premium offers. But if you’re not familiar with Grammarly, illustrations like these¬†can still feel a little abstract (how would it fix my sentence structures?).
On the other hand, the screenshots in today’s featured email show readers how the tool functions: with a quick scan, we see it finding¬†a number of grammar mistakes¬†in a number of settings (email, blog post, social media). The screenshots are a smart way to present the product’s abilities. Here are three tips to keep in mind when making your own screenshots.
Tip 1: Provide context
When taking a product screenshot, it’s important to include enough in the frame so that readers understand what they’re looking at, but also zoom in enough so readers can focus on the feature you’re aiming to present. This screenshot, for instance, has the telltale lefthand menu of a WordPress blog, quickly indicating to viewers¬†that that’s a platform where the Grammarly tool works:
If the shot had been zoomed in further, it might be easier to see what the tool is capable of, but its¬†usefulness would have been less clear:
Tip 2: Use the right tool
Mac and Windows each have built-in screenshot capabilities that are often versatile¬†enough to take an effective screen shot. (Mac even has a built-in tool, Grab, that lets you take timed screenshots that include your pointer). There are also plenty of tools you can download to level-up your screenshots. The Google Chrome app¬†Nimbus, for example, has a variety of screenshot options allowing you to capture your full browser window, a fragment of the screen, and more.
Another one, Full Page Screen Capture, will take a scrolling¬†screenshot¬†of the full length of a window, even what’s below the fold. We often use this tool to get an image of long emails.
No matter the tool you use, make sure your final image looks professional and encompasses a full scene. Notice how Grammarly’s blog post screenshot carefully includes all borders and boundaries of the screen without making any awkward cut-offs that might be confusing out of context. The entire entry field for the blog post, for example, is in full view.
Tip 3: Include framing
Grammarly’s screenshots each¬†have a browser window frame around them, so viewers have context around what they’re seeing.
It’s a small touch that completes the screenshot, and it shouldn’t take you or a designer more than a few seconds to do. Or, you can¬†simply open a browser to your product (make sure no other tabs are open), and use an app like Nimbus to capture the entire window, including the browser.
One way to level-up your screenshots is to place them within a broader frame, like a mockup of a desktop, tablet,¬†or mobile device. There are a number of tools out there to help you do this simply and effectively. We tested out a free one, MagicMockups, to generate this image of a¬†Grammarly screenshot on a¬†laptop:
It’s pretty neat! And it might be a good option for showing how your product performs on various devices.
We hope you’re inspired to showcase your awesome product or service with screenshots in email. Incorporate product images into a modular, single-column email that’s easy to build in BEE. Give it a try today!