Mi chiamo Franco.
Sviluppo per il web.

7 novembre 2018, ultimo aggiornamento 17 marzo 2019

Com'è stato costruito questo sito

Amo il web. Non a caso, le domande che balenano nella mia mente ogni volta che visito un sito sono:

Ogni volta che mi stavo per approcciare al processo di creazione del mio sito personale, una certezza rimaneva nella mia mente: voler far sapere come esso era stato creato. Ora che questo sito è realtà non rinuncio di certo a quel proposito. Dedico pertanto il mio primo articolo alla spiegazione di come sia stata affrontata la sua progettazione, spiegando le scelte che sono state fatte durante la sua realizzazione.

Questo sito è stato costruito da zero, a mano, scrivendo ogni singola riga del codice che lo costituisce. Quale codice? Quello che puoi vedere cliccando con il tasto destro del mouse su un punto della pagina e scegliendo un’opzione simile a visualizza sorgente pagina, opzione che ha un nome diverso in base al browser che stai utilizzando. Per la sua realizzazione è stato utilizzato un solo e unico strumento, ossia un generatore di siti web statici. Inizialmente avevo adottato, come generatore, un software realizzato da me. Dopo poco tempo, però, la sua corretta implementazione cominciava a diventare un processo piuttosto lungo e time consuming, che non mi permetteva di concentrarmi sulla scrittura degli articoli. Decisi, quindi, di utilizzare uno di quei generatori che spopolano in rete. Inizialmente la mia scelta ricadde su Hugo, che però scartai presto perché lo ritengo eccessivamente complesso e la sua documentazione davvero lunga. Fortunatamente un giorno scoprii Eleventy e devo dire che è lo strumento che sognavo: semplice, intuitivo, minimale e dotato di tutte le funzionalità di cui necessitavo.

Wireframing - Photo by Med Badr Chemmaoui on Unsplash

Realizzando il mio sito web (come qualsiasi altro) sono sempre stato caratterizzato da una costante sete e ricerca di velocità, pulizia e marchio personale. Volevo creare un sito che:

L'utilizzo di uno strumento come Eleventy mi ha permesso di soddisfare appieno il primo requisito, permettendomi di rinunciare totalmente a qualsiasi frammento di codice PHP e all'utilizzo di un database: questo sito è interamente statico, il che significa che le sue pagine vengono fornite da server così come sono, senza la necessità di una preliminare compilazione delle stesse. I database sono notoriamente lenti e pericolosi per la sicurezza: un sito web statico non ha questi problemi.

Il layout è totalmente responsive, ossia esso riesce ad adattarsi perfettamente a qualsiasi tipo di dispositivo venga utilizzato per visualizzarlo, sia esso uno smartphone, un tablet o un computer. Per quanto concerne la palette dei colori, essa è stata scelta tramite Color Hunt, un’ottima web app che permette di sfogliare tra un numero davvero impressionante di schemi colore. Amando il rosso e il contrasto che esso genera con i colori tendenti al nero, ho optato per questa palette.

Come detto poc'anzi, non era la prima volta che cercavo di creare un mio sito personale. Anzi, ad essere sincero c'ho provato tante volte e altrettanto spesso ho cambiato idea al riguardo, ritrovandomi infine a seppellire il mio desiderio e “processo creativo” sotto un lapidario «Lasciamo perdere!». Con cadenza continua, però, il pensiero di voler riservarmi uno spazio nella rete si ripresentava puntualmente nella mia mente. L’ultima volta che ciò accadde, decisi di evitare di commettere il solito errore di lanciarmi a capofitto nella stesura del codice, senza idee grafiche precise e senza passare prima per una fase di abbozzamento, di wireframing. Questa volta decisi di cambiare modus operandi e generare uno schizzo di come desideravo il sito fosse una volta terminato, utilizzando i miei colori e valutando in maniera adeguata la scelta dei font. A tal proposito ho utilizzato Adobe XD CC, un ottimo programma di design e grafica che permette di creare facilmente prototipi di siti web e applicazioni, perfetti per testare le loro UI e UX (user interface e user experience).

Per quanto concerne la scelta dei font, decisi di optare anche per i web font offerti dall’ottimo servizio Google Fonts. Nello specifico, quelli utilizzati all’interno di questo sito sono Georgia e Oswald, rispettivamente un font serif, che facilita la lettura degli articoli, e uno sans serif, prorompente e pulito, ottimo per le intestazioni.

Per quanto concerne, infine, le icone esse non sono state realizzate da me, bensì ho utilizzato Linea, un set contenente più di 730 icone, fornito gratuitamente da Dario Ferrando. Si tratta di icone outline estremamente pulite e minimali (ergo perfette per questo sito), raggruppate in diverse categorie.

Questa è la storia del sito in cui ti trovi: ora sai come esso sia stato ideato e concretamente realizzato, di come io sia partito dalla sua idea iniziale fino alla finale ed effettiva realizzazione. Spero di essere riuscito a soddisfare la tua curiosità in merito e di aver risposto a tutte le domande che tu, in qualità di web designer, grafico o non puoi avere.