• You Are Here:
• Home
• Resources
• Articles
• Design Components

Design Components

These days, when creating a site, you could say that sites are modular. So many tools and widgets exists out there that for the most part, your designer takes the basic design structure, tools and widgets and marries them to your content to create your site. Yes, your content plays a role in the design, because most of the design is the content. The site itself serves as a container for the content, while the tools and widgets are employed to display the content in an attractive light. Below we have outlined considerations for the design and tools you may use.

Structure

The first thing to consider in your design is structure. Should the site be left justified on the page or centered? Typically, new sites are 2 columns or three, reserving the columns for indexes and advertising. e-Commerce sites, tend to use them for features products and specials. Sites that sell products or services sometimes use them for testimonials.

	Rounded Corner	Square Corner

Do you want rounded corners or square?

	Sample layouts displaying divs, columns, corners.

Navigation

Nav menus are driven by code and can be horizontal (across the top of the page), or vertical ( typically down the left side. You want to plan which menus drop down (if any).

	Typical horizontal nav menus. These menus can be found at: http://www.cssmenumaker.com/

Colors

The color palette of your site sets the mood of the potential customer and should reflect the industry you are in. Typically, Entertainment and media sites are black, while corporate sites tend to be Blue or Green and Silver. If your site has a lot of image content, it's best to stick to Black or White for the background color. Accents lines and borders should be "web safe" colors to prevent color saturation in browsers.

	This chart of web safe colors can be found at: http://www.colortools.net/color_chart_web-safe.html

Fonts

For the most part, fonts displayed on HTML pages are limited to families. The browser will attempt to load fonts from the user's machine from left to right. If it does not find the first font, it moves to the next font and so on. Below is a list of the basic font families available to use on your pages. ** There are special routines that allow the use of other fonts, but addressing that is beyond the scope of this document.

	This chart of fonts can be found at: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Widgets

Pop-Up Windows | Slide Shows | Scrollers | Marquees | Faders

• 
• 
• 
• 
• 
•