L'universo della progettazione dei siti web è in continuo divenire: le tendenze cambiano repentinamente, così come le modalità per catturare l'attenzione degli utenti. Nell'era del minimalismo estremo in fatto di design di pagine e interfacce, però, le armi nelle mani dei professionisti si riducono: la ricerca dell'essenzialità, infatti, limita anche le possibilità d'azione. Così si è sviluppato un intero filone dedicato ai font, perfetti per stuzzicare la curiosità dei navigatori, ma soprattutto al colore. La scelta delle giuste tonalità, e la loro disposizione nello spazio, sono infatti in grado di determinare la riuscita di un progetto. (more…)

Continua a leggere Web design: usare i colori per catturare l’utente

Categoria: Web Design

Tags: ,

Il comunicato stampa gentilmente recapitatomi via mail la settimana scorsa così recita: Si pensa che sia un talismano protettivo, un colore di profonda compassione e rigenerazione, ed un colore di fede e verità , ispirato all’acqua e al cielo". Grazie ad anni di studi sull’associazione tra parole e colori, siamo inoltre giunti alla conclusione che il Turquoise rappresenti per molti una via di fuga, aprendo le porte di un paradiso tropicale piacevole ed invitante, anche se solo nella fantasia.order propecia online Il Turquoise 15-5519 è il colore dell'anno 2010 scelto dall'autorità  mondiale del colore, ovvero Pantone. Ho cercato in rete qualche documento che indicasse il corrispettivo in RGB, e giusto ieri ho trovato questo post su SitePoint che specifica i valori 64, 224, 208 (anche se si dice che il risultato non è esattamente identico alla tonalità  di Pantone). Chi volesse dare ai propri siti un tocco di paradiso tropicale piacevole ed invitante ha comunque una buona base di partenza :) Aggiornamento: seguendo la segnalazione di Gio nei commenti e sul suo blog (anche qui), vi giro il link a questa pagina che riporta la conversione dei colori Pantone in codici esadecimali.

Continua a leggere Un nuovo anno tutto Turquoise

Categoria: Web Design

We are Colorblind, che in italiano suonerebbe più o meno 'Noi siamo daltonici'. A prescindere dall'utilità  immediata che ciascuno potrà  trovarci, se segnalo questo sito è per evidenziare come dovrebbero essere organizzate secondo me risorse di questo tipo. Si tratta di una raccolta di pattern di design ed esempi di buone e cattive pratiche per una gestione ottimale dell'uso dei colori sul web a favore di chi i colori non li percepisce nel modo corretto a causa del daltonismo. Soluzioni pratiche e immediate a problemi reali. Oltre che miniera di spunti per la realizzazione di tanti dettagli nel contesto di un'interfaccia. Per esempio, come suggerisce giustamente Andy Baio, è assolutamente brillante questa soluzione per visualizzare la disponibilità  di iPhone nei negozi americani. Rispetto all'originale, oltre che l'alternanza rosso/verde è anche la forma (quadrato per 'non disponibile', cerchio per 'disponibile') a comunicare l'essenziale informazione (che poi è la messa in pratica di una delle soluzioni proposte da We are Colorblind per la gestione delle icone di stato).

Continua a leggere Colore e accessibilità  sul web

Categoria: Web Design

Ho passato una mezzoretta a cercare dei tool in grado di generare una palette di colori a partire da un'immagine fotografica.Magari ce ne sono altri ancora, ma i due che mi sono sembrati migliori sono questo ospitato su DeGraeve.com e il Color Palette Generator di Jeff Minard. Rispetto al primo offre un vantaggio non da poco: si può usare come base un file da uploadare, mentre per il tool di DeGraeve è necessario fornire la URL di un'immagine già  online. Chi pensa che far da sé è far per tre, può far riferimento a questo articolo di Dave Shea.

Continua a leggere Generare una palette di colori a partire da una foto

Categoria: Grafica

Tags: ,

Se si ha la necessità  di dover testare la resa tipografica di un certo font nel contesto del nostro layout, possono essere utili strumenti come Font Tester e DesignerPlaything. Le funzionalità  di base sono più o meno le stesse: consentono di definire le impostazioni fondamentali dei caratteri e del testo (colore, dimensione, spaziatura, etc) e offrono un'anteprima immediata delle modifiche apportate.DesignerPlaything ha forse il difetto di offrire una selezione di font troppo risicata e di adottare un lessico mutuato dall'ambito tipografico. Non che usare 'kerning' al posto di 'letter-spacing' sia sbagliato, anzi, ma magari chi è avvezzo a pensare a queste cose dal punto di vista dei CSS potrebbe rimanere un po' spiazzato. Offre però, DesignerPlaything, una verifica con tanto di feedback dei livelli di contrasto tra testo e sfondo, usando come riferimento le raccomandazioni e gli strumenti del W3C e di HP.Ben poche mancanze si possono invece imputare a FontTester. Nato e pensato per chi crea e sviluppa fogli di stile CSS, offre davvero tutto il necessario per svolgere questo tipo di test.

Continua a leggere Due strumenti per testare la tipografia

Categoria: Web Design

Sarà  che per la prima volta in vita mia sto avendo problemi con la vista, ma mai come negli ultimi tempi sto apprezzando i siti con scelte di colore azzeccate, testo ben dimensionato e spaziato, contrasto ben definito. A proposito di contrasto, vi giro il link a questo bel post di Go MediaZine. Tra tante considerazioni sensate, un trucchetto semplice semplice per verificare velocemente se una certa combinazione di colori ha un contrasto sufficiente. Basta convertire in scala di grigio e confrontare. Ecco un dettaglio dell'immagine allegata al post Il contrasto buono è quello a sinistra):

Continua a leggere Il giusto contrasto

Categoria: Web Design

Eccoci a un nuovo appuntamento dedicato ai bookmark: questa volta è il turno della grafica. Cominciamo con i font: Fonts 500 è un sito che raccoglie i 500 fonts free più scaricati della rete. Se non dovessero bastare, Creamundo ne presenta quasi diecimila.Passando agli strumenti per il colore e le palette: Bookmark Bliss presenta dieci strumenti per elabolarli online, sempre sullo stesso sito impressionante la quantità  di risorse di stock photo presentate in 101+ Stock Image Resources. Tornando al colore, ho trovato davvero originale Grammy Award Winning Album Colors che presenta alcune palette di colori catturate dalle copertine dei vincitori dei Grammy Awards, ovvero gli Oscar della musica.So che i tutorial per Gimp presentati qui sul blog tempo fa hanno avuto un buon seguito, segnalo quindi volentieri Gimp Tutorials su TutorialBlog che ne presenta davvero molti. Cambiando argomento, ma restando su un altro tema gradito (spero): concludo segnalando 22 Free Essential Icon Sets, una raccolta di link a risorse con icone free.

Continua a leggere Bookmark grafica

Categoria: Grafica

Eccoci ad un nuovo appuntamento dedicato ai bookmark. Cominciamo con il processo di sviluppo di un sito web: un'ottima aggiunta al post Il workflow di un sito web pubblicato una decina di giorni fa qui sul blog è il recente The web design process su Tutorialblog.E sempre su TutorialBlog vale la pena di citare alcune ispirazioni notevoli, ben 120 siti raccolti in quattro post: 30 Great Website Designs, 30 one page websites, 30 red websites e 30 green websites.Passiamo a un altro sito ricco di risorse: Smashing Magazine, che dopo 83 temi per Wordpress presenta 8 fresh and clean Wordpress themes, davvero belli. (more…)

Continua a leggere Bookmark web design

Categoria: Web Design

Appuntamento veloce con i bookmark. Cominciamo con i menu: in Sexy CSS Hover Button un tutorial che combina Photoshop e CSS per avere un menu grafico con rollover. Attenzione però... l'autore ha tralasciato una parte fondamentale: l'image replacement. Nell'esempio infatti ci sono i link vuoti, ovvero senza testo (!) con conseguenti danni catastrofici e irreversibili per l'accessibilità  (se i CSS sono disabilitati o non supportati) e i motori di ricerca. Inoltre, si sarebbe potuto benissimo usare il fast CSS rollover con un'immgine singola. Peccato: poteva essere un buon tutorial... come si dice in inglese: don't try this at home. (more…)

Continua a leggere Bookmark: menu, form e colore

Categoria: Web Design