Tutorial: How to use screenshots and modular design in email

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:

grammarly

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).

grammarly modules

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.

Screen Shot 2016-04-08 at 11.58.54 AM

We’ll update and format the text next.

Screen Shot 2016-04-08 at 12.00.21 PM

Then, we can select¬†the structure (click to the right of the content blocks), and¬†navigate to the upper right to¬†click the double-square icon…
Screen Shot 2016-04-08 at 12.02.19 PM

…in order to make an instant copy of the module:

Screen Shot 2016-04-08 at 12.03.08 PM

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).

Screen Shot 2016-04-08 at 12.05.00 PM

From here, we’ll simply update the content and¬†drag in the corresponding images.

Screen Shot 2016-04-08 at 12.08.37 PM

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:

Screen Shot 2016-04-08 at 1.11.17 PM

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:

grammarly2

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:

grammm

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.

Screen Shot 2016-04-08 at 2.13.06 PM

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.

Still other tools, like Awesome Screenshot or Skitch, give users¬†editing power to draw, make shapes, or add text to screenshots after they’re taken.

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.

grammarly32

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:

gmmm

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!

Design Beautiful Emails in the BEE Editor

Give it a try! Design stunning, fully responsive emails in our easy-to-use, drag-n-drop BEE editor. No HTML or CSS coding knowledge required. What more? It's free and online!

Take me to the BEE email editor