• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 2. Creating Effective Layouts > Creating Order from Chaos: Consistency ...

Creating Order from Chaos: Consistency Is Your Friend

Always remember that consistency is your friend. Being creative doesn't mean that each page of a site becomes a freestanding document with its own design. Apply creativity on a global scale with the entire site being treated as a whole and consider both sides of your site in this. You must include both the front end (the stuff your user sees) and the back end (all the files that make it work) during this phase and the site‐map‐building phase. (See Figure 2-2 for a sample site map.)

Figure 2-2: A site map shows the structure of a Web site.

  • On the front end, consistency involves a cohesive and uniform layout for all pages. Banner, global navigation, and main content areas need to be located in the same places on every page. (See the later section, “Including Things That Every Page Needs,” for more about the banner and other necessary elements.) Using the Web site should not feel like a task in itself; the site should be a transparent delivery system for your information. If a layout is not working for all of your content, rethink your layout.

    As with anything, there are a couple of exceptions to the “always be consistent” rule:

    • Creating a home page that has a different layout: If you choose to do this, all the elements should have a common look and feel to the rest of the site. Navigation elements should have the same style throughout the site so that users understand that they are used for navigation. The names on buttons, colors used, and style in general must be consistent throughout the site.

    • Launching multimedia elements into a separate, smaller window: If you do this, make sure the content has a consistent look and feel with the rest of the site. Figure 2-3 shows an example of launching a multimedia element in a new window. Note how the elements in both windows share a common look and feel. This signals to users that, while different, these pieces are part of a whole.

      Figure 2-3: Sample of a Flash piece launched into a secondary browser window showing a different layout, but consistent style to the rest of the site.

  • On the back end, consistency involves employing file organization. The back end of your Web site is the collection of documents, images, media, and other elements that make it all work. Any project, no matter what the size, should have a planned file structure. Put images in a folder together; group content documents in a logical way. Develop a standard way of naming files, explain the naming convention to other team members, and stick to it. This task might take you more time in the beginning, but as the site grows, you'll benefit from huge time savings in maintenance. Sharing the work with others, if you need to, is also easier if file organization is implemented and adhered to.

    Whatever naming conventions you create, make sure that you and your team members stick to them and especially make sure that your system is logical, easy to follow, expandable, and Web legal (that is, use file names that work on the Web). Avoid names like IMG001.jpg and pagetwo.html. These types of names end up causing confusion because they are not descriptive. Maintenance can become difficult when file names give no clue about what they are.

    One common way of labeling folders for Web documents is to match them to the major navigation areas. For example, if your global navigation includes About Us, Our Products, and Services links, your file structure can include folders named About, Products, and Services. All Web documents pertaining to those areas are then organized by how they logically appear. In a similar fashion, include information on the type of graphic (such as a button, icon, thumbnail, and so on) and sometimes the size dimensions (for instance, 50 x 10) in a graphic file name. For example, you can name the file for your About Us button about_but_50x20.gif.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint