Salta al contenuto

Linee guida per la grafica Web 2.0

7 luglio 2007

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.

Crediti foto 1

Crediti foto 2

23 commenti Lascia un →
  1. 7 luglio 2007 4:09 pm

    Wow! Bell’articolo! e dire che dovrei farne io di post del genere, se no dove sarebbe il “webediting”? :D

  2. 7 luglio 2007 4:17 pm

    Ne faccio più io di te. :-D

  3. 7 luglio 2007 5:13 pm

    grande, questo web 2.0 sarà tutto da gustare (hai detto proprio tu che è pieno di zuccherosità) :-D

  4. 7 luglio 2007 5:15 pm

    @ phoenix, e allora gustiamocelo! Per me gusto fragola grazie. :-)

  5. gian permalink
    7 luglio 2007 7:23 pm

    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

  6. 7 luglio 2007 9:07 pm

    @ 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… :-)

  7. 8 luglio 2007 12:53 am

    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).

  8. 8 luglio 2007 10:09 am

    Lazza meglio il 2.1, con la GOMMA!!! :D
    Comunque ottimo post, mi sveli sempre qualcosa che non so ;)

  9. 8 luglio 2007 12:28 pm

    @ Digitex, grazie per essere passato. :-D
    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’è. :-D E poi il Web 2.1 l’hai inventato tu. :-P

  10. 8 luglio 2007 3:12 pm

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

  11. 8 luglio 2007 3:17 pm

    @ Cisco, infatti “Questi sono sono consigli per iniziare, non sono completi o esaustivi.” ;-)

  12. 9 luglio 2007 3:05 pm

    Complimenti, bell’articolo e molto interessante :)

  13. 9 luglio 2007 3:12 pm

    Grazie. :-)

  14. gfuffa permalink
    24 luglio 2007 12:10 pm

    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

  15. 28 luglio 2007 10:06 am

    @ gfuffa, si tratta solo di una guida, scritta in modo “elevato” con espressioni tipiche da manuale per essere anche buffa.
    Come ho già scritto:

    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.

  16. 26 agosto 2007 5:41 pm

    Wow!
    bell articolo comlimenti
    comunque, volevo sapere quale programma consigli per realizzare le imagini web 2.0!
    grazie..

  17. 26 agosto 2007 6:26 pm

    @ koalalorenzo, ovviamente Gimp. ;-) Ma non solo per la grafica Web 2.0, per tutto! :-)
    Se preferisci il vettoriale invece Inkscape.

  18. 18 ottobre 2007 1:30 pm

    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!

  19. 18 ottobre 2007 1:51 pm

    Per quanto non posso negare che ci siano delle mode grafiche nate e propagatesi proprio attraverso il web2.0.

    Visto? Ti sei risposto da solo! :-D

    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.

    E questo secondo me è un po’ il rovescio della medaglia…

  20. 18 ottobre 2007 5:39 pm

    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.

  21. 18 ottobre 2007 5:40 pm

    ehm… mi è partito un pezzo di frase… vabbé si capisce il discorso no?

  22. 18 ottobre 2007 7:28 pm

    Sì, si capisce. :-)

Trackback

  1. Linee guida per creare siti web 2.0 « Fedeweb

Che cosa ne pensi?

Fill in your details below or click an icon to log in:

Gravatar
Logo WordPress.com

Please log in to WordPress.com to post a comment to your blog.

Foto Twitter

You are commenting using your Twitter account. Log Out / Modifica )

Foto di Facebook

You are commenting using your Facebook account. Log Out / Modifica )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 36 other followers