www.csn.edu Sitebuilder Support

Design your page

Color, layout, and other graphical elements

Personal preferences are fine when designing but remember this is not a personal web page, and the main focus is to grab and hold the attention of your reader. Design with the end result in mind.

CSN uses the Site Builder Content Management System (CMS) to provide consistency to the design and overall look of web pages. This is a plus since you do not have to deal with great amounts of formatting. It is already done for you.

Www.csn.edu uses three main colors - white (#ffffff), black (#000000), and blue (#006699). It is important to stay with these colors as they bring consistency to our site.

We use these colors because they represent our branding and function well together. Dark-colored text on a light-colored background is easier to read than light-colored text on a dark-colored background. Black text against a white background provides the most contrast and degree of readability. Never use two colors that blend together such as orange and yellow since they provide the lowest degree of contrast reducing readability. This is also good a good rule of thumb to follow since our site must be American Disabilities Act 508 compliant:

"Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

Color's can't be the only way you identify elements or controls on your page. The page may be confusing for people who are color blind, blind, or have low vision.

What this means is that you can't say "Press the green arrow to start, the red arrow to stop." Color blind users can't possibly know which one is which. Also, highlighting text red (or any other color) to indicate emphasis on that word or phase should be avoided. Again, you are blocking access to many users who can't see it. You should always use bold when emphasizing text.

You can always turn your screen to black and white, or print the page in black and white, to test the page. "

This is hard to get wrong with the CMS. It ensures our text sizes are standardized and consistent. There are ten formats of text to use under the format menu.

Our main text colors are white (#ffffff), black (#000000), and blue (#006699). In rare cases may the text color need to be changed such as in the row above where it says text properties. The default is automatically for black text which is hard to see since there is not a lot of contrast between the two colors. Notice that I stayed consistent with the site colors by using white.

The alignment of text should always be left justified. Pages automatically default for left justification within the CMS. Avoid the use of center-aligned text. You want your readers to be comfortable with what they are reading, and most text is left aligned.

Never use the color red.

Never use all capitalized letters. This gives the appearance of shouting at your visitors.

All hyperlinks should be clear to readers. Graphic images, such as buttons or tabs, should be clearly labeled and easy to read. If you decide to create your own buttons, banners, or graphic elements, you should pay special attention when selecting the colors, backgrounds, textures, and special effects. It is more important that your navigational buttons and tabs be easy to read and understand than to have "flashy" effects. The KISS rule goes into effect with graphics - Keep It Simply Styled.

The CMS automatically colors text links. It is usually good to bold the links as well to give them greater emphasis.  The reason for this is text links should be unique -- they should not look the same as any other text in your web pages. You do not want people clicking on your headings because they think the headings are links.

Users should be able to find what they are looking for within our site within three clicks. If not, they are very likely to click off our site as quickly as they clicked on.

Just as in any document formatted on a word processor or as in any brochure, newsletter, or newspaper formatted in a desktop publishing program, all graphic images and elements, typefaces, and colors should remain consistent throughout the whole site. Consistency and coherence in any document, whether it be a report or a set of web pages, project a professional image.

For example, if you use a drop shadow as a special effect in your bullet points, you should use drop shadows in all of your bullets. Link-colors should be consistent throughout your web pages. Typefaces and background colors, too, should remain the same throughout your site.

Color-coded web pages, in particular, need this consistency. Typefaces, alignment in the main text and the headings, background effects, and the special effects on graphics should remain the same.

Since, we use a CMS, most of this is already done for you.