Non ho resistito alla tentazione di perdere qualche minuto del mio tempo per veder mappato il blog. Bastano pochi secondi, a dire il vero, affinché Websites as Graphs analizzi il codice sorgente restituendoci il "grafico" del nostro sito web o blog.

Questo è lo screenshot di WebFruits Blog.

Naturalmente, i diversi colori hanno un significato specifico, come indicato nella legenda presente sul sito di WaG: blue for links, red for tables, green for the DIV tag, violet for images, yellow for forms, orange for linebreaks and blockquotes, black for HTML tag, root node, gray for all other tags.

Applicazione java catalogabile tra le inutilità, sì, ma carina. Il numero di websitesasgraphs "uploadati" su Flickr lo testimonia. Vedere per credere.

L'idea, illustrata in un articolo pubblicato su Onyx Design, consiste nel modificare il colore di un'icona RSS utilizzando una sola immagine (sempre la stessa) e intervenendo di volta in volta sul foglio di stile.

Come? In modo molto semplice. Si tratta, infatti, di creare un div delle stesse dimensioni dell'immagine, di utilizzare l'immagine (in formato .png) come background-image del div e il colore che si è scelto per l'icona come background-color.

Nell'articolo trovate una spiegazione dettagliata con il codice da utilizzare e il link a una pagina di esempio.

Finalmente ho trovato un po' di tempo per rinnovare il design del mio tumblr (webfruits .small size.). Ho abbandonato il bianco della precedente versione e utilizzato la palette di colori del mio portfolio, concedendomi la libertà di accentuare la vivacità e brillantezza di alcuni colori in contrasto con un background molto scuro.

Ho ricominciato a depositare lì alcuni appunti e avevo bisogno di cambiare. Un piccolo restyling era d'obbligo. Del resto, grafica e colori diventano facilmente un'ossessione per gli addetti ai lavori. Al momento, solo con il blog resisto alla tentazione e non cedo al dark integrale. Se proprio non avete nulla da fare, dategli un'occhiata.

Dopo aver inaugurato la sezione webdesign / freebies ho pensato fosse necessario crearne un'altra per poter pubblicare risorse grafiche liberamente scaricabili non riguardanti necessariamente il web design. Ecco quindi la nuova sezione, in cui inserirò idee, spunti, lavori grafici (all'occorrenza "esperimenti") di vario tipo.
Complice l'influenza, in questi giorni di immobilità mi sono dedicata alla realizzazione di alcuni sfondi per desktop. Devo dire la verità, è stato anche un modo per rinnovare il mio, di sfondo, che solo il suo essere digitale ha preservato dal logorio del tempo.

Assecondando una delle mie grandi passioni, ho cominciato con una serie di wallpapers dedicati ai miti e alle leggende del cinema. Quelli che vi propongo oggi sono dedicati a Audrey Hepburn. Una scelta, credo, abbastanza "femminile", sia per il soggetto sia, di conseguenza, per i colori e lo stile utilizzati. E pensare che tra i lettori assidui di donne ce ne sono davvero poche, o comunque sono poche quelle che danno un segnale della loro presenza attraverso i commenti...

Download is free, however, if you want to support me or encourage new freebies, you are welcome to make a donation via PayPal.

Interrompo la prolungata latitanza per presentarvi uno degli ultimi siti realizzati: LIDI - Lega Italiana per la tutela dei Diritti degli Introversi. Il sito è online dal 29 novembre, come qui annunciato.
Avevo realizzato circa due anni fa una prima versione del sito, da considerarsi del tutto provvisoria. Non si è trattato, dunque, di un restyling ma di un vero e proprio redesign.

Il lavoro è stato abbastanza consistente. Per rendere funzionale il sito e consentire ai lettori una consultazione agevole della grande quantità di materiale pubblicato (e in continuo e incessante aggiornamento!) era necessario creare una struttura dei contenuti abbastanza ampia ma al contempo non dispersiva; in secondo luogo, trattandosi del sito di un'associazione O.N.L.U.S, era indispensabile fare in modo che l'organizzazione sia degli articoli e dei documenti tematici sia delle informazioni concernenti l'associazione fosse tale da rendere chiari, anche ad una prima visita e prima di navigare il sito in tutta la sua interezza, i presupposti teorici, gli obiettivi e il campo d'azione (progetti, attività, ecc.) dell'associazione.

Per quanto riguarda il visual design ho optato per una soluzione grafica che rispondesse a due precisi obiettivi: il primo, non invadere il campo di lettura per non rendere faticosa la consultazione di un sito che è essenzialmente "da leggere" (per questo motivo, ho deciso di caratterizzare graficamente header e footer e di lasciare clean la parte centrale del sito); il secondo, coniugare la chiarezza delle informazioni a quella visiva cercando di rendere l'estetica della grafica e dei colori il più possibile in linea con le caratteristiche e la natura (di nuovo, presupposti, obiettivi, ecc.) dell'associazione.

A breve (ci siamo quasi!) nascerà anche il blog. L'impostazione grafica sarà la stessa, così da garantire omogeneità con il sito. Nel frattempo, mi dedico al mantenimento e all'aggiornamento.

Come sempre, critiche e suggerimenti sono ben accetti. Chiedo agli amici web designer e non solo: che ne pensate?

Risale al 2006 la pubblicazione di uno studio con il quale il SIRC (Social Issues Research Centre) ha identificato la sindrome della rabbia da mouse (Mouse Rage Sindrome). Dalla ricerca, condotta su un campione di 2500 utenti abituali del Web "sottoposti" alla navigazione di un sito di controllo (perfetto) e di più siti mal progettati, erano emersi sintomi e comportamenti riconducibili ad una vera e propria patologia: accelerazione del battito cardiaco, aumento della sudorazione, tensione muscolare, ansia (manifestata con convulsi click del mouse) e reazioni violente di fronte al monitor.
A causarli, i siti con struttura e schemi di navigazione non chiari, con grafica pessima, con tempi di caricamento della pagina troppo lunghi, con una presenza eccessiva di pop-up, annunci e banner pubblicitari e quelli irraggiungibili perché off-line o con pagine non disponibili.

Non so quanti hanno avuto una o più reazioni di questo tipo (per quanto mi riguarda, mi innervosico forse un po' e abbandono immediatamente la navigazione), ma è lecito pensare che più o meno tutti si siano trovati a vivere l'esperienza traumatica dell'incontro con siti di questo tipo. Potrei consigliare a chi fosse interessato a rinnovare l'esperienza in dosi massicce di visitare la "Worlds worst Webdesigns Gallerie", che avevo in modo abbastanza sadomasochistico salvato nei miei preferiti qualche mese fa. Potrei, per l'appunto, se non fosse che, del tutto paradossalmente, in questo momento il sito è irraggiungibile. Peccato, perché ne avreste viste di tutti i colori.

Se volete vederne di tutti i colori con tutti i colori, vi suggerisco di visitare questo sito, al quale sono arrivata stamattina attraverso un post pubblicato su Rev2.org. Visto che ci siete, potete anche dare un'occhiata (non troppo prolungata, mi raccomando) all'altro peggior sito segnalato dallo stesso blog.

Credo che in alcuni casi ci siano tutti gli estremi per una richiesta di risarcimento danni da parte dei malcapitati visitatori...

Attingendo ai miei sempre eccedenti bookmark ho cercato di ordinare in una lista servizi, applicazioni e strumenti per la generazione online di elementi grafici.

La speranza è che i (bravi) web designer siano allergici alla grafica fast e prêt-à-porter e siano immuni dall'utilizzo dei generatori online. Quantomeno, ci si augura che vi ricorrano solo in casi estremi e che, quando questo accade, comunque, non sia mai perché non sono in grado di creare un bottone web 2.0 o un background sfumato. Naturalmente, sapere che esistono, provarli e testarne le funzionalità e i risultati non è reato, anzi è concesso e a mio avviso consigliato.

Immagini di background

• Background Image Maker Utility online che permette di realizzare background personalizzati e di vario tipo (puntinati, sfumati, rigati, ecc.).
• bgMaker Create a tiled background and download the image to use it on your blog, website or whatever Applicazione in Flash che consente di creare in modo semplice e rapido - e con una visualizzazione in tempo reale - pattern da utilizzare come immagini di background. I motivi realizzati vengono inseriti automaticamente nella gallery, dalla quale è possibile scaricare gli sfondi di altri utenti e anche editarli e modificarli.
• Gradient Image Maker Con questo tool è possibile generare immagini sfumate secondo gradiente. È sufficiente selezionare i due colori fondamentali e il tipo di sfumatura da applicare. L'immagine può essere salvata in formato .jpg e .png.
• Online Gradient Image Maker Build 3D gradient background images for site decoration and visual effects Generatore di sfondi con gradienti sia orizzontali sia verticali. Ben nove sono le transizioni di colore a disposizione.
• Tile Machine Con questa risorsa si possono realizzare pattern e sfondi pixel per pixel o scaricare quelli creati da altri utenti e archiviati nella Tile Gallery.
• Tartan Maker Generate seamless tartan patterns! Applicazione in ajax per la creazione di background pattern in stile tartan.
• Stripe Generator Generate seamless striped background images! Tool in ajax per creare velocemente e senza difficoltà sfondi a righe diagonali. Utile per chi voglia evitare la fatica del pixel-by-pixel senza rinunciare all'uso di texture ripetibili. Il file generato è un'immagine png.
• Stripe Designer Now design a stripe or pattern is fast and easy! Generatore simile al precedente che consente di generare pattern da utilizzare direttamente o da importare in Photoshop per eventuali e successive modifiche. Se non si desidera creare pattern ex-novo, è possibile editare quelli creati e salvati da altri utenti nella library.
• Stripemania Striped background generator Ottimo tool online per creare sfondi basati su strisce verticali, orizzontali o diagonali.

Logo

• Logo Maker: Web 2.0 Stylr Generatore di logo in stile web 2.0. Possibilità di scegliere il tipo di font e di aggiungere un'immagine da visualizzare accanto al testo.
• Web2.0 - Logo Creatr Per creare un logo in stile web 2.0 occorre selezionare uno dei cinque modelli disponibili e successivamente personalizzarlo con l'inserimento del testo, la scelta dei font, dell'effetto mirror, del background e del bottone e il settaggio dei parametri desiderati.
• Web2.0 Logo Creator It was created as a joke, not a serious logo maker Tool per generare logo web 2.0 basilare e senza opzioni per la personalizzazione: inserite un testo, scegliete se volete l'effetto riflesso e/o il beta tag e il logo è pronto.
• Web 2.0 Logo Creator Online Design and create free logos Con questo generatore è possibile intervenire su diversi parametri: font, colore di background, colori del testo, effetto reflection, inserimento di immagini e simboli predefiniti e loro posizione rispetto al testo. Il logo può essere salvato nei tre formati .jpg, .gif e .png.
• Flickr Logo Maker Utile se si vuole creare un testo che riproduca lo stile del logo di Flickr.

Badge e Ribbon

• Web 2.0 Badges (Generate Your Badge) Useful collection of stylish web 2.0 badges and badge generator Generatore di badge che mette a disposizione 20 modelli da modificare inserendo il testo e selezionando tipo, dimensione e colore del font. In alternativa, è possibile scaricare i numerosissimi badge in formato .psd presenti nella collezione e personalizzarli a proprio piacimento utilizzando Photoshop.
• Fresh Badge Generator Quickly create very trendy, eye-candy, and very web 2.0 badges for your site, blog or scrapbook Ottimo generatore di badge, il migliore per la quantità di opzioni e parametri tra cui scegliere. Impossibile descriverli tutti nel dettaglio. Da provare.
• Free Website Ribbon Generator Free website ribbon generator for your website or blog Consente di creare in pochi secondi un adesivo (sticker) con un messaggio personalizzato. Dopo aver inserito i dati richiesti (testo e link, dimensione e colore del font) e aver selezionato una tra le diverse "fascette" disponibili, è sufficiente copiare e incollare il codice javascript sul proprio blog o sito web. Lo sticker sarà automaticamente posizionato nell'angolo superiore destro.
• Quick Ribbon Online Ribbon Generator Tool Tool per creare ribbon personalizzati in stile web 20. Per ottenere il codice javascript da copiare e incollare all'interno del proprio sito o blog occorre selezionare uno dei quattro modelli preimpostati, inserire testo e corrispettivo link, scegliere dimensione, colore e tipologia di font e impostare i colori per il ribbon.

Bottoni

• My cool button Web 2.0 free buttons maker! Applicazione con la quale creare bottoni in stile web 2.0 in pochi e semplici passaggi. Dopo aver scelto dimensione e colore del bottone, aver inserito il testo, settato tipo, dimensione e colore del font, il pulsante è pronto per essere scaricato e utilizzato. Il tool consente di aggiungere un'icona web 2.0 precaricata (sono sei quelle attualmente disponibili) o di caricarne una dal proprio PC.
• Buttonator Tool per la creazione online personalizzata di bottoni. L'accesso a un numero più ampio di "stili" e opzioni per la personalizzazione è consentito solo previo pagamento. Altrimenti, occorre accontentarsi della versione base.
• Glassy Button Generatore di bottoni che offre numerose opzioni per la personalizzazione e anche la possibilità di creare un rollover sull'immagine.

Antipixel

• PixelButton Make your Antipixel button Generatore online di antipixel, facile e veloce da usare. L'immagine viene trasformata automaticamente in codice HTML e non è necessario, dunque, salvarla sul server.
• Button Maker Online Use this online tool to easily and visually create those popular "XHTML valid" micro buttons (80x15) Tool per la creazione di micro-bottoni nelle dimensioni 80x15 e 88x31.
• FREE button generator Generate a 80×15 brilliant button FREE, also known as “antipixel buttons” or “badges”, very popular buttons Selezionando le opzioni relative ai colori e al testo viene generata un'immagine .png 80x15.
• Button Maker Call it a badge, sticker, button, or whatever you'd like. Create yours below Applicazione online di Adam Kalsehy che permette in pochi passaggi di creare bottoni antipixel 80×15.
• Button Maker (Blog Flux) Make 80x15 or 88x13 buttons with a few clicks Generatore online di antipixel nelle dimensioni 80x15 e 88x31.
• Brilliant Button Maker A web interface to create 80x15 brilliant buttons Ottimo button maker che consente di creare mini-bottoni dando la possibilità di intervenire, oltre che sui consueti parametri, anche sulle posizioni e gli spazi. Permette, inoltre, di inserire delle immagini.
• RSS Button Generator Make your own RSS Buttons for FREE! Come per il precedente, anche in questo caso si possono modificare gli spazi. Sono più di 110 i font a disposizione.

Loading gif

• LoadInfo - Loader generator LoadInfo Ajax spinners' free generator Applicazione online per generare immagini di loading. Ampia la scelta delle immagini, personalizzabili nei colori, disponibili nelle dimensioni 16x16, 24x24 e 48x48 e scaricabili in formato .gif.
• Ajaxload - Ajax loading gif generator Create easily your own ajax loader icon Generatore di loader ajax personalizzabili. Numerose le gif animate tra cui scegliere e da configurare selezionando colore di sfondo e colore dell'immagine.
• Ajax Loading Gif Generator Create your own ajax loading gif easily Tool per la creazione di indicatori di caricamento molto semplice da utilizzare. È possibile personalizzarli scegliendo il colore di sfondo, il colore dell'immagine e la velocità dell'animazione.

Favicon

• favicon.ico Generator favicon.cc is a tool to create or download favicon.ico icons Applicazione web che consente di creare delle favicon o importando delle immagini o utilizzando una tavoletta 16×16 e colorando i pixel. Previa registrazione, si possono salvare le icone per condividerle con gli altri utenti del servizio.
• Online fav-icon creator Create your own icons in an online free editor L'applicazione permette di creare favicon attraverso il ricorso a un semplice e intuitivo strumento di disegno. In alternativa, si può caricare un'immagine per convertirla in formato .ico. o scaricare favicon già realizzate scegliendo tra le molte presenti nella library.
• 256 Pixels a daily favicon design challenge Questo tool consente la creazione di favicon sia attraverso l'upload di immagini sia attraverso l'utilizzo di una tavoletta di pixel da colorare (con preview in tempo reale).
• favicon2dots Semplice e immediato: caricate la vostra favicon già realizzata, cliccate sul pulsante "2dots" e in pochi secondi verrà generata un'immagine .png che riproduce la favicon in 3D pixel.
• Flavicon Servizio online per convertire immagini .png, .gif e .jpg in immagini in formato .ico. In alternativa si possono utilizzare le favicon presenti sul sito e disponibili per il download.
• Favicons! Generate your favicon and leave your footprint Strumento utile e pratico per trasformare immagini reperite online o caricate dal proprio PC in immagini dimensionate 16x16 in formato .ico.
• FavIcon from Pics The first web tool for creating still / animated favicons from regular images Il tool converte immagini 16x16 e 32x32 .gif in immagini .ico. Gli utenti registrati possono segnalare e inserire la favicon creata nella gallery.
• Favicon Generator (I) Create free favicon.ico page icons with Favicon Generator, instantly make custom Favicons for your website Consente di caricare dal proprio PC e trasformare in favicon immagini .gif, .jpg, .png e .bmp.
• Favicon Generator (II) Free and easy to use online Favicon Generator tool that can create Firefox-compatiable favicon .ico images Tool per la trasformazioni in favicon immagini .gif, .jpg, .png e .bmp.
• Favicon Generator (III) Create a favorites icon for your site Le immagini (.gif, .jpg, .png o .bmp.) caricate vengono trasformate automaticamente in favicon.
• Favicon Generator (IV) Favicons generated here contain text instead of images in order to be descriptive, but are colored to be nice looking Strumento per la conversione di immagini 16x16 e 32x32 (nei formati .gif, .jpg, .png e .bmp.) in immagini in formato .ico.
• Favicons Generator Tool Get FREE Favicons Instantly Tool per convertire in favicon le immagini caricate. È possibile aggiungere un testo scorrevole.
• FavIcon Generator Use this online tool to easily create a favorites icon (favicon) for your site Consente di trasformare in favicon immagini .gif, .jpg, .png e .bmp.

Immagini riflesse

• Reflection Maker Create reflections with Reflection Maker Generatore di immagini con l'effetto reflection tipico del web 2.0. Le immagini possono essere caricate direttamente dal PC o da URL. Due le opzioni disponibili: la dimensione del riflesso e il colore di background.
• Wet Floor Applicazione web che consente di generare immagini riflesse in formato .png. Si possono settare i parametri relativi all'altezza e all'opacità del riflesso.
• Picreflect Just in 10 seconds create a reflection of a picture and save it to your computer Altra semplice applicazione online per generare immagini riflesse dopo averle carciate dal proprio PC. I valori da applicare al riflesso sono l'altezza, l'opacità, la trasparenza e il colore di sfondo.

Web 2.0 Magazine ha pubblicato ieri una lista di 29 stili da utilizzare per personalizzare gli annunci Adsense di Google in modo semplice e rapido. Per ciascun formato (full banner, hal banner, button, large rectangle, leaderboard, medium rectangle, skyscraper, small square) avete a disposizione diversi modelli.
Vi basterà selezionarne uno, scaricare l'immagine di background, modificare lo schema di colori come indicato e copiare e incollare i codici CSS e HTML per rinnovare l'aspetto dei vostri annunci e renderli più accattivanti. Sempre che ciò sia possibile (ma su questo aspetto, al fine di evitare una digressione infinita, per il momento sospendo il giudizio).

Chi ha un po' di dimestichezza con i CSS può naturalmente prendere spunto dai modelli proposti per crearne di nuovi con diverse immagini di sfondo e diversi schemi di colore.

Questo è il terzo set di icone della collezione di (maxi) icone per blog. Ho utilizzato solo due varianti per quanto riguarda i colori, oro e nero (ma non escludo in futuro di aggiungerne altre) e optato per la forma cubica, che mi piace particolarmente. Alcuni lettori dopo la pubblicazione dei precedenti set mi avevano chiesto se era possibile prevedere anche delle icone per Gmail e Feedburner. Eccole! Oltre a quelle per Twitter, MSN e Technorati.

Download is free, however, if you want to support me or encourage new freebies, you are welcome to make a donation via PayPal.

Avevo confessato in un precedente post (Color palette inspiration: l'autunno) di essere entrata nel tunnel della creazione di palette di colori. Poco dopo, infatti, ho pensato fosse il caso iscrivermi a COLOURlovers, almeno per avere un posto in cui salvare di volta in volta quelle - a mio parere, ovviamente - ben riuscite e cestinare le altre e anche per rendere immediatamente disponibile il download in diversi formati.

Alcune tra quelle già inserite (l'ultima, blue freshness, l'ho aggiunta proprio stamattina)sono dedicate al web design.

Pubblico sul blog, per prime, quelle pensate per la realizzazione di siti dai colori brillanti e ad alto contrasto tra loro (in stile 2.0, per intenderci... e per ora ancora ci intendiamo, in attesa che il presagio di morte che rimbalza in rete si concretizzi), anche per esaudire la richiesta di alcuni lettori che erano alla ricerca di palette dai colori molto vivaci.
Forse è superfluo specificarlo, ma è chiaro che la scelta della combinazione di colori da utilizzare non è mai un'operazione puramente estetica ma fortemente connessa alla tipologia di sito web. Buona norma sarebbe conciliare uso estetico e uso comunicativo dei colori, senza perdere di vista l'importanza della coerenza, cromatica ma anche relativa al rapporto tra la combinazione scelta e gli obiettivi (comunicativi, strategici e connessi al brand) della presenza sul web. Ma questo molti di voi lo sanno meglio di me.

WP-AdminThemes è un'applicazione che consente di creare e condividere con altri utenti temi e palette di colore per il pannello di amministrazione di Wordpress.

Il procedimento è molto semplice: nella pagina Create your theme vi basterà inserire le informazioni sul tema - titolo, autore, URL e descrizione- e selezionare i colori desiderati per le diverse sezioni del pannello (top menu, footer, menu, headers, ecc.). Prima di confermare la creazione del tema, potrete visualizzare un'anteprima del risultato.

Tutti i temi creati dagli utenti sono condivisi e disponibili per il download. I più scaricati sono elencati nella Top 20. Dopo aver effettuato il download, non vi rimane che caricare e installare il plugin sul vostro Wordpress. Nelle F.A.Q trovate tutte le istruzioni.

Negli ultimi tempi sono entrata nel tunnel della creazione di palette di colori. Qualche tempo fa mi ero riproposta di selezionarne alcune e pubblicarle periodicamente sul blog. La scorsa settimana, naturalmente, l'imminente fine dell'estate mi ha catapultato anticipatamente nel tripudio di colori della nuova stagione. Ecco quindi 12 palette di colori ispirate all'autunno (la mia stagione preferita, forse perché mi ha visto nascere, anzi perché la prima che ho visto e annusato io, appena nata).