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!