Un tema WordPress per fotografi e illustratori

Con UX e UI progettate per avere il minor impatto possibile
sull'osservazione delle immagini.

Design | di: Giovanni Invernizzi

10 Aprile 2021 — Tempo di lettura: 8'

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.

Conscio dei miei limiti ho deciso quindi che il prodotto finale sarebbe stato un sito web focalizzato il più possibile sulla valorizzazione e sulla fruizione delle immagini in modo da rendere la progettazione grafica - soprattutto per quanto riguarda il gusto estetico - un compito il più semplice possibile.

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;
Modalità di navigazione chiara
Modalità di navigazione scura
Navigazione galleria di immagini
Navigazione contenuto news

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);
Pagina di archivio con griglia Flexbox e immagini ritagliate
Pagina di archivio con griglia Masonry e immagini non ritagliate
Tema configurato con logo personalizzato

Come sempre una delle priorità è stata quella di ridurre il più possibile i tempi di caricamento, soprattutto in considerazione del fatto che le immagini Retina e HiDPI sono molto più pesanti di quelle con risoluzione tradizionale.

La fluidità di navigazione e la riduzione della percezione dei tempi di caricamento è stata ottenuta usando Swup per le transizioni di pagina e LazyLoad per caricare le immagini in maniera progressiva ma spesso i test valgono più di mille parole:

Test effettuato su gtmetrix.com

Test effettuato su gtmetrix.com

Un rapporto di Lighthouse

Un rapporto di Lighthouse

Il risultato finale di questo lavoro è Paperplane photography theme, un tema per WordPress che può essere utilizzato da chiunque.

Puoi vedere il tema in azione su allegramartin.it o su 80mm.it. L’unico requisito per utilizzarlo in autonomia è essere in possesso di una licenza di Advanced Custom Fields PRO, necessario per gestire le opzioni di configurazione.

Se ti interessa usare questo tema sul tuo sito lo trovi su GitHub con tutte le indicazioni necessarie.

Se invece non hai confidenza con l’installazione e la configurazione di un tema, puoi scrollare ancora un po’ la pagina e scriverci per scoprire cosa possiamo fare per te!

Articoli correlati

Vuoi spiccare il volo insieme a noi?

    info@paperplanefactory.com
    +39 339 54 36 752

    l>



    Invia