Accentsconagua

Suggerimenti per aiutarti a mescolare correttamente il testo con le immagini

Web design
Share

Il modello di utilizzo del testo in cima alle immagini di sfondo è popolare da anni. Originando molto prima del web design, il testo su un'immagine può offrire un'esperienza emotivamente coinvolgente e ricca di contenuti. Prima di oggi, le immagini dovevano essere molto più piccole per consentire una larghezza di banda significativamente più lenta. Poiché le velocità di connessione e la densità dello schermo aumentano rapidamente, siamo aperti a utilizzare immagini molto più grandi nei nostri progetti.

Le decisioni di progettazione relative a questa tecnica sono estremamente importanti da considerare e lo sviluppo di best practice per governare questa pratica è indispensabile per mantenere un design di alta qualità. Non si può semplicemente posizionare il testo su qualsiasi immagine e aspettarsi che abbia un aspetto corretto.

In questo articolo, discuteremo cinque diversi aspetti della collocazione del testo sulle immagini che ti aiuteranno a mescolare correttamente copia e immagini.

Nota: in tutto l'articolo, si applicano gli stessi principi quando si scelgono le combinazioni di video e testo.

1. Contrasto attraverso il colore e la luminosità

L'uso di immagini che hanno un contrasto significativo con il testo è imperativo. In particolare, l'uso di immagini più scure con testo più chiaro o scurire le immagini con filtri o un elemento di sovrapposizione può essere un modo efficace per garantire che si stia utilizzando abbastanza contrasto. 

Alcuni suggerimenti per ottenere il corretto contrasto di colori e luminosità: 

  • Se non riesci a vedere immediatamente le forme delle lettere, il tuo contrasto è disattivato.
  • Il contrasto non sempre significa buio contro luce; i colori complementari forniscono anche un contrasto naturale.
  • Se l'immagine è complessa e completamente a fuoco, utilizzare l'overlay o modificare l'immagine sarà probabilmente l'opzione più efficace.

In questo esempio, utilizziamo i filtri WebKit per manipolare il contrasto e la luminosità di un'immagine, che inseriamo e manipoliamo usando un extra 

. Il filtro, non prefisso, ha il seguente aspetto: filtro: contrasto luminosità (40%) (70%);

Difficile da leggere; nessun punto focale sul testo o nell'immagineMolto più facile da leggere; richiede filtri CSS

Guarda la demo.

Altri esempi

https://ayr.com/https://www.geckoboard.com/http://anodpixels.com/https://obakkifoundation.org/

2. Contrasto tramite dimensionamento e posizionamento

Il colore non è l'unico modo per migliorare il contrasto di un'immagine in relazione al testo sovrapposto. La scelta della dimensione e della posizione del testo in relazione agli elementi focalizzati dell'immagine è essenziale, poiché si riferisce alla leggibilità del testo stesso.

In questo esempio, abbiamo scelto un'immagine con un'area del cielo ampia, relativamente omogenea. Questa è un'area perfetta per posizionare il testo. Al contrario, un posizionamento molto meno leggibile del testo sarebbe direttamente al centro dell'immagine, dove appare lo skyline.

Cattivo esempio; Cattivo contrasto, scarsa collocazione.Buon contrasto, posizionamento migliore.

Guarda la demo.

Ulteriori esempi

http://www.themostnorthernplace.com/http://eup.volkswagen.no/http://www.dtelepathy.com/

3. Leggibilità attraverso la profondità

Scegli un'immagine che utilizza la profondità di campo. Ciò consentirà uno sfondo più uniforme per il testo, che aumenterà la leggibilità. Posiziona il testo sulla parte sfuocata dell'immagine e assicurati che il colore del testo sia in contrasto con il colore primario dell'area sfuocata.

Possiamo farlo facilmente posizionando il testo in aree a fuoco basso, come in questo esempio.

Guarda la demo.

Ulteriori esempi

http://une.ch/creation/homehttp://www.gloriasrestaurants.com/http://www.atelier-serge-thoraval.com/en/http://purplerockscissors.com/

4. Scelta del soggetto dell'immagine

Il testo sulle immagini è efficace solo quanto la riunione dedotta dalla combinazione. Ad esempio, non scegliere immagini generiche se le immagini più specifiche saranno più adeguatamente comunicanti. Quando scegli le immagini, considera l'evocazione emotiva e il contesto letterale dell'immagine, specialmente in relazione al tono del messaggio che la copia intende trasmettere.

Alcuni suggerimenti: 

  • Scegli le immagini che mostrano una frase completa; l'utente dovrebbe vedere chiaramente il soggetto dell'immagine e capire l'azione che viene intrapresa nell'immagine, se presente. 
  • Non scegliere immagini con un punto debole di messa a fuoco.
  • Tieni presente l'importanza della chiarezza nell'immagine. Se l'immagine è più o meno per evocare sensazioni e meno sui dettagli, è possibile applicare pesanti sovrapposizioni o filtri senza perdere l'efficacia dell'immagine.

Esempi

http://blood-and-water.animalplanet.com/http://pixelgrade.com/demos/rosa/http://formula1data.com/

5. Consapevolezza tridimensionale

Pensa a dove appare il testo in relazione al livello di messa a fuoco dei vari elementi nell'immagine. Il testo sembra sedersi nell'immagine o viene in primo piano? Il testo si confonde o mantiene la sua posizione unica nello z-space? In che modo il testo si riferisce agli elementi focalizzati dell'immagine, in particolare?

Una regola empirica: più piccolo è il testo, più il testo sembrerà apparire nello spazio-z.

In questo esempio, utilizziamo il testo in primo piano che sembra essere molto più vicino a noi rispetto ai cespugli sullo sfondo. Nonostante l'alto livello di dettaglio sullo sfondo, i nostri occhi identificano naturalmente le linee più lunghe e le forme più grandi del testo, interpretando il testo molto più facilmente rispetto al cattivo esempio. Nel cattivo esempio, le forme dei personaggi sembrano posizionare il testo all'incirca nella stessa posizione z delle foglie sullo sfondo.

Guarda la demo.

Altri esempi

http://danielladraper.com/http://www.lobagola.com/http://vivaco.com/demo/ventcamp/index-photo.html

Prossimamente

Bene, questo avvolge la nostra discussione sull'estetica. Nel prossimo articolo, tratteremo diversi modi di combinare queste tecniche con le interazioni al passaggio del mouse e l'animazione.

Web design
×