Trends: the new retrò web design and the “CSS3 style”

On the web the CSS3 and the HTML5 mania go crazy and this is nothing new. Web designers from around the world indulge themselves with animations –of doubtful utility but, we have to admit, certainly creative- they experiment shades and curves  and go wild mixing almost unconsciously dozens of fonts inside the same project (hooray for the font-face!).

Removed the premise: I’m sure that some of you have noticed that the boom of CSS3 potentialities created a new and curious trend for what concerns the web graphics: this is a slightly retro style- that seems a bit a paradox -, with a particular attention to the effects on the text and it’s characterized by many elements that in a short time have become a must.

In short , a new trend of 2011. Let’s see some particularities.

Light colors and pastels

This graphic style is definitely a goodbye to bright colors and lively features, among the other things, of the web  2.0 style. Radial gradients and spotlights leave the place to opaque shades, dull and with no contrasts.

The colors mostly used are without doubts, grey, beige and light blue, in delicate shades and free of visual excesses. Red becomes a salmon pink  or at limit, a light brown. Emerald green leaves the place to an olive green, cyan to a light blue and so on. Even the call-to-action, that should represent the focal point of the whole layout, is adapted to the setting and loses brilliance.


Round logos

Another common feature to this style? The presence of logos from spherical shapes or chiseled edge, “as star”. It’s not a case that the circular shape was the first form of logos (of the fifties), that followed the postmark style.

Texture

The element that mostly approaches this new trend at the vintage style is certainly the massive  use of texture, preferably with effects or chromatic shades that recall  paper.

Regular and geometric fonts

Despite CSS3 open wide possibilities for what concerns the choice of the fonts, it seems like the major part of the layout designed in accordance with  this trend choose stubbornly – for titles and taglines- the same type of font, elongated and regular shapes, almost geometrics.

Shaded text

Here it is, at last,  the pride of this “CSS3 style”: the shading of the text that gives to the textual contents such  a deepness that it seems built in the background (inner shade) or  brighter (outer white shade).

This last point I would like to investigate better, starting from a question, probably a bit provocative:
aren’t we exaggerating?

Isn’t it that being too excited by the novelty we’re forgetting the basic rules of usability and we’re mangling the typography of the sites we’re designing?

It’s not a case that I’m asking myself these questions, but after seeing gallery sites like these:

Fig 18 – Text with shadow: impossible to read it

Fig 21 – Text with shadow: it is very hard to read.

Fig 22 – Wrong contrast of colors

One single rule: do not abuse

This is nota n article against the CSS3 effects (and the new graphic style that goes with it) but it’s a simple consideration on certain facts. And at the same time, an exhortation: always avoid the abuse of whatever trend or style.

The CSS3 effects, if used in small doses and in a creative way can give an original touch to your layout.
On the other hand the same effects can express a lack of  professionalism and poor aesthetic sense if abused or used in a wrong way.

I noticed that on several blogs, Italian and non, some CSS3 properties are emphasized  that personally leave me doubtful: text with 3d effects, metallic shades, outer glow, flashing buttons… effects that dangerously remind me the photoshoppiane trends dated 1999.

And I suddenly wonder: but how, it took us ten years to get rid of them and now they’re back  in fashion?

To you the judgment.

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: , ,

The Author

Web designer, has been working in the field of graphics and web development for six years and at the moment besides collaborating with a web agency successfully manages her freelance activity under the name of mascara design. Like many freelancers she is used to handling more roles, ranging from paper graphics to the development of html and css codes; nonetheless this passion of hers remains, always and however, web graphics.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

9 comments

  1. Sebastian Green

Trackback e pingback

  1. Tweets that mention Trends: the new retrò web design and the “CSS3 style” | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Web RSS News, soshableweb. soshableweb said: Trends: the new retrò web design …
  2. Tweets that mention Tendencias en webdesign: retrostyle + css3 #webdesin -- Topsy.com
    [...] This post was mentioned on Twitter by Maria_Lc, Joel Espinoza. Joel Espinoza said: Tendencias en webdesign: retrostyle + css3 …
  3. Trends: the new retrò web design and the “CSS3 style” | WebDevKungfu
    [...] Trends: the New Retrò Web Design and the “CSS3 style” [...]
  4. Links interesantes que vale la pena tener | Descargar Programas Gratis
    [...] ser suficiente para conseguir de la mejor manera la organización de contenido de las páginas. Trends: the new …
  5. CSS3 Tutorials and Resources - WebsitesMadeRight.com
    [...] Trends: the new retrò web design and the “CSS3 style” (Your Inspiration Web | Nov 3, 2010) [...]

Leave a Reply

Current month ye@r day *