Web Design Articles – Design Templates

Web Design Articles – Design Templates

Get The Look – Design Templates

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 begin. 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. We have described 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.

UltraHip Look

It’s stylish, it’s modern, it’s as chic as you want it to be! This template 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!

Vintage Retro

Maybe you’re after that “old fashioned diner”, “vintage”, “retro” look.

Corporate

Get your foot in the door with the “professional”, “corporate”, “expensive” look.

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

 

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 overusing it. 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 look HIP!

 

Fonts

 

All it requires is really just a bunch of fonts from different design styles. For example, “Magneto” and “Deftone Stylus” are both very “vintage”-looking fonts, but actually 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 transformed into “hip.” Try using cool script fonts, tiny pixel fonts – whatever you feel his “hip” enough.

You should be able to find the fonts simply by doing a search at Google.com.

 

Techniques

1. Unifomity of Hues in design

Lets take an example. Consider that you have 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 is one of the best. 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 we 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. Simply use text (- – -) to create these dashed lines.

 

7. Photos: monotone and/or high contrast

This technique 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.

 

Putting it all together

 

You can create 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!