Layout a griglia nei siti portfolio di WordPress: suggerimenti ed esempi di progettazione

La struttura più comune di qualsiasi sito di portfolio WordPress è la griglia. Mostra una manciata di lavori tutti in una volta in modo che lo spettatore possa scansionare rapidamente e scegliere qualsiasi cosa attiri la sua attenzione.

Ma cosa rende un layout a griglia forte per un portfolio? E cosa dovresti considerare quando lanci il tuo sito portfolio?

In questo post condividerò alcuni suggerimenti e consigli sui migliori progetti di layout della griglia per i portfolio di WordPress.

Disegni a griglia stretta

Quando usi una griglia, è consigliabile mantenere il design stretto. In questo modo gli elementi sono vicini tra loro per navigare rapidamente e incoraggiare gli utenti a interagire con il contenuto.

La struttura della griglia di solito differisce in base al tipo di contenuto del portafoglio. Potrebbe essere necessario aumentare o diminuire il riempimento a seconda delle foto e del layout. Ad esempio, le opere d'arte possono sembrare sfocate quando sono vicine tra loro, quindi i portafogli di arte digitale beneficiano di spazio extra.

Ma un designer potrebbe tenere il proprio lavoro ravvicinato perché gli screenshot sono ancora facili da distinguere, anche a distanza. Puoi vedere un bell'esempio nel tema Ink per WordPress.

Questo non utilizza assolutamente alcun riempimento tra nessuno degli elementi della griglia. Questi blocchi quadrati si allineano strettamente insieme in modo che l'utente veda tutto in una volta.

Utilizza anche miniature più piccole in modo che tendano ad attirare rapidamente l'attenzione. Mi piace molto questo stile ed è uno dei miei preferiti perché lascia un'impressione così forte. Nota come ogni foto è chiaramente visibile in contrasto con tutte le altre.

Se hai un lavoro che può trarre vantaggio da questo stile, esamina il tema Ink. È un modo semplice per creare questi tipi di griglie di portfolio senza codificarne una da zero.

Ma una bella alternativa è Bramble, che ha un po' più di spazio tra ogni pezzo.

Questo tema WordPress viene fornito con più layout di portfolio in modo da poter effettivamente scegliere lo stile o gli stili che ti piacciono di più. Alcuni layout di portfolio hanno miniature più vicine tra loro, altri hanno molto riempimento tra gli elementi in una griglia.

Ma la cosa n. 1 da considerare è la paralisi dell'analisi. Ciò si verifica quando vengono presentate troppe scelte che possono far sentire qualcuno incapace di sceglierne qualcuna.

Finché le voci del tuo portafoglio si sentono uniche e hanno abbastanza spazio (o mancanza di spazio) per stare in piedi da sole, otterrai molti clic. E non è questo il punto centrale di un portafoglio?

Griglie in muratura

Non molte persone conoscono le griglie in muratura, ma esistono da molto tempo.

Questi in genere utilizzano JavaScript per disporre gli elementi in una griglia in base a diverse altezze verticali. Quindi, invece di aggiungere miniature perfette per pixel tutte della stessa dimensione, puoi aggiungere diversi elementi del portfolio di dimensioni diverse e adattarli comunque.

Il tema WordPress di Weston ha questa caratteristica nella sua pagina del portfolio fotografico minimalista. Questo naturalmente si rivolge ai fotografi che vogliono mettere online il loro lavoro e la griglia in muratura è un'opzione adatta per la fotografia ad altezza variabile.

Ogni foto si inserisce naturalmente nella griglia occupando la giusta quantità di spazio. Di solito puoi personalizzare il numero esatto di colonne e l'altezza delle colonne, ma ricorda che differirà in base alle dimensioni del dispositivo.

Se ti piacciono i layout a schermo intero, dai un'occhiata al tema Notio. Utilizza un design a griglia in muratura con miniature strette ed effetti di animazione personalizzati.

Notare che anche le griglie di questi due temi variano in termini di rigidità. Uno ha uno spazio bianco extra tra le immagini mentre l'altro ha le miniature allineate l'una contro l'altra.

I layout della griglia seguono una manciata di tendenze ed è una tua scelta seguire quelle che ti piacciono di più.

Dettagli al passaggio del mouse: Sì o no?

Molti portfolio includono dettagli al passaggio del mouse che vengono visualizzati sopra l'anteprima durante il passaggio del mouse. Questo effetto di solito non si applica ai dispositivi mobili, ma è sicuramente una tendenza comune per i siti di portfolio desktop con miniature grandi.

Ogni miniatura dovrebbe collegarsi alla pagina interna dell'elemento del portfolio, o almeno aprire una galleria di immagini relative a quel pezzo. Le miniature non dovrebbero costituire l'intero portfolio.

Ma l'aggiunta di dettagli può incoraggiare clic più elevati e indurre le persone a scavare ulteriormente nel sito. Il tema Crea WordPress utilizza un effetto di animazione personalizzato mentre si passa con il mouse per attirare l'attenzione sui dettagli al passaggio del mouse.

Quando il cursore si posiziona su qualsiasi elemento del portfolio, troverai due importanti informazioni:

• Il nome/titolo dell'elemento del portfolio
• La categoria dell'articolo

A volte questi piccoli dettagli possono migliorare radicalmente l'esperienza dell'utente. Se qualcuno sta cercando un determinato lavoro di progettazione grafica, può navigare per categoria e controllare i titoli prima di fare clic.

Ma altre volte questi dettagli possono essere inutilmente prolissi e possono occupare troppo spazio. Ecco perché alcuni designer saltano questi dettagli, come quello che troverai nel tema WordPress Gather.

Solo semplici miniature con semplici effetti al passaggio del mouse. Facile per gli occhi e tutti i dettagli si trovano sotto le miniature in modo da non ostruire l'immagine.

Questa tendenza non ha una chiara risposta "corretta". I dettagli al passaggio del mouse funzionano alla grande per alcuni, ma per altri questa funzione può essere fonte di piccolo fastidio.

Trova ciò che sembra migliore sul tuo sito e misura in base ai tuoi gusti. Ma se i dettagli vengono visualizzati al passaggio del mouse sulla miniatura o sotto la miniatura, prova ad aggiungerli da qualche parte nella pagina.

Afferra gli occhi con foto avvincenti

Ogni layout di griglia utilizza le miniature per catturare l'attenzione. Queste miniature in genere vendono parte del tuo lavoro incoraggiando le persone a fare clic e leggere di più.

Il tuo lavoro potrebbe essere arte digitale, web design, design di icone, architettura UX o qualsiasi altra cosa con un appeal visivo. Ma il punto è che hai assolutamente bisogno di un appeal visivo per vendere. E questo deriva da foto avvincenti.

Il tema minimalista Mellow WordPress utilizza una varietà di foto ciascuna con stili diversi. Queste non sono foto di progetto "vere" poiché sono per lo più segnaposto. Ma offrono un chiaro esempio di vendita del visitatore fin dal primo caricamento della pagina.

Suggerisco di esplorare altri siti di portfolio per vedere cosa stanno usando altri designer per le loro foto della galleria.

Scopri cosa puoi usare per il tuo sito e quale tipo di lavoro potrebbe attirare l'attenzione. Cosa mostra al meglio le tue capacità? Quale parte di ogni progetto è visivamente più attraente o aiuta a vendere il tuo lavoro ad altri?

Ancora una volta questa è una domanda molto aperta, ma ti consigliamo di provare molte strategie diverse. Di solito trovo che le foto in primo piano attirino molta attenzione, specialmente in forma di miniature. Puoi vedere una combinazione di questi esempi con il tema Beckett nella pagina del portfolio.

In un layout a griglia hai solo così tanto spazio per ogni progetto. Fai contare quello spazio!

Se sai esattamente quanto dovrebbero essere grandi le tue miniature, allora sei già in grande vantaggio. Ciò ti consente di ritagliare molte miniature diverse in Photoshop per vedere quali composizioni ti piacciono di più per gli elementi del tuo portfolio.

Andando avanti

I design delle griglie sono piuttosto semplici e molti temi del portfolio di WordPress vengono forniti con loro per impostazione predefinita. Ma un layout a griglia non offrirà molto senza uno spettacolare lavoro di progettazione da mostrare.

Spero che questo post offra suggerimenti preziosi per designer e creativi che lanciano i propri portfolio. I design a griglia sono più comuni nei portafogli, quindi i visitatori li aspetteranno. Applicando queste tendenze (o utilizzando questi temi) puoi catturare più attenzione e idealmente portare più lavoro del cliente nel tempo.