The wireframe is the blueprint of your website. Because you have created your outline or sitemap, you know how many pages you will have. You know what your objectives are. Now it is time to figure out how it all fits together.
How will you know when your content is far enough along that you’re able to move to the wireframe stage? That is a fair question. Sometimes, it is hard to envision what needs to be done before seeing how it is starting to come together. Because of this, I don’t recommend that you completely finish the content before you start working on the wireframe. Rather, at this stage, think of content as a hybrid, ever-evolving aspect of the website. In fact, it is very beneficial if the content is written just before (or even concurrently with) the creation of the wireframe.
What should your website do?
This is when you decide what you want people to do on your site. So, ask yourself this simple question: “What do I want my website to do?
From the content that you’ve written, you have talked about who you are and what your services are, but you haven’t addressed what you want the visitors of your website to do.
Here are some possible answers:
- Sell some (or some more) products
- Generate warm leads
- Generate brand awareness
- Offer customer service/support
- Include product demonstration
Whatever your answer is, it is important to know the answer so that you can properly implement it into your strategy.
If you were a designer, I’d talk to you about the various technical tools there are to wireframe your homepage. However, in my opinion, the most effective way to wireframe is on a white piece of paper and a pen.
Wireframing is really about defining the image you want portrayed. At this point, we have not talked about the color or graphical side of your website but, instead, how people will interact. Just as with content writing, when you are defining (or redefining) your company’s image, one of the most difficult tasks is to step back and understand who your real audience is.
How to find a perfect wireframe
Look at as many of your competitors as you can. Look for the elements of their sites that you like and don’t like. However, don’t be the only one to analyze them. Pick your top five competitors and ask your friends and family to give you some feedback. I especially like to ask people that are outside my field because they will have a less biased opinion. Look at your competitors’ sites and ask, “What are they trying to get me to do?” Then, assign a grade based on how well you think they are accomplishing their goal, and request the same of those you are asking for feedback from. This grade may be a bit arbitrary but it will allow you an opportunity to compare relative performance of your competitors.
General Design Research
Look at some of your favorite sites, preferably outside of your industry. Go on a hunt. Identify a number of sites and understand why you like them and what parts you like about them. Ask yourself the same question from step one, “What are they trying to get me to do?”
As with your competitive analysis, you’ll want to grade your favorite websites with a relative grade (e.g. 1-10). You probably won’t necessarily be looking at them from a perspective of what they are trying to get you to do because these favorite sites might be too different from your core business. However, if you find something compelling, be sure to take note of that.
Start mocking up your site by creating pretty variations of your wireframe. This is where the designer gets a little bit of creative license. Talk with him or her about what you like and don’t like. If you have the budget and time, create at least two different mockups and compare them against each other. These can be done in design programs such as Adobe Photoshop or Illustrator if you like. Some artists may even prefer to do the mockups directly in the Web browser, and there are some advantages to that. Whichever way you choose to do it, make sure you have flexible options that you can consider and beat up.
Critically Analyze the Mockups
Look at the mockups and honestly compare them. Ask yourself if they fulfil your business requirements. Do they follow the strategy that you set forth? Don’t let your artist take so much creative liberty that it changes your overarching strategy. You may need a few rounds of changes before you feel confident that you have accomplished what you are trying to accomplish, and it may take longer if your artist is “too creative” hasn’t designed for the Web much before or if you haven’t done a good job communicating your wishes. Above all, ask yourself and your advisors, “How does this adhere to our primary objective?”
Bringing it all Together
With content in hand, wireframes that show your layout and pretty graphics that make your website look like raindrops and lollipops; you’re ready to give your website programmers the go-ahead to start building the site.
A good strategy and thorough design will help you avoid costly delays in the implementation (programming) phase of your site. It will help your content match your graphics while helping the site achieve its goal (whatever that may be). If problems do arise, your clearly laid plans will aid in quickly overcoming small issues, getting the project back on track and staying within budget.