Graphics Reference
In-Depth Information
You present a better impression if your page architecture is equally consistent.
Every page should be the same size, with all major elements in exactly the same place
on the page. If your page will scroll vertically, the width of the layout should not
vary. If your page will scroll horizontally, the depth should be locked instead. Every
page's content should reflect an underlying grid. Images should appear in the same
area, even if their dimensions vary.
After you have dimensions in mind, divide the page into equal-sized columns.
Use these columns to help you position your elements, and to make sure that they all
line up. Use combinations of these columns to help you determine how much space to
allow for each type of thing.
Layout follows content
A portfolio site usually contains three types of material: unique page content
(images, captions, explanatory text), navigation (links to main groups, secondary nav-
igation to get you around inside a group), and global information (branding, contact
info). Your portfolio might also include tutorials, news, a section for experimental
work, or a portfolio highlight. You'll want to account for all of it.
When you actually start to design, use real content instead of greeking (gibber-
ish placeholder text). Find your largest image, your longest caption, your deepest
description. Draw outline boxes representing the image dimensions and the approxi-
mate text block sizes.
Linking decisions
Before you can lay out your navigation, return to your grouping decisions. If
you were able to see a method of grouping your work in more than one way, your navi-
gation and linking will be affected. In most cases, you can't combine the two groupings
in the same nav bar area. Maybe one version should be reflected in your main nav bar
and the other available as links from a separate page.
Make it easy to back up a level in your hierarchy, and jump between branches.
Visitors shouldn't have to hit their browser's Back button to return to the beginning of
a section.
Navigation menu layout
Use the same strategy for planning your navigation space as you do for your
content. Account for all navigation levels so they won't extend into the portfolio con-
tent. Roughly sketch out how your navigation will be arranged when it's at its most
expanded state. Try both vertical and horizontal orientations. You'll discover that one
will probably work better than the other.
Search WWH ::




Custom Search