Get The Look - Design Templates

Get the Look: Crisp and Clean

Have you ever tried to achieve that "thin line", "clean color", "simple yet sophisticated" look, but failed? If so, I've made the perfect graphics template just for you.

Colors

Crisp and clean colors are usually very bright and fun. They work well when you use similar tones together, for example, a bright orange-red with a lighter peach color. Also, throw in a contrasting color to mix things up a bit: if you stick with colors that don't contrast much, you're going to find yourself in trouble when you go to put text on your colored background.

When you choose colors for a crisp and clean design, try and stick to three at the most. Once you get into four or five colors, things won't stand out as much.

Fonts

Crisp and clean fonts are ones with cleaner lines. Good choices are simple, modern fonts, like Trebuchet MS and the Futura family. You're probably saying to yourself, "But Grotto doesn't have simple lines." True as it may be, Grotto works well because its lines are clean and work well with a slight drop shadow.

Techniques

1. 1px bordered rectangular shapes
1px borders help the edges of the shapes stand out on certain backgrounds, giving a very clean look. For example, if you have a very pale blue rectangle on a white background, the edges are hardly noticeable. But add a 1px border, and you've got a very clean look to work with.

2. Very light/faint drop shadows
Drop shadows help to make your text jump out at the user. Drop shadows are best when used on logos or page titles. Be sure to keep the drop shadows fairly light -- if they're too dark, they'll make the text hard to read and look unprofessional.

3. Grids and thin lines
When used right, grids and thin lines can give your site a very sophisticated, professional look. Use them in buttons, title bars, or even to decorate the corner of your Web page.

4. 1px font borders
1px borders can greatly increase the readability of your text in a logo or a title bar.

5. Blocks of color
Yet another simple technique that can give your Website that touch of sophistication. This technique is especially good for use in a logo. Try using the blocks as buttons, but leave some of them empty so as not to ruin the effect.

6. Layered transparent objects
This simple technique results in a very cool, layered look, almost as if you had stuck pieces of colored tape atop one another. Simply create two or three different shapes to work with, making them all of the same color and transparency. Then finish the look by scattering them over each other in random order.

Putting it All Together

Don't just use one technique at a time, mix them up! In the first example I used techniques 2, 3, and 6. In the second example I used techniques 4 and 5. In the third example I used techniques 1 and 3. Notice the choice of colors and how they are similar, or contrast. Also notice how some of these techniques can make similar colors stand apart from one another.

Enjoy!