Quando ho deciso di realizzare un sito per professionisti e professioniste del mondo della fotografia o dell’illustrazione non mi occupavo di progettazione UX e UI da molto tempo, perché il mio ruolo ormai è esclusivamente quello di sviluppatore front end.
Lavorare da anni a fianco di chi si occupa di questi aspetti mi ha però aiutato molto a mettere in pratica tutte le nozioni che normalmente, da bravo sviluppatore, mi limito ad osservare quando discuto con i miei colleghi che si occupano di design o quando devo trasformare i loro layout in un tema di WordPress.

I requisiti che ho preso in considerazione per valorizzare le immagini sono molti, di seguito sono elencati i principali:

• utilizzare un layout per le gallerie che permettesse di visualizzare le immagini nella loro interezza senza ritagli indipendentemente dal formato (portrait o landscape), senza dover scrollare la pagina e che funzionasse in modo univoco su tutti i dispositivi;
• gestire immagini Retina e HiDPI;
• attivare / disattivare tutte le informazioni di navigazione non necessarie durante la visualizzazione delle immagini;
• struttura delle gallerie di immagini gestita utilizzando il sistema nativo di WordPress per mostrare gli allegati di un post (template file image.php);
• ogni immagine con la propria URL e una serie di microdati basati su schema.org ImageObject;
• navigazione tra le immagini di una galleria tramite frecce della tastiera su desktop e swipe sui dispositivi mobili;
• per rendere la navigazione il più regolare e lineare possibile ho utilizzato Swup, una libreria in grado di gestire le transizioni di pagina;
• navigazione in modalità scura o chiara;

Per non limitare l’uso di questo tema WordPress ad un solo sito ho deciso di implementare anche una serie di opzioni che avrebbero permesso una – seppur minima –  personalizzazione dell’aspetto del sito. Le opzioni possono essere riassunte in questi punti:

• possibilità di impostare un logo personalizzato per il pulsante home o lasciare semplicemente il titolo del sito come link testuale;
• layout della home page che può essere impostato per mostrare una singola immagine casuale o un elenco di progetti;
• la griglia delle pagine di archivio può essere configurata per utilizzare Flexbox or Masonry grid, 2 o 3 immagini per riga e le immagini di anteprima con le loro proporzioni originali oppure ritagliate per ottenere una griglia dall’aspetto più uniforme;
• è possibile utilizzare uno o più caratteri da Google Fonts e specificare la famiglia di caratteri e il peso del carattere per intestazioni, paragrafi e altro;
• possibilità di impostare lo schema colori predefinito (colore di sfondo della pagina, colore dei testi e di altri elementi di navigazione);