> How To Write Storyboards For Hero Banners

How To Write Storyboards For Hero Banners

hero banners

Most corporate websites have hero banners on them, which are usually visual animations used to draw attention to the home page. These components can be very effective or fall completely flat, depending on the strategy behind them. In this post I’ll show you how to write them from concept to finished piece, and provide you with a hero banner copywriting template to download.

Team Up With Your Designer

The first step is to team up with a dedicated HTML5 or Flash designer. This person is often also the website designer, but can sometimes be solely dedicated to Flash or HTML5 production. You will be working closely together, so it’s a good idea to make sure each of you has either a copy of the agency creative brief or has been briefed by the company on the goals and objectives of the piece. It’s critical that both parties are on the same page, so make sure you and your designer both know what’s going on.

Once you understand what the client wants to accomplish with their hero banner, the next step is to do some rough concepting. From a writing standpoint, for me this usually involves brainstorming and sketching in a big notebook, ideally with my designer, either on the phone or in person. While it’s totally possible to come up with great ideas on your own, I find it’s always better with two or more people. We schedule a dedicated time to brainstorm and get down as many ideas as possible. As soon as we’ve done some riffing and refining it’s time to crack open the word processor.

Use A Template To Separate Visual Descriptions From Copy

Once we’ve agreed on two or three potential concepts, I go off to document them in Microsoft Word. I use a simple two-column template to create a written storyboard. The left column is used to describe the visuals and the right column is used for specific copy used in the final piece. Since clients often have trouble understanding abstract concepts, we usually use this as an internal document. My designer depends on it it to guide image searches and to create a more sophisticated, detailed PDF storyboard of each concept for client approval.

Each panel of the storyboard template is numbered and named for easy reference later. Besides writing punchy, accurate copy, it’s super important to describe the visuals, any functionality and transitions as concretely as possible. I find that describing the visuals first helps me write even better copy. Image searches are often very time consuming for designers, so try to eliminate as much ambiguity as you can in your descriptions. Your designer will thank you.

Taking Turns

When the copy template is completed, it’s the designer’s turn to transform each concept into a PDF storyboard with proposed images. There’s usually a lot of back and forth at this point, since using actual images can often inspire added refinements. When everyone agrees they’re an internal work of art, it’s time to present to the client.

Client Revisions

And now the fun begins. Hero banners often become mini-projects within a larger web design project, so beware of scope creep here. Since animations are so subjective, clients will often want to change images, copy, even placement of various elements even after choosing a concept direction. So make sure you agree on how many rounds of revisions you are willing to provide. That way you’ll know just how deep the rabbit hole goes. I recommend no more than 2 rounds, with a change order after that if your clients keep changing their minds.

Eventually your client will approve the storyboard and it’s time to build the actual banner. And that’s another blog post entirely. Probably a guest post.

Your Turn

What’s your experience doing copywriting for hero banners and other interactive elements? Would you do anything differently? Please leave your thoughts in the comments.

P.S. – feel free to download a copy of my storyboard template. I hope you find it helpful.


Get The UX Strategy Handbook


Learn to make wildly successful digital products customers love.

Signup now and get a 20% discount when the book launches.

We won't send you spam. Unsubscribe at any time. Powered by ConvertKit

, ,


  1. Banner Ad Resources « Kooljoy.com Blog - June 17, 2010

    […] How To Write Storyboards For Flash Banners […]

  2. On Storyboards « Research, Writing, Health - November 7, 2011

    […] text to describe the images you want to find or create. This two-column storyboard worksheet, from Mary Shaw, is intended to be completed textually. Find the balance of image and text that helps you think […]

Leave a Reply

Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Contact us
Hide Buttons