Source: https://blog.merlinox.com/creare-un-sito-web/
Timestamp: 2018-10-17 13:05:56+00:00

Document:
﻿ Creare un sito: design e font | Merlinox's Blog
Creare un sito: design e font
Scritto il 22/07/2009 da Merlinox in Web Design
Creare 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
Siamo 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?
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?
3) Sindrome della pagina bianca
Per 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.
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.
Quando 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è!
Sapete 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.
Pubblicato il 22/07/2009 in Web Design (creare siti, font, font web, web design)
25 pensieri su “Creare un sito: design e font”
yuri 22/07/2009 alle 14:22
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 🙂
Merlinox Autore articolo 22/07/2009 alle 14:26
@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.
cat 22/07/2009 alle 16:41
pepperyna 23/07/2009 alle 08:22
Io però non sono nè studiosa nè creativa. Sono più come…uno spirito libero del web! 😛
Merlinox Autore articolo 23/07/2009 alle 08:28
@pepperyna opterei per un cane, una chitarra e un po’ di vagabondaggio in giro per l’europa 🙂
elisa 23/07/2009 alle 14:14
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.
Merlinox Autore articolo 23/07/2009 alle 14:19
@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…
Pino 23/07/2009 alle 14:30
Sante parole Merlinox 🙂
Merlinox Autore articolo 23/07/2009 alle 14:32
@Pino @mespino è un Esagerone 🙂
docpap 23/07/2009 alle 16:55
Pienamente d’accordo sul punto 1: inutile dire che vorrei tanto stupire con 2 click del mouse ma… appartengo alla seconda famiglia 😉
Merlinox Autore articolo 23/07/2009 alle 16:58
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!
docpap 23/07/2009 alle 17:06
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 😉
docpap 23/07/2009 alle 17:47
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 😉
Merlinox Autore articolo 24/07/2009 alle 08:05
@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”?
docpap 24/07/2009 alle 08:38
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! 😉
Merlinox Autore articolo 24/07/2009 alle 08:59
I web design index (giunto al #8) non sono altro che…
A dottò regalace un linko 🙂
docpap 24/07/2009 alle 09:07
Il link diretto e’ questo… ma non si vede una cippa 😉
Ergo andate su Amazon che, almeno, qualche pagg. ve la fa sfogliare 😉
Merlinox Autore articolo 24/07/2009 alle 09:14
Cavoli ma sono proprio dei tirchioni… nemmeno su google books c’è una preview (http://bit.ly/DVgPY). Dopo si lamentano se qualcuno lo cerca nei siti che non si devono usare tipo Web Design Index 8
docpap 24/07/2009 alle 09:18
L’unico che ti fanno sfogliare e’ il quarto capitolo.
Cmq concordo pienamente sul discorso ‘istigazione alla pirateria’ 🙁
Pingback: I migliori post della settimana #34 | EmaWebDesign :: Web Programming / Web Design / SEO
Andrea@BV 27/07/2009 alle 02:21
… *delizioso*! 😉
Merlinox Autore articolo 27/07/2009 alle 13:04
Andrea@BV :
… *delizioso*!
Me ne avevano dette veramente di tutti i colori nei commenti ma questa proprio è la prima volta. Che dire: grazie 🙂
Andrea@BV 27/07/2009 alle 13:53
ebbeh, mi è venuto spontaneo dopo avermelo segnato nei bookmark di delicious 😀
Merlinox Autore articolo 27/07/2009 alle 13:54
Fatto bene fatto bene, quando hai un attimo passa che sei sempre il benvenuto 🙂

References: sui generis
 articolo 22
 articolo 23
 articolo 23
 articolo 23
 articolo 23
 articolo 24
 articolo 24
 articolo 24
 articolo 27
 articolo 27