Design Sampler for Cultural Arts Council of Sonoma County
Websites consist of several important elements that will run throughout the site. It is best to decide upon these factors in the beginning stages, to insure a cohesive and professional design. These elements consist of opening screens, navigation, layout, color, fonts, and picture treatment. There is necessarily no right or wrong way in what choices you decide on, but we all know that there are good and better ways that will result in a wonderful design.
Opening Screen
This is the first page visitors see when they arrive at most sites. The opening screen is also called the "home" page or "main" page. Opening screens have several looks. You need to decide whether or not you want a splash page, a unique home page, or a home page that looks like all the other pages of the site. Let's take a look at these:
1. A Splash Page
A Splash page is basically a digital version of a book cover. It looks nice and sets the tone for the book/site, but offers no relevant information. It usually contains a single image, collage, and possibly a quote or some minimal text, and only a single link which takes the viewer to a home or main page.
In the fast paced world of the web many internet users dislike splash pages; they merely slow you down. It's another doorway to go through before getting the desired information. Often Splash pages take a while to load as well.
Here is an example of a Spalsh page in the real world:
SRT - When this site was created the client wanted a "dramatic' opening screen and wanted all the pages to be black or red. (colors they felt were dramatic). The clients also wanted to emphasize their logo and the photo which is associated with SRT. The designer compromised by creating a solid black splash screen which set the tone for the entire site. Once you go beyond the splash screen you see a home page which looks very much like all the other pages at the site.
SAY - This is a typical splash page with no Flash enhancements. It has pictures and a slogan with no other information.
2. A unique home page
These are my favorite kinds of home pages. They share the sites colors and develop the starting point for the site's layout. Usually the layout on the front is larger with more room for pictures and a focus on the logo. The second level pages would then use the same structural ideas and contrast with the home page nicely to achieve a sense of unity without being boring. They can be designed in a variety of ways.
Here are some examples in the real world:
Puente - Bold colors & images were used to draw latino teenagers into this site. The site is very similar in its design yet the home page has its own expression, unique from the rest of the pages.
A Walk in the Garden - This site has a very attractive opening screen. It uses the same colors as the rest of the site. When you open up one of the second level pages you see a hint of the same structure idea.
SRJC Theatre Arts - Several images combine with a few lines of text for a very graphical opening screen. Navigation displays at the left. The second level pages share these ideas but are carried out in a slightly different fashion.
Shook-C Chung - This is a designer's portfolio. They have a creative opening screen which opens to second level pages. These pages use a cropped section of the opening screen as the banner for the rest of the site.
3. An opening screen which looks almost exactly like the other pages at the site
Having no distinct home page (differing in design) gives a site a corporate look. More of a portal for linking its visitors to scores of information rather than hoping to keep the viewer within your site.
Here are some examples in the real world:
Calistoga Chamber of Commerce - This site has a lot of information for the visitor to access. It's design is common throughout the entire site, with it's main focus on linking the viewer to information.
Trillium - The image of the trillium flower and simple color scheme make for a fast loading and easy to navigate site.
Churchill Club - This site is very attractively designed. It shares the same basic header design and side navigation throughout the pages.
>>top
Navigation
Navigation is an extremely important feature at your site; it's the fingers that turn the pages in your book. So you will want to choose a navigational system that is easy to use and accurately directs the visitor to the correct area of the site. Let's take a look at some navigation options:
1. Simple Rollovers
A simple rollover on your navigation bar is when the text changes color whenever your mouse is hovered directly over that link.
Here are some examples in the real world:
SAY - The text color changes slightly and an asterisk appears next to the text as you roll over the navigational items.
Etiquette Formal Wear - The background behind the link changes color when you hover the mouse over the text.
2. Remote Rollovers
Remote rollovers are a lot of fun. When you rollover a specific link a different area of the screen will change. Sometimes the areas that change are pictures that correspond to the link you are currently hovering over, or rather than a picture, it could be a slogan.
Here are some examples in the real world:
Lomi - The 3 main categories near the top of the page will produce sub menus as you roll over each item.This helps visitors understand what information will be included in each section.
Creative Arts Therapies - The button color lightens and the image at the right also changes.
Women's Voices - Text color changes and the inner image within the circle changes as we roll over the navigational items.
T. Rowe Price - When you rollover the links the slogans above the navigation area change in relation to which link you are over.
McCall's Patterns - When you hover over the pattern names, the area darkens and displays more text as well as a new graphic on the right hand side of the screen.
Winnetu & Mattakesett - When you rollover the links on the very top of the page, they change color and the pictures below slightly fade out.
3. No Rollovers
Don't think you have to have a navigation bar with rollovers. There are many attractive sites which do not include rollovers in their nav bar.
Here are some examples in the real world:
Stay Sonoma - The navigation bar at the top doesn't have any rollover effects when you hover over the links and yet it is attractive.
Glasbern - The navigation bar on the side also includes no rollover effects.
4. Pop Out Menus
Pop out menus are good when you have too many page sections to attractively display all at once. You group the related sections together and just show those main categories. Then when you rollover one of those sections it will expand down, showing the rest of the page names.
Here are some examples in the real world:
Hennessey House - The navigation bar has sub categories that pop down when you rollover the main sections.
Save the Turtles of Parismina - The pop out portion of this menu displays to the left of the button.
>>top
Colors
This area can be one of the most influential aspects for achieving a desired tone in your website. Let's take a look at these:
1. Complimentary Colors
Complimentary colors are colors that are opposite of each other on the color wheel. Opposite colors tend to have a lot of contrast, which is very attractive to the eye. When the colors are muted by adding black or white to the color, the contrast is lessened.
Here are some examples in the real world:
Roman Empire - This site has a wonderful use of complimentary reds and greens in muted tones. The yellow ochre and pale yellow colors act as a unifying element, making the colors harmonize together. The duo toned photos in the upper left and the colors in the artworks harmonize as well.
HGTV Store - These colors have been muted by black which lessens the contrast - yet it still is attractive.
2.
Monochromatic
Colors
When you limit your palette to one hue, it is easier to create a harmonious composition.
Here are some examples in the real world:
Three Mountain Inn - This site mainly uses shades of brown.
Olay - This site just uses shades of gray. It uses hints of other colors but the main color theme is black. Very nice though!
Stephen Foster - This site is a monochromatic symphony in oranges and browns. The use of velvety orange and browns creates a definite mood and suggests a sense of history, aging paper. The duo tone treatment on the small photos resonates with the monochromatic scheme. The photo of Stephen Foster looks to have been colorized with orange and brown tones.
3.
Analogous
Colors
Analogous schemes use colors next to each other on the color wheel which tend to be harmonious. Blues and greens promote the feeling of peacefulness and nature.
Here are some examples in the real world:
Honor Mansion - This site uses a muted green and a muted vanilla cream color which are close to each other on the color wheel. It also uses a gray; this site has a nice feel to it.
Fenwick - This site uses two colors that are very similar and then lighter shades of them as well. This is a beautiful combination.
Animated Dogs - This site uses dusky colors, colors that have been muted from their pure form with white or black. This type of color scheme has low contrast, which is easy on the eye.
>>top
Fonts
Fonts are really fun to work with and add so much to your tone and feel. Most often on the web we use san serif fonts for the body of the page. The headers and links can be in something a little more descriptive though. Let's take a brief look at these:
Here are some font samples in the real world:
Churchill Club - This site gives the page name and a copy of the page name directly behind it in a larger point size and grayed out. This is a fun treatment if used appropriately.
Emily Michael - This site doesn't use any capitals in any of its headers or navigation. This contributes to a modern feel.
6 Degrees of Celebration - This site uses a very attractive script for the title and then a small cap font for the links and pull quotes.
Inn at Occidental - This site uses a large san serif font for the page titles and sub titles but uses a contrasting italicized font for the pull quotes.
>>top
Picture Treatment
Pictures are worth a thousand words! And how much more true when displayed in the best possible way! Let's take a brief look at some pictures:
Here are some examples in the real world:
Have Your Cake - A slide show is an excellent way to display a lot of pictures. Here you click on the thumbnails and view the larger picture on the right hand corner of the screen.
Sayre Mansion - This site adds a white hairline stroke around each photo. This adds an elegant tone to the site and seems to complete the photo.
Future Education - This site uses few pictures. The ones that are used are very cropped (zoomed in view of the picture).
6 Degrees of Celebration - Black and white pictures can be very attractive.
Eventologie - This is a picture collage combined with strings of dots.
SRJC - This is an example of a picture collage where the pictures blend into each other.
>>top
|