Gli stili nel webdesign: le caratteristiche dello stile web 2.0
Abbiamo già analizzato due stili di (web)design: il corporate/business e il grunge; abbiamo anche realizzato due layout molto accattivanti in Photoshop, sempre seguendo i trend e le caratteristiche di questi stili. Oggi vedremo che cosa si intende con stile “web 2.0” e quali sono i tratti distintivi di questo stile nel web design e, come promesso, la prossima settimana realizzeremo il terzo layout di questa nostra rubrica. Sei pronto? Cominciamo.
Web 2.0: di che cosa si tratta?
In realtà, come molte polemiche già ci fanno notare, il web 2.0 non è propriamente uno stile di design ma un concetto molto più ampio che a che vedere, riassumendo, con l’evoluzione di Internet. A noi basti sapere che, Wikipedia docet, “si tende ad indicare come Web 2.0 l’insieme di tutte quelle applicazioni online che permettono uno spiccato livello di interazione sito-utente (blog, forum, chat, sistemi quali Wikipedia, Youtube, Facebook, Myspace, Twitter, ecc.)”
Da qui la nascita e la diffusione di uno stile che prende anch’esso il nome di web 2.0, ma solo perché le interfacce grafiche sono fortemente ispirate dal design e dall’estetica di questi siti.
Quali sono gli elementi ricorrenti nello stile web 2.0?
Vediamo insieme quali sono gli elementi grafici e i trend più ricorrenti nello stile web 2.0:
- Rotondità e curve morbide: lo stile web 2.0 richiede un taglio netto con la grafica squadrata tipica dei layout tabellari, preferendo curve morbide, rotondità e angolature soft.
- Punti di luce e bagliori: i bagliori e gli effetti di luce sono utilizzati per evidenziare e focalizzare l’attenzione su determinati contenuti della pagina.
Il bagliore dà profondità e risalta gli ultimi lavori, illuminandoli.
Il bagliore evidenzia la parola "persecution", il titolo dello show che deve attirare l'attenzione
Il bagliore evidenzia lo slogan e l’ultimo lavoro.
- Colori tenui e tonalità pastello: le palette di questo stile tendono a colori pastello, soprattutto nelle tonalità dell’azzurro e del verde. Il trend è abbinare background soft con elementi dai colori accesi, forti e vivaci in contrasto.
Il contrasto tra l'azzurro e l'arancione focalizza l'attenzione dell'utente sulle immagini del prodotto poste nello slider.
- Riflessi e ombre: i vari elementi della grafica devono possedere una certa profondità, dimostrare di avere in qualche modo “spessore” nel layout. Per questo si lavora molto sulle ombre, soprattutto dei pulsanti e degli screenshot nei portfolio. C’è inoltre la tendenza di rendere le superfici “di vetro”, quindi lucide, riflettenti.
- Pulsanti call-to-action: i pulsanti call-to-action hanno lo scopo di sollecitare un’azione da parte dell’utente che sta navigando il nostro sito web. L’azione può essere la registrazione ad una newsletter, il compilare un modulo contatti o l’acquisto di un prodotto, non c’è differenza. L’importante è che il pulsante attiri l’attenzione in modo immediato ed efficace. Per questo si consigliano pulsanti non troppo piccoli e con colori vibranti, che spicchino nella grafica generale della pagina. Su questo argomento rimando comunque alla lettura di questo interessante articolo di Smashing Magazine.
- Icone: Le icone, inserite nei posti giusti, calamitano l’attenzione del cliente e rendono i concetti universalmente chiari in modo immediato ed efficace. Proprio per questo vengono utilizzate soprattutto per rappresentare simbolicamente servizi e prodotti, per rafforzare alcuni concept (la classica icona a forma di casetta inserita nel menu, che raffigura l’home page) e per richiamare lo stile del design nei contenuti testuali, favorendone oltretutto la leggibilità.
Anche in questo caso ti rimando comunque alla lettura di questo articolo, dove puoi trovare tanti esempi nel corretto ed efficace utilizzo delle icone.
Nel prossimo articolo realizzeremo un layout in stile web 2.0, sulla base delle caratteristiche trattate oggi. Intanto, se vuoi approfondire qualche concetto, linko qualche risorsa che potrebbe tornarti utile.
Letture consigliate
25 esempi di come il web 2.0 e il design tradizionale possano convivere
Design Web 2.0: guida allo stile
Come distruggere il look web 2.0
Tutorial
Come disegnare un layout in stile web 2.0
Creare un layout professionale in stile web 2.0
Disegnare un tema di wordpress in stile web 2.0
Risorse
99 risorse per un design web 2.0
Dai pulsanti ai poster: 20 tutorial web 2.0
Gli altri articoli di questa guida:
- Gli stili nel web design: le caratteristiche del corporate style | Come realizzare un sito in corporate style?
- Gli stili nel web design: le caratteristiche del grunge style | Come realizzare un sito in grunge style?
- Gli stili nel web design: le caratteristiche del web 2.0 style | Come realizzare un sito in web 2.0 style?
- Gli stili nel web design: le caratteristiche del vintage style | Come realizzare un sito in vintage style?
- Gli stili nel web design: le caratteristiche del magazine style | Come realizzare un sito in magazine style?
- Gli stili nel web design: le caratteristiche dell’organic style | Come realizzare un sito in organic style?
- Gli stili nel web design: le caratteristiche dello stile tipografico | Come realizzare un sito in typography style?
- Gli stili nel web design: le caratteristiche dell’illustration style | Come realizzare un sito in illustration style?
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
29 commenti
Trackback e pingback
-
uberVU - social comments
Social comments and analytics for this post... This post was mentioned on Twitter by yiw: RT @YIW Gli stili… -
Tweets that mention Gli stili nel webdesign: le caratteristiche dello stile web 2.0 | Your Inspiration Web -- Topsy.com
[...] This post was mentioned on Twitter by Diego, nando pappalardo, Salvatore Giuliano, Salvatore Giuliano, Your Inspiration Web and others.… -
Come realizzare un layout in stile grunge? | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del web 2.0 style | Come realizzare un sito in web 2.0… -
Gli stili nel webdesign: le caratteristiche dello stile vintage | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del web 2.0 style | Come realizzare un sito in web 2.0… -
Gli stili nel webdesign: le caratteristiche dello stile grunge | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del web 2.0 style | Come realizzare un sito in web 2.0… -
Come disegnare un layout in stile vintage? tutorial e psd | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del web 2.0 style | Come realizzare un sito in web 2.0… -
Come disegnare un layout in stile magazine? tutorial e psd | Your Inspiration Web
[...] Gli stili nel web design: le caratteristiche del web 2.0 style | Come realizzare un sito in web 2.0…
Grazie per il post! Ottima guida per realizzare layout adatti ad ogni tendenza. Ma, ha ancora senso parlare di stile Web 2.0? Non siamo la suo tramonto?
Ciao Giacomo :)
A dirla tutta io non credo che gli stili di cui parlo in questa rubrica avranno mai un tramonto. Sono mesi che si parla della fine dello stile web 2.0 eppure nelle gallery ancora ogni due siti ce n’e’ uno in questo stile e ancora fioriscono tutorial in ogni dove. Io stessa ho realizzato un progetto con grafica web 2.0, e questo tre settimane fa.
Qualche mese addietro, un nostro lettore (ciao Weps) aveva fatto la stessa obiezione per lo stile grunge, affermando “il grunge e’ morto”…eppure oggi stiamo rivivendo in tutto e per tutto una nuova fase grunge :D
Comunque sia, tramonto o no, in questa rubrica analizzo tutti gli stili senza esclusione :) A presto
Bravissima!!!! E utilissima come sempre!!!!
Buongiorno anche all’altro Giacomo :)
Grazie, sei gentilissimo come sempre!
Concordo: anche il post sul grunge è molto utile e ben fatto.
Ottima guida! Grazie!
Sarebbe anche interessante conoscere i font che meglio si adattano ad uno stile “web 2.0″…
Ciao Francesco :)
Chissà, magari facciamo un appendice sui font per i diversti stili…grazie per il suggerimento!
A presto
Ottimo questo post. Ovviamente fatto da chi se ne intende con gusto. Cercherò di restar aggiornato il più possibile. A dir la verità sarebbe dall’anno scorso che avevo sentito parlare di “morte” del 2.0 mah! Intanto…andiam avanti!
Toccherà alla 2.1 o al 3.0??
Ciao Ale,
anche io sono mesi che ormai sento parlare della morte di questo o quest’altro stile, ma alla fine dei conti siamo sempre qui :D
Grazie per essere passato!
Ciao Sara. Eccellente articolo.
Intervengo per dare la mia opinione su quest dibattito del web 2.0 vivo o morto(?).
Intanto il web 2.0 è vivo e lo sarà fin tanto che non saremo al web 3.0 (e ce ne vorrà ancora un po’).
A me sembra che siamo nel pieno dell’implementazione del web 2.0. Se è vero che questo termine indica il passaggio dalla fruizione alla partecipazione, dalla home page al blog, dai newsgroup ai social network, allora dobbiamo dire che siamo ancora in una fase di crescita.
Non farei la differenza tra web 2.0 e stile del web 2.0. Questo termine indica “un’epoca” che ingloba tutto, gli stili, le tecnologie, le applicazioni, ed anche il modo nel quale gli utenti si rapportano alla rete. E’ come dire che c’é stata la pittura rinascimentale, l’architettura rinascimentale, la società rinascimentale. E tutto questo lo chiamiamo rinascimento.
Si modificheranno questi stili? Può darsi. Ma saranno dei nuovi stili del web 2.0.
Il web 3.0, oltre alle novità tecnologiche che promette, suggerisce anche nuove modalità di interagire con la rete e dunque anche dei nuovi stili. I più visionari stanno lavorando su modalità 3D (second life like per intenderci).
Così troveremo wikipedia nella biblioteca, consulteremo i blog nell’edicola all’angolo, discuteremo con i nostri amici nel bar “Messenger” e ci telefoneremo dalle cabine di skype.
Allora sì che gli stili cambieranno davvero.
Io credo che alcuni elementi del web 2.0 siano stati un pò abusati e abbiano un pò stancato, mi viene per esempio da pensare all’effetto glossy e alle riflessioni sulle immagini. Credo comunque che come stile sia ancora molto in voga e si addica perfettamente a un certo tipo di progetti. La sfida rimane sempre quella di prendere gli aspetti più interessanti di ogni stile e riuscire a combinarli assieme in modo da creare qualcosa di innovativo e interessante.
Ciao Maurizio, bella argomentazione, grazie :)
Ho fatto la distinzione tra web 2.0 e stile web 2.0 perche’ qua e la’ ho letto feroci polemiche sull’argomento e non volevo ridurre il web 2.0 ad una sfumatura o a un angolo arrotondato. Ti ringrazio comunque per la delucidazione :)
Detto questo non ci resta che aspettare, e vedere cosa succedera’. A presto!
Ciao Quirky, benvenuto su YIW.
Sono d’accordo con te, certi elementi (soprattutto se fatti male) sono visti e rivisti, anche se gli stessi effetti (dal riflesso al glossy) se rivisitati con gusto e a piccole dosi possono ancora fare un buon design.
Grazie per il tuo commento, a presto!
Mi stai facendo venire voglia di cambiare lo stile del mio sito :)………..che per dirtela tutta…..non ho ancora ben capito in che stile sia fatto :)
Quando l’ho fatto ho disegnato una cosa che mi piacesse a livello grafico e come colori, senza troppo pensare a questo argomento….P.S. son curioso di sapere la tua opinione, ma secondo te che stile è ……….crisgrafica :)
Ciao…..e come al solito complimenti per l’articolo
Ciao Cristiano! Bè, cambiare non fa mai male, il web è sempre in movimento e chi si cristallizza in uno stile troppo a lungo rischia di ritrovarsi un sito datato. Credo che il tuo sito non rientri in uno stile specifico :) non è comunque obbligatorio attenersi agli standard di questo e quest’altro stile.
Se deciderai di fare un restyling ti darei molto volentieri qualche consiglio :)
A presto
Certo, ho letto anche io le solite feroci polemiche che non portano a nulla.
Comunque (rileggendo il mio commento non si capisce) era il mio punto di vista, la mia opinione. :-)
Tranquillo, si capiva ;) Il bello di una community è proprio ritrovarsi a tu per tu con così tante persone diverse tra loro, ognuno con una propria identità e con le proprie considerazioni. Si cresce molto così, a livello umano e professionale. :)
A presto
@Francesco: ecco i font dei loghi 2.0. Ciao!
Grazie Giacomo…segnalazione molto interessante :)
Brava! Post molto semplice e chiaro!
Grazie Fabri…spero che apprezzerai anche il tutorial della prossima settimana! ;)
Articolo molto interessante e utile bravi