Colors, gradients, fonts
Creating a color scheme
The typical computer can display millions of colors, so how do handful that work well? The good news is that of tools that encapsulate the important color design they’re often free. Here’s a suggested approach:
- Think of a starting color. You could takc it from your company logo, your favorite color, or from thc association of a color with a particular meaning or mood. Rcd spells danger or romance, green references nature, and bluc C communicates stability, for example. If you havc an imagc that will be a prominent part of your design, you could c take the color c from that. The pipette tool in Photoshop can be used to grab a color from a photo, so you can find out its RGB color number.
- Open a color scheme tool. You can find one at www.colorschemedesigner.com, and Adobe has one called Killer at http://kuler.adobe.com.You might have one built in to your web design software or image editing software.
- Choose your starting color. You usually do this by click it on a color wheel. Using Kuler, you can also type in a rig hex value of the color or its RGB value.
- Choose what type of color scheme you would like to create. You have several options here. A monochromatic scheme uses shades of one color. A complementary scheme uses two colors that are directly opposite each other on the color wheel. A triad uses three colors that are the same distance apart on the wheel. There’s also a split complement triad, which uses one color, and the two colors beside its complement on the other side of the wheel. An analogous color scheme uses colors that are next to each other on the color wheel. Experiment to see what works well for you.
- Note the color numbers in the palette provided. You’ll need to put them in your CSS code later.
- To make sure that your site is easy for everyone to read, it’s important to make sure there is enough contrast between your foreground and background colors. Take a screengrab of your color combination (text on background) and then use an art package to make it grayscale, to see how legible it is. Alternatively, enter your colors into the Color Contrast Check at http://snook.ca/ technical/colour_contrast/colour.html accessibility guidelines.
Using gradients
Solid blocks of color can be overwhelming, if the color is a warm one like red or yellow, or might just look a bit flat if not. That’s why websites often use a gradient instead, where one color fades into another. One simple way to do this is to create a background image that represents part of the gradient, and then repeat it.
You can use a gradient to soften any area of color. Firetask www.firetask.com uses a gradient for its blue background, and fades it into the white that is used for the content. The blue background dominates the first screenful, and might have been overwhelming without the gradient.
Firetask also uses shades of blue for its logo, navigation bar and Buy Now buttons, creating a sense of harmony and continuity in the design.
Choosing fonts
The style of text you use on your website has a huge impact on its design. Some fonts are playful, some are business-like; some speak of tradition, while others look futuristic. All this information is conveyed before somebody has even read what the text says.
You should use fonts that convey the personality of your site, where possible, although there are lots of technical limitations on this. When the web browser displays text, it uses the fonts on the visitor’s PC. That means you’re limited to a relatively small set of safe fonts if you want everyone to see the same thing.
However, you can give the browser a list of font options, so you could request a daring and relatively rare font and give the browser a safe substitute if that font isn’t available. You could use a font that comes with Adobe Creative Suite or Microsoft Office, for people who have those packages, for example, and declare a basic font that comes with the operating system, as a back-up.
For small pieces of text, such as a headline, you could create a picture that shows the text and put that in your web page. That approach is always used for logos, and could also be used for small headlines, but it should be used selectively. It makes your web page slower to load, creates a lot of work for you, in building and editing the site, and makes it harder for search engines and users of assistive technology to understand your content. If you’re using Flash, you can embed a font in your Flash file, too, so you can send the font over the Internet with your content.
Pay attention to the size of the text and its color. Some fonts look good at larger sizes but not at smaller, and vice versa. You can use color to change how heavy the font looks on screen, too. A big blocky font can be softened by changing its color from black to blue, for example.