This is the DMD archive. Visit the Design Meltdown Portal to find the latest DMD content.

Shiny Stuff Part 3

3rd edition — by Patrick McNeil — Nov. 12, 2006

Editions:

1 2 3 4 5 6 7

The Design Element

It has been interesting to watch the shiny style of sites evolve. It began in somewhat of a random fashion, with all sorts of elements being made shiny. It started with tabs, and buttons, grew into logos, and now has become the entire theme for sites.

These samples of the shiny style have put the shiny effect into full force. By branding the site entirely in this way they have a much more complete feel. Sure shiny logos are cool, but until they match the look and feel of the whole site and help create a complete image for the site, what is the point?

Lets look at a few key elements to pull off this style

High Contrast

Sites that implement this technique tend to have high contrast. Not extreme contrast per say, but a high degree of contrast. Using muted tones isn't gonna work so well. The degree of contrast can vary, but this really has a strong impact on the degree of "shine" the design has. Lets compare two samples to see how it works.

Take a look at denuccienterprises.com first, the site has a shiny feel, but it is very subtle. Compare this to csstux.com ; where you see the full range of contrast by having white on black. Clearly csstux has gone more extreme in the style, but thematically it totally fits, what a perfect implementation of the style. So keep in mind that the more gloss you want, the more contrast you will likely need.

Saturated Colors

Think about your old beat up high school car that was 20 years old. It had dull faded paint and had long lost the polish of a new car. This style works the same way, if you want your site to look like it just had a wax job you gotta go with some saturated colors. This doesn't mean you have to go overboard, but you will probably want to work them in.

The-escape.co.uk is a fine sample of this. The main background colors are normal whites and grays, but all the colors used are very saturated and highly suited for creating a glossy polished feel. Also notice how the color usage has compensated for the fact that there is not a high degree of contrast, but it also doesn't quite have the extreme shine of csstux.com .

Gradients

If your looking to implement this style I guarantee you will be looking to use gradients! I am sure you could do it somehow with out them, but they certainly match the visual effect of a real shiny object. Consider your brand new shiny red car again; it is a festering stew of gradients, without which the car would look flat and dull.

A great site to see this in action on is seomoz.org . Overall the shiny effect is very subtle, it could almost be classified as soft instead of shiny. But a few items in the design help me easily associate it with the shiny style. The neat thing about this site is how all the subtle gradients used throughout the site work together. A few of them on their own and it would just be a nice site. Instead they have almost gone overboard with gradients and have achieved a very unified and beautiful design.

So the repetition of the gradient throughout the design reinforces the theme created very subtly in elements such as the navigation, or the minor reflection on the blue & green box.

As always I have to remind us all to think before you shine. Does the shiny style fit the message of your site? If you can't explain why it is suited to your topic then you need to find a new style! Enjoy the links, they are some very beautiful ones!

divider

Sample Usage

divider

Comments

Make a Comment:

All fields are required & all posts are hand moderated.



(not displayed publicly)



Captcha