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

Source: http://www.smashingmagazine.com/

Why Plan?

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.

Common Results of Failing to Plan

  • The designer or developer is forced to make assumptions, which may or may not be correct, about how certain content will appear on the website.
  • The amount of back-and-forth communication about trivial matters can be multiplied many times over.
  • Backtracking causes delays and missed deadlines.
  • Work that falls outside the original scope of the project creates cost overruns.
  • Confusion and client dissatisfaction are byproducts of a shoot-from-the-hip process.

Needs Assessment
important things to remember:

  • Unless you’re building an intranet, the website is not for you and must meet the needs of your client.
  • A website is not an event. It is a flexible, extensible communications tool that reflects, negatively or positively, on the business.

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.”

aligning the website with the marketing campaign

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.

Determine Website Content

who’s responsible?

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.

Content Is Not Just Text

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:

  • Images;
  • Documents (usually PDFs);
  • Audio;
  • Video (i.e., embedded from YouTube or Vimeo, or self-hosted);
  • Adobe Flash files;
  • Content feeds (from other websites, for example);
  • Photos (from Flickr perhaps);
  • Twitter stream;
  • Facebook “friends” list;
  • RSS feeds.

The Value of Good Photography

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.

The Value of Good Writing

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:

  1. Write your first draft,
  2. Cut it in half,
  3. Cut it in half again,
  4. Add bulleted and numbered lists where possible,
  5. Send it to the editor.

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.

Determine Your Website’s Structure

Here are the key elements in planning a website’s structure.

Site Map

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.

Content Definition

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.

content checklist

Here is a list (though not exhaustive) of common types of content. Remember, these are just types, not definitions:

  • Articles;
  • Blog;
  • Banner advertising;
  • Discussion forum;
  • Documents;
  • E-commerce;
  • Forms for contact, quotes or something else;
  • Physical products (how many?);
  • Digital content (what kind and how many?);
  • Email newsletter;
  • Magazine
  • Network
  • Shop
  • Event calendar;
  • Event registration;
  • Link management (dozens or hundreds of links, ordered by category);
  • Incoming RSS feeds (pulled from other websites);
  • Outgoing RSS feeds (your content syndicated to other websites);
  • Search;
  • Social media sharing links (Twitter, Facebook, etc.);
  • Staff directory.
  • Job Board
  • Coding
  • Image gallery

Content Relationships

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.

Separating Design From Content

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:

  • Title,
  • Meta title,
  • Meta description,
  • Author,
  • Date of publication,
  • Category,
  • Summary,
  • Main text.

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.

Collect Meta Data, Plan for the Future

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.

The Value of Good Design

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.

Initial Design

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.

Design Approval and Revisions

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.

Designing-by-Committee: Don’t Do It

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.

Consider Content

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.

Web Style Guide

A style guide is where proper planning shines. A style guide determines and defines all the design, layout, interactive (i.e. JavaScript and Flash) and type elements used throughout the website. These include but are not limited to:

  • Navigation styles;
  • h1 through h5 (heading tags);
  • Paragraphs;
  • Lists;
  • Block quotes;
  • Italics, bolding and underlining;
  • Links, including active, hover and visited states;
  • Icons
  • Use of images and image style;
  • Use of background images (watermarks);
  • Common elements such as sidebars.

The mock-ups and style guide are the foundation of the next steps in development.

Putting It All Together

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:

  • Review the content once again, and check it against the points listed under “Writing for the Web” above.
  • Ask a third party to proofread all of your content. This is not the task of the designer or original writer. Bring in someone with a fresh perspective. Don’t proofread your own work.

Beta Testing and Launch

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):

  • The website looks correct in all targeted Web browsers. Web browsers include the usual Internet Explorer, Firefox and Safari, as well as (depending on the specifications) less common browsers like Chrome and mobile devices (iOS, BlackBerry, etc.);
  • Interactive features work smoothly;
  • Contact and other forms work predictably and send the correct information to the user and recipient(s);
  • Internal and external links work;
  • Images are sized properly;
  • All placeholder content has been replaced by the final copy;
  • Links from third-party software, such as email campaigns, work.

Once you’ve thoroughly beta-tested the website, launch it.