Get the Look: New & Improved

Way back in July, I reported that the Get the Look design guides were under renovation. Since then, there has been no word of the new and improved Get the Look… until now.

I still have not completed all of the articles that will accompany the new guides, but I have finished Chic Simplicity, which is the brand spankin’ new edition to the Get the Look series, and I have published it to the site for all to see!

Enjoy the improved design guides, the new look, Chic Simplicity, and look forward to four more very soon!

More Get the Look News

As previously reported, the Get the Look design guides are under renovation. Actually, the guides themselves are complete. I’m in the final process of editing the articles that go along with the guides, and writing a new article to go with the new look, “Chic Simplicity.”

“Chic Simplicity” began as a remake of “Crisp & Clean,” but eventually turned into its own look. It still follows the concept behind the “Crisp & Clean” guide, but the colors, color schemes, and techniques have been completely recreated. Therefore, the “Crisp & Clean” design guide and article are being retired. Sad, I know, but it was the very first guide and article, and it was created when I was still a design novice. The colors needed improvement, and the techniques were far from great. That said, I am sure that you will enjoy and find useful the new look, “Chic Simplicity,” once it’s published.

Give me another few days to edit the articles and finish everything up, and then I’ll publish them to the site and make an announcement. Until then, you can enjoy a preview of the new guides, seen above.

Good News. Bad News.

What do you want first? The good or the bad? Let’s go with the bad.

The bad. So, it’s the weekend and I’m just hanging around the house. It starts to rain, and then I hear thunder, so the little meteorologist in my head tells me that a storm is coming. I head to my room to shutdown my computer and switch off the power cord, but, stupid me, I switch the power cord before the computer finishes shutting down. I didn’t think anything of it because I have done it before, so I just went on my way.

About an hour later, I no longer hear rain, and the sound of thunder is slowly fading into the distance, so that little, genius meteorologist tells me that the storm has passed. I head back to my room and turn on my computer, fire up Internet Explorer, and it freezes. No biggie! Not yet, at least.

To make a very long, arduous, and frustrating story short, IE6 no longer works on my computer. It simply freezes, if not as soon as I open the browser, then a few Web pages later. I have been troubleshooting over the last few days, with help from the great minds over at the SitePoint Forums, but a solution is yet to be found. I’m sure you’re asking yourself, “uh, why not use another browser?” Well, the answer is that I am (Mozilla), but I’m very tense and won’t feel relaxed until I know that everything is back normal.

The good. The Get the Look design guides are in the process of being made over. Exciting, huh?! Here is a list of some of the changes, all of which are intended to either (1) make the guides easier and nicer to use, or (2) improve the guides from a content and helpfulness standpoint.

• New headers and borders, which improve the overall look and usability of the guides
• 50px wider, giving more breathing room for the content, thus making the guides easier to use
• Cleaner layout of the content, overall
• A new color section that will include suggested colors from the 216 web safe color palette
• Updated techniques and a couple new “Putting it all togethers”

The new guides should be posted to the site within the next couple weeks, so keep an eye out!

Get the Look Chic Simplicity

Chic simplicity. What exactly is “chic simplicity,” you ask? It is somewhat of an oxymoron: simple yet sophisticated. The design exudes simplicity through its forms, fonts, and layout, and sophistication through its textures, details, and tastefulness. It’s a fantastic “look” that can be used for almost every genre of websites: a professional, yet hip, corporate site; a stylish, yet clean, commercial site; or just a fun and colorful personal site. Whichever style you’re going for, this “look” will fit.

Download the Guides

Download Chic Simplicity Part 1 / Colors and Fonts / 47 kb
Download Chic Simplicity Part 2 / Techniques and Wrap-up / 113 kb

Colors

Colors that will give you the “chic simplicity” look are usually very bright, lively, and fun. To tone down the high values, meaning high brightness, of the colors, use tints and shades of gray, especially a dark gray to anchor the design and a light gray to give the design a clean and airy feeling. The grays will suit the vivid colors perfectly. Think of this principle in terms of an outfit. If you are going to wear an orange shirt, you want to wear a pair of dark pants to complement the brightness of the shirt.

Now it’s time to decide on a color scheme. Here’s the equation that will give you a perfect color combination every time:

   dark gray
+ light gray
+ color #1
+ color #2: tint or shade of color #1
+ color #3: complementary color of color #1
= the perfect color scheme!

Therefore, going by the numbered “Colors to Consider” in the guide, combining colors one, two, five, six, and eight will give you the chic and simple look that you’re aiming for. I’m telling you, this will work every time! Just use the colors in the guide to help you.

Fonts

When trying to obtain chic simplicity, you obviously want to keep things clean and simple. So, when choosing a font it is usually good to shy away from serif fonts. Serifs are very decorative and normally will not reflect the look that we’re trying to achieve, therefore I have chosen sans-serif fonts such as Century Gothic, Futura, and Gill Sans. They’re all very slick, clean, and stylish.

Well, now that you know the rule, we can go ahead break it. You’ll notice that there are a couple serif fonts in the list, namely Apple Garamond and Gloucester. Although they have serifs, they exude a certain tailored look that works well with the chic and simple look we are going for.

Another rule of thumb I discovered is that condensed fonts will usually be better at helping you achieve this look than their normal (i.e. not condensed) counterparts. When you condense a font, it’s almost like it loses weight, resulting in an overall sleeker look.

Techniques

1. Simple, Sectioned, Block Layouts

A great way to lay out your page is to use color. Now that you have chosen a color scheme, simply use those colors to section off blocks of content, and note what content will go in each block. Some basic sections to think about are the background, top or side navigation bars, a header, and the main content area, where white usually works best. Doing this will make it easier to come up with a final layout and will guarantee a clean result.

2. One Crisp, Large, Central Photograph

Using one, large photograph is the perfect way to add a punch of color to your webpage. Choose vibrant photographs that work well with your color scheme by having either similar hues or complementary hues.

If you are having trouble finding a photograph that works well with your design, ask yourself the following questions: What color from my color scheme do I want my photograph to represent? What is something, anything, that is that color? So, say your answer to the first question was red. Then, your answer to the second question might be strawberries, raspberries, or big red balloons. Now you know exactly what to look for. When using this method, close-ups and extreme close-ups (macros) are great, such as the example photograph of a basket of raspberries, because you can concentrate on one or two colors and they will give your design texture and vibrance.

3. Simple, Readable Navigation

We’re going for chic simplicity, so simple navigation is the way to go. It is extremely usable, very clean, and allows for an easy change if you ever find yourself wanting to redesign. Check out Dan Cederholm’s CSS tabs, CSS mini-tabs, and CSS mini-tab shapes for more!

4. Transparency and Layers

Overlapping objects that have been made slightly transparent is an easy way to add color and texture to your site. First, draw a shape, fill it with a color from your color scheme, and change its opacity, which is usually possible in some sort of “Layers” window, to somewhere around 50%. Repeat this step with a different shape, but the color the opacity should remain the same.

Once you have all of your shapes drawn, overlap them in a fun pattern. Every time two of the objects overlap, their colors will mix and produce a darker shade. The key here is to experiment! Try using different shapes, colors, and opacities.

5. Tight Text, Using Kerning

Sometimes text, especially when using condensed fonts, just looks too spaced out. The solution? Kerning. Found in the “Character” window in Photoshop and in the “Text Editor” window in Fireworks, kerning will often give your text an even cleaner, slicker look. Want proof? Compare the two columns in the guide and you’ll see that the kerned text looks more polished and refined.

6. White Space

White space is something that is very often overlooked when, in fact, it is one of the most important factors in making a good design look even better. White space can be achieved by increasing the leading or line-height, the space between each line of text, and by padding your blocks of content with anywhere from fifteen to two hundred pixels of blank space. Read more about white space in this great article at Design Matters.

7. Pixel Icons

Though very tiny, pixel icons are a fun and noticeable detail that are easy to incorporate and will add some subtle interest. Use them in place of the standard bullet in your lists, or place one at the end of each section of content, like magazines do at the end of each article.

8. All Lowercase or All Uppercase Text

Changing the case of your text is very easy and adds interest because of the simple fact that it is different than the standard capitalize-first-letter-of-each-word method. A great way of doing this is to implement CSS by using the text-transform property, with either uppercase or lowercase as the value.

9. Subtle Drop Shadows

Drop shadows have a bad reputation because they are so often misused, but when used subtly and correctly, they add a nice touch to any design. In the first example, a very faint and soft drop shadow is used to make the text pop off the background. In the second example, a faint, yet crisp, drop shadow adds dimension and interest. As always, experiment!

Putting It All Together

By simply combining many of the techniques explained above, I quickly and easily created this example webpage design. Notice how well the vibrant colors work with the calmer grays, and how the different sections of the page are distinguished using colors. The photograph in the header adds a ton of texture while, at the same time, incorporating a vibrant blue, one of the colors from the color scheme. The navigation is simple, yet stylish, making it easy for one to find their way around the site, and the pixel arrows are much cooler than standard bullets. The abundance of white space makes the page look very refined, not cluttered, and will make browsing the content easier for the viewers. And finally, the all lowercase navigation is extremely subtle, but a nice change from capitalization. In the end, we have a webpage that perfectly defines chic simplicity. Enjoy!

Get the Look UltraHip

Sometimes you want your design to be vibrant… to scream. UltraHip is just the look. It’s very sleek and ultra contemporary. Think posh night clubs in Los Angeles, Paris, or New York City: vivid colors set off by charcoal grays, combining to form atmospheres that encourage dancing, partying, and lots of fun. Use this look to bring a personal site or blog to life, or for a hip corporation whose target audience is of a younger age group. Have fun with this one!

Download the Guides

Download UltraHip Part 1 / Colors and Fonts / 39 kb
Download UltraHip Part 2 / Techniques and Wrap-up / 110 kb

Colors

UltraHip colors are a great deal of fun to work with. Both vibrant and alive, they seem to jump out of your screen. Try using colors that you would normally consider “on the edge” – colors that you would normally be too nervous to choose. When deciding on colors, try this: add the word “hot” or “neon” before the general name of a color, then go searching. For example, hot pink, neon green, hot orange, and so on. To avoid having too many fluorescents, choose some hues that have an almost glassy feel, such as a very pale gray 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 less 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 “hip” 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 a 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 retro fonts, but they are so 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 nowadays, and the look has slowly transgressed into “hip.” It’s cool to be old. Also make use of cool script fonts, tiny pixel fonts, and graphical fonts like “Ravie” and “Grotto.”

Techniques

1. Monochromatic 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-ish color, but the design doesn’t scream “Four colors, too many!” This is because the different hues each play their own role, and together provide a good balance between light and dark. Try this technique with any UltraHip color, adjusting only the luminosity until you’re happy with the resulting hue. When you’re done, you’ll even have room to throw in a completely new, complementary hue. In this case I migh choose a teal color.

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 also works well to use variations of the same hue, such as a pale teal and a dark blue-green. To finish, put the words in the correct order, playing around with their positioning until you’re satisfied. This technique is based on contrast — big and small, dark and light. Try overlapping the words and adding some transparency to get a nice layered effect.

3. 1-pixel Border, Slightly Darker than Fill

No explanation needed: just do what it says! It’s a subtle technique, but it will have a noticeable impact on the final design.

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 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 gray 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. Dashed/Dotted Lines and Borders

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. With CSS, you’ll have dashed or dotted border in no time.

6. Photographs: Monotone and/or High Contrast

This technique takes only a few seconds in Photoshop, but will leave a powerful impact on the overall look of your site. 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. Don’t forget your color scheme when colorizing the photo! It’s a great way to catch a visitor’s interest, without adding hundreds of new colors to your precious combination of hues.

7. Simple Logo – Less is more!

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 variations of the same hue to maintain a minimalistic 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 webpage using only the colors, fonts, and techniques mentioned above. Notice how easy it is to distinguish each section from the others, making it very easy to find your way around. The 1-pixel, 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. By combining a number of simple techniques with a few tips on color, we’ve achieved one very hip design!

Get the Look Corporate

OK, get out the big guns: you want to design a professional, corporate, expensive look. This graphics template will help you get started.

Download the Guides

Download Corporate Part 1 / Colors and Fonts / 42 kb
Download Corporate Part 2 / Techniques and Wrap-up / 75 kb

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.

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!

Get the Look Vintage

Want the secrets to the old-fashioned diner, vintage, retro look? Well then, you’ve come to the right spot.

Download the Guides

Download Vintage Part 1 / Colors and Fonts / 42 kb
Download Vintage Part 2 / Techniques and Wrap-up / 122 kb

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 webpage 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!

Get the Look American Southwest

Want your design to scream American Southwest, cowboy, or old saloon? Look no further. This is the perfect graphics template for you.

Download the Guides

Download American Southwest Part 1 / Colors and Fonts / 57 kb
Download American Southwest Part 2 / Techniques and Wrap-up / 146 kb

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!