The Best Way to Wireframe Website Content: Rapid Prototypes

In college, I was a film student. One of our assignments was to create a storyboard from a scene from a well-known film. I chose a part from The Graduate and spent three or four grueling hours sketching out and documenting every single shot within a few minutes. It was exhausting.

However, by the end of the exercise, I finally understood how the upfront organization of film production makes a better film.

With the script and the storyboard, you can make sure you hit every dramatic note in a scene.

In agency life, I find that it's very similar to when you wireframe a website. Before starting to design a website (to film), you map out your content (the script) and create a wireframe (your storyboard.)

Because if you wrote the script after filming and didn't make a plan for each scene, it'd be a mess. You'd easily overspend your budget and miss your launch dates.

And you still would not have a terrific film.

However, with agile tactics such as rapid prototyping, you can adopt a film-like mindset and create a strong foundation of website content. All it takes is the proper planning and the right approach.

How Rapid Prototyping Results In Better Website Content

Unlike film, I don't sketch out every wireframe by hand. That's a practice that according to my professors, is critical for film students and less vital for businesses (thankfully.)

Instead, I follow a process to quickly concept content, wireframe it, and draft a page using rapid prototyping. I can plan the pages that will help connect the narrative I'm trying to tell, then get them into HubSpot quicker. 

From there, my designer has all of the modules and pages to start.

And from budget to quality, there are a ton of benefits to prototyping your website content.

Here's why it's my go-to method.

Fewer Iterations

Let's go back to my film metaphor. What would happen if you were on set without a script? You would shoot and reshoot scenes because the lines aren't right. The moments wouldn't hit, you would lose the entire message. And it's because you're asking your actors to improvise and still capture the essence of each scene.

In this case, the actors are your designers. They don't have the context to build the best page, so they take their best guess and end up underwater.

(Kind of like Ben Braddock in that pool scene.)

After the designer tries and fails, there are the inevitable revisions. You waste a lot of time this way. With rapid prototyping, you go in with a plan for every section of your page. You outline the purpose, the call-to-action for the page, and any stats or proof points you need. Because of this upfront work, you can draft the copy quicker and more effectively.

Design-Ready

In the film, no one would ever start making a movie without finishing the script. Because to accurately budget, get the right equipment, and choose the appropriate sets, you need to build the story out as possible. It's the same with preparing your content for design.

Like every scene in a movie, every page must flow together seamlessly. That's the difference between a great film like The Graduate and a flop like The Room (you might argue with me on that last one, but even when it brings in a lot of publicity, a disaster is still a disaster.)

When you prepare your website pages using rapid prototyping, the message and outline of your page are both ready for design. Your designer has the context they need to deliver. They can match the story you're telling with words with visuals. You can move through the design phase efficiently, and end up with a better website.

No Clunky Tools

Now, there are a lot of tools out there to create a wireframe. Tools like Photoshop, Frontpage from Windows, and Mockplus are favorites, but I avoid them at all costs.

Why? Because they're cumbersome tools that add another step to the web design process. They bring me right back to college, sweating through hand-drawn scene after scene, furiously trying to sketch Anne Bancroft's face. These tools only add additional steps and eat up a lot of time.

You may have a beautiful wireframe when you finish, but then, you need to add the copy to that wireframe and transfer the final wireframe to HubSpot. When you're shifting ideas from place to place, you're likely to lose essential points and notes about flow and UX.

With rapid prototyping, I only work with tools that integrate with HubSpot. My preference is SprocketRocket. Once I prototype a page in SprocketRocket, I can immediately draft it in HubSpot and finalize my copy.

Better Page Designs, Faster

Creating a film and building a website have another commonality. Each requires the director or business owner to craft a story with multiple scenes or pages, following a specific budget, timeline, and more. Each one prefers their team, approach, and plan.

However, not all of these approaches result in the page (or film) that you want. Many of them create tremendous waste.

That's why I use our process. The tools and resources we use at Lean Labs minimize waste and support components that foster better page designs. As a result, I can create page designs in less time and effort.

As a growth team, our go-to tools include Slickplan to create the wireframe, a template from our strategy kit to plan out the page flows, and a rapid prototyping tool like SprocketRocket to pass the pages into HubSpot.

Once I prototype my pages and fill in copy, one of our designers style the sections. If you need additional support from graphic design, you can also use one of HubSpot's free templates.

The Next Step To Prototyping Website Content

As a director, despite how great you think your movie is, what determines it's success is the audience. For a website, it's the same. Without website content or a story that follows a clear, engaging narrative, you'll end up with little to no leads (or with a poor ranking on Rotten Tomatoes.) That's why it's so important to invest time in the narrative. You need to guide your customer from the beginning of their unique story to the end.

However, creating this kind of website content is easier said than done. Even with our process, you need to an excellent understanding of your customer and your industry. That's why in addition to following all of these prototyping tips, we invest time upfront in developing the most accurate view of our ideal customer.

We use a series of website strategy documents, available in The Strategy Kit. The kit includes these templates as well as prompts on how to complete each one.