Tendenze: il nuovo web design retrò e lo “stile CSS3”
Sul web impazzano la CSS3 e l’HTML5 mania, e questa non è una novità. I web designer di tutto il mondo si sbizzarriscono con animazioni –dalla dubbia utilità ma, dobbiamo ammetterlo, certamente estrose – sperimentano ombre e rotondità e si danno alla pazza gioia mixando in un modo quasi incosciente decine di font all’interno dello stesso progetto (ebbene si, evviva il font-face!).
Tolta la doverosa premessa: sono certa che alcuni di voi avranno notato che il boom delle potenzialità dei CSS3 ha dato vita ad una nuova e curiosa tendenza per quanto riguarda la grafica web: si tratta di uno stile vagamente retrò -il che sembra un pò un paradosso-, con una particolare attenzione agli effetti sul testo e caratterizzato da numerosi elementi diventati in breve tempo un vero e proprio must.
Un nuovo trend del 2011, insomma. Scopriamone insieme alcune particolarità.
Colori tenui e tinte pastello
Questo stile grafico è un definitivo addio ai colori brillanti e vivaci caratteristici, tra le altre cose, dello stile web 2.0. Le sfumature radiali e i punti luce lasciano il posto a tonalità opache, spente e prive di ogni contrasto.
I colori più utilizzati sono senza dubbio il grigio, il beige e l’azzurro chiaro, in tonalità delicate e prive di eccessi visivi. Il rosso diventa un rosa salmone o, al limite, un marrone chiaro. Il verde smeraldo cede il posto al verde oliva, il ciano al celeste, e cosi via. Perfino le call-to-action, che dovrebbero rappresentare il maggior punto focale dell’intero layout, si adattano all’impostazione del layout e perdono brillantezza.
Logotipi rotondi
Un altro elemento comune a questo stile? La presenza di logotipi dalla forma sferica o dal bordo cesellato, “a stella”. Non a caso la forma circolare era la prima forma dei logotipi (si parla degli anni 50), che ricalcavano lo stile dei timbri postali.
Texture
L’elemento che più avvicina questa nuova tendenza allo stile vintage è sicuramente l’uso massiccio di texture, preferibilmente con effetto o tonalità cromatiche che richiamano la carta.
Font regolari e geometrici
Nonostante i CSS3 aprano un’ampia possibilità per quanto riguarda la scelta dei font, sembra che la maggior parte dei layout progettati secondo questo trend scelga ostinatamente – per i titoli e le tagline- lo stesso tipo di font, dalle forme allungate e regolari, quasi geometriche.
Testi ombreggiati
Eccolo, alla fine, il fiore all’occhiello di questo “stile CSS3”: l’ombreggiatura dei testi, che da ai contenuti testuali una profondità tale da farli sembrare incassati nel background (ombra interna) o più luminosi (ombra esterna bianca).
Proprio quest’ultimo punto vorrei approfondire, cominciando da una domanda, forse un po’ provocatoria: non è che stiamo esagerando?
Non è che presi dall’esaltazione della novità stiamo dimenticando le regole basilari dell’usabilità e martoriando la tipografia dei siti che stiamo progettando?
Mi pongo queste domande non a caso, ma dopo aver visto nelle gallery siti come questi:
Fig 18 – Vi sfido a leggere il testo bianco ombreggiato presente in questa home page.
Fig 19 – Grazie a font-face i designer hanno più liberta di scelta per quanto riguarda i font. Ma siamo in grado di capire se il font scelto è adeguato al progetto su cui stiamo lavorando ed è perlomeno leggibile?
Fig 21 – Chi ha progettato questo tema ha pensato che fosse più importante ombreggiare il testo piuttosto che renderlo leggibile.
Fig 22 – Il testo beige sul background colore carta ha poco contrasto e rende il testo poco leggibile.
Fig. 23- Il footer del portfolio di Alex Catalan è praticamente illeggibile
Un’unica regola: non abusare
Questo non è un articolo contro gli effetti CSS3 (e il nuovo stile grafico che ne consegue) ma una semplice considerazione su determinati dati di fatto. E, al tempo stesso, un’esortazione: evitate sempre gli abusi, di qualunque tendenza o stile si tratti.
Gli effetti CSS3, se adottati a piccole dosi e in modo creativo possono dare un tocco originale al vostro layout. Viceversa gli stessi effetti possono esprimere scarsa professionalità e scarso senso estetico se abusati o utilizzati in modo poco corretto.
Ho notato che su diversi blog, italiani e non, si sono enfatizzate alcune proprietà dei CSS3 che personalmente mi lasciano un po’ perplessa: testi effetto 3d, sfumatura metallizzata, bagliore esterno, pulsanti che lampeggiano…effetti che mi ricordano pericolosamente le tendenze photoshoppiane datate 1999.
E mi viene spontaneo pensare: ma come, ci sono voluti dieci anni per liberarcene e adesso tornano di moda?
A voi l’ardua sentenza.
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
36 commenti
Trackback e pingback
-
Tweets that mention Tendenze: il nuovo web design retrò e lo “stile CSS3” | Your Inspiration Web -- Topsy.com
[...] This post was mentioned on Twitter by yesWEBcan, Simone D'Amico. Simone D'Amico said: Tendenze: il nuovo web design retrò ... -
Pochi trucchi per realizzare effetti vintage in Illustrator | Your Inspiration Web
[...] le caratteristiche, oppure su come disegnare un layout in stile vintage e ancora sulle tendenze retrò nel web design ...
Ottimo articolo come sempre :)
P.S.: Aspetto un tuo parere sul mio sito, ho aperto un topic nel forum, quando hai tempo dacci un’occhiata…. e mi raccomando fammi male :)
Ogni critica mi aiuta a migliorare ;)
Grazie Tiziano,
si, ho visto, ma in questi giorni il tempo è latitante, ahimè.
Appena posso faccio un salto e ti stronco :D
(scherzo)
Sarah che ci credi o no, ieri pensavo proprio a questo style retro ultimamente un po troppo diffuso :)
Cmq complimenti per l’articolo ;)
Grazie Rocco ;)
Devo ammettere che anch’io ultimamente sono molto tentato dalle proprietà CSS3, ma senza esagerare :P
PS: l’augurio di buona settimana è un tocco di classe :D
Ahahahahahah, bello vero? :D
Volevo lasciarvi con un tocco glamour ;)
La regola del “Non abusare” andrebbe applicata non solo nel web design ma anche nella Seo e in generale in tutto ciò che ha a che fare col web.
Il rischio che si esageri con questi nuovi effetti è molto alto, ma alla fine abbiamo vissuto e superato l’era delle gif animate, dei testi scintillanti, delle intro in Flash ecc… supereremo anche questo ;)
Non abbiamo ancora superato il tempo delle tabelle per i layout però :)
In realtà la regola ‘non abusare’ credo che valga per tutti i principi esistenti, non solo nel web design. Siamo noi che siamo argomentocentrici ;)
Supereremo anche questo, okay…ma intanto, che male agli occhi!
Un abbraccio Sasà
Ottima analisi, lucida come sempre.
Ho notato anche io un forte abuso delle ombreggiature sul testo (e non solo) e concordo con te quando dici che a volte in mezzo a tutta questa modernità sembra di tornare indietro di dieci anni…che tristezza :(
No, no…bando alla tristezza!
Divertiti ruotando un po’ di testi, giocando un po’ con bagliori e ombre e sono certa che la tristezza passerà :D
Tutto questo mi fa venire in mente “Coca Cola Conversation”, il blog della Coca Cola. E, di conseguenza, la necessità di abbinare lo stile retrò al fatto di avere una storia da raccontare.
Non abusare è sempre una buona regola di condotta. Ma cosa significa non abusare? Non estremizzare i CSS? Oppure, semplicemente non optare per il retrò quando non ci sono i presupposti?
Per esempio, tutti quelli che continuano a indossare l’orologio sul pulsino in stile Gianni Agnelli (retrò), abusano per la dimensione e le caratteristiche dell’orologio? O per il fatto di compiere un gesto senza una storia autentica di eleganza maschile da raccontare?
Come sempre, ottimo lavoro.
Come sempre, ottima retorica e ottimo spunto di discussione.
Io di lunedi mattina – me tapina – sono poco prolissa e troppo poco lucida per poter disquisire cosi amabilmente :)
Che dire…sarà che a me lo stile retrò non piace affatto, sono ancora affezionato allo stile caramelloso del web 2.0 ma…no, non ci siamo affatto =\
Io generalmente amo molto lo stile vintage, ma questo nuovo stile è tutta un’altra storia. I dettagli grafici sono diversi e, credo, meno accattivanti.
Del resto anche il web 2.0 ha fatto la sua storia ed è ora di andare avanti, i think ;)
probabilmente hai ragione, ma non mi sembra questa la strada giusta da percorrere :)
Ciao Sarah,
…siamo nella lista :( tema Mynews su Mojo-themes.
Accettando di buon grado in giudizio di una bravissima webdesigner, ci piacerebbe ricevere dei feedback e dei suggerimenti per migliorare il tema, così nei prossimi aggiornamenti e nei prossimi progetti eviteremo di commettere lo stesso errore.
Ciao Giuseppe,
il tuo tema non e’ nella lista, il focus dell’immagine e’ sulla colonna di destra di Mojo Themes, dove le intestazioni sono scritte con un font praticamente illeggibile (vedi ‘created’, ‘design style’, ecc.) ;)
Mi dispiace per l’equivoco!
Tiro un sospiro di sollievo!
C’è stata una coincidenza non voluta, infatti, stamane mi sono permesso di inviarti una mail. Appena hai modo spero di ricevere una risposta positiva :)
Mettila cosi: ti ho fatto un po’ di pubblicita’ aggratiss :D
Scherzi a parte, non ho ricevuto alcuna mail. L’hai inviata tramite il modulo contatti nel mio sito o qui su YIW?
Molto bello, io adoro questo stile! Mi fanno impazzire le tag “effetto cucito” :)
Quell’effetto piace anche a me, piace un po’ meno quando applicato sul testo fino a renderlo indecifrabile, pero’ ;)
eheh assolutamente :P
Ho usato il form contatti sul tuo sito, se ti va di aggiungermi ai tuoi contatti skype, trovi il mio account sul sito jooforge.com
Ma si dai, è un periodo di transizione, poi torna tutto a posto :p
Siam ottimisti, via :) speriamo in bene!
Qualcuno disse che ogni 10 anni le mode ritornano. (non mi ricordo chi eheh)
In certi casi questa affermazione e’ una bestemmia, occhio :D
Buona settimana a tutti i lettori però potevi farlo in CSS3 XD ihihihi
Lascio i giochetti con i CSS3 a chi ha piu tempo :)
L’importante e’ l’effetto finale, non il mezzo ;)
Del resto come tutte le novità ci si lascia spesso andare, senza limiti…vedremo cosa combinerò io…se trovo il tempo…però l’effetto vintage m’è sempre piaciuto. Come la moda tutto nella grafica è un ciclo continuo! Tutto torna e ritorna…
…e ritorna… :D
Come detto, non volevo sottolineare il ritorno dello stile vintage (che io stessa amo molto, oltretutto), ma la nascita di questo nuovo stile caratterizzato da diversi (e spesso eccessivi) effetti CSS3 :)
Mi trovi d’ accordissimo sul fatto che non bisogna troppo abusare delle nuove tendenze e di ogni sorta di strumento che il web ci mette a disposizione. Mi sembra un tuffo nel passato….sicuramente vi sarà capitato di approcciare per la prima volta a photoshop e mischiare 10 filtri insieme….il risultato era orripilante, mi sembra di essere tornato a quell’esperienze…caricare di effetti speciali il web non serve a nulla secondo me ;)
Cmq complimenti, ovviamente!
…scusate, vedo spesso che parlate di molti font particolari. Ma chiedo verranno poi visualizzati su tutti i computer PC e MAC ?
Non bisognerebbe utilizzare i font “web-safe mac e windows ?
grazie dell’attenzione e brava Sarah…
normalmente si, ma di recente si è affermato un metodo standard per aggirare questa limitazione tramite css, ovvero @font-face. ormai è supportato da qualunque browser (anche IE6 se si specifica un font in formato eot).
Esistono altri metodi, ad esempio questo http://code.google.com/webfonts