Le immagini tratteggiate sono una nuova tendenza nel Web Design?


8

Ho notato di recente che alcuni dei siti Web che visito regolarmente stanno adottando una nuova e bizzarra tendenza nel Web Design: "le immagini tratteggiate". Non sono sicuro di come chiamarlo. Sembra che uno schema di punti regolarmente distanziati sia stato deliberatamente stratificato sopra tutte le anteprime, oppure a volte è un motivo a griglia leggera anziché punti, ma l'aspetto finale è simile. Sembra un po 'come una foto retinata.

Personalmente trovo l'effetto terribile e all'inizio ho pensato che il rendering delle immagini del mio browser fosse in errore, ma ho provato 3 browser diversi e riesco ancora a vedere lo schema. Sembra che fosse previsto.

In realtà, uno dei siti Web che era solito fare è tornato alle foto normali. Era un sito Web di giornali e sospetto che abbiano ricevuto un sacco di telefonate che chiedevano perché le loro foto erano tutte incasinate e hanno invertito la decisione dopo pochi mesi.

Qualcuno l'ha sentito o visto prima?

Link di esempio: http://www.linkedin.com/today/se/editorspicks


1
che ne dici di alcuni esempi?
Dan Hanly,

Scusate volevo postarne uno, ho appena aggiornato la mia domanda.
md1337,

3
No, non è una nuova tendenza.
DA01,

1
Vale la pena notare che può causare effetti di moiré di distrazione quando l'immagine viene ridimensionata, ad esempio su un browser per smartphone.
e100,

1
Non lo vedo ...
Alex,

Risposte:


13

In passato, ho visto questo effetto usato per migliorare una caratteristica dell'immagine. Il link che hai pubblicato sembra farlo inutilmente.

Vedi http://demo.grandpixels.com/?theme=linguini

Il testo sulle immagini dei cursori principali si apre davvero perché la sovrapposizione in stile griglia / punto scurisce e sfoca leggermente l'immagine, rendendo il testo bianco ancora più bianco e chiaro.

Le immagini sul mio link sembrano grandi, e l'immagine di sovrapposizione ha uno scopo piuttosto chiaro, e questo è quello di migliorare il messaggio del testo; qualcosa che fa abbastanza bene.

inserisci qui la descrizione dell'immagine

Senza la sovrapposizione della griglia, il testo bianco si fonderebbe con il formaggio dietro.
Avevano bisogno di uno stile che funzionasse con qualsiasi immagine dietro, chiara o scura, e che il testo non perdesse il suo impatto quando visualizzato su qualsiasi immagine di sfondo.

Il tuo esempio di linkedin mostra come non dovrebbe essere usato.
Il più delle volte, il Graphic Design è una scienza più che un'arte, e effetti come questo non dovrebbero essere usati perché "sembrano buoni", dovrebbero essere usati perché è stato definito uno scopo chiaro per il suo uso e il suo uso è giustificato nel contesto della pagina.


Ottimo consiglio su come la griglia sovrapposta aiuta il testo a distinguersi dall'immagine.
jhocking

Posso vedere l'uso in casi limitati come nel tuo esempio. Altrimenti è solo un trucco. Sono diventato davvero curioso quando ho iniziato a vederlo su sempre più siti web ultimamente e penso che ci sia un qualche tipo di tendenza in aumento. Spero che muoia altrettanto rapidamente. Come nota a margine, trovo la tua implementazione tecnica non ottimale, è piuttosto lenta perché usi uno sfondo 2x2 ripetuto e mette a dura prova il browser per il rendering. Aumenterei considerevolmente le dimensioni dell'overlay e noterete un enorme miglioramento nella risposta allo scorrimento della pagina.
md1337,

Saluti. Tuttavia, non è mio, l'ho appena trovato sul web;)
Dan Hanly,

5

La sovrapposizione di motivi è un utile strumento di progettazione e può essere utile per alcuni scopi. Come accennato in precedenza, può aiutare a separare visivamente gli elementi grafici sulla pagina, ma aiuta anche a nascondere imperfezioni / artefatti di compressione jpeg in immagini a bassa risoluzione che vengono sovracampionate per riempire un display HD (1920 x 1080).

A volte userò una sovrapposizione di motivi per unificare l'aspetto di una raccolta di immagini. Se ho 6 immagini che vengono scattate davvero bene e 3 immagini che non sono così buone, mettere una sovrapposizione di motivi su di esse aiuta anche a eliminarle e rende la transizione tra le immagini buone e cattive meno drammatica.

Ecco un esempio in cui penso che il pattern overlay funzioni piuttosto bene, anche se scommetto che avrai difficoltà a convincere il fotografo originale che è un miglioramento. :) http://goo.gl/d0OYOO


2

L'effetto in realtà proviene dai giorni precedenti dell'ottimizzazione del web.

L'effetto tratteggiato verrebbe applicato alle immagini che sono state compresse così tanto che hanno iniziato l'artefatto. La "griglia punteggiata" nasconderebbe questi artefatti e renderebbe l'immagine meno compressa.

Quindi si diffonde come un effetto normale e, come dice Daniel, può creare o distruggere un'immagine. Se usato correttamente (come con la maggior parte degli altri effetti) puoi ottenere grandi risultati.


1

Penso che nel tuo esempio, sia stato fatto per oscurare leggermente le immagini.

Penso anche che sia un ritorno agli stili precedenti.


1

Il motivo è mascherare la bassa risoluzione dell'immagine. L'uso di un'immagine a bassa risoluzione può migliorare i tempi di caricamento del sito Web e rendere felice Google. Quindi dal punto di vista SEO è una tendenza.


0

Non so dire se è una tendenza o no. Ma se lo è - e la mia interpretazione corrisponde all'effetto identificato (facendo riferimento all'esempio Pick del tuo editor di Linkedin), penso che sia un concetto interessante che potrebbe contenere solo un po 'di peso, non solo lanugine.

Molto probabilmente, questo potrebbe essere un po 'allungato, ma a me sembra che ciò che potrebbero cercare di ottenere è segnalare che questa immagine porta a contenuti / articoli che risiedono altrove (cioè materiale esterno; non all'interno del sito corrente ). Quasi come se si stesse "sbirciando" attraverso una piccola finestra, in un altro posto - aggiungendo profondità (un altro livello) che, da un punto di vista dell'usabilità, potrebbe effettivamente rivelarsi potenziale in determinati contesti.

Devo ammettere che non sono sicuro dell'esecuzione nell'esempio che hai dato; l'effetto non funziona in modo ottimale su metà delle immagini (il problema principale è che questo concetto non funziona altrettanto bene sulle immagini che non sono foto).

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.