If you’re seeking to create an all-new website for your business, one of the first things you’ll need to build is what’s called the wireframe. The definition of creating a website wireframe is the process of using different tools—primarily software—to develop a multi-level framework view of how the site will be constructed, including which types of content will live on the various sections and pages. That may sound complicated. In fact, we’ve seen lots of ad agencies and web-design firms who actually make it complicated. Thing is, it needn’t be. Thus this article. If you’re trying to create a new (or updated) website for your business, you want to make that new site as powerful and business-building as possible—and you also want to get it up-and-running yesterday. Perhaps those agencies and design firms we’d mentioned above are looking to justify their hefty fees. We’ve seen big, sprawling wireframes that look like the org chart from the Department of Defense, with connectors and boxes and dashed lines and finicky labels and all that. Yeesh. We’d noted “software,” above, and there are certainly apps and platforms out there to help you create the kind of graphical spaghetti mess we just described. If that’s the type of solution you’re seeking, stop reading right here. This article won’t help you. Still with us? Glad to have you. Here’s the real way to create a quick-and-dirty wireframe for your upcoming website. Two camps First, we need to address some trends in web design that will affect this assignment. Broadly, there are two ways, these days, to build your website, in terms of how it’s structured:
The latter way of proceeding, it’s been argued, is better for mobile-first audiences, who don’t want to keep opening new windows while they navigate. The traditional way, by contrast, is great for desktop and laptop audiences. We won’t weigh in on which one we prefer; that’s the topic of a different article. But once you choose the way you’d like your site to be structured, you still need to create that wireframe. The only difference between the two modalities is that one wireframe will indicate links for actual pages and sub-pages; the other will indicate “links” for placeholders to scroll to on that one huge page. Center stage The other big consideration, when it comes to website design (and thus your wireframe) is that not all website pages (or sections) are created equal. (For the remainder of this article, we’ll refer to “pages,” for simplicity’s sake, but know that everything we’ll discuss applies to both types of sites.) What’s “unequal”? There are two huge things to consider, based on the valid assumption that your visitor is basically in a hurry to find out what they need to learn about your business, and if they’re not satisfied quickly, they’ll click off to one of your competitors. So here are the two huge things:
So you need to treat those two areas with extra-special care. Deeper sub-pages, such as “Company History,” aren’t as urgent. Who’s there? As we’ve said a zillion times in these articles, the primary, A-1 consideration for all your marketing—including your website—is understanding who your target audience is, and what they need. That’s a huge given for this website assignment; for the purposes of this article, we’ll assume that you’ve figured that out nicely. From there, it’s pretty straightforward to create your wireframe. You know you’ll need a home page. And some sub-pages. You’ll need to determine the order, in importance, of those sub-pages, and which ones cluster together in order to simplify navigation. But how do you build this? What about all that fancy whiz-bang wireframe software? Think big, act small This is so ridiculously easy we’re amazed that more agencies don’t use it. The answer: Microsoft Word. All you have to do is create a blank page with a couple of basic bullets on it, such as:
That’s it. Should take you all of about 15 seconds. Then here’s the cool, easy, and downright fun part: Simply start populating each of those bullets with sub-bullets. When you do this in Word, simply hit the “Tab” key underneath any given bullet, and Word will automatically indent and format the sub-bullets for you, outline-style. So, starting with really easy stuff, let’s add the next layer to the “Home page” bullet. That would go like this:
You can worry about what populates those sub-bullets later. Here’s another. Let’s start populating the “Services” sub-bullets:
And you just keep on going, adding to it until it’s done. You can always do a “Save as...” and create a v2, v3, whatever you like, in order to preserve earlier versions (and thinking) and build a creative audit trail. You can even start dropping in chunks of copy, such as headlines and teaser intro’s, into this wireframe. One more trick: We’ve often helped clients build websites in a phased fashion. That is, there’s some stuff that needs to get published immediately (Phase One), vs. other pages that can be rolled out at a future date (Phase Two). So we’ll use color-coding (again, in Word) to make that clear to the reader without even reading it. We’ve set, for example, the most urgent pages in a red font so they stand out. Easy. This process is really simple. But don’t let that fool you. It’s hugely powerful. We’ve used it to help clients create all kinds of websites, big and small. Need help ideating that new site or the client needs it will address? Contact us. We’d be delighted to help.
0 Comments
Let’s dive right into this. It’s based on a disheartening episode we recently experienced with a client. Here’s the story: We’d been working, for months, with this client, to develop their new brand persona, by taking a meticulous customer-back approach to their business. And by “customer-back,” we mean, “starting with the customer—who they are, what they need—and then working back into all of the messaging and, indeed, offerings.” Done right, this is a powerful process. With this client, we did it right. We were developing some killer insights that would position our client head-and-shoulders above all their competitors. This positioning, then, informed the structure and content of the new website we were creating for them. (“Disheartening”? Stay with us.) So. We did the deep-dive customer-discovery work with them. We developed the new brand persona. We developed the strategy, and then the wireframe (“outline”) for the website. All of these were approved by the client. Then, using the approved wireframe, we wrote all the pages of the website for them. These, too, were heartily approved by the client. Everything was going swimmingly. Cart? Horse? Huh? Then, one day, the client surprised us by sending us a brochure to review. This was certainly a surprise: “brochure” hadn’t been discussed before. But that’s fine. We’re not parochial. We can go with the flow. If clients want to take the initiative and bolster their marketing, we’re all for it. Until we saw this brochure. Mind you, it was finished. Outlined, written, and laid out. The client told us they wanted to send it out, en masse, and wanted our quick review/sign-off before it went. Holy @#$#@$. Our first reaction was Who is this brochure for?? Yep, it was that far off of everything that had been previously, and laboriously, developed... and then approved. Yikes. There was not a sentence, not an image, not a pixel in this thing that was on-brand or on-message. It told a different, and confusing story. The imagery would have been off-putting to the specific target audiences we had worked so hard to define. The structure was confusing. The layout was amateurish: like a mediocre student project. There was no call-to-action. It was, in short, a train wreck. Tough love Now, we’ve seen lots of mediocre, and downright bad, marketing materials in our time. So along that continuum, this one was hardly a shocker or a standout. But what did make it so extraordinary was the way in which it simply disregarded all of the painstaking, groundbreaking work that had preceded it. Not only would it turn off the very people it was supposed to turn on, it—most importantly—squandered all of the effort that went into the main branding and site-building. We don’t enjoy giving tough love here at Copel Communications, but we also don’t shy away from it when it’s required. Here, it was required. It was not fun to tell this client that, while we appreciated all of the effort that clearly went into this thing, it would do more harm than good, and should simply be shelved. Ouch. So now you know the “disheartening” part of this article. But what about the “Steal from yourself” headline? Play it on the cheap You probably figured it out for yourself already. Between the prior branding, and especially the website and its already-written pages, this client already had everything they needed to quickly create a killer brochure, practically for free. It was the same messaging. In just a slightly different format. Indeed, it’s even easier: You don’t know how a visitor is going to poke around the different pages of your website. But they’ll start reading that brochure from the front cover, and turn through it, page-by-page, in order, until they reach the end. So it’s very straightforward to populate the thing, especially when you have all of the content and images already on hand. They’re not only polished and powerful. They’re paid for. And thus the “steal, steal, steal” advice we have to offer here: Steal from every great marketing piece you have, to create other great marketing pieces. Fine. We’ll be polite. We can say “leverage,” if you like. Fact is, too many clients get so caught up in their own marketing materials that they feel compelled to create something new every single time, when reality dictates the exact opposite: Never flatter yourself into thinking that some prospect has not only read, but memorized your entire website, and then will be put off, or offended, when they review your brochure which includes, effectively, the exact same content. So our client’s mistake here wasn’t uncommon. This was the trap they fell into. They just fell a lot harder than most. Their biggest mistake: Opting to “surprise us” while they worked on this thing—from ideation through completion—in the background. Boy, could we ever have nipped this in the bud—and saved them a ton of headaches, aggravation, time, and most especially money—in the process. Use web content for brochures. Leverage brochures for social ads. Use print copy for radio. Sales-sheet images for case studies. Video-script voiceover text for emails. It just goes on and on. Steal, steal, steal. One other way to look at this: If you do the opposite, you diminish your brand. You’ve got all these disparate looks and messages, and no target will ever connect those dots. But when it’s all unified and coordinated—which is actually easier, and less effort—your brand appears huge, unavoidable, and inevitable. Need help with branding challenges like these? Contact us. We’d be delighted to help! |
Latest tipsCheck out the latest tips and best-practice advice. Archives
June 2024
Categories
All
|