Creare un sito: design e font

Artist Pin-up Victoria di myvirtualladyCreare un sito è un compito difficile. Certo oggi ci sono strumenti in grado di creare siti in modo pressochè automatico. Si possono addirittura creare con un banale "salva come…" di Word. Creare un sito professionalmente invece richiede molte competenze: dalla grafica alla programmazione, passando per la comunicazione e il marketing. Certo per grandi progetti si possono isolare i ruoli, ma chi dovrà occuparsi del coordinamento dovrà essere cosciente di tutto ciò.

Nel corso della mia esperienza e grazie allo studio di alcuni libri mi sento di delineare alcune regolette: vedetele come un vademecum personale. Magari ho scritto delle cavolate, però sono certo che con il vostro aiuto possiamo creare una lista non banale. Tra parentesi il web design è comunque design: alcune regole secondo me sono generali.

 

1) Non sentirsi arrivati e non smettere di studiare

Io penso di non essere malaccio come web designer, ma anche come designer in senso generale (parliamo sempre di computer grafica). Penso però anche di non avere grossi dote creative. Come ho raggiunto un discreto livello? Studiando!

Ho la convinzione che nel mondo del design, soprattutto web, ci stiano due famiglie distinte: i creativi, quelli veri che con due click del mouse creano arte allo stato puro, e gli studiosi, quelli che compensano la mancanza di una innata creatività con lo studio.

Un creativo senza studio, in modo particolare nel web, non ha vie di fuga: o si trova un "traduttore/adattatore" oppure prima o poi cade sommerso dalle critiche e dai gap di usabilità. Uno studioso non può ambire a diventare un vero artista, ma sicuramente può creare ottimi lavori o almeno lavori visivamente corretti e piacevoli.

 

Studiare web design

Studiare nel web design significa accedere a tutta la letteratura possibile e immaginabile, e anche copiare copiare copiare. La mia base di partenza è stato assolutamente il miglior libro per creare le fondamenta del design The Non-Designer’s Web Book della grande Robin Williams. Già alla terza edizione vi permette di entrare dalla porta principale nel mondo della creatività teorica: linee guida, griglie, schemi, font… insomma un vero abecedario per il vostro design knowledge. Se poi volete approfondire sull’intera produzione della Robin sicuramente non vi fa male 🙂

 

Copiare web design

Uno dei migliori esercizi se siete alle prime armi è quello di provare a (ri)fare siti di terzi. Cercate nel web le classifiche dei siti più belli, oppure i siti che vendono i template. Un bello screenshot e al lavoro. Iniziate a capire come disporre gli oggetti, come ritagliarli, come renderli HTML alleggerendo le grafiche e disponendole in modo ottimizzato.

Importantissimo nel web design è che iniziate ad avere occhio critico: criticare ed essere criticati fa bene. Prendete un sito a caso, magari potreste usare stumbleupon per questo, e iniziate a criticarlo: magari fatevi degli appunti, segnate i pregi e i difetti (grafica e navigazione). Magari condividete le vostre impressioni in qualche social e capite se sono condivise o meno.

 

2) Budget & Target

Budget e target: non manchiamo gli obiettiviSiamo al primo lavoretto? O stiamo già una impresa avviata? Queste due parole Budget e Target devono essere sempre presenti nella intestazione di ogni lavoro che si vada a fare. Non ci si può muovere senza altrimenti ci si brucia.

Se siete dei liberi professionisti, dei freelance, sicuramente avete, almeno nella vostra testa, una sorta di prezziario.: poi vendete il vostro prodotto come meglio volete, ma dovete capire l’entità del costo di ciò che state mercanteggiando! Ci mettete 20 ore a fare un template? Perfetto: moltiplicato per il vostro costo orario virtuale e cercate di capire se alla sera i vostri figli potranno mangiare pane, salame o salmone!!!

In seconda battuta è necessario conoscere il target, ma sarebbe meglio definire i target. Analizzate bene "il cliente" e le sue reali intenzioni. Cercate anche di capire se potete mettere la vostra esperienza al suo servizio, o se dovete limitarvi a "disegnare".

Un’ottima cosa è avere una checklist che parte dai target e finisce nei dettagli. Un esempio:

  • cosa vuol dire il sito?
  • a chi vuole dirlo?
  • quali sono i competitor?
  • cosa permette di fare il sito agli utenti?
  • quanto tempo volete dedicare alla costruzione del sito / budget?
  • quanto tempo volete dedicare alla manutenzione del sito / budget?

[ad name=”postintra”]

 

3) Sindrome della pagina bianca

Sindrome della pagina biancaPer un designer purtroppo la creatività è una variabile incontrollabile. Ci sono giornate in cui si è speciali e giornate in cui il muso sbatte adosso a quel monitor, solitamente bianco oppure con i quadratini ad indicare la trasparenza: il nulla?

Che fare? Beh è come quando non ci si addormenta e Daniele consiglia di alzarsi qualche minuto, magari mangiare qualcosa. Il buon web designer fa uguale: invece della pastina o del biscottino noi ci si nutre di desing in ogni sua forma: collegatevi a MTV o guardate le pubblicità istituzionali di LA7. Iniziate a navigare in siti esteri o inoltratevi in classifiche dei miglior designer russi. Sfogliate MAXIM piuttosto che RIDERS. Ma non rifiutatevi di spuciare sui siti di vendita template: l’importante è che non facciate i fotocopiatori.

Può anche succedere che budget e esigenze vi portino a considerare come cosa migliore l’acquisto di un template già bello che fatto, pronto per essere limato in base alle vostre esigenze: colori, font, titoli, …

Dare uno sguardo ai competitor invece può essere molto rischioso, il rischio "plagio in buona fede" è alle porte. Meglio evitare, anzi meglio guardarli per fare qualcosa di diverso: l’idea di fare un mashup non è male ma come ho già detto deve essere fatta in modo molto furbo.

 

Il gioco delle parole

Un’altra tecnica che potete adottare è quella che chiamo gioco delle parole. Prendete le keyword del sito, scrivetele su un foglio, centrali. Iniziate poi a volare con la fantasia e a scrivere concentricamente, attorno alle heart words le parole che vi vengono in mente, anche quelle senza senso.

Lasciatevi andare, una sorta di brain storming, magari condividete il gioco in qualche social: capobecchino ne sarebbe felicissimo: anzi vediamo come potrebbe reagire la sua comunity alle parole: serramenti, infissi, edilizia. Alla fine individuate delle parole dal vostro diagramma e cercate online immagini o video che le rappresentino. E poi partite, lasciatevi andare. Baudelaire proporrebbe qualche aiuto chimico, io invece preferisco la fi**delizzazione dei social network!

L’esempio del brain storming di parole, dopo il layout, non gettatelo: sarà linfa per la vostra attività SEO!

 

4) Loghi, icone e colori

Se il vostro cliente è già dotato di logotipi di buona qualità siete già persone molto fortunate e il lavoro è già iniziato molto bene. Se non ha nulla di pronto ed è disponibile (€???) c’è molto lavoro da fare, ma anche molta soddisfazione che vi aspetta sul traguardo! Se invece ha brutti loghi e li vuole anche usare, e peggio ancora perchè magari li ha disegnati nel 1823 la moglie o la figlia… beh allora vi consiglio un salto su VDM.

La riconoscibilità di un sito è importante. Il logo deve essere riconoscibile e il sito di conseguenza. Il massimo è riuscire a creare una iconografia, fatta di decorazioni e segnaposti, in grado di richiamare l’attenzione degli utenti e di richiamare il logo principale. E’ un lavoro duro, lo so, ma ci pagano (non sempre) per questo.

Per quanto riguarda i colori dovete assolutamente rispondere alla cromia dei logotipi esistenti e delle idee del cliente. Quello che potete fare è consigliare una strada buona. Quello che consiglio io è usare un numero limitato di colori in buon rapporto tra loro: 3, 4 colori possono essere sufficienti altrimenti si rischia di ubriacare il cliente. E’ chiaro che parlo di una indicazione sui generis. Come Robin correttamente

Una regola non rispettata con la volontà di farlo è creatività!

Se c’è un buon motivo per cui il sito ha 120 colori è giusto farlo. Se dovete fare un sito rovescio perchè siete consci di quello che state facendo, e non perchè siete dei pirloni, allora è un ottimo lavoro!

 

5) Decorazioni e font

Ho accorpato decorazioni e font perchè molto spesso sottovalutiamo il valore del lettering (lo studio dei caratteri) e sottovalutiamo la funzionalità dell’utilizzo di font decorativi.

 

Utilizzare i font

Font browsing - Anteprima dei fontQuando si crea il design di un sito studiare i font da utilizzare è di assoluta importanza. Sappiamo che nel web abbiamo un numero limitato di caratteri standard, ma questo non vuol dire usare sempre quelli. Ho già scritto in merito ai font per il web e ribadisco che, in ogni caso, possiamo spingere su font con target ridotto se il nostro sito ce lo concede, magari prevedendo caratteri alternativi standard nel CSS, evitando che sia il browser / sistema operativo a farlo per voi.

Online potete trovare numerosi servizi che permettono di sostituire il testo HTML al volo, trasformandolo in immagini con il carattere che volete. Personalmente non sono molto avvezzo a questo tipo di script: ritengo che se qualche brevissimo testo necessiti di una particolare enfasi, si possa ancora usare una bella .gif con ALT e TITLE corretti.

Una cosa da evitare assolutamente è il font pagiùghin, ovvero gettare a casaccio nel sito tipologie di caratteri diverse. Ho visto siti con 3 tipi di titoli con 3 tipi di font diversi, icone con altri font ancora, header con inleggibili font decorativi… aiuto! Ragazzi il 99% dei siti che andiamo a sviluppare servono per divulgare ed essere letti. Aiutiamo gli occhi dei nostri navigatori a posarsi sulle parole, invitiamoli alla lettura e evitiamo l’effetto Rotten(dot)com. Cerchiamo una via coordinata ed elegante.

Evitiamo di essere banali ed evitiamo nei titoli grafici o nei loghi il solito Times New Roman o Arial. Il web è pieno di risorse gratuite con migliaia di font a vostra piena disposizione: a volte basta anche un dettaglio o un uncino in più per rendere una scritta speciale. Io uso da sempre dafont.com, ottimo sito con centinaia di risorse e ben usabile. Vi consiglio comunque sempre di leggere il disclaimer di utilizzo dei font.

Per facilitarvi nella scelta del font poi io consiglio di installarvi un programma di font browsing, cioè un navigatore di caratteri con anteprima. Io uso il buon vecchio Amp Font Viewer: se volete Geekissimo ne ha fatto una review completa. Una delle sue potenzialità è quella di farvi una bella preview di tutti i font installati, oppure delle sole categorie da voi compilate. Io ad esempio ho una categoria Decorativi con tutti i font nofont (alieni, animali, simboli, …): successivamente capirete il perchè!

 

I font decorativi

I font decorativi: ottime clipartSapete cosa sono i font decorativi? E la grafica vettoriale? Tante volte impazziamo alla ricerca di clipart vettoriali e ci dimentichiamo che i font sono la miglior forma vettoriale possiate trovare (se sono fatti bene).

Fatevi un tuffo su sul già citato dafont.com, magari nella categoria alien oppure horror: troverete centinaia di disegni simpatici pronti per essere inseriti nelle vostre grafiche. Ma ancora elementi per web pinstriping oppure per creare piccole icone troppo trendy! E se poi non vi basta, con qualche click del vostro programma vettoriale (o Fireworks) convertite il tutto in tracciati e personalizzate a volonta le vostre infinite clipart gratuite.

Arricchite il vostro sito con un tocco personalizzato, ma mi raccomando non eccedete nel barocco o nel kitch, al più che non sia assolutamente necessario!

 

Conclusione di Merlinox

Ho scritto un po’ di punti da seguire, ma come ho premesso sono personalissime linee guida. Lo studio, l’analisi, la progettazione, l’arricchimento e i dettagli sono comunque pietre miliari dello sviluppo, a prescindere dal tipo di attività. Attendo comunque i vostri commenti e magari condividere le vostre personali linee guida di web design.

 

Loading Facebook Comments ...

25 pensieri su “Creare un sito: design e font

  1. yuri

    Bell’articolo Riccardo, potevi dire 2 righe dell’interpolabilità tra browser/sistemi operativi e i font decorativi però già che c’eri, nel prossimo post dai 🙂

    Rispondi
  2. Merlinox Autore articolo

    @yuri Giuro non lo faccio apposta ma anche questa volta non ho capito cosa intendi. In ogni caso, per precisare:
    – il testo html viene interpretato dal browser del navigatore e dal suo sistema operativo: se il testo è definito con un font non presente nel sistema operativo del navigatore non lo può vedere
    – i font decorativi si usano tradotti in immagini / flash, mai e poi mai come testo html.

    Rispondi
  3. Pingback: Creare un sito: design e font

  4. elisa

    Si vede che l’articolo è stato scritto da una persona con esperienza, che ha ‘visto e vissuto’! 😉 Cosa si potrebbe magari aggiungere? Forse qualche rigo sul copyright? Meglio prepararsi, almeno a grandi linee, anche su quello.

    Rispondi
  5. Merlinox Autore articolo

    @elisa Come al solito grazie Elisa. Il copyright è una cosa molto molto delicata. Diciamo che è una tutela “a posteriori”. Cosa significa? Significa che se tu sei tutelato da un ferreo copyright, ti è consentito agire legamente contro chi ti copia. Ma è ben diverso dal non essere copiato.
    Personalmente ritengo che tutto ciò che è pubblicamente online, in forma gratuita, è più o meno proprietà di tutti, almeno potenzialmente.

    ps: se uno mette le foto sconcie su FB con nome e cognome, dopo non deve lamentarsi se…

    Rispondi
  6. docpap

    Bel post: bravo!

    Pienamente d’accordo sul punto 1: inutile dire che vorrei tanto stupire con 2 click del mouse ma… appartengo alla seconda famiglia 😉

    Rispondi
  7. Merlinox Autore articolo

    Grazie @docpap mi fa piacere già il fatto che riconosci le due famiglie. Quindi abbiamo un altro “studioso” tra di noi. Condividiamo le fonti?
    A me la Robin ha aperto veramente un nuovo mondo!

    Rispondi
  8. docpap

    Per l’ispirazione (quasi) tutti i ‘Web design index’; mentre per la tecnica (html, css e php/MySQL) non ho un unico punto di riferimento… ricerche di Google a parte 😉

    Rispondi
  9. docpap

    A proposito: ho visto il link Amazon-Robin che hai postato l’altro giorno su friendfeed… un titolo su tutti della Robin?

    Cosi’ amplio la libreria 😉

    Rispondi
  10. Merlinox Autore articolo

    @docpap Assolutamente questo: http://bit.ly/1qg5cH
    Gli altri alla fine sono raccolte di design, mentre quello sul lettering secondo me è molto specifico. Io al tempo avevo preso la raccolta con 3 libri, ma non la trovo più su amazon. Il Non design… web book lo sconsiglio, o almeno l’ho trovato un po’ troppo easy. Le raccolte sono belle ma alla fine il fatto stesso che siano stampate significa che sono vecchie.

    Più che altro ci dai qualche consiglio su “Web desing index”?

    Rispondi
  11. docpap

    Tkx a lot per il consiglio: lo metto nella wish list del mio account anobii 😉

    I web design index (giunto al #8) non sono altro che IMMENSE raccolte dei piu’ bei siti che circolano (anno dopo anno) in rete. Su ogni pag. ci sono gli screenshot di 3 diversi siti con riferimento all’azienda proprietaria ed alla web agency che li ha creati.

    Le raccolte sono ordinate per ‘colore’ ergo ti trovi centinaia di siti in cui il (non)colore dominante e’ il bianco, poi il giallo, poi l’arancione, rosso, verde, …

    Il tutto corredato da CD-Rom con le strutture dei siti presenti nel libro.

    ‘nsomma si tratta di migliaia d’immagini (gia’ tutte belle raccolte senza dover, quindi, navigare per giorni e giorni!) che ti permettono:

    1) di trarre ispirazione;

    2) di seguire il tuo consiglio ‘copiare web design’ 😉

    3) di guardare tantissime figure… che ai bambini piaccioni tanto tanto! 😉

    Rispondi
  12. Pingback: I migliori post della settimana #34 | EmaWebDesign :: Web Programming / Web Design / SEO

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *