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

Ispirazione: siti 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:

Tag: ,

L'autore

Web designer, lavora nel campo della grafica e dello sviluppo web da sei anni e al momento oltre a collaborare con una web agency gestisce con successo la sua attività di freelance sotto il nome di mascara design. Come molti freelance si è abituata a gestire più ruoli, spaziando dalla grafica cartacea allo sviluppo del codice xhtml e css; nonostante questo la sua passione rimane, sempre e comunque, la grafica per il web.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

29 commenti

Trackback e pingback

  1. uberVU - social comments
    Social comments and analytics for this post... This post was mentioned on Twitter by yiw: RT @YIW Gli stili nel…
  2. 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.…
  3. 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…
  4. 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…
  5. 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…
  6. 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…
  7. 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…