Una guida Web Designer per selezionare l'immagine di sfondo perfetta

Gli sfondi sono stati a lungo un ingrediente chiave di un sito web ben progettato. Le tendenze del design moderno hanno posto ancora più enfasi su di loro. Ora sono attesi non solo per inquadrare i contenuti, ma anche per fornire una separazione visiva per varie sezioni all'interno di una pagina.

Quando usi le immagini per lo sfondo del tuo sito web, è meglio scegliere con attenzione. La scelta sbagliata può davvero cancellare il tuo messaggio. Per non parlare dei possibili impatti negativi all'accessibilità.

Con questo in mente, esploriamo alcune best practice per la scelta e l'implementazione delle immagini di sfondo.

1. L'accessibilità viene prima di tutto

La prima domanda da porsi quando si considera un'immagine di sfondo è: quale effetto avrà sulla leggibilità dei contenuti? Dovrai assicurarti che il testo sia leggibile e che, combinato con lo sfondo, sia impostato un rapporto di contrasto accettabile.

Se non sei abbastanza sicuro dei problemi di accessibilità di cui sopra ma ami davvero un'immagine particolare, ci sono alcune cose che puoi fare per farlo funzionare. Puoi usare il software di fotoritocco o persino i CSS per modificare cose come opacità e contrasto, o aggiungere maschere di livello per rendere più leggibile il contenuto. È anche importante scegliere il tipo di carattere e la dimensione del carattere giusti per il contenuto stesso.

Fiori da giardino in legno

La linea di fondo è che il tuo background non dovrebbe mai interferire con la capacità di un utente di visualizzare correttamente i tuoi contenuti.

Vero raggio di luce da Underwater

2. Le foto devono essere pertinenti e prive di significato

Gli sfondi fotografici sono diventati molto popolari sul Web e rappresentano un'ottima scelta per coprire aree di grandi dimensioni. È una buona idea scegliere in qualche modo le foto pertinenti al tuo sito web. Ciò potrebbe significare una foto della tua posizione fisica, un prodotto o un servizio. Ma potresti anche cercare qualcosa che ritieni possa aiutare a trasmettere il messaggio dei tuoi contenuti. Le immagini di sfondo dovrebbero essere pensate come parte della tua strategia globale di branding.

Batumi, Adjara, Georgia. Panorama, veduta aerea del paesaggio urbano urbano

Dovrai anche cercare le foto che hanno uno spazio aperto (pensa a un orizzonte oa un campo di erba). Una foto ingombra potrebbe portare via dai tuoi contenuti, anche con opacità o cambiamenti di colore. Questo non significa che non puoi usare colpi d'azione o altre immagini convincenti. È più una questione di evitare immagini troppo opprimenti.

Cascata in Alaska

3. Usa le trame che sono sottili e senza soluzione di continuità

Le trame possono aggiungere un tocco di classe all'aspetto generale del tuo sito web. Sia che si tratti di uno sfondo di pagina o di un'area di contenuto specifica, cerca texture senza soluzione di continuità, nel senso che possono ripetere uno schema sullo schermo che lo fa apparire come una grande immagine. Anche se a volte puoi farla franca con l'utilizzo di un'immagine strutturata a dimensione intera, quelle particolarmente dettagliate non sempre funzionano bene su più dimensioni dello schermo. Inoltre, le immagini con una dimensione di file di grandi dimensioni possono influire negativamente sul tempo di caricamento della pagina.

Modelli scuri

La sottigliezza è anche una qualità desiderata in una trama (a meno che tu non voglia un look più brutalista). Ancora una volta, l'idea è di non travolgere gli utenti con modelli audaci. Cerca immagini che contengano linee e colori più morbidi che contrastino bene con il contenuto.

Modelli geometrici minimi

4. Considerare più schermi e dispositivi

L'area visibile di uno sfondo può cambiare notevolmente tra le varie dimensioni dello schermo. Questo può avere un effetto particolare sulle foto. Ciò che può sembrare semplicemente sbalorditivo su un monitor widescreen può anche sembrare orribile su un telefono. Parti chiave dell'immagine possono essere tagliate e provocare qualcosa che perde il contesto.

La sfida qui è la selezione delle foto e il codice parte. Innanzitutto, cerca le immagini che si adattano alle proporzioni desiderate (orizzontale, verticale, quadrato) del contenitore principale. È più probabile che si adattino bene agli schermi più piccoli.

Concetto di collegamento di tecnologia dello Smart Phone del telefono

Dovrai anche esaminare in che modo il CSS del tuo sito web gestisce le immagini di sfondo per schermi diversi. Ad esempio, utilizzando il dimensione di sfondo: copertina; La proprietà CSS può garantire che l'intera immagine sia visibile. Sappi solo che potrebbe eliminare un po 'il dimensionamento del contenitore. Molto probabilmente, dovranno essere apportate delle modifiche per ottenere tutto ciò che sembra perfetto per i pixel su tutti i dispositivi.

Diverso gruppo di persone concetto di unità della Comunità

5. Inizia con immagini ad alta risoluzione, quindi ritaglia

Quando si scaricano immagini che si intende utilizzare per lo sfondo, scegliere la risoluzione più alta disponibile. Ciò consentirà di apportare tutte le modifiche necessarie e quindi ritagliare l'immagine in una dimensione più appropriata. Dovresti assicurarti di salvare le versioni modificate come file separato.

Sfondi di Spotlight scuro con texture

Capire le dimensioni appropriate dipenderà dalla larghezza del contenitore all'interno del tuo sito. Mentre alcune immagini si allungano o si ripetono abbastanza bene (un vantaggio dell'uso di trame senza cuciture), altre possono apparire distorte. In tal caso, ritaglia la larghezza più ampia di cui avrai bisogno. Potresti anche utilizzare le query multimediali CSS per chiamare versioni più piccole di un'immagine per altre dimensioni dello schermo.

Effetti vintage per foto o disegni

Portare gli sfondi in prima linea

È comprensibile che, con così tante entusiasmanti tecnologie che influenzano il web design, tendiamo a non prestare molta attenzione agli sfondi. Ma svolgono un ruolo molto importante nella narrazione e ci aiutano a creare un'interfaccia piacevole. Gli sfondi a pagina intera aiutano a impostare il tono per un sito Web, mentre gli sfondi delle sezioni forniscono al nostro contenuto uno spazio per respirare.

Certo, tutto funziona al meglio quando scegliamo immagini che soddisfano le nostre esigenze. Immagini che migliorano - non interferiscono - con la capacità di un utente di consumare contenuti. Ma dovremmo anche considerare dettagli come dimensioni, proporzioni e idoneità per i dispositivi mobili. Ricorda che i dettagli contano, anche quando si tratta di oggetti usati in background.

link utili