7 consigli per gallerie fotografiche più reattive
Sappiamo tutti e comprendiamo l'importanza di progettare siti Web su una piattaforma reattiva, giusto? Questo vale anche per le immagini e le gallerie fotografiche.
Non c'è niente di peggio che navigare su un bellissimo sito Web e vedere immagini che non si "bloccano" in posizione o dimensioni correttamente. Ti lascia quasi pensare che il designer abbia dimenticato qualcosa o perso un passo.
Oggi esamineremo sette cose che puoi fare nel processo di progettazione per creare gallerie fotografiche più reattive. (Non stiamo parlando di codice qui; si tratta di processi di progettazione che possono aiutare te e lo sviluppatore, indipendentemente dal fatto che siano uguali o meno.)
Esplora Envato Elements
1. Considerare le proporzioni
L'esperienza di visualizzazione desktop può essere molto diversa da quella su un dispositivo mobile. Ma per la maggior parte dei siti Web, i posizionamenti delle immagini sono gli stessi. Il tuo compito è assicurarti che lo stesso messaggio sia comunicato in entrambi gli ambienti e che l'immagine non vada persa su schermi di dimensioni diverse.
È qui che entra in gioco pensare alle proporzioni - la relazione tra i piani orizzontale e verticale dell'immagine.
Tornando a quel sito Web desktop, una bella foto orizzontale super sottile potrebbe apparire stupenda nella parte superiore del design del tuo sito Web. Ma cosa succede a quell'immagine sullo schermo più piccolo in un ambiente più quadrato? La foto si riduce a una dimensione difficile da vedere? O la metà della foto svanisce?
È qui che entrano in gioco le proporzioni. Scegliendo una relazione orizzontale-verticale per dimensioni delle foto simili, si perde meno contenuto dell'immagine quando si cambia dispositivo. Ti aiuterà anche a lavorare con i posizionamenti delle immagini e non dovrai preoccuparti tanto del caricamento di più dimensioni per diversi punti di interruzione.
2. Dimensioni e dimensioni coerenti
La cura che prendi nel ritagliare, ridimensionare e caricare le foto può avere un impatto drammatico sul tuo flusso di lavoro.
Quanti di voi hanno appena caricato foto nel CMS e sperano nel meglio? Sì è la risposta sbagliata.
Ogni foto deve essere ritagliata e dimensionata per il posizionamento nel design del sito Web. Ciò garantisce che le foto sembrino come sono state progettate e non si finirà con la testa mancante nella parte superiore delle foto o degli elementi lasciati su uno (o entrambi) i lati.
Ci vuole un po 'più di tempo sul back-end del progetto, ma ne vale la pena. (Soprattutto se lavori con cursori o gallerie.)
3. Utilizzare uno slider o una galleria
L'uso di un contenitore per immagini come un dispositivo di scorrimento o una galleria può aiutarti a gestire meglio le immagini reattive nella progettazione del tuo sito web. Soprattutto se si utilizza uno strumento di terze parti noto e affermato, la maggior parte del sollevamento pesante viene eseguito per garantire che questi elementi funzionino come previsto.
Due dei suggerimenti precedenti rimangono di vitale importanza anche quando si utilizzano elementi di scorrimento o galleria; si applicano ancora le proporzioni e i concetti di dimensionamento e ridimensionamento.
Non sei sicuro di quale opzione utilizzare? Optare per un dispositivo di scorrimento quando si dispone di una manciata di fantastiche immagini che funzioneranno a dimensioni maggiori. È un'opzione popolare per la parte superiore o "eroe" di una pagina web. Scegli una galleria quando hai molte immagini che possono essere ridotte al minimo senza problemi di leggibilità. Funziona bene con portafogli o siti Web con molte immagini da mostrare.
4. Allontanati dai sottotitoli quando possibile
I sottotitoli possono essere un ottimo strumento per aggiungere valore alle informazioni in un'immagine, ma possono davvero ostacolare il funzionamento del sito Web. Evitali se puoi o trovi una soluzione alternativa che non si presenta sotto forma di didascalia tradizionale.
I blocchi di testo di grandi dimensioni, come i sottotitoli, possono essere riprodotti magnificamente su schermi di grandi dimensioni ma presentano problemi importanti in ambienti più piccoli. L'effetto risultante può essere stonante e potenzialmente causare agli utenti di abbandonare il tuo sito. (E con così tanto traffico proveniente da dispositivi mobili per la maggior parte dei siti Web, potrebbe essere disastroso.)
5. Prestare attenzione quando si mescolano video e immagini
Cerchiamo di essere chiari: è perfettamente accettabile avere elementi video e di immagine sul tuo sito web. È probabilmente qualcosa che dovresti fare.
Ma non mescolare video e immagini negli stessi elementi del design, come mettere elementi video e immagine nello stesso cursore. A volte, sarai fortunato e funzionerà come un fascino. Altre volte, ti verranno lasciati dei riquadri vuoti su alcuni dispositivi che sembrano semplicemente strani.
L'opzione migliore è di assegnare a ogni diverso tipo di elemento il proprio spazio nel design. Questo vale praticamente per qualsiasi elemento di design, ma in particolare per immagini e video.
6. Taglia elementi non necessari
Uno dei maggiori problemi con i cursori e le gallerie è che troppo spesso il designer mette troppa spazzatura nel contenitore. Ci sono frecce di navigazione, pulsanti di navigazione, testo, inviti all'azione e l'elenco continua.
In generale, gli utenti comprendono come interagire con un dispositivo di scorrimento. A meno che tu non stia facendo qualcosa totalmente fuori dal muro, non hai bisogno di due livelli di navigazione che mostrino agli utenti cosa fare. Una singola fila di pulsanti o frecce è abbondante (se ne hai bisogno).
Includi solo elementi con cui gli utenti dovranno interagire. Se lo scopo di una galleria di immagini o di un dispositivo di scorrimento è indurre l'utente a fare clic / toccare un invito all'azione, questa dovrebbe essere l'unica opzione sulla foto. Mantienilo semplice. Non fornire troppe opzioni. Può effettivamente aiutare i tassi di conversione.
7. Utilizzare solo immagini di alta qualità
È quasi ovvio, ma succede ancora troppo spesso. Se non hai un'immagine stellare, non utilizzare affatto un'immagine. Immagini di alta qualità e ad alta risoluzione sono più importanti che mai. Gli utenti non perderanno tempo a guardare un sito Web con immagini pixelate o scadenti (e probabilmente non si fideranno di te se la qualità è scadente).
Un gran numero di utenti sta guardando il design del tuo sito Web utilizzando dispositivi con schermi ad alta risoluzione; si aspettano effetti visivi di alto livello. Devi consegnare.
Alcuni formati di immagine stanno cambiando per soddisfare queste esigenze ad alta risoluzione offrendo al contempo più immagini compresse. Versati nei formati - Google Developers è un ottimo punto di partenza - conosci le risoluzioni dello schermo più utilizzate e prendi l'abitudine di salvare i file in un modo che possa essere consegnato al meglio agli utenti.
Conclusione
Vogliamo tutti creare siti Web con cui gli utenti sentono il bisogno di interagire. Le immagini forti sono una parte fondamentale di tale equazione. Altrettanto importante è renderli bene indipendentemente dal dispositivo.
Pianifica spazi di immagini che funzioneranno su una varietà di dimensioni dei dispositivi quando ti trovi nelle fasi di wireframing di un progetto di progettazione di siti Web. Potresti scoprire che c'è un po 'di dare e avere, in particolare in termini di forma dell'immagine, ma a lungo termine prendere quelle decisioni in anticipo e creare quella coerenza andrà a beneficio della progettazione del tuo sito a lungo termine.
