
Ho deciso di rivedere il design del mio blog. Non è un vero e proprio restyling perché nonostante le modifiche siano anche strutturali, il concept e l’aspetto complessivo del sito sono rimasti pressoché in linea con il precedente. Si tratta più di una modifica orientata al miglioramento dell’esperienza utente.
Si tratta di un operazione sottrattiva, che vuole ambire a quel design funzionalista di Maeda e Krug. Un designer deve sempre chiedersi “cosa posso togliere” e non “cosa posso aggiungere”.
Indice rapido
Il concept grafico
Prima di intervenire sul sito, ho fatto alcune prove in Adobe XD, per avere un quadro più chiaro dei possibili interventi da fare per ottenere un aspetto più minimalista, mantenendo riconoscibilità e migliorando l’esperienza di fruizione dei contenuti del blog.
Il concept di Blografik infatti è quello di un blog a scopo informativo, divulgativo e didattico; più orientato quindi alla divulgazione tecnico-culturale senza scopo di lucro che alla pubblicazione di contenuti di colore, tutorial o guide pratiche.
Visivamente, quindi, il blog non vuole stupire o essere “accattivante” ma tende ad offrire la miglior fruizione possibile, agevolando la lettura e la leggibilità, senza abbellimenti, orpelli o elementi di disturbo. Il design è pensato per guidare l’utente a trovare ciò che cerca e non a mostrargli ciò che vorrei mostrare e il lavoro che ho fatto vuole fare un passo avanti verso questa direzione.
Il coding


Blografik è stato sviluppato utilizzando il CMS WordPress e partendo dal tema gratuito Islemag al quale sono state fatte delle modifiche strutturali alle PHP già nel lontano 2012, per modificarne la struttura principale e poi personalizzarla attraverso le modifiche CSS. In questo modo ho creato il mio tema personalizzato Grafik.
Questo intervento invece ha comportato solo delle modifiche a livello CSS, tramite la funzione “Personalizza” del tema Grafik. Gli interventi hanno riguardato soprattutto la parte che regola il layout e l’aspetto delle pagine principali.
Le modifiche
Layout

Boxed – Ho tolto il background-color grigio dal body, per eliminare quell’effetto di incasellamento del wrapper principale. In questo modo, pur mantenendo una struttura tipicamente boxed, che mi aiuta a gestire la giustezza dei paragrafi, visivamente risulta tutto più leggero e con meno “rumore di fondo”.
Header – Anche tutto il gruppo di testata è stato alleggerito. Il border della barra di navigazione principale e del menù secondario è stato rimosso. Non avendo più il box wrapper visibile, ho eliminato il padding di tutto il blocco testata e ridotto il margin tra il logotipo di testata e il menù principale.
Content – Infine, ho aumentato il margin tra il gruppo di testata e il content principale. Questo perchè non avendo più le linee di separazione tra i due elementi ho voluto separarli otticamente sfruttando la prossemica.
Footer – Anche il footer ha subito importanti modifiche. Principalmente è stato eliminato il background-color che appesantiva molto la parte finale delle pagine e degli articoli, fondendolo con il resto del layout e separandolo visivamente da una sottile linea grigia.

Design system
Menù – In funzione del nuovo layout, è stato rivisto l’aspetto del menù. La modifica principale riguarda la rimozione delle icone dalle voci principali, che non aggiungevano nulla all’esperienza utente. Successivamente o riequilibrato il corpo del testo delle voci rispetto al contesto per renderlo più armonioso con il design system. Infine, ho modificato il comportamento della voce attiva, eliminando il background e predisponendo un text-decoration in underline. In questo modo la voce attiva è sottolineata in modo da essere più coerente con il concept visivo del sito
Navigazione articoli – Un’altra modifica è stata fatta agli elementi di navigazione degli articoli a fondo pagina, che permettono di caricare i precedenti e i successivi. Ho eliminato il bordo attorno al pulsante mantenendo solo il top e il bottom ma con un tratto più leggero e coerente con le linee del design system.
Didascalie – Ho ridotto lo spessore della linea sottostante alle didascalie per renderlo coerente con il design system.
Articoli correlati – anche negli articoli correlati ai piedi degli articoli ho rimosso il border del rotator in modo da alleggerire quella fascia. Ho ridotto anche il corpo dei titoli in modo da renderli più leggibili.

Footer – oltre alle modifiche a livello layout, rimosso l’elemento grafico dei titoletti dei menù del footer e regolato le linee tra una voce ell’altra.
Conclusioni
Sicuramente ci saranno altri interventi da fare nel sito per migliorarlo ulteriormente ma con queste ultime modifiche ritengo di aver reso il blog più in linea con gli obbiettivi, grazie ad un design essenziale e minimale.