 |
 |
| |
|
|
|
| |
|
This sampler focuses on 5 areas of web page design: the opening screen, navigation, graphics, photo treatments, and website tone. These examples will show you how other websites handle these elements. You may find a page in another section with a color scheme or style that appeals to you. The goal is to help you define what you would like to include in your website.
Also called the home or main page, the opening page is usually the first page a visitor will see when they arrive at most sites. Following are 4 types:
|
|
| |
|
|
Some opening screens, called splash pages, include only a single link, which allows the viewer to "enter" the site. This link takes the viewer to a home or main page, where the full navigation is presented and the visitor is required to click again to begin using your site. For this reason, the message the imagery conveys on the splash page needs to be compelling.
Guggenheim Museum
Clos du Bois Winery
SRJC Summer Repertory Theater
Southern Cross III
Some opening screens include partial or full site navigation in addition to being graphically appealing. They might include a single large image, or a collage of images to draw the visitor in. Unlike the splash pages shown above, the sites below all have navigation on the opening screen that allows the visitor to link immediately to other pages within the site.
National Gallery of Australia
Guggenheim New York
Niebaum-Coppola
Royal Riviera
Some sites have opening screens that are identical to, or closely mirror the look of the other pages. This doesn't necessarily detract from the visual appeal, and because this can allow room for plenty of textual content on the opening screen, or home page, it can result in higher rankings from search engines that search text. It also helps visitors know exactly where they are at all times.
Stacey Kamen
SAY
Return to the Top
|
|
|
| |
|
Navigation is one of the most important aspects of your site. It should be intuitive, easy to use and consistent across the site. As with the opening screen, navigation comes in several different styles. There is no right or wrong, but the navigational style you choose should lend itself to the volume and type of content you plan for your site. |
|
| |
|
|
One of the more common navigational options is a rollover effect. The link changes to a different image as the mouse rolls or hovers over it. The image rollover is a simple way to add a dynamic look to a site's navigation.
Kahn Design Associates
Villagio Inn & Spa
Wild-Eyed Alaska
American Photography
A remote rollover causes the image your mouse is hovering over to change and causes an image somewhere else on the page to change as well. Because an image changes in another area of the page the term "remote" is used.
Medley Global Advisors
Lomi
Leonardo da Vinci
This is type of navigational system allows sub-menus to display below the main categories. You can click on one of these additional menus and be taken directly to that page. This type of navigation works well for large sites where you want to give quick and easy access to each page from every other page.
ArtQuest
Robert Koch Gallery
The Douglas Group
Return to the Top
|
|
|
| |
|
Photographs, illustrations, and web graphics—these are the elements that bring your web pages to life. Effective graphical elements run the gamut from very simple and clean to elaborate and complex. What's important is that the graphics support the site's message and don't overwhelm or detract from it. |
|
| |
|
|
Some sites display unique graphical images within a consistent design layout on each page. The color may change on each page or the image itself may change. Either way, this technique can add variety to a site while maintaining a consistent look.
Calloway Coastal Winery
Cymbic Marketing
Planet Organics
Other sites display identical graphics from page to page. This can have the advantage of keeping the visitor focused on your message and confident of their location. Notice how each page looks the same in these sites except for the content.
Grown in Marin
Alibris
National Sustainable Agriculture
Photos add depth and interest to a page, many times providing the focal point. As you surf the web, you'll find photographs displayed with a variety of treatments. What's important is that photographic images are treated consistently throughout the site. Notice the different ways that photos are displayed in these examples.
Finnish National Gallery
Buena Vista Winery
Five Points Journal
|
|
|
| |
|
Effective websites convey a tone, a feeling that the visitor can relate to (or not!). The graphics, the colors, the fonts, and layout, are all elements that contribute to the tone of a site. These sites all have a unique tone. How would you describe them? |
|
| |
|
|
|
| |
|
|
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
