Come scegliere il font giusto per il tuo sito

ThreeMoreInfoGraphicsforDesignersDesignReviver_4dbf705caea9e_w520

Il layout per il vostro sito è pronto, spazi, colonne, header e footer sono al posto giusto ed ecco che vi nasce il primo dubbio…

Quale font uso per dare enfasi ai miei contenuti?

Se il dubbio non vi è nato… male, molto male perché la tipografia è un aspetto determinante di un progetto web. Tanto determinante che le moderne teorie minimaliste fanno addirittura a meno della grafica basandosi esclusivamente sulla scelta tipografica.

Insomma, se non sapete se scegliere un Georgia piuttosto che un Comic Sans allora è il caso che vi facciate dare una mano da una grafica – non è un paradosso? – interattiva che vi guiderà alla scelta giusta per le vostre esigenze. Come? Semplice, fate clic qui.

Mozilla ci vuole tutti Webmaker

Mozilla-Webmaker-logo_610x202Webmaker è una nuova iniziativa di Mozilla che mira a spostare le persone dall’uso del web alla realizzazione di Internet.

Cosa significa esattamente? Significa coinvolgere le persone attraverso una serie di incontri per incentivare la loro creatività a creare applicazioni web. La prima iniziativa della serie è il Summer Code Party.

Il tutto ovviamente attraverso gli strumenti di sviluppo che la stessa Mozilla ha creato (come per esempio Popcorn e Hackasaurus).

Per maggiori informazioni vi rimando all’articolo di Cnet “Mozilla pushes for stronger maker philosophy on Web“.

I 10 font che i web designer adorano

web-fontUna delle cose che mi chiedo spesso, guardando i siti web che mi capita di visitare durante il mio lavoro quotidiano, è quali siano i font che i web designer preferiscono nel realizzare la grafica di un sito.

Sembra banale ma la scelta di un font invece di un altro conferisce al sito una personalità diversa, spesso ne cambia proprio al percezione.

Per questo motivo ho letto con molto interesse l’articolo di Hongkiat.comTop 10 fonts web designers love” e, soprattutto, ho guardato la splendida infografica allegata (che metto qui sotto in piccolo – purtroppo).

Insomma… qual è il font più amato? Rullo di tamburi… ebbene sono l’Helvetica, tra i font a pagamento e il Myriad Pro, tra quelli gratuiti.

top-to-fonts-web-designers-love-infographic

Gli elementi di un web design "pulito" ed efficace

elementi di un web design pulito ed efficace Quali sono gli elementi di un web design efficace?

Sicuramente la struttura delle pagine, la tipografia (ovvero il tipo di caratteri utilizzati, le dimensioni dei diversi elementi tipografici, l’interlinea, la spaziatura tra i caratteri eccetera), una palette di colori adeguata e una scelta di immagini consistente con il resto del design.

Scritto così sembra facile, ma lo è davvero? Certamente, a patto di seguire un modus operandi corretto.

Il consiglio di Six Revisions nell’ottimo articolo The Elements of a Clean Web Design è infatti quello dipartire dalla difficoltà per poi renderla semplice. Buttare su carta tutto, per quanto complesso, arzigogolato e intricato sia.

…Clean, simple web designs have become a popular trend. This article will cover the subject through a two-part discussion. First, we’ll talk about a few traits that clean designs tend to have in common. Secondly, I’ll share some tricks and techniques that can be helpful when trying to achieve a clean design…

Poi snellire, semplificare, rendere semplice. E continuare a lavorare, affinare, migliorare… per arrivare al punto finale, al grande disegno che avevamo in mente prima di partire.

Facile, non trovate? Un passo alla volta… iniziate a leggere l’articolo!

Guida alle applicazioni Web, in HTML5

field guide to web applicationsHTML5, avete notato che si comincia a nominarlo e a utilizzarlo ovunque oramai? Saranno state le web apps che Google Chrome ha cominiato a pubblicizzare sul suo store, saranno le effettive innovazioni che questo formato permette… fatto sta che la richiesta di web qualunquecosa con HTML5 è esplosa.

Cosa c’è di meglio allora che imparare a realizzare delle web app proprio attraverso una guida realizzata in HTML5?

Se quindi volete imparare qualcosa di nuovo in modo divertente andate su questa Field guide to web applications.

Realizzata da Html5rocks.com

Virgilio Abitare, il mondo della casa ha un nuovo indirizzo

Mi sono accorto ieri – bugia, bugia, sapevo che il sito sarebbe andato online ieri sera 😉 – del nuovo sito verticale pubblicato da Virgilio e che tratta del tema casa. Un sito particolare come potrete vedere se ci fate un salto che aggrega contenuti, indicazioni di aziende, documentazione e altro ancora concernenti il tema molto generale della casa.

virgilio-abitare-tutto-il-mondo-della-casa

Anche il nome, semplice, secondo me è molto efficace: Virgilio Abitare!

Arredare, trovare un professionista (elettricista, idraulico, muratore), trovare il negozio di arredamento più vicino a casa. Ma anche trovare informazioni su come chiedere un mutuo, su come detrarre le spese di ristrutturazione e altro ancora.

La grafica del sito è molto bella, molto moderna, molto fluida.

I contenuti vengono aggregati da varie fonti a cui viene data visibilità. Il motore di ricerca è funzionale ed efficiente.

Insomma, un progetto ben riuscito… agli utenti però spetta l’ultima parola.

Sarebbe bello poter suscitare lo stesso interesse avuto da Volunia e raccogliere così feedback importanti e interessanti da chi lo usa.

Non siate timidi dunque… commentate e usatelo!

Come usare Google Fonts per creare siti meravigliosi

google web fonts Avete mai pensato “mi piacerebbe cambiare il tipo di carattere del mio sito, infondergli più personalità, renderlo diverso dagli altri, farlos embrare più moderno etc etc“?

Immagino di sì e sicuramente avrete segnato sul blocco notes che Google Fonts, una directory gratuita di famiglie di caratteri pronti all’uso, poteva aiutarvi nell’intento, mettendovi a disposizione addirittura oltre 400 font diversi.

There are currently 404 typefaces in the Google Web Fonts directory. Many of them are awful. Very awful. But there are also high-quality gems that certainly deserve a closer look…

Tralasciando il fatto che alcuni di questi font possono rallentare il caricamento del sito (magari ci torneremo su in un altra occasione), la cosa più difficile quando si usa questo servizio è riuscire a trovare il font giusto per noi.

A meno di non guardarseli uno per uno – e anche in quel caso comunque fuori contesto non è facile – è davvero un’impresa titanica.

Ecco allora che è possibile utilizzare Beautiful Web Type per capire quale dei font presenti in Google Fonts è “la scelta”. Poco per volta ovviamente, ma anche in modo interattivo…

Dateci un’occhiata e poi sbizzarritevi!

Picozu, un editor di immagini online tutto HTML5, CSS3 e Javascript

Chi legge i miei post dai tempi di Usabilità sa che i webtool mi fanno impazzire… ecco perché oggi vi presento con molto piacere questo straordinario strumento online, dal nome esotico Picozu, che permette di fare image editing online.

picozu online image editing

Completamente basato su HTML5, CSS3 e javascript è uno strumento molto veloce e intuitivo da utilizzare.

Permette anche di salvare sul local storage i progressi del nostro lavoro e molto altro. Dategli un’occhiata e mettetelo nei vostri bookmark: ne vale la pena!

Interessante generatore di codice CSS3 multi-browser

generatore di codice css3 multi-browser Se siete curiosi di provare le nuove regole CSS3 ma non volete perdere tempo cercando la soluzione ideale per il vostro browser preferito potete prendere spunto da questo post che mostra come scrivere un foglio di stile in grado di generare un box (quello dell’immagine qui a sinistra) personalizzabile al volo, semplicemente cambiando i valori delle proprietà sottolineate.

AutoMagically, come scrivono gli americani…

Semplicissimo ma molto efficace aggiungo io!

You can edit the underlined values in this css file, but don’t worry about making sure the corresponding values match, that’s all done automagically for you. Whenever you want, you can copy the whole or part of this page and paste it into your own stylesheet…

Qui trovate la pagina di CSS3 Please: The Cross-Browser CSS3 Rule Generator. Giocateci un po’ e magari rendete l’esempio un po’ più complesso.