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 le immagini che semplicemente non lo fanno? in posizione o dimensioni correttamente. Ti lascia quasi pensare che il progettista abbia dimenticato qualcosa o perso un passaggio.
Oggi esamineremo sette cose che è possibile fare nel processo di progettazione per creare gallerie fotografiche più reattive. (Non stiamo parlando di codice qui: questi sono processi di progettazione che possono aiutare te e lo sviluppatore, che siano o meno la stessa cosa).
1. Considerare i rapporti di aspetto
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 di 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.
È lì che si pensa alle proporzioni - la relazione tra i piani orizzontale e verticale dell'immagine -.
Tornando a quel sito Web desktop, una fantastica foto orizzontale ultrasottile potrebbe apparire straordinaria 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? Oppure la metà della foto svanisce?
Ecco dove entra in gioco l'aspect ratio. Scegliendo una relazione orizzontale-verticale per dimensioni di foto simili, meno contenuti di immagine andranno persi quando si cambia dispositivo. Inoltre, renderà più semplice il lavoro con i posizionamenti di immagini e non dovrai preoccuparti di caricare più formati per diversi punti di interruzione.
2. Misura e scala coerentemente
L'attenzione che prendi nel ritagliare, ridimensionare e caricare le foto può avere un impatto notevole sul tuo flusso di lavoro.
Quanti di voi caricano le foto nel CMS e sperano per il 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 abbiano l'aspetto desiderato e non si finirà con le teste mancanti nella parte superiore delle foto o gli elementi lasciati da uno (o entrambi) lati.
Ci vuole un po 'più di tempo nel back-end del progetto, ma vale la pena. (In particolare se lavori con cursori o gallerie.)
3. Utilizzare un dispositivo di scorrimento o una galleria
L'utilizzo di un contenitore per immagini come un cursore 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 consolidato, la maggior parte del lavoro pesante viene svolto per garantire che tali elementi funzionino come previsto.
Due dei suggerimenti precedenti rimangono di vitale importanza anche quando si utilizzano elementi di scorrimento o galleria; i rapporti di aspetto e i concetti di dimensionamento e ridimensionamento si applicano ancora.
Non sei sicuro di quale opzione usare? Scegli uno slider quando hai una manciata di immagini fantastiche che funzionano con dimensioni maggiori. È un'opzione popolare per la parte superiore o? Eroe? sezione di una pagina web. Scegli una galleria quando hai un sacco di immagini che possono rendere piccoli senza problemi di leggibilità. Funziona bene per portafogli o siti Web con molte immagini da mostrare.
4. Stare lontano da didascalie quando possibile
Le didascalie possono essere un ottimo strumento per aggiungere valore alle informazioni in un'immagine, ma possono davvero intralciare il modo in cui il sito funziona. Evitali se puoi o ti viene in mente una soluzione alternativa che non è nella forma di una 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 stridente e potenzialmente causare agli utenti di abbandonare il tuo sito. (E con così tanto traffico proveniente dai cellulari per la maggior parte dei siti web, potrebbe essere disastroso.)
5. Fai attenzione quando mischi video e immagini
Sia chiaro: è perfettamente accettabile disporre di elementi video e di immagini sul tuo sito web. Probabilmente è qualcosa che dovresti fare.
Ma non mescolare video e immagini con gli stessi elementi del design, ad esempio mettendo gli elementi video e di immagine nello stesso cursore. A volte, sarai fortunato e funzionerà come un incantesimo. Altre volte, rimarrai con caselle vuote su alcuni dispositivi che sembrano solo strani.
L'opzione migliore è dare 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 gli elementi non necessari
Uno dei maggiori problemi con gli slider e le gallerie è che troppo spesso il designer mette troppa roba nel contenitore. Ci sono frecce di navigazione, pulsanti di navigazione, testo, inviti all'azione e la lista continua.
Generalmente, gli utenti capiscono come interagire con un cursore. A meno che tu non stia facendo qualcosa di totalmente fuori dal muro, non hai bisogno di due livelli di navigazione che mostrino agli utenti cosa fare. Una singola riga di pulsanti o frecce è abbondante (se ne hai bisogno).
Includere solo gli elementi con cui gli utenti dovranno interagire. Se lo scopo di una galleria di immagini o di un cursore è far sì che l'utente faccia clic / tocchi un invito all'azione, quella dovrebbe essere l'unica opzione sulla foto. Mantienilo semplice. Non fornire troppe opzioni. Può effettivamente aiutare i tuoi tassi di conversione.
7. Utilizzare solo immagini di alta qualità
È quasi scontato, ma succede ancora troppo spesso. Se non si dispone di un'immagine stellare, non utilizzare affatto un'immagine. Le 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 povere (e probabilmente non si fideranno di te se la qualità è scadente).
Un gran numero di utenti guarda al design del tuo sito web usando dispositivi con schermi ad alta risoluzione; si aspettano immagini di alto livello. Devi consegnare.
Alcuni formati di immagine stanno cambiando per soddisfare queste esigenze ad alta risoluzione mentre forniscono più immagini compresse. Verso te stesso nei formati: Google Developers è un ottimo punto di partenza: sapere quali sono le risoluzioni dello schermo più utilizzate e prendere l'abitudine di salvare i file in un modo che possa essere meglio consegnato agli utenti.
Conclusione
Vogliamo tutti creare siti web con cui gli utenti sentano il bisogno di interagire. Le immagini forti sono una parte fondamentale di questa equazione. Altrettanto importante è renderli bene indipendentemente dal dispositivo.
Pianifica spazi per immagini che funzionino su una vasta gamma di dimensioni di dispositivi quando sei nelle fasi di wireframing di un progetto di progettazione di siti web. Potresti scoprire che c'è del dare e avere, soprattutto in termini di forma dell'immagine, ma a lungo andare prendere queste decisioni in anticipo e creare quella coerenza porterà benefici alla progettazione del tuo sito nel lungo periodo.