Linee guida per la grafica Web 2.0
Ogni giorno il web ci riserva delle interessanti sorprese, in particolare in questo periodo in cui si sviluppa sempre più il cosiddetto Web 2.0.

Finalmente mi libero di quest’immagine fatta tempo fa… ![]()
Questo nuovo modo di concepire il Web, come avevo già detto, comporta l’utilizzo di prassi di uno “standard” grafico pieno di sfumature bianche, riflessi e zuccherosità varie.
In sintesi si è sviluppato un nuovo stile tipico di grafica Web 2.0, che è comune a gran parte dei nuovi servizi e che dà un’idea di uniformità.
In questo post voglio scrivere alcune linee guida per questo tipo di grafica dettate dall’esperienza e da un piccolo tocco di gusto personale, e quindi non devono essere considerate regole; ma buoni consigli.
1. Il concetto
I breve, la grafica del Web 2.0 deve essere semplice, chiara, luminosa e splendente. Le parole chiave sono cristallosa, vetrosa e zuccherosa.
2. Flat
La base della grafica 2.0 deve essere piatta o leggermente tondeggiante. Assolutamente da evitare i rilievi classici. Ottima invece una leggera sfumatura che conferisca rotondità.

3. Riflessi
Il riflesso deve essere in alto, non inclinato verso un lato ma simmetrico, inoltre deve essere una sfumatura di bianco, o un bianco uniforme.
4. Bordo del riflesso
Il riflesso deve avere un margine, anche sottile, rispetto alla base.

5. Forma del riflesso
Il riflesso deve essere orizzontale, orizzontale ad “onda” che sale verso destra (e parte dal basso da sinistra) oppure ellittico convesso. Da evitare l’ellittico concavo.

6. Ombra
L’ombra dev’essere nera, sfocata e in semitrasparenza, e preferibilmente in basso in linea verticale rispetto all’oggetto o semplicemente dietro di esso. Assolutamente pessime le ombre nette. Se gli oggetti devono dare l’idea di essere “in piedi”, si può mettere un’ombra ellittica in basso.

Ok, ho un pizzico esagerato con l’ampiezza dell’ombra
7. Uniformità
Questo vale per tutto, comunque va ricordato che è bene seguire un unico stile e colore per basi, riflessi ed ombre in diversi elementi correlati tra loro.
8. Strisce
Come aggiunta opzionale, si posso aggiungere alla base delle strisce in sovrimpressione per decorare. L’importante è che le strisce siano più chiare, e semitrasparenti, poco marcate. La loro direzione deve essere questa: ↗
9. Varianti
Bisogna ricordare che da queste indicazioni base si possono costruire delle varianti ed un proprio stile personale, ricordando però di non discostarsi troppo dai concetti principali. Questi sono sono consigli per iniziare, non sono completi o esaustivi.










Wow! Bell’articolo! e dire che dovrei farne io di post del genere, se no dove sarebbe il “webediting”?
Ne faccio più io di te.
grande, questo web 2.0 sarà tutto da gustare (hai detto proprio tu che è pieno di zuccherosità)
@ phoenix, e allora gustiamocelo! Per me gusto fragola grazie.
post carino, ma non posso non sottolineare che il web 2.0 non è solo grafica…
è molto di più!
per eventuali chiarimenti, lascio la parola a wikipedia, che è molto più esaustiva di me!
http://it.wikipedia.org/wiki/Web_2.0
@ gian, e cosa c’entra. Questo post parla di grafica. Grazie per il link in italiano, io ho messo quello inglese perché l’altro non l’avevo trovato…
Bell’articolo , per chi ne sia interessato…ho scritto un tutorial sulla creazione di un bottone in stile web 2.0 con inkscape.(http://www.digitex3d.altervista.org/wordpress/?p=15).
Lazza meglio il 2.1, con la GOMMA!!!
Comunque ottimo post, mi sveli sempre qualcosa che non so
@ Digitex, grazie per essere passato.


E poi il Web 2.1 l’hai inventato tu.
Il bottone non è male, anche se forse potrebbe essere un po’ rifinito.
Comunque è un tutorial interessante se non altro per i riflessi in stile aqua, che comunque non sono propriamente Web 2.0, anche se sono belli.
@ Bl@ster, nel punto 2 c’è.
Non male, ma la grafica del web 2.0 non è solo questo ci sarebbe molto altro dire, sviscerando forse aspetti più tecnici.
Un buon lavoro comunque
@ Cisco, infatti “Questi sono sono consigli per iniziare, non sono completi o esaustivi.”
Complimenti, bell’articolo e molto interessante
Grazie.
Dunque sono capitato sul tuo blog, cercavo spunti sulla grafica in stile cosiddetto “2.0″. No, per dirti: il post è un po’ da sbarbi, ripigliati
@ gfuffa, si tratta solo di una guida, scritta in modo “elevato” con espressioni tipiche da manuale per essere anche buffa.
Come ho già scritto:
Wow!
bell articolo comlimenti
comunque, volevo sapere quale programma consigli per realizzare le imagini web 2.0!
grazie..
@ koalalorenzo, ovviamente Gimp.
Ma non solo per la grafica Web 2.0, per tutto! 
Se preferisci il vettoriale invece Inkscape.
al di la del fatto che il tutorial è decisamente ben fatto, mi viene da fare una cosiderazione: come possiamo parlare di “stile web 2.0″? Esiste veramente una tale cosa, o stai cercando di crearla te qui e ora? Lo stile che proponi non è certo una cosa legata solo al web, ma forse è una moda grafica che troviamo un po’ovunque in ambito informatico e di screen design.
Secondo me non esistono immagini web2.0, è una cosa troppo concettuale per essere ridotta ad uno stile grafico. Per quanto non posso negare che ci siano delle mode grafiche nate e propagatesi proprio attraverso il web2.0.
Peró se vediamo il lato più estremo di questa tendenza io vedo più un’assenza di stile grafico, per me web 2.0 sono gli aggregatori, il social bookmarking, il libero scorrere delle informazioni che generalmente sono staccate dalla propria rappresentazione grafica. Il fatto stesso che magari leggo questo blog su google reader, o che lo ho inserito tra i miei feed in facebook fa in modo che lo stile grafico del tuo blog spesso rimane occultato alla mia vista e invece mi confronto con lo stile molto piú asettico dei sopracitati portali.
questo giusto perché sono un irrefrenabile criticone…
e comunque lunga vita a Inkscape!
Visto? Ti sei risposto da solo!
E questo secondo me è un po’ il rovescio della medaglia…
Il fatto è che web 2.0 è un modo di intendere il web, un’evoluzione del vecchio modo di concepirlo. Come non c’era uno stile web ma tanti stili web probabilmente non c’è uno stile web 2.0 unico.
comunque ammetto che è anche che nel momento in cui tutti parlano di stile web 2.0 questo comincia ad esistere… ed è proprio così che va il mondo. Le cose esistono quando sappiamo che esistono.
ehm… mi è partito un pezzo di frase… vabbé si capisce il discorso no?
Sì, si capisce.