Home / Resources / Techniques / Structure
Icon or Spacer Macromedia Website Production Management Techniques Phase 3: Structure
Page View

Screen schematics, also referred to as page schematics or wireframes, are storyboards which outline content, navigation and basic functionality. Screen schematics should be non-design-oriented sketches of individual screens or pages in the site—showing rough navigation, copy layout, graphic allocation, key headers and other elements that might appear on a screen. Screen schematics should show a certain hierarchy of information, but often do not dictate exactly how or where something should be placed. Screen schematics provide the pieces of the puzzle that can then be rearranged and reorganized by the information designer. A screen schematic can be as simple as showing just the content layout and navigational organization of key pages within a site, or as complex as showing copy, functionality, links, navigation and graphic content in a more detailed format.

Screen View
Breakdown of information into a screen-by-screen format. Creation of screen schematics, also called page schematics or wireframes, shows primary and secondary navigation, main areas of content and functional details of the screen, such as file names, error messages, or form field properties.

Creating Screen Schematics
Screen schematics are created using a variety of programs. Depending on the level of detail desired, teams utilize Macromedia FreeHand, Fireworks, Dreamweaver, and even Microsoft Word to outline the content, navigation and functionality of individual screens. Determine the fundamental navigational organization (primary and secondary navigation as well as text links/buttons), along with descriptions of imagery, media and text. Give a copy overview—the copy on the screen schematic is usually "lorem ipsum"-type placeholder text, but should be a good indication of suggested text length per screen. You want to convey general information without allowing the client to get hooked into proofing or editing copy. Screen schematics carry more than simply content; they can also address production specifications and basic functionality (DHTML, JavaScript, etc.) Screen schematics aid in communication and are the basis for future HTML production and application development, so they are usually completed for all main, secondary and templatized screens that contain similar content, placement and layout.

Scope and Expectations
Time, budget and expectations usually dictate how many screens are spec'd out in this format. Be sure to estimate for the time it takes to do this job properly. Sometimes 20% or more of the budget can go straight to the information architecture and design stage. Whether you have a dedicated information architect or you are a designer wearing both project manager and information design hats, it is important to realize the importance of this step at this stage of the game. This is particularly true for dynamic sites, where the engineers involved add to the diversity of the production team.

Determining Navigation
Connecting the user with content is most easily handled through clear navigation. Buttons, links and graphics can be used from each screen to maintain a sense of place. Users need to stay oriented to where they are in the site, where they need to go, and how to get back to where they came from. Having a consistent layout grid helps to orient the user and keep them from feeling lost. As a user moves from screen to screen, make sure there are familiar visual cues and navigational aids.

Outlining Content and Functionality

Naming of buttons and labels should be consistent throughout the site; the tone should also be the same. Determine at this stage what type of cues or aids will be necessary to clarify naming, labeling and navigation from one page to the next. A shopping cart may be called "cart", but by adding a visual cue such as an icon of a shopping bag, the user has a much clearer idea of what that icon or button means. Icons are useful, but only if they are clear and meaningful. Consistent labeling means that a voice is established and carried through the entire site.

There are Web standards emerging for naming, labeling and icon treatment. A shopping cart icon is universally known to mean the area that holds your items before purchasing, but it is often called by other names such as "shop", "cart" or even "bag". Make a conscious decision about what universal icons or labels you will have on the site, and also what elements you may want to set up based on your own internal standards.

Address Technical Standards:
Make sure (from the define phase) that you have identified your technical standards—target browser size (800 x 600 which is in reality 760 x 420), target download size (30k per page), target connection speed (56.6k) and platform (PC). Include this information on your screen view layouts as part of the information section to keep designers and HTML production artists on target at all times.
Analyzing Your Industry
Understanding Your Audience
Goals and Objectives
Creating a Project Plan
Establishing Requirements
Site View
Screen View
User View
Design and Prototype
 Build and Test
Evaluate and Maintain
Online Forums