Publishers of technology books, eBooks, and videos for creative people

Home > Articles

Designing a Site from Scratch

📄 Contents

  1. Prepare to Plan to Prepare for a Development Plan
  2. Visual Site Design
  3. How to Structure Your Site
  • Print
  • + Share This
Site planning and file structure can get a little cranial, but it’s really important to know this stuff to build efficient, well-designed web sites. This chapter will help cure any web-induced migraine, so check it out.
This chapter is from the book

This chapter is from the book

Prepare to Plan to Prepare for a Development Plan

Nobody ever wants to plan anymore. People don’t have the time. They just want to get going. It’s like that scene in Spaceballs where Dark Helmet says to Colonel Sandurz, “What are you preparing? You’re always preparing. Just go!” Then he gets dumped into his seat. Good news, though: There’s coffee!

I’ll admit, planning isn’t the most glamorous thing to do, but I really enjoy parts of the process, like organizing content and especially coming up with a design template for the entire site. The more you can determine upfront, the easier the actual site construction will be. Most people are really eager to start building pages right away and don’t bother with any planning at all. Trust me, this results in a lot of extra time spent reworking pages, changing navigation structure, and so on. But before we get into the nitty, let’s cover a most important!

What Do You Want to Say and Who Do You Want to Say It To?

There’s a cold, hard fact in marketing, and I think it applies here. It may come as a surprise, but here it is (brace for impact): Not everyone wants what you have to give. It’s true. When asked who would buy their product, many inexperienced entrepreneurs immediately say “Everyone! Everyone will want my widget!” That’s why we see shotgun marketing like spam, mass flyer distribution, and telephone blitzes. The truth is, there’s a very specific group of people who will want an entrepreneur’s widget, and the same goes for your web site. Not everyone is as exited as you are about guinea pig migration patterns, conspiracy theories behind your neighbor’s vegetable garden, or the Travel Buddy comb/toothbrush/nasal trimmer toolkit.

If you can find out who your niche audience is, you’ll build a much better site. So ask yourself: Who specifically am I trying to reach, and what am I trying to say? Once you know that, then you can begin to tailor site content, navigation, and functionality to what your audience wants, not what you want. Would the Granny’s Club of St. John’s Anglican Church appreciate thundering death metal intro music? Well maybe. You know those wacky granny clubs... But seriously, design it for them. The idea is that if you can define who your site is for, you can focus your site’s design around that.

Get the Glue—We’ve Gotta Build a Navigation Model

There are four traditional models of navigation used online. These have been morphed and mashed together for different sites, depending on the content being presented. Have a look at each and consider which is best for your site—or consider using different models for different parts of your site as content requires. What do all those different page icons mean? See the sidebar “Web Page Types” later in this chapter.

Keep ‘er Straight with the Linear Approach

Before the web was born, our media was linear. A book has a page-by-page sequential order. A movie has a definite beginning and a definite end. But when the web came along, suddenly information could be conveyed in whatever order the visitor wanted. However, many sites still want to control the sequence of content, maybe for an online tutorial or a slideshow. These examples require a specific, orderly web page sequence that doesn’t provide a way for the visitor to jump to different topics or locations.


Long Live the Queen: The Hierarchical Model

Also called a tree structure, the hierarchical model the most popular navigation model online. With this structure, a site would begin with an opening page that provides several choices that link to main category pages, called landmark pages. Landmark pages provide links to more specific subsections. From this point, the site might branch into more subpages, getting more and more specific as the structure continues.


Burning Rubber with Spokes and Hubs

In a spoke-and-hub structure, the home page is at the center, with spokes linking to the different categories of the site. From these categories, the site might be organized into deeper structures, depending on the organization and content.


Get Your Fill with the Full-Web Design

The full-web or full-mesh style uses virtually no structure at all, with each page linking to every other page. This is great in that it allows visitors to explore the site in any way that they want, but navigation can get complex and frustrating.


Sorting Out the Types of Sites

There are all kinds of web sites, large and small, online. Here, we’ll take a look at the major types and the audiences they target. These site types are certainly generalized, and there are countless sites that fall into more than one category, or none at all. In addition, sites can be grouped into three categories according to who can access them: public sites, intranet sites, and extranet sites.

Public sites are the most common. They’re available on, and useable by, anyone on the Internet. There are no restrictions as to who can access a public site. Intranet sites are sites used within a company or organization to provide internal information to employees. Extranet sites are accessible on the public Internet, but users must have access privileges, usually a username and password are needed to log in.

The site types that follow typically fall into the public site classification, but theoretically they can occur in all three.

Cashing in on Commercial Sites

A commercial site is one whose primary purpose is to generate profits by providing goods and services to a body of customers. Some companies build commercial sites to support their “bricks and mortar” locations, while other companies are based entirely online, with no physical store that a customer could visit. Good commercial sites provide multiple ways to browse, search, and shop their catalog of goods. Consider, for example, the king of them all:

Get Informed with Information-Based Sites

If a site’s main purpose is to inform and educate, then it’s considered an information-based, or content-based, site. Such sites include government service sites, the sites of nonprofit organizations, travel information sites, and news sites. A small site for your church would count, but so would a massive news site. An interesting thing about news sites is that they all have a similar look and feel in their design and navigation. Compare with

TV’S Dead—Entertainment Site Takeover

Many everyday people have made names for themselves by creating sites that simply entertain the rest of us. An entertainment site might be the site of a funny online comic, a sports analysis site, or even a site where you can watch web-based movies. There are lots of them out there—but check out, a site that delivers a great message in a very funny and entertaining way.

Find Your Way with Navigational Sites

Search engines, community portals, and online directories are considered navigational sites, because they help people find their way around. Unless you know the exact site you want to visit, a navigational site will be your starting point. Many nav sites are now offering additional services to gain surfer loyalty. For instance, now offers e-mail, catalog searching, maps, and a zillion other very useful services.

Join the Club—Community Sites

Community sites provide a centralized place for people with similar interests to meet and interact, usually in online forums. Here, they can discuss current events, ask and answer questions, and share information. Whatever your niche or unique interests may be, there’s a group out there sharing ideas about it. If you’re a Lego nut (or if you’d just like a good example of a community web site), click on, an online community of Lego movie makers.

Expressive Artistic Sites

Artistic sites may provide content and information, but often these sites are a work of artistic expression themselves. Many artistic sites are simply a place for someone to express his or her opinion, feelings, or interests, with no economic considerations. My own site,, is entirely artistic—just a fun place to express myself creatively.

Personal Sites (Getting to Know You...)

Sometimes called a person’s home page, personal sites are often a forum for personal expression. Often, they’re used to share photos, stories, and recent events with friends and family members. Others use their sites to test and experiment as they learn HTML and web design. My friend Jason Allin has a great personal home page that he uses to keep others up-to-date on what’s new with his acting endeavors. Say hi at

  • + Share This
  • 🔖 Save To Your Account