Gradient… cool web 2.0 stuff

Now cool text and good choice of color should be sufficient to take web to the whole another level, but speaking of web 2.0, gradient has almost become a requirement. Gradient represents a gradual change from 1 color to another and you actually see gradient everywhere. Shadow is a type of gradient, spreading from black to white or transparent. A lot of photoshop effects uses gradient, such as bevel and emboss, inner/outer shadow and such. In fact gradient is so popular and powerful that CSS3 tries to incorporate native gradient instead of having to use images to create such effect. So how come gradient became so popular?

The answer is pretty simple: gradient creates depth and gives the interface another dimension. It makes the web more detailed and sophisticated and also provides a nice blend between colors. It also creates mood which can serve certain purposes. Apparently a flat surface just doesn’t work out sometimes so the illusion of distance will definitely come in handy. I’m not too skilled at Photoshop but this is a small demo to illustrate gradient’s importance.

Say you have this crappy text on a blank white screen:

Boring Text

Boring Text

Now this is dull and boring. You can spice it up using different font and background but let’s stick with this monochromatic scheme for now. Now once you’ve put a little gradient background in, it looks like this:

Text with gradient background

Text with gradient background

Now the gradient seems to divide the background into 2 parts with a little depth to the lower path. Actually based on we you position your text, the lower part can turn out to be back layer and the shade of grey might act like shadow, like the navigation bar in my personal homepage.

This is not sufficient to make the text stand out though. Reflections might work pretty well here since we have another depth level to the background:

Text Reflections

Text Reflections

Reflection itself can be very important and can also create depth with/without the gradient background. It also indicates there’s a light source above the text, which you can play around with if you want. However it brings depth to the environment rather than the object itself. So a little gloss will make the text stand out:

Glossy Text

Glossy Text

Now glossy object indicates that the object is definitely not flat since the light reflected on itself is not the same everywhere. Such illusion can certainly spice up the boring text I gave earlier. Another example of a clean, simple and elegant web design with nice gradient is right here:

Simple & Clean

Simple & Clean

Well, there you go, my 2 cents on gradient and how it improve web experience. In fact any button nowadays must have some sort of gradient/gloss to it so you might not even realize until you try to create one. Have fun and keep on designing!!

Advertisements
Tagged , , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: