How to Build an HTML5 and CSS3 Site Plan - dummies

By Andy Harris

Often, the initial work on a major site involves creating a plan for the HTML5 and CSS3 site design. Doing this step early helps you see the true scope of the project. A site plan is an overview of a website. Normally, it’s drawn as a hierarchy chart.

Imagine you are asked to help design a website for an academic department at a major university. The first question is, “What do you want on the website?” Write down everything.


Ask your client what they want. After all participants suggest everything they think their site needs, shoo them out of the room. Using only paper and pencil, create a more organized sketch based on how you think the information should be organized.


How to create a site overview

Keep these suggestions in mind while creating a site overview diagram:

  • Use the Law of Seven. This law suggests that people generally can’t handle more than seven choices at a time. Try not to have more than seven major segments of information at any level. Each of these can be separated into as many as seven chunks, and each of these can have seven chunks.

  • Identify commonalities. While you look over the data, general groupings emerge. In the university example, you could easily see that you had a lot of course data, degree information, information about faculty, and research.

  • Try to assign each topic to a group. This is a form of data normalization here. This data structure isn’t necessarily a formal one, but it could be.

  • Arrange a hierarchy. Group the topics from most general to most specific. For example, the term course info is very broad. N100 is a specific course, and it may have many sections (specific date, time, and instructor combinations). Thus, it makes sense to group sections under N100 and to group N100 under courses.

  • Provide representative data. Not every single scrap of information is necessary here. The point is to have enough data so you can see the relationships among data.

  • Keep in mind that this diagram does not represent the site design. The purpose of this type of diagram is to see how the data itself fits together. Of course, this diagram tends to inform the page setup and the menu structure, but it doesn’t have to.

  • Not each box is a page. It might be, but it doesn’t have to be. Later in the process, you can decide how to organize the parts of the site.

Building this sort of site diagram is absolutely critical for larger sites, or else you never really grasp the scope of the project. Have the major stakeholders look it over to see whether it accurately reflects the information you’re trying to convey.

How to build the site diagram

The site diagram is a more specific version of the site overview. At this point, you make a commitment about the particular pages you want in the system and their organizational relationship.


The site diagram is a bit different from the overview for these reasons:

  • Each box represents a page. Now you have to make some decisions about how the pages are organized. Determine at which level of the overview you have separate pages. For example, are all the course sections on one page, or all the sections of N100? Does each section of each course have a different page? These decisions will help you determine which technologies to use in constructing the page.

  • The site diagram still doesn’t need every page. If you have 30 classes, you don’t need to account for each one if you know where they go and they all have the same general purpose and design.

  • The navigation structure should be clear. The hierarchy should give you a clear navigation structure. (Of course, you can, and often should, add a secondary navigation structure.)

  • Name each box. Each page should have a name. These box names translate to page titles and help you form a unified title system. This arrangement is useful for your navigation scheme.

  • Identify overall layout for each box. Generally, a site uses only a few layouts. You have a standard layout for most pages. Often, the front page has a different layout (for news and navigation information). You may have specialty layouts, as well. For example, the faculty pages all have a specific layout with a prominent image. Don’t plan the layout here — just identify it.

  • Sort out the order. If the order of the pages matters, the site diagram is the place to work it out.

The goal for this part of the site-planning process is to have a clear understanding of what each page requires. This information should make it easy for you to complete the data and visual design steps. The site diagram is an absolutely critical document. After you have it approved, print it and tape it to your monitor. It’s your map for the rest of the project.