viklog

Una vera manna dal cielo per web designer e non solo.

Provare per credere… Un sentito grazie a Sign In per la segnalazione.

Popularity: 25% [?]

Le mode colpiscono tutte i frangenti della società, compreso Internet. La moda attuale può essere riassunta in un unica parola generalizzante: web 2.0¹. In questo articolo elenco una piccola serie di linee guida da seguire se si vuole implementare un design in stile web 2.0, linee guida acquisite durante l’esperienza degli ultimi sei mesi di web designing.

0) Il tempo dei 56k è finito

Ricordo ancora il mio primo corso di HTML/CSS (parliamo del 1999) in cui ci insegnarono una ferrea regola sull’uso di immagini all’interno di siti: utilizzare rigorosamente gif, ogni immagine doveva avere una dimensione massima di 4KB, senza mai superare un totale di 20KB (che era già troppo!). Ormai quei tempi sono superati: finalmente anche in Italia l’ADSL sta diventando una realtà di massa. Dunque, non facciamoci troppi problemi nell’uso di immagini per il layout delle pagine. Ora c’è chi usa un immagine di più di 150KB come header…

1) Colori

Usare colori pastello a basso contrasto, qui il grigio chiaro da fa re: dunque utilizzare colori che si allontanano il meno possibile dal bianco. Ecco alcuni esempi:

Come si vede nell’esempio, la prima cifra del codice esadecimale è sempre una f, in questo modo siamo sicuri il colore risultante sia sempre molto leggero. Per lavorare bene con questi colori leggerissimi è necessario regolare ad hoc la luminosità e il contrasto del nostro schermo, se abbiamo ancora un vecchio CRT molto meglio.

Un’altra possibilità è quella di usare un forte contrasto fra colore di sfondo e colore del carattere. In questo caso il suggerimento è quello di usare come sfondo dei grigi molto scuri, magari grigo/blu, invece usando come colore del carattere qualcosa di più acceso rispetto ai colori precedenti. Ad esempio:

Il consiglio è comunque di non basare tutto il sito su questi ultimi colori, ma di usarli solo per la sidebar o per moduli che si vuole mettere in evidenza.

3)Gradienti

Se si usano delle immagine di sfondo o comunque all’interno del layout è buona norma non usare mai colori piatti ma utilizzare dei gradienti, in particolare quelli che io chiamo “gradienti invisibili” perché sono gradienti fra due colori molto simili eppure danno quel tocco di classe in più che non guasta mai. Solitamente il colore più chiaro sta in alto, ma questo si può cambiare, l’importante che se decidete una versione o il viceversa rispettiate tale “regola” per tutti gli elementi grafici. Un esempio semplice semplice:

Di solito per questi gradienti si usano colori anche molto più vicini di quelli nell’esempio. Assolutamente da evitare, invece, i gradienti da sinistra a destra o viceversa, piuttosto in obliquo.

4) Sfondo

Per lo sfondo del body ci sono principalmente 3 possibilità:

1. Il corpo del sito con sfondo bianco mentre il body un colore di contrasto: un grigio, un azzurro, un marrone. In questo caso meglio usare colori più forti, comunque senza esagerare.
2. Usare per tutto un “bianco sporco”:
   
   Clicca sull’immagine per ingrandire
3. Usare un pattern di sfondo, a me non piacciono molto ma sono richiestissimi. Alcuni esempi fatti un po’ alla svelta:
   
   Clicca sulle immagini per ingrandirle

5)Titolo del sito

Usate un immagine: testo tutto maiuscolo con font sottile. Se il titolo del sito/blog è composto da più parole non separatele con lo spazio ma usate colori diversi per ogni parola.

Evitate il riflesso sotto il titolo, ha un po’ stufato. Se ne sentite proprio la necessità fate sì che sia appena appena visibile.

6)Carattere del contenuto

Se stiamo parlando di un blog o comunque di un sito pieno di contenuti in senso di testo non c’è cazzi: dimensione del font 12px e colore nero. Ma se il sito ci permette di farlo, perché il testo è poco, usiamo un carattere grande, magari non nero. Differenziamo titolo, preambolo/introduzione e tutto il resto. Meglio farlo vedere che spiegarlo:

Clicca sull’immagine per ingrandire

7)AJAX

E pensare che AJAX è una tecnologia vecchia come i javascript stessi… Ma si è diffusa solo negli ultimi anni grazie al fatto che i PC degli utenti sono sempre più potenti per cui non c’è alcun rischio nell’usare una massiccia quantità di codice client-side. Massiccia si, ma state attenti a non esagerare: basti pensare a prototype (incluso in Wordpress) che pesa più di 100 KB. Ecco una lista di javascript framework utili per inserire quelche effetto grafico nel nostro sito/blog (e non solo):

• jQuery (il re di tutti i JS framework!) e ThickBox
• Prototype
• mootools (implementa la “catena” di effetti, ovvero ad un elemento si possono assegnare una sequenza di diversi effetti), ancora meglio se in coppia con moo.rd
• YUI - Yahoo! User Interface Library (probabilmente il più completo di tutti i framework)
• ext (molto interessanti i GWT)
• lightbox 2 (io lo odio, però è molto in voga!)
• shadowbox (leggero e molto adattabile!)

Il più interessante è proprio questo ultimo perché non solo è leggero e con ottime prestazione (altro che lightbox!), ma è anche possibile configurarlo per basarsi su uno qualsiasi dei framework prima elencati (non proprio tutti) ed è compatibile con rel=”lightbox”. Peccato che io non riesca a farlo funzionare in questo blog . Lo potete vedere in azione in questo blog, ringrazio Il Bonzo per l’aiuto e la disponibilità!

8)Ombre

L’ombra degli oggetti grafici (icone, bottoni, etc…) meglio sotto l’oggetto stesso, come se questo fosse appoggiato su una superficie. In ogni caso usare ombre l-e-g-g-e-r-i-s-s-i-m-e!

8)Creatività

Queste sono solo alcune linee guida, posso tornare utili come no. Tanto senza un po’ di creatività (e di pazienza) nel mondo della grafica non si va da nessuna parte.

E ricordatevi che:

I bravi artisti copiano, i grandi artisti rubano. [I pirati della Silicon Velley]

No, non sto incitando a copiare il codice HTML/CSS altrui ^__^ dico solo che non c’è niente di male nell’ispirarsi ad un sito che ci piace.

Un articolo molto interessante sull’argomento e ricco di esempi lo trovate qui (in inglese).

[1] Mi trovo d’accordo con Paperino, però io la definirei sia una buzzword che una buzz word! Torna su

Popularity: 43% [?]

Dopo templatr (che non spicca certo per facilità d’uso) nasce Logo Creator, applicazione web che permette di creare - in pochi secondi - un logo come questo:

Potrete scegliere fra cinque temi (se ne salvano solo 3 però) e varie opzioni, come:

• tutti i colori presenti nell’immagine (sia del testo che dello sfondo);
• la dimensione dell’immagine;
• la dimensione e il font del carattere;
• etc etc…

Logo Creator è gratuito, le immagini sono generate in formato PNG e non sono coperte da alcuna licenza, dunque potete farne quello che volete. Utilissimo per chi, come me, finisce per avere loghi assurdi nel proprio blog . A mio avviso, assolutamente da aggiungere al proprio delicius!

- Warning: Divide by zero.

Popularity: 17% [?]