Webmaster's note: This all emcompassing guide is a precious fount of knowledge for especially the newbie web designer, and although it may seem tediously lengthy even in this condenced version, we urge you to read it and implement its extremely sensible principles when planning and designing your web
By Ben Seigel, dd 9 June 2011
Planning is essential for most businesses and organizations. In practice, many people fail to plan their websites. Sometimes the ever-busy, dynamic nature of running a business is to blame; there are so many operational demands that proper time is not allotted to projects. But this often happens because people fail to recognize that planning for the Web is just as important as planning for anything else in a business.
From a Web professional’s perspective, developing a 50-page website for six unique stakeholders is far more complex than building a rectangular wooden deck. A deck is a physical structure built in stages. You can look out the window and see the progress. In contrast, a website has a number of technical and administrative steps that aren’t visible to all.
Clients don’t necessarily understand the efficiencies gained by up-front assessment. Ten hours spent on a needs assessment can save 30 hours of development time. Discovering the needs of a client halfway through a project is a recipe for headaches, extended development time, cost overruns and missed deadlines. As you’ll read below, failing to recognize and pay for proper planning creates big problems.
Now we could potentially start using business-speak, as in “Assemble your key internal stakeholders.” That’s another way of saying: “Get everyone together who has something valuable to contribute.”
The website must work in concert with the overall marketing plan. The needs assessment for the website might overlap with the other efforts and approaches of the marketing department, which is fine. This is outside the scope of this article, but note that the established branding and marketing of the business should inform the structure and design of the website.
As you prepare to add content to the website, think about who will contribute. In a five-person business, it might be just two of you, and that’s fine. In a large business or organization, 5, 10 or 15 people might be contributing content. The time required to edit and proofread both copy and visual content grows exponentially in proportion to the number of people who contribute content.
Unless you are creating the dullest, most technical website imaginable, your content should consist of more than just plain text. By using one or more of the following multimedia elements, you’ll greatly enhance the appeal and usefulness of the website:
Like other elements of a website, photos communicate the brand of the organization. Try to budget for professional photography. You don’t necessarily need a lot of photos, just good ones. Twelve professional images is better than fifty amateur snapshots.
If your budget doesn’t allow for a pro, then contact your local art school or community college and ask for a recommendation. A budding student photographer with a good eye will work for cheap in order to build a portfolio. If you have no budget at all, then take the photos yourself, but pay special attention to lighting, framing and focus… and hope for the best.
In some cases, when generic images will suffice, stock photography can be used. But there is no substitute for quality photos of your staff, storefront, products or services.
Good writing, like good photography, requires a skill that not everyone possesses. Writing for the Web is different than writing memos, policy papers and technical documents. You might write great technical manuals for precision machining tools, but that doesn’t mean you can write well for the Web. If your organization doesn’t have someone who can write clear and concise marketing copy, hire an expert. If you can write reasonably well but need some guidance, consider hiring an editor to polish your output.
Quick Writing Tips
Consider your audience and write accordingly. Try to see the business from the customer’s perspective. What do they care about?
Here is a useful approach when writing for the Web:
Reading on a screen is fatiguing. A screen, whether a massive 26-inch monitor or a diminutive smartphone, projects tiny points of light at your eyes. Consequently, reading long stretches of text on it can be very tiring. Users will scan for key points in the text, so short blocks of copy and bulleted or numbered lists are helpful because they’re easy to spot.
Here are the key elements in planning a website’s structure.
Your site map could be structured like a flow chart and built with software such as Visio or a free tool like Gliffy. Alternatively, you could create an outline with bulleted lists and indentations that indicate pages, sub-pages and other structural breaks.
Some content will be easy to define. A contact page, for example, is generally expected to include a business name, a location, contact information, hours (if applicable) and, often, a simple form. Other types of content require more consideration. This is another point when failing to carefully define the content will create headaches for you later on.
One way to help define content is to simply observe the functionality of other websites and see what might suit your purpose.
Here is a list (though not exhaustive) of common types of content. Remember, these are just types, not definitions:
Some of your content will relate to other content. For example, the same details might appear on different pages of your website. Map these relationships carefully, and remember that when content is changed in one area of the website, it might need to be changed in other areas for consistency and accuracy.
Design and content are intimately related, but they are also separate. This might be confusing at first. But it means that website content is completely free of design elements. To avoid speaking in hypotheticals, let’s consider a simple example. Let’s say your website has a set of articles. For each article, there is a:
These pieces of information constitute a whole article. At this point in the process, it doesn’t matter what design you apply to the copy: fonts, layout, colors, author photo thumbnails, etc. The content is valid even in the absence of design. It may not look pretty in plain text, but it reads correctly.
This separation neatly suits Web Standards, a project that advocates for a set of standards for Web design that makes content accessible to the broadest possible range of people and devices.
Then, when it’s time next to redesign your website, you can easily apply an entirely new design to your existing content, because you’ve maintained the separation between content and design.
Over time, the value of good meta data increases. If you have only 10 articles, then tracking authors and categories might not seem useful. In two years, though, when you’ve built up a library of 150, you’ll be glad you took the time to collect it. You will be able to sort by author, date and category. And because you’ve collected summaries, you’ll be able to make a version of your website for mobile devices, for which summaries are all that fit on the screen at once.
Once you’ve determined the structure of the content, you can move to the first step in the design process. Building wireframes mostly has to do with the layout aspect of Web design. They are done in grayscale and are designed not to be pretty but rather to show page layout.
Avoid aesthetic considerations completely at the wireframing stage, because that would distract from the purpose of the wireframe, which is to decide where things should go, not what font size to use or what color the navigation should be.
Generally speaking, one wireframe should be made for each unique page on a website. If you have a page that offers downloads or photo galleries, mock it up as well.
Once the wireframes have gone through your review process, it’s time to move to the design stage..
When it comes to websites, however, good design and attention to detail are often discounted. The reasoning is that if something works, it doesn’t need to be refined. This is misguided thinking. A website—along with a logo, business cards, signage, letterhead, direct mail and other visual expressions of a brand—critically affects the way customers perceive a business. The experience users have on your website is part of this impression. When a website is harmonious, pleasing to the eye and easy to navigate, visitors will leave with a positive impression. Conversely, when a website is just passable, it could annoy customers, leave a bad impression and discourage return visits. And, importantly, you likely won’t hear about it from them. The Web isn’t very old, but here’s a key question that has been relevant since the first business website went online: if a customer goes to a website to search for the specifications of a product that they know you sell and finds nothing, what will they do next?
They’ll leave. Typically, when users get frustrated, they don’t search any further, and they don’t call or email; they just leave the website. To get a sense of this, review your website visitor statistics (see the section below on bounce rates).
Still, these stats can’t tell you what a visitor was thinking when they left. And unless you’re selling something wonderful and unique, customers will probably go elsewhere to find a similar product or a different service provider.
The initial design, commonly created in Adobe Photoshop or Fireworks (and sometimes Adobe Illustrator), consists of visually accurate images (“mock-ups”) of the home page and at least one internal page. Your business’ visual branding elements should be included here. If you already have well-defined graphics in addition to a logo, they should dictate the design of the website. If your brand lacks these, then the designer should do their best to create work that accurately reflects the business.
After you have submitted the initial mock-ups for approval, there could be a revision process where the designer and key stakeholders go back and forth a few times, trying a variety of edits until the design is approved.
Generally speaking, in small businesses or organizations, allowing more than five people to provide design feedback creates gridlock. It would help if these five (or fewer) people solicited feedback from their subordinates or department colleagues, but this feedback should be compiled by each stakeholder. In other words, don’t invite 15 people to a design review meeting.
Think about future expansion. For example, you might have a news section with six news items. You’ll have a main news page with summaries, each of which links to the full view of the item. This is fine. But what happens when you have 10, 20 or 50 news items? Now you have other considerations. Do you want to archive old news? Paginate the items? Show only the last 10 items? Consider these questions in the design process.
For websites that accumulate content, such as news, press releases and reports, there’s a good rule to follow when creating mock-ups: you can never have enough mock-ups. In other words, if you think the layout or design of a page or section of the website will differ significantly from other pages, then mocking it up is worthwhile. This step normally comes after the initial mock-ups are approved.
The mock-ups and style guide are the foundation of the next steps in development.
After following these steps, you should be sitting on a pretty solid website. Regardless of the size of the project, now is a good time to do the following:
When you feel that the website is almost ready for the public to see, it’s time for beta testing. Go through this checklist (which is the bare minimum):
Once you’ve thoroughly beta-tested the website, launch it.