Gli stili nel webdesign: le caratteristiche dello stile grunge

Dopo aver analizzato le caratteristiche dello stile corporate e aver disegnato il nostro layout in Photoshop, oggi ci occuperemo di uno stile che da tempo è ormai una vera e propria tendenza: il Grunge. Ormai è relativamente semplice riconoscere un sito dal design grunge, ma non tutti sanno quali sono le caratteristiche e i dettagli che rendono questo stile così accattivante: vediamoli insieme!

Grunge web design: di che cosa si tratta?

Il termine “grunge” – che deriva dall’aggettivo “grungy”, parola che, nello slang americano, ha il significato di “sudicio”, niente di più niente di meno – è stato coniato per contrassegnare un determinato stile musicale che spazia dal punk al rock, passando per l’heavy metal.

Data la premessa non stupisce che il grunge venga associato a un design aggressivo, disordinato, sporco per l’appunto.

Quando realizzare un layout in stile grunge?

Lo stile grunge, soprattutto nella sua versione “urbana” (skateboard e murales, per intenderci), è adatto per siti anticonvenzionali e volutamente fuori dalle righe. Pagine personali di cantanti e case discografiche ma anche negozi di abbigliamento e ristoranti, a patto che il messaggio da infondere nell’utente sia l’originalità e la voglia di rompere gli schemi, di infrangere le comuni regole dell’estetica e del buon gusto.

Ma diamo un’occhiata alle caratteristiche dello stile grunge nel webdesign, che possono essere così riassunte:

  1. Colori opaci: Nel design grunge i colori vibranti e accesi sono sostituiti da tonalità neutre e perlopiù “spente”. La palette dei colori tipicamente grunge richiama il beige, il marrone, il nero e il grigio. Si evitano i colori pastello tipici dello stile web 2.0 (o dello stile corporate, anche), le sfumature e le tonalità tenui.
  2. Texture e pattern: In nessun altro stile le texture e i pattern giocano un ruolo così basilare. Lastre di acciaio, jeans scuciti, un vecchio maglione di lana: tutto può diventare un background di grande impatto visivo, a patto che sia “vissuto” e quanto più realistico possibile.
  3. Dettagli realistici: Il grunge, così come nello stile hand-drawn, pullula di elementi grafici estrapolati dalla realtà che regalano al design un’immagine più autentica, quasi a voler prendere le distanze dalla virtualità del web. Adesivi, polaroid,carta strappata, brandelli di scotch, post-it e puntine da disegno: tutti dettagli per rendere il design eccentrico ma, al tempo stesso, concreto.
  4. Font calligrafici: Anche inserire nel layout qualche scritta calligrafica serve a sublimare l’originalità e il realismo del design. Quando i font non sono tipicamente grunge (quindi sbiaditi, graffiati e distorti) la scelta cade su font handwriting dall’aria spontanea e incurante, asimmetrici e disordinati.

Riassumendo: lo stile grunge è uno degli stili più creativi e divertenti con cui è possibile disegnare il layout di un sito web, dato che ti permette di osare e sbizzarrirti con diversi elementi grafici senza l’imposizione di regole precise da seguire.

La parola d’ordine è: inventa, sperimenta! L’unico rischio è realizzare un design confuso che, invece di essere accattivante e attrarre l’utente, finisce con il disorientarlo e farlo scappare a gambe levate. Il mio consiglio è di non esagerare, lasciando con una grafica sobria le sezioni contenenti testi e navigazione ed esprimendo la propria creatività sul background e sugli elementi che non compromettono la leggibilità e l’usabilità del sito.

Alcuni esempi di grunge web design

Risorse

Puoi trovare delle eccellenti risorse di qualità nel nostro articolo “Risorse: font, tutorial, icone, texture e template per un favoloso grunge style”. Se non ti bastano (ingordo!) ti propongo alcuni links davvero interessanti.

Ispirazione

Ispirazione grunge: layout, logodesign & tutorial

30 beautiful examples of grunge in webdesign

Grunge web design: best practices

Tutorial

Design a cartoon grunge layout

How to create a grunge webdesign

Poster, background e tipografia: tutorials in stile grunge

Materiale (brush, texture, font & co)

20 font grunge che ogni designer deve avere

Massive collection: ultimate resources for grunge design

42 wallpaper grunge per i tuoi background

Letture consigliate

Grunge style in modern webdesign

Gli altri articoli di questa guida:

La prossima settimana progetteremo e realizzeremo in photoshop un layout in stile grunge. Non perdere l’appuntamento!

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 »
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:

47 commenti

  1. lxn
    • dobrio

Trackback e pingback

  1. Come realizzare un sito in stile corporate/business? | Your Inspiration Web
    [...] Gli stili nel web design: le caratteristiche del grunge style | Come realizzare un sito in grunge style? [...]
  2. Gli stili nel web design: le caratteristiche del corporate style | Your Inspiration Web
    [...] Gli stili nel web design: le caratteristiche del grunge style | Come realizzare un sito in grunge style? [...]
  3. uberVU - social comments
    Social comments and analytics for this post... This post was mentioned on Twitter by nando_p: RT @YIW Gli stili nel webdesign: …
  4. Gli stili nel webdesign: le caratteristiche dello stile web 2.0 | Your Inspiration Web
    [...] già analizzato due stili di (web)design: il corporate/business e il grunge; abbiamo anche realizzato due layout molto accattivanti in …
  5. Come realizzare un layout in stile grunge? | Your Inspiration Web
    [...] Gli stili nel web design: le caratteristiche del grunge style | Come realizzare un sito in grunge style? [...]
  6. Come disegnare un layout in stile web 2.0? tutorial e psd | Your Inspiration Web
    [...] Gli stili nel web design: le caratteristiche del grunge style | Come realizzare un sito in grunge style? [...]
  7. Come disegnare un layout in stile vintage? tutorial e psd | Your Inspiration Web
    [...] Gli stili nel web design: le caratteristiche del grunge style | Come realizzare un sito in grunge style? [...]
  8. Gli stili nel webdesign: le caratteristiche dello stile vintage | Your Inspiration Web
    [...] Gli stili nel web design: le caratteristiche del grunge style | Come realizzare un sito in grunge style? [...]
  9. Gli stili nel web design: le caratteristiche di un sito in stile magazine | Your Inspiration Web
    [...] Gli stili nel web design: le caratteristiche del grunge style | Come realizzare un sito in grunge style? [...]
  10. Gli stili nel web design: le caratteristiche dello stile organic | Your Inspiration Web
    [...] design, equivale ad una scelta di colori e di elementi grafici per certi versi simile agli stili grunge e …
  11. Come disegnare un layout in stile magazine? tutorial e psd | Your Inspiration Web
    [...] Gli stili nel web design: le caratteristiche del grunge style | Come realizzare un sito in grunge style? [...]
  12. Come disegnare un layout in stile organic? tutorial e psd | Your Inspiration Web
    [...] Gli stili nel web design: le caratteristiche del grunge style | Come realizzare un sito in grunge style? [...]

Lascia un Commento

Current day month ye@r *