Siete stanchi delle diverse centinaia di gallerie che ripropongono sempre gli stessi siti? Allora potete provare a dare un’occhiata ad Oriental Gallery, una web gallery che ospita solo siti orientali.

Benchè il progetto sia evidentemente ancora giovane (tutta la selezione occupa “appena” 12 pagine, contro le centinaia/migliaia delle gallerie più famose), vale comunque la pena di dargli un’occhiata, si possono ricavare delle ispirazioni interessanti.

Chi sviluppa in Ajax sa bene quanto sia importante, durante l’esecuzione di un’operazione lato server (ad esempio la ricerca all’interno di un database), far capire all’utente che deve attendere il termine del processo.

Per fare questo si può ricorrere alla semplice visualizzazione di una scritta, come “Loading…, “Caricamento in corso…”, “Attendere prego…”, oppure si può optare per l’inserimento di una gif animata. In questo caso con un po’ di impegno troveremo in giro per la rete diverse raccolte già pronte, ma se vogliamo risparmiare tempo possiamo utilizzare Ajaxload, un servizio web 2.0 che ci permette di scegliere tra una gamma di diverse gif di caricamento e di personalizzarle nel colore e nello sfondo (impostabile anche su trasparente).

In pochi secondi potremo così ottenere la nostra gif e personalizzarla per renderla adatta allo schema di colori del sito o dell’applicazione su cui stiamo lavorando.

Chi non conosce il famosissimo Lightbox, lo script leggerissimo, elegante e cross-browser che permette di visualizzare un’immagine in un box che si sovrappone alla pagina?

Questo che vi proponiamo oggi, seppure tecnicamente abbastanza diverso, produce un effetto grafico abbastanza simile.
Ha però una peculiarità importantissima: permette di visualizzare non solo immagini in qualunque formato, ma anche video in vari formati, testo (con tanto di tag HTML) e addirittura siti esterni.

Lo script è scaricabile a questo indirizzo, dove trovate anche la relativa documentazione e una demo. E’ compatibile con i principali browser e richiede il framework Mootools per poter funzionare.

Premessa:
L’articolo che state per leggere è una libera traduzione del post “10 ways to get design approval” pubblicato da Paul Boag su 24ways. Boag suggerisce 10 punti dei quali tener conto nei rapporti col cliente; un breve elenco che può risultare molto utile per chi muove i primi passi nel mondo del web design.

Leggi tutto »

Una tendenza molto diffusa negli ultimi tempi è quella di inserire nelle proprie pagine delle aree a scomparsa, che possono essere espanse/ridotte per visualizzare ulteriori informazioni. Questa pratica, oltre ad aggiungere (se ben realizzata) un elemento di originalità al proprio design, presenta dei vantaggi anche dal punto di vista comunicativo: permette infatti di nascondere informazioni superflue, favorendo la concentrazione del visitatore su quello che è il messaggio principale contenuto nella pagina.

L’immagine all’inizio del post rappresenta un esempio di utilizzo di questa tecnica. Toggle, web agency londinese, ha infatti utilizzato questa tecnica nel suo nuovo sito per nascondere i servizi destinati ai clienti.

Vediamo ora come realizzare un effetto simile sfruttando Mootools e una semplice funzione javascript.
Leggi tutto »

Se siete soliti utilizzare Photoshop per creare il design del vostro sito, una delle risorse che troverete maggiormente utili saranno i pennelli (”brushes” in inglese) da importare nel programma.

Oggi vogliamo segnalarvi il sito PS Brushes.
La grafica essenziale non deve trarre in inganno: è una delle raccolte più complete di pennelli per Photoshop, e soprattutto… è completamente gratuito!
Notevole anche la qualità del materiale proposto, si nota che è una raccolta realizzata con una certa cura.

Link: PSBrushes.net

Nel bene o nel male, i CSS sono ormai entrati a fare parte dell’esperienza quotidiana di un buon web designer. Oggi vogliamo suggerirvi alcuni trucchi per semplificare il lavoro e per produrre un foglio di stile facilmente leggibile e modificabile (caratteristica estremamente importante non solo nell’eventualità di doverlo modificare in futuro, ma soprattutto nel caso in cui si rilasci un template o comunque un lavoro sul quale dovranno mettere le mani altre persone).

Leggi tutto »

L’importanza della scelta dei font non dovrebbe mai essere sottovalutata. Oltre alla leggibilità e all’estetica, un font appropriato porta, dal punto di vista comunicativo, diversi vantaggi; ad esempio, può contribuire a rendere più efficace la trasmissione del messaggio, oppure ad offrire all’utente un’esperienza di navigazione più piacevole, rendendolo di conseguenza maggiormente propenso ad esplorare il sito ed eventualmente ad acquistare i servizi offerti.

Smashing Magazine ha pubblicato a questo indirizzo un’interessante selezione di 60 font adatti ad un utilizzo professionale. Sono quasi tutti font a pagamento (per alcuni è possibile scaricare una versione dimostrativa, limitata nelle dimensioni utilizzabili), ma vale la pena di dare un’occhiata, ce ne sono di veramente belli.

Se invece preferite i font gratuiti, sempre Smashing Magazine ci offre una selezione di oltre 40 font dall’aspetto professionale scaricabili gratuitamente (anche se si consiglia di leggere sempre le licenze, alcuni potrebbero non essere gratuiti per usi commerciali).

In questo articolo abbiamo esaminato una piccola funzione che permette di realizzare delle miniature in PHP. Oggi vi segnaliamo un altro script creato da Joe Lencioni che si occupa di creare le miniature delle vostre immagini.

Leggi tutto »

Le “favicons”, abbreviazione di Favorite Icons, sono quelle piccole icone che spesso vediamo comparire nella barra del browser accanto all’indirizzo del sito.

Genfavicon è un servizio che ci aiuta nel convertire il nostro logo in una favicon da utilizzare per il nostro sito. E’ sufficiente selezionare l’immagine (direttamente dal nostro sito o dall’hard disk) e le dimensioni desiderate (si può scegliere tra 16×16, 32×32, 48×48, 64×64, 128×128); cliccando su “Capture e preview” verrà generata la nostra favicon.

Per visualizzarla sul sito dobbiamo caricarla nella cartella principale del sito e inserire nella pagina questo codice:

<link rel=”shortcut icon” href=”favicon.ico” />