点線の画像はWebデザインの新しいトレンドですか?


8

最近私が定期的にアクセスするWebサイトの一部が、Webデザインの新しくて奇妙なトレンド、「点線の画像」を採用していることに最近気づきました。それを何と呼ぶか​​わかりません。定期的に間隔を置いて配置されたドットのパターンがすべてのサムネイルの上に意図的に重ねられているように見えます。または、ドットではなく薄いグリッドパターンである場合もありますが、最終的な外観は似ています。多少ディザ画像のように見えます。

個人的には効果がひどいと思い、最初はブラウザの画像のレンダリングに問題があると思っていましたが、3つの異なるブラウザを試してもパターンを確認できます。意図したように見えます。

実際、それを行っていたWebサイトの1つは、通常の写真に戻りました。それは新聞のウェブサイトであり、彼らの写真がすべて台無しにされ、数ヶ月後に決定を覆した理由を尋ねるたくさんの電話を受けたと私は思う。

誰かこれを以前に聞いたり見たりしたことがありますか?

リンクの例:http : //www.linkedin.com/today/se/editorspicks


1
いくつかの例はどうですか?
Dan Hanly、2012

すみません、投稿するつもりでした。質問を更新しました。
md1337 2012

3
いいえ、それは新しいトレンドではありません。
DA01

1
スマートフォンのブラウザなどで画像を拡大縮小すると、モアレ効果が散漫になる可能性があることに注意してください。
e100 2012

1
表示されない...
アレックス

回答:


13

過去に、この効果が画像の特徴を強調するために使用されるのを見てきました。あなたが投稿したリンクは不必要にそれをしているようです。

http://demo.grandpixels.com/?theme=linguiniをご覧ください

グリッド/ドットスタイルのオーバーレイが暗くなり、画像がわずかにぼやけるため、メインスライダー画像のテキストは実際にポップします。これにより、白いテキストがさらに白く鮮明に見えます。

私のリンク上の画像は見栄えが良く、オーバーレイ画像はかなり明確な目的を果たしており、それはテキストのメッセージを強調することです。それはかなりうまくいきます。

ここに画像の説明を入力してください

グリッドオーバーレイがない場合、白いテキストが背後のチーズに溶け込みます。
背後にある明るい画像でも暗い画像でも機能し、テキストが背景画像の上に表示されたときに影響を失わないスタイルが必要でした。

あなたのリンクされた例はそれがどのように使われるべきでないかを示します。
多くの場合、グラフィックデザインは芸術以上の科学であり、このような効果は「見栄えが良い」ので使用しないでください。使用目的が明確に定義されているため使用する必要があります。ページのコンテキストで正当化されます。


グリッドオーバーレイがテキストを画像から目立たせるのに役立つヒント。
2008

あなたの例のように限られたケースでの使用を見ることができます。そうでなければ、それは単なる仕掛けです。最近、ますます多くのWebサイトでこれを目にするようになり、ある種の傾向が高まっていると思うので、私は本当に気になっただけです。うまくいけば、それは同じくらい早く死ぬでしょう。フレンドリーな補足として、技術的な実装が最適ではないことがわかりました。2x2の背景を繰り返し使用しているため、レンダリングにブラウザーに大きな負担がかかるため、非常に遅くなります。オーバーレイサイズをかなり大きくすると、ページスクロールの応答が大幅に改善されます。
md1337 2012

乾杯。しかし、それは私のものではありません。ウェブで見つけただけです;)
Dan Hanly

5

パターンオーバーレイは便利な設計ツールであり、いくつかの目的に役立ちます。前述のように、これはページ上のグラフィック要素を視覚的に分離するのに役立ちますが、HD(1920 x 1080)ディスプレイを満たすためにオーバーサンプリングされている低解像度画像の欠陥/ jpeg圧縮アーティファクトを隠すのにも役立ちます。

画像のコレクションの外観を統一するために、パターンオーバーレイを使用することがあります。非常にうまく撮影された6つの画像とそれほど良くない3つの画像がある場合、それらにパターンオーバーレイを配置すると、画像が均一になり、良い画像と悪い画像の移行が劇的になります。

元の写真家に改善だと納得させるのは難しいと思いますが、パターンオーバーレイはかなりうまくいくと思う例です。:) http://goo.gl/d0OYOO


2

その効果は、実際にはWeb最適化の初期の段階から生じます。

点線の効果は、圧縮されすぎてアーティファクトが発生し始めた画像に適用されます。「ドットグリッド」は、これらのアーティファクトを隠し、画像の圧縮率を下げます。

その後、それは通常の効果として広がり、ダニエルが言うように、イメージを作成したり壊したりすることができます。(他のほとんどのエフェクトと同様に)正しく使用すると、素晴らしい結果が得られます。


1

あなたの例の場合、それは画像をわずかに不明瞭にするために行われたと思います。

また、これは以前のスタイルへの逆戻りだと思います。


1

その理由は、画像の低解像度をマスクするためです。低解像度の画像を使用すると、ウェブサイトの読み込み時間が改善され、Googleが幸せになります。したがって、SEOの観点からは、それがトレンドです。


0

それがトレンドかどうかわかりません。しかし、そうである場合、そして私の解釈が付随する効果(Linkedin Editor's Pickの例を参照)と一致する場合、それ綿毛だけでなく、重みを保持するだけの興味深いコンセプトだと思います。

おそらく、これは少しストレッチかもしれませんが、私にとって、彼らが達成しようとしていることは、この画像が他の場所にあるコンテンツ/記事(つまり、外部の素材;現在のサイト内ではない)につながることを示すことです)。まるで小さなウィンドウから別の場所に「覗き込んで」いるかのように-奥行き(別のレイヤー)を追加します。これは、ユーザビリティの観点から、特定のコンテキストで実際に可能性を証明するかもしれません。

あなたが挙げた例の実行がよくわからないことは認めます。画像の半分では効果が最適に機能しません(主な問題は、この概念が写真ではない画像ではうまく機能しないことです)。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.