By: Adam Polselli

June 26th, 2002

Reader Rating: 9

One of the most difficult aspects of designing is taking that first step: when you know what style you would like to achieve, but you just don't know where to start. We've all been there at one time or another, thinking to ourselves "what colors should use?", "what fonts would work best?", and "what are some elements of the style I want?"

Well, look no further. I've put together a wide range of "Get the Look" templates that include everything you'll need to help jump-start your new design project, whether it be a touch of inspiration, or the perfect font. So wait no longer -- jump in and take a "look", literally!

By the way, I've downloaded the fonts that appear in the following templates from a number of places across the Web. You should be able to find them simply by searching at www.google.com [1]. Here are the Looks we'll cover:

Latest Addition! UltraHip

It's stylish, it's modern, it's as chic as you want it to be! This template [2] has everything you need to create that slick UltraHip look.

Crisp and Clean

Seeking the ultimate "thin line", "clean color", "simple yet sophisticated" look? This is the template for you! [3]

Vintage Retro

Maybe you're after that "old fashioned diner", "vintage", "retro" look. Take a step back in time with this great template. [4]

American South West

Hey pardner, if it's the "American Southwest", "cowboy", or "old saloon" look you desire, you've come to the right place! [5]

Corporate

Get your foot in the door with the "professional", "corporate", "expensive" look. This template makes climbing the corporate ladder a cinch! [6]

Get the Look: UltraHip

Have you ever wanted to design a site with the "modern", "contemporary", "hip" look? Now's your chance to get UltraHip with this cool graphics template (download Part 1 [7] and Part 2 [8]).

Colors

UltraHip colors are extremely fun to work with. They are very bright and jump right off of your screen. Try using colors that you would normally consider "on the edge" - colors that you normally wouldn't use. Some of them have an almost glassy feel, such as a very pale grey with a hint of magenta or aqua.

When putting together a scheme of UltraHip colors, there are two ways to go. The first is to use colors of the same hue. A good thing about this method is that you can use 4 or 5 colors without overdoing it. Why? Because the colors aren't competing with each other: they're complementing each other. The lighter hues are balanced by the darker hues, and the brighter hues are balanced by the more saturated hues.

The second method for choosing an UltraHip color scheme is to take colors that you never thought would look good together and put them to use. You'll be surprised at how UltraHip the result will be. Good colors to work with are beige or brown. Both are often seen as unattractive colors that don't work well with bright colors, but you'll get a very modern look if you use them with flashy color: magenta and beige, aqua and brown, bright blue and beige - they all yell HIP!

Fonts

As I was putting together a collection of UltraHip fonts, I began to realize that it was really just a bunch of fonts from different design styles. For example, "Magneto" and "Deftone Stylus" are both very "vintage"-looking fonts, but I felt they were retro in a hip way. In short: don't limit yourself to simple, modern fonts. Vintage styles are beginning to show up all over the place in modern times, and the look has slowly transgressed into "hip." Try using cool script fonts, tiny pixel fonts - whatever you feel his "hip" enough.

I downloaded these fonts from a number of places, but you should be able to find them simply by doing a search at Google.com [9].

Techniques

1. Similar hues throughout the design
I touched on this in the color section, and here's an example. Notice that I've used 4 different hues of a magenta-like color, but the design doesn't scream "4 colors!" This is because the different hues each play their own role, and together provide a good balance between bright and dark. Try this technique with any UltraHip color, adjusting only the luminosity until you're happy with the resulting hue.

2. Variation in font size and layered text
This is not only a great technique, but also extremely easy to accomplish. Begin with a phrase - a good example would be your company's tagline. Take the phrase and split it up into small sections of one or two words. Keep important words by themselves, but combine less meaningful words such as 'and' or 'the'. To put emphasis on the more important words, make the font size larger, shrink the unimportant words, or make some words smaller and others larger - just experiment! It can also work well to use a variety of colors from the same hue. Then to finish, put the words in the correct order, but play around with how they're positioned. This technique is based on the balance of contrasting aspects - big and small, dark and light. Try overlapping the words and adding some transparency to get a nice layered effect.

3. 1px border, slightly darker than fill
This technique has to be one of my favorites. No explanation needed: just do what it says! It's such a subtle technique, yet it leaves big impact on the final design. Use this technique to help bring your designs into the UltraHip style of the 21st century.

4. Use of color to distinguish sections
You've just taken the time to decide on an awesome, UltraHip color scheme, and you want to put it to more use than just your logo? Well, don't be afraid - go for it! Take each color and use it to distinguish a certain section of your Web page. For example, one color could be the theme of your navigation, another could be the focus of your header, and the last could be used for the news section. Then just throw in a pale grey behind the content and you're set! This technique will not only look good - it'll heighten the usability of your site by allowing visitors to more easily make their way around your page. Note the 1px border coming into play with this technique.

5. Irregular capitalization
This technique can be used to add a very hip touch to your design, but only when used with caution and moderation. If you overdo it, you'll only confuse your visitors. Keep it simple, yet effective. A few good typography effects are:

• Lowercase 'the', followed by an uppercase word (the Portfolio)
• lowercase-UPPERCASE pattern (welcomeTOmyWEBSITE)
• Capitalize letters that are intricate when capitalized (neWs, aRchives)

6. Dashed/dotted lines
Is it just me or has this technique showed up quite a bit? Apparently quite a versatile technique, it can easily add yet another modern tinge to your site. I simply used text (- - -) to create these dashed lines.

7. Photos: monotone and/or high contrast
Did I say that 1px borders were my favorite technique? Well, I was lying: this technique, too, is extremely easy and looks very modern. Just use your favorite graphic program to colorize your photos and increase the contrast. With this technique, you can make almost any image appear to be "cutting-edge" and "hip." Try colorizing the photo into one of the colors in your scheme. It's a great way to catch a visitor's interest, without adding hundreds of new colors to your precious combination of hues.

8. Basic monotone logo
One of the biggest mistakes in logo design is to make things too complicated. Keep - it - simple! Less is very often more, especially when trying to achieve the UltraHip look. Again, try using colors of the same hue to maintain a minimalist look. Pixel fonts are a great way to add texture or a small message. In the 'AP Records' logo I created, I used just one hue and simple effects to create a logo with a bold message - music!

Putting it all together

Here I created a sample Web page using only the techniques, colors, and fonts mentioned above. Notice how easy it is to distinguish each section from the rest - this makes it easier to find your way around. The 1px, slightly darker borders are subtle, but they scream UltraHip. A number of different colors come together here, yet they're not overpowering - balance is key. Take a look at the custom buttons. By using a lighter hue of the original color on which the buttons appear, they pop without taking over the section. And by combining a number of simple techniques with a few tips on color, we've achieved one very hip page design!

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 [10].

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!

Get the Look: Vintage Retro

Want the secrets to the "old fashioned diner", "vintage", "retro" look? Here's the perfect graphics template [11] for you.

Colors

Vintage colors are ones that have that "really old and worn out" look to them. Try and imagine an old t-shirt from the early 90's that you used to wear all the time; pale orange, grayish-blue, green turned yellow-green, etc. Those are the colors that I went towards with this template.

To get a vintage look, try using three similar tones. For example choose a dark, faded green, a faded green-yellow, and a very pale green (that almost looks gray).

Fonts

Vintage/retro fonts are very noticeable. Just close your eyes and picture and old-fashioned diner sign. The best way to explain it is: they look old-fashioned. One thing to look for is small star shapes throughout the font.

Techniques

1. Old-fashioned, vintage photos in duotone
I found this photo at Google's Image Search, but you can find old photos anywhere. Pick a nice black and white photo, and simply colorize it with your favorite graphics program to get and old look.

2. Old-fashioned sign shapes
I came up with these shapes simply by thinking of old movies and how I picture old diners and gas stations. Come up with your own! Keep in mind the fact that vintage shapes are never symmetrical.

3. Asterisks and stars
These were quite popular elements of design and will help make your Web page scream "vintage!" I simply used the asterisks that came with the vintage fonts I provided here.

4. Small textures: grids, diagonal stripes, cross hatch
This is a very nifty trick that adds a pretty nice touch to the design of your site. Using Fireworks, I simply set the shapes' fill to white, put a check in "Transparent", chose a texture, set the texture to 100%, and added a 1px white border to help the shapes stand out more. See your favorite tutorial Website for more info on how to do this in other programs.

5. Old-fashioned, vintage borders
Just another simple technique that can give your site that touch of retro. The design that I used simply reminded me of old-fashioned architecture. Be creative!

6. Unaligned, 1px borders
This simple technique was used very often in the "old days". Start by drawing a vintage shape (see technique 2) and making two copies of it. Fill one with a color on the lighter side. Set the other shape to no fill and give it a 1px border of a color on the darker side. Now simply "unalign" the two by a few pixels and you're done! This technique is actually making its way back into design today.

7. Dotted lines
I've seen this technique used while surfing through Websites, and I've always thought that it was a cool look. See what you can do with it!

8. Thin, outlined shapes (especially over color)
Another vintage effect I obtained by simply making a number of rounded rectangles with 2px white borders (no fill) and layering them.

Putting it All Together

I made an example "vintage" Website using every technique that I mentioned above. Notice how the unaligned borders, vintage colors, and old-fashioned design elements come together to create one pretty retro site! See what you can come up with!

Example Websites:

• http://www.joanquigley.net/flashindex.html [12]
• http://www.sparkysgarage.com/detected.html [13]
• http://maxfunds.com/ [14]

Enjoy!

Get the Look: American South West

Want your design to scream "American Southwest", "cowboy", or "old saloon"? Look no further: this is the perfect graphics template [15] for you.

Colors

Western colors are often "browned down," and look almost toasted. Although many Western colors are very dark, you don't have to work with a dull palette. Throw in some sunny colors as accents to add some spice -- colors that contrast a lot are good for getting that Southwest look. Look to Spanish palettes to spur you on to more ideas (no pun intended!).

Fonts

Western fonts often have rough edges or large serifs, so keep an eye out for those. Some typefaces have an obvious Old West feel, but don't forget those that say "New West." Play around with some of the fonts in the template. For example, Spanky's Bungalow comes with a number of different characters to achieve that "sign" look.

Techniques

1. Old, burnt paper
To achieve this look I began by drawing a shape with a few zigzagged edges. I applied an inner glow, using a dark brown, to make the edges look old and burnt. I also applied a very slight texture to add to the old effect, and finished it with a hard-edged drop shadow. Be sure not to use bright white for the paper, as that will make it look too new.

2. Nailed wooden planks
These were very easy to create in Fireworks, and they have that great, Old West look. I began by drawing three fairly simple shapes that nearly fit together. I used the satin fill so that they weren't solid in color throughout, and applied a very slight confetti texture so that they would look more like a worn piece of wood. I finished the planks with small inner bevels, for depth, and soft drop shadows to make them pop out. For the nails, I simply drew a circle and gave it a radial fill, before adding a small inner bevel to finish them up.

3. Avoid anti-aliased text
This simple effect will give your text an older, rougher look.

4. Old rope
In Fireworks, I drew a shape similar to the one that represents a hurricane on the weather report! A circle with two little tails, you might say. To this I added a soft inner glow and a smooth inner bevel. I simply made many copies of the shape and fit them together into a long line, but don't forget to experiment with colors and shapes!

5. Carved wood
For this effect, begin with a piece of text or a shape. Fill your object with a color slightly darker than that of the wood that you're going to "carve into", and make sure that your shape isn't anti-aliased. To finish the look, apply an inset emboss with the softness set to "0".

If you use a program other than Fireworks, try adding two shadows: a dark inner shadow and a lighter drop shadow, and make sure that the shadows are on opposite ends of your object. If this doesn't work, consult your favorite tutorial site on how to get an inset embossed look.

6. Zigzags
This is a very popular Western element of design. Think of Spanish rugs or a bag of 'Tostitos' chips. Use a variety of colors to spice them up!

7. Cow print
What can I say? It just screams Southwest!

Putting it all together

I combined most of the techniques here to create a pretty cool Southwestern sign. I put nails in the corners of the old, burnt paper, to make it look like it's nailed to the wood board. Some little doodles (^) are carved into the wood and the whole thing is hung from a wood plank with rope. To make the holes for the rope, I drew two white circles and gave them an inset emboss. The text was angled to give it a rough look. See what you can come up with!

Get the Look: Corporate

Ok, get out the big guns: you want to design a "professional", "corporate", "expensive" look. This graphics template [16] will help you get started.

Colors

Corporate colors are bold and bright, but not so bright that they're fluorescent or hard on the eyes. Almost any color can be made to look professional simply by decreasing the luminosity (the lightness or darkness in the color).

Use bold colors like red, blue, and green to imply that your company is strong and stable. Tans and beiges will reflect the professional aspect of your company. By mixing subtle colors with bold colors you'll get the best of both worlds.

Fonts

As you can see, corporate fonts are very simple, and almost elegant. Both serif and sans-serif fonts will work, although sans-serif fonts will give your site a contemporary touch. Stay away from gaudy, decorative fonts - I know it's tempting to use them, but trust me, they almost always look unprofessional, and leave your company looking untrustworthy.

I downloaded these fonts from a number of places, but you should be able to find them simply by performing a search at www.google.com [17]

Techniques

1. Tab navigation
Probably one of the most popular looks on corporate sites, this will give your design a professional edge. Experiment with the shapes and colors of the tabs: have them stick out from the top or side of the page. The main idea here is to experiment -- there really is an endless number of things you could come up with.

2. Enough white space
Not too much, but not too little -- sites that are cluttered appear unprofessional and sometimes tacky. Leaving white space gives your content room to breathe and will make it stand out. This is a case of 'less is more.'

3. Dotted or dashed lines
This is another extremely popular technique. Dashed lines will make your site unique and stand out. Use them for content division or to outline tables and cells. I simply used text (- - -) to create these dashed lines.

4. A central image that explains the company
Use this as a sort of center-piece that everything will revolve around. Here you can put all your graphic skills to work. Include images that are associated with your company or reflect a positive attitude, a tagline, short and to-the-point reviews, the URL of the site, and the company name. Don't make the mistake of excluding this essential information. If you do, the image will only act as a distraction from the rest of your site. You want to make this something that the person can recognise and gather basic information from when they first enter the site.

5. Extremely simple logos; nothing gaudy
Corporate logos usually consist of text and basic shapes. These, along with some simple effects, can produce very professional logos. For example, with the 'teleCommunications' logo, I used many small effects to produce the final product:

• 'tech' is normal and 'Communications' is bold
• 'tech' is highly kerned
• 'tech' is red and 'Communications' is black
• the dots of the 'i's in 'Communication' are red and there is a thin, arched line between the dots.

Here, a basic shape (the arched line) represents something much larger (communication between people and things). Notice that I didn't use any complicated effects to make this logo: it's another case of 'less is more.'

6. Clean and simple navigation
Do you see a pattern forming? Here we have yet another example of 'less is more.' Don't get me wrong, extravagant navigation can look professional, but the beauty here is in the simplicity of it. Use a clean font that looks good at small sizes. Experiment with the bullet shape: circle, square, triangle, cross, diamond. Notice the beauty in the subtleness of the different bullet colors.

7. Navigation across a block of color
Extend the block of color completely across the page, from border to border, but make the text take up a small amount of room, again, leaving breathing space. Play with different bullets for your links. Also, split the block up into smaller boxes on either or both ends. It helps break up the design a bit, and adds a very professional touch.

Putting it all together

I made an example "corporate" Website using every technique that I mentioned above. Notice how the 'less is more' theory comes together to form a very professional looking site. See what you can come up with!

[1] http://www.google.com
[2] http://www.webmasterbase.com/article/796/2
[3] http://www.webmasterbase.com/article/796/3
[4] http://www.webmasterbase.com/article/796/4
[5] http://www.webmasterbase.com/article/796/5
[6] http://www.webmasterbase.com/article/796/6
[7] http://www.webmasterbase.com/examples/get-the-look/ultrahip_top.gif
[8] http://www.webmasterbase.com/examples/get-the-look/ultrahip_bottom.gif
[9] http://www.google.com
[10] http://webmasterbase.com/examples/get-the-look/cc.gif
[11] http://webmasterbase.com/examples/get-the-look/vintage.gif
[12] http://www.joanquigley.net/flashindex.html
[13] http://www.sparkysgarage.com/detected.html
[14] http://maxfunds.com/
[15] http://webmasterbase.com/examples/get-the-look/western.gif
[16] http://webmasterbase.com/examples/get-the-look/corporate.gif
[17] http://www.google.com