 |
|
 |
|
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. |
| |
|
|
|
|
|
