This is a Tutorial Written by me. I have posted it at my blog too -: Shauryadeep.com

 

Lets Start with the Tutorial

 

People may criticize a design by saying that it's bad. Well, what is a bad design?

Different People have different tastes, for example one person can call a design great but the second person may not like the design or even may hate it. So, if one needs to make it as for mass appeal, one should do the basic things right.

 

Things to do to avoid the comment bad design

 

 

Navigation and Headings

Navigation plays an important part in design. - :

Selected Page - A Navigation vertical or horizontal always show the page selected a bit different then the other pages. That is it should show look like an odd one with the other page option.

 

Hover

 

When one takes his mouse over a link in navigation, according to me you should have a hover or some kind of selection look in it. That you're going to select it, it would be better if it's not the same as the Currently Selected page. On click a change like a button is pressed sometimes looks necessary but isn't always necessary.

 

Title

 

Titles should be made clear that they are titles. It is a basic thing not much to say.

 

Color & Effects

 

 

Glass Effects

 

Some people like glass effects. Since the web 2.0 revolution was there. But in my opinion if one even does want to have glass effects one should limit it. Glass effects everywhere - in logo, navigation body everywhere makes it a bit messy. I never keep glass effects personally too much these days, used to when I was a beginner but if I ever keep glass effect these days I restrict it to of very low opacity in navigation if there is and have very little glass effect in the logo:

 

Colors

 

Color selection plays a very vital part. As I have said above the glass effect style colors and already made layer style etc should be minimal used. I generally use mostly gradients which have a smooth finish. People like bright colors which appeal the eyes, goes with the eyes. Dark colors are good too but it should go with the eye. Dark colors and Bright colors, one can select anything, but the important part is to select with a bit of intelligence.

Now let's come to an example. I would show the first design I made myself which looked horrible due to color scheme and was made better but not that professional but looked good for eyes,

 

First Design

Second Design

 

These are the designs not too beautifull since it was my 1st design. This is just to show that how in my first design green and red looked very bad, Too bright and childish when you see it. The First Design is too bright. But in the Redisgn-Color change, which is with Black and blue color scheme changed it to something which looks alot better.

 

Effects

 

The effects you should not go after are too dark Shadows, Bevel Emboss, Satin etc and you shouldn't have over usage of effects, even the good ones. What happens is when you have an over usage of effects, the impressions falls down. It may show that you're capable of doing much but it won't look good. Think it as a recipe; you won't get good food if you put raisins in soup, Salt in a Sweet dish. When you overuse, you give an impression that you a kid who is designing. Most of such designs are considered as bad design.

 

Stock Images

 

This wont actually make your design a bad design but it might get the comments of being looking like a template, which would be bad if you want to look professional better try to avoid it.I don't use stock images but there are certain designs that need to have stock images. Remember if you overuse stock images or use it in a wrong way, your design may look like a web template. And the most important the stock image quality must be good. If the image is a bit pixilated, then your hampering your design too, quality matters on everything.

 

Borders

 

I have seen web templates with 4-5 px borders on anything. If you are going to use a border then I would suggest not using border more than the thickness of 2px of border, though I have never exceeded 1px.

 

Background Image

 

If your going to put patterned background images like retro lines etc then make it similar to the background color. It would be easier if you take the background color in Photoshop, take the patterned image, Change the opacity and see which would mostly suit it, save it then use it. The reason is you don't want your background image to be to distracting, if it's of a different color like black in white, then its too distracting. You don't want your users to gaze at the background then more at your content.

 

Text

 

If you're designing in Photoshop then use none in anti aliasing, which would make it look like what it would really look like in a web page. Since CSS3 Feature of anti aliasing isn't supported well. Another thing, restrict use of different fonts, that I would suggest that if a person has a font in windows vista may not have it in Mac OSX. Use of minimal fonts is better and there should be no use of custom fonts, if your using custom font's then u would have to use it as an image.

Make your text visible that is the background color should not be too much similar to the text color. If you have Light Gray text in white background, it’s not easy to read but if you use black text in white background then it’s easy to read. So you should keep in mind that the text isn’t hard to read,

Because most of the content is text.

 

 

These were i think some basics every designer should follow. Expirienced designers already have everything in mind like one of the fellow designers Rob, But this guide is basically for beginners who are starting to step up in this web designing field.

Please do comment if any mistakes i made and how i made it. Thanks would be appreciated

Good article Ray, some valid points in there

Some very valid points, although some of it is very much personal preference, but I guess design taste is just that

 

It is a nice idea for an article though, thanks for posting it.

Its all about preference, thinkgs like bevel and emboss and colours I agree with, but glass effects if used for the right kind of site can look great. e.g. social networks.

 

Also I dont understand how stock images look templatey, stock images are there because they are high quality images that enhance the look of the site, now that is why template makers started using them.

 

I would never stop using stock images because they are on templates