Questa è una traduzione dell’originale articolo di due anni fa.

Un sito permette di acquisire visibilità, presenza online, e, più in generale, un posto dove si possono condividere i propri pensieri. Purtroppo, il mio è rimasto sulla lista delle cose da fare troppo a lungo.

Colloquio col cliente

Avevo fin da subito tre idee molto chiare di come il sito sarebbe dovuto apparire e di quali funzionalità avrebbe avuto bisogno.

Prima di tutto, volevo un aspetto minimalista ma confortevole. Pochi elementi; colori molto accesi; tanto spazio bianco. Disegnai diverse bozze ed esplorai multiple strade, ma alla fine l'ispirazione mi venne data dalle etichette di sapone di alto profilo: squadrate, con un grande titolo, e tante piccole scritte.

Design intermedio vs design finale del mio sito

Avevo bisogno di uno spazio dove poter parlare brevemente di me, pubblicare progetti ed, eventualmente, interessanti scoperte. Per queste ragioni, ho aggiunto una pagina About e una sezione Blog ai requisiti.

Infine, volevo che contattarmi fosse facile e fattibile in pochi click. Per tale motivo, sia la pagina principale che la barra di navigazione hanno una sezione Contatti. Dicono che ogni click allontani i possibili clienti. Ho preferito evitare tale scenario.

Strumenti e sviluppo

Visto che il sito avrebbe dovuto fungere anche da blog, ho reputato un CMS necessario, ed ho optato per quello con cui sono (ero) più proficuo: WordPress.

Sebbene non sia un fan dei framework CSS, questa volta ho dato una possibilità a TailwindCSS. È stato un esperimento che alla fine ha ripagato, permettendomi di concentrarmi sul risultato invece che sull’organizzazione della base di codice.

Per ripulire il foglio di stile dalle regole inutili e minificarlo, così come per fondere e transpilare gli script e per generare il CSS critico, ho usato GulpJS in maniera similare a come nystudio107 implementa il proprio front-end development automation.

Una schermata del progetto in VSCode

Galleria

Barra di navigazione “vedo non vedo”

Animazione della barra in dettaglio

Altamente performante

Punteggio LightHouse del sito web