The principles of Web design are the same as the principles for design in general. With these principles you can create Web pages that are put together in an effective and artistic way. If you learn the principles of design, you’ll have Web pages that look better and work towards their goals in a clear and efficient way. Color and contrast are as essential as any other elements in Web design.
Color is a basic element of design, but what many designers don’t realize is that it’s not a required element. Some of the best designs are done with only black and white or just a touch of one color. When you’re starting to create your Web page, keep in mind that there are many ways to add interest and vitality to your site. A great way is to use color. Color can be used in tables, as backgrounds and fonts.
There are different ways of adding color to your pages. One of the easiest ways is to used named colors. These are just what you think they are: color names like red, blue, green, and purple. But some browsers don’t render color names or they render them differently than other browsers. So, that’s why it’s better to use hexadecimal codes for your color names.
These are the codes that define colors. They are groups of three hexadecimal (base 16) numbers. The first number is red, the second green and the third blue. Each hexadecimal number is an RGB triplet. 00 is the lowest hue and FF is the highest. For example, red is ff0000, blue is 0000ff, green is 00ff00, and purple is 990099.
Using CSS to add color is easy. The most common method of putting color in your documents is with the <style> attribute. Choose the color you would like your text to be, enclose it in a span tag, and use the style attribute to assign a color. e.g.
<span style=”color : #ff0000″>red</span>
Another way to add color is to use it as a background color on tables. Just add the background-color style to the table, tr, td, or th tags. You can add color to your entire page with the on your body tag. e.g.
<body style=”background-color: #0000cc;”>
You can do some interesting things with CSS and color. You can change the font color.
<span style=”color : #0000ff”>change the font color</span>
or change the background color behind the font.
<span style=”background-color : #ccccff”>change the background color</span>
Similarly contrast in design is an accentuation of the differences between elements in a design. Most people think of contrast only as it applies to colors, but contrast can work with any design element. For example, if you have a group of lines that are all the same size, there is no contrast. But if one is a lot longer than the others, it contrasts with them.
When applying contrast to Web designs, think beyond color. Color contrast can easily be overdone. But by using more subtle differences in contrast in font sizes, layout shapes, images and text styles (like lists versus long blocks of prose), you can take advantage of contrast without blasting your readers with a loud contrasting color scheme.
Contrast in Web design can be implemented in many ways:
• Change the fonts. The font size, font weight, or font family can all provide contrast to your text. Headlines provide a lot of contrast to surrounding text.
• Links provide great contrast in text. The color change and the addition of an underline work well to contrast from the surrounding text.
• Use different sized images and elements. If you have a section of text that is the primary focus of a page, you might make it large and all the surrounding elements and images small.
• Use contrasting colors or change the darkness and lightness of your colors.
english
español
Deutsch
français
Italiano
Português
русский
Loading ...
Leave a reply