HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [336]
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. See the sidebar “Semantic navigation.”)
♦ 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. For example, I organized the degrees from undergraduate to PhD programs.
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.
Creating Page Templates
If you’ve developed a site diagram, you should have a good feel for the overall requirements of the Web development project. You should know how many layouts you need and the general requirements for each one. Your next task is to think about the visual design. Here are some guidelines:
♦ Get help if you need it. Visual design is a skill that requires insight and experience. If you “design like a programmer” (I sure do!), don’t be afraid to get help from a person who has design sensibility. You still need to translate the design into code, however.
♦ Identify unifying design goals. All pages on the site have certain characteristics in common. Find out the overall color scheme, whether you will have a logo, and whether all pages will have the same header and retain the same fonts throughout.
♦ Identify a primary layout. Generally, a Web site requires one major layout that’s repeated throughout the site. Often, the main page does not use this primary layout, but most internal pages do. Determine, for example, which broad design elements can be shared by most of the pages, whether every page has a headline, whether you need columns, and how important images are.
♦ Identify specialty designs. The main page is often a bit different from the other pages because it serves as an overview to the site. Likewise, if you will be repeating certain kinds of pages (the course pages and faculty pages in my university example), you have to know how these designs differ from the primary layout. Keep design elements as consistent as you can because unity makes your job easier and ties the site pages together.
Sketching the page design
Do not write even a single line of code before sketching out some design ideas. Figure 2-4 shows a page sketch for my sample site.
Your page sketch gives