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:
- 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.
- 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.
- 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.
- 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!
- 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:
47 commenti
Trackback e pingback
-
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? [...] -
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? [...] -
uberVU - social comments
Social comments and analytics for this post... This post was mentioned on Twitter by nando_p: RT @YIW Gli stili… -
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… -
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? [...] -
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? [...] -
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? [...] -
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? [...] -
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? [...] -
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… -
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? [...] -
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? [...]
Questo è lo stile che mi piace di più in assoluto :D
Ciao Ciccio!
Non l’avrei mai detto, vista la tua propensione a effetti di luce e frattali :)
ahah è stata una faaaseee XD ahah
Visto che sto cercando di realizzare un portfolio grunge non posso che ringraziarti! Grande!
Felice di esserti stata utile :) considera che la prossima settimana ci sara’ il tutorial su come disegnare un layout grunge-style in photoshop…se sei ancora alla ricerca di idee magari dacci un’occhiata! ;)
A presto
Proprio in qusti giorni mi sto accanendo con questo stile… sto cercando di esercitarmi con photoshop, per acquisire tutte le tecniche per questo stile.
Grande!
Antonio, ora vogliamo vedere le prove! :)
Comunque sto cercando un’idea per il template della prossima settimana e qualsiasi suggerimento e’ gradito :)
Al momento mi pare difficile riuscire a fare qualcosa da zero… per adesso sto apprendendo, soprattutto l’utilizzo di pattern e brush personalizzate, cose che ho utilizzato davvero poco… appena riuscirò a fare qualcosa, ve lo farò vedere :D
Il mio futuro sito web (o quello del mio gruppo) avevo intenzione di farli in questo stile.
Vediamo che riesci a tirare su con il template :D
Ad idee purtroppo sono un pochetto scarso con questo stile :(
@antonio: sai che ho una voglia matta di disegnare un sito per una band? quasi quasi lo faccio lunedi prossimo :D vedi che, non volendo, mi hai dato un’idea…!
ahahaha spettacolo!
Perfetto, l’idea della band è perfetta (non ci avevo pensato mentre lo stavo scrivendo, so strano). :D
propongo la sporca scrivania di un designer incallito piena di pezzetti di appunti sparsi qua e là con tanto di scarabocchi sul legno ahah
La parte sull’identità dell’artista potrebbe poi essere affidata a un documento un pò stropicciato messo di lato :p
ahahah troppe idee e confuse forse
:) Grazie per le idee Ciccio…anche se non amo lo stile “scrivania”, ormai mi sembra trita e ritrita. Vedremo…;)
Mi piace un sacco questo stile!
Non l’ho ancora utilizzato, ma dato che sto per proporre un paio di bozze ad un tatuatore, direi che una di queste potrebbe avere queste caratteristiche!
Nel caso lo posterò nel forum in cerca di suggerimenti :-D
Ciao Tatiana, benvenuta su YIW!
Anche io non ho ancora avuto modo di utilizzare questo stile, quindi il layout che disegnero’ per questa rubrica sara’ il primo su cui mi divertiro’ a sperimentare.
Tatuatore? Qua due siti mooolto carini, e anche un po’ grunge:
http://www.classicelectrictattoo.com/
http://www.gvendi.com/en/home/
anche se personalmente vedrei meglio un layout dark style, grigio, nero, macchie scure…:D
Mi raccomando appena hai messo giu qualcosa facci vedere!
A presto
Grazie Sarah per i link!
Trovo difficoltà a trovare dei siti di tatuatori fatti bene, penso che la maggior parte si affidi ad amici che sanno smanettare su internet, con il difetto di avere un sito poco professionale e da cui non posso assolutamente prendere spunto…
In ogni caso pensavo appunto di provare con un template grunge e uno, come dici tu, dark style così che il tatuatore possa scegliere quello che può si avvicina al suo stile!
E poi non vedo l’ora di vedere il tuo template! :-D
Ecco, tutte queste aspettative mi fanno venire l’ansia :D A questo punto le cose son due: o faccio il layout per una band o lo faccio per un tatuatore ;)
Ecco! Così senza volerlo ti ho dato uno spunto per il layout della prossima settimana! ;-)
Oppure ti ho messo ancora più dubbi! :-S
Ottimo post…è uno degli stili che più mi appassiona e lo sento vicino a me. Ricordo del 2004 un sito di Elisa per la pubblicazione del suo album Lotus che mi faceva impazzire! Pure ora (anche se le sue tonalità son molto chiare) usa lo stile grunge. Ovviamente..per osare questo è lo stile adatto.
Ciao Ale, grazie per la segnalazione! Il sito di Elisa e’ veramente bello. Mi ero persa un ottimo esempio di grunge, tutto italiano :D
A presto!
azz, quello di Elisa non lo avevo mai visto ancora… è molto bello.
Ma sbaglio, o è fatto in Joomla? :|
Si, Antonio e’ un Joomla :)
un bel lavorone hanno fatto :D
Suggerimento per il template…….Ho visto un sito che sta realizzando un amico per un piccolo gruppo rock locale, che addirittura come corpo di pagina utilizza una foto interna di un vecchio magazzino abbandonato………con tutte le cianfrusaglie fotografate, che da quello che ho capito dovrebbero diventare i pulsanti per la navigazione……speriamo che lo finisca in fretta perchè son curioso di vederlo
…..se non è grunge design quello…. :D
Mmmmh, intrigante come idea…anche se bisogna vedere l’effetto finale, perche’ nel complesso un magazzino pieno di cianfrusaglie potrebbe rivelarsi esageratamente caotico e rendere il layout troppo disordinato e confuso. Quando sara’ online ce lo fai vedere? Ormai siam curiosi :D
Ciao, ti posto lo screen di quel sito come ti avevo detto sopra, te l’ho caricato sul server che ospita il mio sito
http://www.crisgrafica.altervista.org/ARTEK.jpg
purtroppo per vederlo online ci vorrà ancora un po di tempo….intanto accontentati di questo :) che comunque è già definitivo come grafica…….ovviamente per problemy di privacy ho rimosso tutti i riferimenti personali della band…..ma il tutto è perfettamente vedibile
ciao e al prossimo post :)
ah Sara… i primi due link dei tutorial, non mi si aprono :(
Oggi funzionano….molto probabilmente era psdtuts ad avere problemi. :)
Continuano a non aprirsi… :(
ok ora funziano… il secondo lo avevo già visto, appena ho un pò di tempo lo devo fare in photoshop :D
Ciao ti volevo segnalare un po di font in stile grunge che ho trovato per caso sul web mentre cercavo tutt’altro……
http://www.hongkiat.com/blog/100-great-abstract-and-grunge-fonts/
se possono essere utili……. :)
Molto, molto interessante. Grazie Cristiano :)
Lo stile grunge è indubbiamente una figata!
Avendo iniziato con lo stile minimalista/2.0 (credo) non mi ci sono mai cimentato più di tanto, quindi approfitto del tutorial che arriverà fra poco con l’intenzione di iniziare una serie di layout con questo stile per poterlo perfezionare!
Mi piace veramente un sacco questo stile e complimentoni per il sito che sta praticamente diventando la mia home page di Firefox!
Ciao Dobrio, benvenuto e grazie per le belle parole :)