Digital CALM

Design Toolbox

  • Color
  • Layout
  • Variations
  • Menus

Color

Mouse over the color spectrum to view this page in different colors:

colors Blue Dark Blue Violet Pink Red Orange Yellow Light Green Green Blue
Royal Blue
Violet
Pink
Red
Orange
Yellow
Chartreuse
Green

Layout

Layout determines the major areas of your web page. Most pages have a header, a menu/navigation bar, a content area and a footer. The amount of content on your site will determine which layout is easiest for your users. What are your preferences?

Fixed vs. Elastic Width

These examples show a page with a header, a left sidebar, middle content area (white) and right side bar.

Fixed
 
Fixed Width
Width of the contents area remains at a preset width regardless of the size of browser window. The excess area is usually filled with a background color, gradient, or image.
Elastic
Elastic (Fluid) Width
Width of the contents area stretches to fit the size of the browser window.

Number of Columns

These examples each depict a header area, content area, and possible sidebars

Single Column
1 column
The content area is displayed in one column without any sidebars. The navigation is contained in the header area. This site is an example of the 1 column, fixed width layout.
2-column Left Sidebar
2 column, Left Sidebar
The content area is divided in two columns with a left sidebar. The sidebar can be used for navigation and search forms.
2-column Right Sidebar
2 column, Right Sidebar
The content area is divided in two columns with a right sidebar. The sidebar can be used for navigation and search forms.
3-column
3 column, Left & Right Sidebar
The content area is divided in three columns with a left and right sidebar. The left sidebar can be used for navigation and search forms. The right sidebar can be used for either internal or external advertisements.

Seasonal/Holiday Banners

Halloween

Halloween

Thanksgiving

Thanksgiving

Christmas/New Years (animated)

Christmas

Patriotic

Patriotic

Change your site seasonally or for holidays with a special banner. Mouse over the holiday banner and the banner at the top of the page will be replaced.

Seasonal/Holiday Skins

Carry the seasonal or holiday theme further with skins. Click on the link to open a new window with the seasonal skin.

Menu/Navigation Types

The amount of pages on your site and it's organization will determine which menu type is best suited for your site. Here's a sample.

List

If your site doesn't have many pages, a simple list may be sufficient. The menu can either horizontal or vertical. Here's an example of a vertical menu.

Pop-up

Sometimes referred to as fly-out menus. This can be used when you need sub-menus, but is best for only 2 or 3 levels of menus. Here's an example vertical menu with pop-ups.

Accordian

This type is very useful for sites with major divisions and long menus. Only the active menu is displayed. The other menus are hidden. Here's an example.

Tabs

Tabs can be useful if your site has few pages or is divided into major sections.

Home About Us Policies

 

Tree

A tree-structured menu can be very helpful when navigating web sites with lots of pages.

 

© Digital CALM, Inc.