La settimana scorsa avevo introdotto gli strumenti necessari a creare un sito, anticipando che oggi avremmo fatto sul serio. Se pensavate di buttarvi sul codice resterete delusi perché i passaggi obbligatori, prima di scrivere “fisicamente” i sorgenti delle pagine, sono altri. Progettando un sito web è fondamentale focalizzarsi sul logo: tutto il layout ruota attorno a esso, dai colori ai font. Ideare un logo non è proprio un’attività da web designer e spesso i clienti l’hanno già fatto disegnare a terzi, facilitando il lavoro.

Non è importante chi l’abbia creato o cosa debba rappresentare: un logo per il web dovrebbe avere determinate caratteristiche. Per esempio, è essenziale che sia disponibile in un formato vettoriale. Io preferisco SVG, ma è probabile che otteniate dal designer il sorgente in AI di Illustrator. Fortunatamente, quest’ultimo è manipolabile con Inkscape oppure The GIMP se non aveste la Creative Suite di Adobe. Le immagini GIF, JPEG e PNG sono inadeguate perché il design responsivo richiede d’esportare un logo a dimensioni differenti.

L’ideale sarebbe avere una versione del logo in bianco e nero, magari invertibili in base allo sfondo, e una a colori: tenetelo presente, se dovete crearlo dal nulla. Oggi non esistono grossi problemi a soddisfare queste esigenze perché chi disegna i loghi è abituato a supportare l’attività dei web designer, in passato era molto più difficile. Avuto il logo, potete iniziare a definire i colori. Il cromatismo è importante perché ogni colore ha un preciso significato, quindi la scelta dev’essere effettuata pensando all’obiettivo.

Sui motori di ricerca trovate moltissimi risultati che riguardano la teoria del colore e guardare come li utilizzano gli altri è un’ottima idea. È preferibile adottare uno schema ad alto contrasto ed evitare che gli individui affetti da particolari patologie non riescano a leggere i contenuti del sito. Il W3C elenca una serie di tool per calcolare il contrasto, però CheckMyColours di Giovanni Scala è più immediato: inserendo l’indirizzo della pagina web, riporta tutte le informazioni utili a calibrare i colori del proprio sito.

Quello della leggibilità è l’ostacolo principale, ma la scelta deve comunque rispecchiare la natura del sito. In questi giorni, per esempio, lavoro a quello d’una trattoria e ho scattato delle fotografie al locale per utilizzare sul web le tinte di pareti e arredamenti. Grazie a un programma d’elaborazione delle immagini posso estrarre con precisione il colore da utilizzare: i CSS che regolano la visualizzazione delle pagine hanno esigenze specifiche, nell’identificazione dei colori. Ogni colore ha il proprio codice esadecimale.

Coi CSS è possibile specificare un colore in modi diversi, però il metodo convenzionale è quello degli HEX ovvero dei codici di tre o sei caratteri alfanumerici che identificano i colori. Sono quelli anticipati dal cancelletto, come #FFF per il bianco oppure #000 per il nero. Se il codice è a tre caratteri significa che ognuno si ripete: #FFF è interpretato come #FFFFFF, #000 come #000000 e così via. Non tutti i colori possono essere ridotti da sei a tre caratteri. Per esempio, l’azzurro usato da Android resterà sempre #33B5E5.

Il viola, invece, essendo #AA66CC può essere scritto nei CSS come #A6C. Penso che il meccanismo sia chiaro. Generalmente gli sfondi, i testi e i link dovrebbero riproporre lo schema già codificato: uno sfondo bianco, nero per il testo e blu sui collegamenti che diventano viola se sono già stati visitati o rossi mentre premuti. È quanto propone il browser in assenza dei CSS, ma non siete costretti a rispettarlo. Piuttosto, pensate a quando indossate degli abiti e non mettete mai più di tre colori diversi sulla stessa pagina web.

Lascio a voi scoprire cosa siano i colori complementari e le tinte opposte perché non voglio dilungarmi troppo, dovendo parlare anche dei font. Oggi i siti possono includere un’enorme varietà di caratteri: si distinguono essenzialmente fra serif, sans-serif e monospace. Le pagine web dovrebbero prevedere i font senza le grazie, cioè i sans-serif, perché più leggibili sullo schermo. Il monospace è utilizzato a evidenziare le stringhe di codice e il serif non dovrebbe comparire. La selezione, però, varia a seconda delle necessità.

Come per il logo e i colori, la scelta dei font è legata al messaggio che volete trasmettere: ormai potete valutare una quantità infinita di varianti e sarebbe impossibile consigliare una combinazione valida per tutti. Non parlerò di @font-face e come inserire i web font nei CSS perché è un discorso a parte, ma dovete recuperare i formati adatti. Per garantire la compatibilità con Internet Explorer serve EOT di Microsoft, gli altri browser supportano TrueType o WOFF. Secondo me il formato SVG può essere tranquillamente escluso.

Come s’ottengono quei formati? Beh, se acquistate un font il problema non si pone perché dovrebbero già essere previsti. Idem se utilizzate risorse quali TypeKit o Google Web Fonts. Qualora WOFF ed EOT non fossero disponibili, potete ricorrere a due programmi da riga di comando che convertono i caratteri dal TrueType. Il primo è sfnt2woff per Windows o Mac OS X, il secondo ttf2eot: entrambi sono open source e facili da utilizzare. Esistono degli strumenti online che servono allo stesso scopo e li potete rintracciare sui motori.

Dimensioni e variazioni sono altrettanto importanti perché il web e la scrittura hanno delle regole da rispettare che a volte confliggono. Per esempio, il corsivo dovrebbe indicare soltanto le parole straniere che non fossero già entrate nell’uso comune della lingua-madre e il grassetto sottolineare i concetti fondamentali. Questa norma vale praticamente in qualunque contesto, però sul web maiuscole e minuscole possono essere stravolte per dare una forma creativa al flusso testuale. Esistono font che escludono le une o le altre.

Tornerò sui font in questa rubrica perché da essi dipendono numerosi aspetti del web design, ma se siete sopravvissuti a questo “papiro” avete un’idea di massima degli elementi da considerare. Definirli prima del lavoro vero e proprio è una chiave per il successo: la pianificazione è un momento strategico e non andrebbe sottovalutata. Sbagliare logo, colori o font significa trasmettere il messaggio sbagliato e compromettere l’efficacia d’un sito. Uno fra i motivi per cui diffido da chi promette grandi risultati in pochi minuti.

Photo Credit: Ian Muttoo via Photo Pin (CC)