#1: Select a color scheme and stick to it #2: Design for cross-browser compatibility #3: Provide an intuitive, easy to use navigation system #4: Use Cascading Style Sheets #5: Open external links in a new window #6: Underline and color your hyper links #7: Optimize your images 1. Reduce the image size: 2. Reduce the number of colors: 3. Reduce image quality: #8: Tell visitors who you are and what you do #9: Use customer testimonials #10: Provide contact details on every page 4 Simple Steps to Coloring your WWWorld! Color. The human eye can discern over 16 million different shades of it. I know this fact because just last week I had the opportunity to count each and every one of them on an AOL hometown page I was enjoying. Bless their little hearts; they certainly were thorough ;-) I remember thinking to myself 'Hey, they're all free, so there's no reason to skimp on them, right?' Of course not, but it does raise the obvious question - · How many colors do I really need to use? · And which colors 'play nice' together? Following is a 4-step checklist to help you set off on the right foot. Rule 1: Choosing a Mood Try this when you begin. Write the name of your Website on the top of a sheet of loose leaf and then underneath it scribble down 20 to 30 words that describe the 'mood and feel' that you want give your visitors. Do this, and very quickly your sheet will be covered with words like slick, breezy, professional, funky, informative and friendly. Now circle the best five words that describe your new site, and tape your page somewhere you can see it while you're working. This page will be your guide, keeping you on track the next time you get seduced by that crazy, German techno site with the groovy, unreadable font as you begin re-designing BassFishing-tips.com. Rule 2: Limit your Palette Once you've settled on your mood the fun begins. Sit down and select two, three, or at most, four colors to build your entire site around. In general I've found that monotone and duotone sites have an intensity that is hard to reproduce with more colors. If that quality is important in your site, keep the colors down. You can enlist some free help at this stage of the process. Plenty of free, well-designed software exists to make this important task easier and I've listed a handful of my personal favorites here. BjColorizer V1.5 - A simple little app equipped with sliders to adjust both foreground and background colors. ColorPad 2.3 - This tiny, pretty, clever and cool tool lets you analyze and adjust colors from anywhere on your screen including other websites. Make sure you browse the 'ReadMe.txt' though before you get started using this tool. Color Picker 2.0 - Another 'eyedropper' app like ColorPad, but this one lets you remember a palette of up to six colors (Grab yourself a copy of 'Calipers' while you're there, a great little app too). Rule 3: The Color is not the Design Don't forget that choosing your color-set is only one weapon in your design arsenal. In fact, try this experiment Take a screen capture of your current design and desaturate it with your graphics program. If your design doesn't work 'stand up' in black and white, it probably needs more work. Keep in mind that color is only one of six basic 'Elements of Design'. The other five are: · Line: The basic structural foundation of almost all graphics. Designs like the one used in Dennisinter.com rely very heavily on their linework. · Shape: The shapes created by lines merging, touching, and intersecting. Sites such as Nike.com and GlobeShoes.com strongly emphasize the shapes of their athletes and shoes in their web design. · Value: The relative lightness, darkness and shading of elements in a page. This is the key to good monochrome designs such as Australianinfront.com.au or Nickciske.com/binary. · Space: The bits you deliberately leave blank. Sometimes used to give an illusion of depth, sometimes to create movement and sometimes just used to give your eye 'breathing room'. Marchfirst.com is a great example of a design using space. · Texture and Pattern: A different 'tactile' design element created by a combination of line, shape and value. Most successfully applied when used subtly on sites such as K10K.net or Entic.net Every design you've ever done has used a combination of all of these elements, although you probably weren't conscious of it until now. So, before you throw a new color into the mix, ask yourself if you could get more benefit from adjusting one of your other five elements. Rule 4: Use Color to Guide Your Users If your color only exists as 'window dressing', then frankly it isn't working hard enough. Every site needs a 'content hierarchy' or 'content ladder of importance'. There's a good chance that your 'Latest News' might be at the top of your sites ladder of importance, and your copyright message might be at the bottom of it. Color (along with size and screen position) is your key weapon in helping your users understand your hierarchy. The more they use your site, the more they learn to scan for certain colors and text styles. SitePoint.com itself is a nice example of this. 'Feature Articles' and 'Hot Discussion Topics' are marked with big, clickable, rich blue text links. Scroll the landing page quickly down and up and you will notice these main links still catch the eye amongst the blur of text. Older articles are highlighted in a less eye-catching gray text, sitemap links are tagged with a sedate blue, and 'garden variety' body text is presented in plain black. An easy order for any user to follow. Always keep your hierarchy at the front of your thinking when you design. In closing, most importantly stay true to the purpose of the site. Some audiences (for example the rave culture) will comfortably identify with color selections and styles that a wider audience simple won't tolerate. If this is your audience my advice is to know them well before you start designing for them. They tend to be uncannily good at smelling a fake. On the other hand, if your audience is broader, invest the extra time to make sure your color choices aren't damaging your user experience. Remember that your color selection by itself is unlikely to guarantee a return visit from a user. However it could be more than enough to guarantee they don't. Get The Look - Design Templates: UltraHip 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! Get The Look - Design Templates: UltraHip 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 and Part 2). 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. 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! webmasterbase article 14 webmasterbase article 35 project seven freelayouts templates 893 484