Sind gepunktete Bilder ein neuer Trend im Webdesign?


8

Ich habe in letzter Zeit bemerkt, dass einige der Websites, die ich regelmäßig besuche, einen neuen und bizarren Trend im Webdesign annehmen: "die gepunkteten Bilder". Ich bin mir nicht sicher, wie ich es nennen soll. Es sieht so aus, als ob ein Muster aus regelmäßig verteilten Punkten absichtlich über alle Miniaturansichten gelegt wurde, oder manchmal ist es ein helles Gittermuster anstelle von Punkten, aber das Endbild ist ähnlich. Es sieht aus wie ein zitterndes Bild.

Ich persönlich finde den Effekt schrecklich und dachte zuerst, mein Browser-Bild-Rendering sei fehlerhaft, aber ich habe 3 verschiedene Browser ausprobiert und kann das Muster immer noch sehen. Sieht so aus, als wäre es beabsichtigt.

Tatsächlich ging eine der Websites, die dies früher taten, auf normale Bilder zurück. Es war eine Zeitungswebsite, und ich vermute, sie haben eine Reihe von Anrufen erhalten, in denen sie gefragt wurden, warum ihre Bilder alle durcheinander waren und die Entscheidung nach ein paar Monaten rückgängig gemacht haben.

Hat jemand das schon einmal gehört oder gesehen?

Beispiellink: http://www.linkedin.com/today/se/editorspicks


1
Wie wäre es mit einigen Beispielen?
Dan Hanly

Entschuldigung, ich wollte einen posten, ich habe gerade meine Frage aktualisiert.
Md1337

3
Nein, das ist kein neuer Trend.
DA01

1
Es ist erwähnenswert, dass es beim Skalieren des Bildes störende Moire-Effekte verursachen kann, z. B. in einem Smartphone-Browser.
e100

1
Ich sehe es nicht ...
Alex

Antworten:


13

In der Vergangenheit habe ich gesehen, dass dieser Effekt verwendet wurde, um eine Funktion des Bildes zu verbessern. Der Link, den Sie gepostet haben, scheint dies unnötig zu tun.

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

Der Text auf den Hauptschiebereglern wird wirklich eingeblendet, da die Überlagerung im Raster- / Punktstil das Bild dunkler und unscharfer macht, sodass der weiße Text noch weißer und klarer erscheint.

Die Bilder auf meinem Link sehen großartig aus, und das Overlay-Bild dient einem ziemlich klaren Zweck, um die Botschaft des Textes zu verbessern. etwas, das es ganz gut macht.

Geben Sie hier die Bildbeschreibung ein

Ohne die Gitterüberlagerung würde der weiße Text in den Käse dahinter passen.
Sie brauchten einen Stil, der für jedes Bild dahinter, hell oder dunkel, funktioniert und damit der Text seine Wirkung nicht verliert, wenn er über einem Hintergrundbild angezeigt wird.

Ihr Linkedin-Beispiel zeigt, wie es nicht verwendet werden sollte.
Meistens ist Grafikdesign mehr eine Wissenschaft als eine Kunst, und Effekte wie diese sollten nicht verwendet werden, weil "sie gut aussehen". Sie sollten verwendet werden, weil ein klarer Zweck für ihre Verwendung und ihre Verwendung definiert wurde ist im Kontext der Seite gerechtfertigt.


Toller Tipp, wie die Rasterüberlagerung dazu beiträgt, dass sich der Text vom Bild abhebt.
Schock

Ich kann die Verwendung in begrenzten Fällen wie in Ihrem Beispiel sehen. Ansonsten ist es nur eine Spielerei. Ich wurde gerade wirklich neugierig, als ich dies in letzter Zeit auf immer mehr Websites sah und ich denke, dass sich eine Art Trend aufbaut. Hoffentlich stirbt es genauso schnell ab. Als freundliche Randnotiz finde ich Ihre technische Implementierung nicht optimal, sie ist ziemlich langsam, da Sie einen wiederholten 2x2-Hintergrund verwenden und das Rendern des Browsers stark belastet. Ich würde die Überlagerungsgröße erheblich erhöhen, und Sie werden eine enorme Verbesserung der Bildlaufantwort feststellen.
Md1337

Prost. Es ist jedoch nicht meins, ich habe es gerade im Internet gefunden;)
Dan Hanly

5

Die Musterüberlagerung ist ein nützliches Entwurfswerkzeug und kann einigen Zwecken dienen. Wie bereits erwähnt, kann es helfen, grafische Elemente auf der Seite visuell zu trennen, aber auch Unvollkommenheiten / JPEG-Komprimierungsartefakte in Bildern mit niedrigerer Auflösung zu verbergen, die überabgetastet werden, um eine HD-Anzeige (1920 x 1080) zu füllen.

Ich werde manchmal eine Musterüberlagerung verwenden, um das Erscheinungsbild einer Sammlung von Bildern zu vereinheitlichen. Wenn ich 6 Bilder habe, die wirklich gut aufgenommen wurden, und 3 Bilder, die nicht so gut sind, hilft das Hinzufügen einer Musterüberlagerung, sie auszugleichen und den Übergang zwischen guten und schlechten Bildern weniger dramatisch zu machen.

Hier ist ein Beispiel, in dem die Musterüberlagerung meiner Meinung nach ziemlich gut funktioniert, obwohl ich wette, dass es Ihnen schwer fallen wird, den ursprünglichen Fotografen davon zu überzeugen, dass es sich um eine Verbesserung handelt. :) http://goo.gl/d0OYOO


2

Der Effekt stammt tatsächlich aus den früheren Tagen der Weboptimierung.

Der gepunktete Effekt würde auf Bilder angewendet, die so stark komprimiert waren, dass sie Artefakte begannen. Das "gepunktete Gitter" würde diese Artefakte verbergen und das Bild weniger komprimiert erscheinen lassen.

Es breitete sich dann als normaler Effekt aus und wie Daniel sagt, kann es ein Bild erzeugen oder zerstören. Wenn es richtig verwendet wird (wie bei den meisten anderen Effekten), können Sie großartige Ergebnisse erzielen.


1

Ich denke, in Ihrem Beispiel wurde es getan, um die Bilder leicht zu verdecken.

Ich denke auch, dass es ein Rückfall zu früheren Stilen ist.


1

Der Grund ist, die niedrige Auflösung des Bildes zu maskieren. Die Verwendung eines Bildes mit niedriger Auflösung kann die Ladezeiten der Website verbessern und Google glücklich machen. Aus SEO-Sicht ist es also ein Trend.


0

Ich kann nicht sagen, ob es ein Trend ist oder nicht. Aber wenn es so ist - und meine Interpretation mit dem identifizierten Effekt übereinstimmt (unter Bezugnahme auf das Auswahlbeispiel Ihres Linkedin-Editors), denke ich, dass es ein interessantes Konzept ist, das möglicherweise nur etwas Gewicht hat, nicht nur Flusen.

Möglicherweise könnte dies ein bisschen langwierig sein, aber für mich sieht es so aus, als würden sie versuchen zu signalisieren, dass dieses Bild zu Inhalten / Artikeln führt, die sich an anderer Stelle befinden (dh außerhalb des Materials, nicht innerhalb der aktuellen Site) ). Fast so, als würden Sie durch ein kleines Fenster an einen anderen Ort „spähen“ - Tiefe hinzufügen (eine weitere Ebene), die sich aus Sicht der Benutzerfreundlichkeit in bestimmten Kontexten tatsächlich als potenziell erweisen könnte.

Ich gebe zu, ich bin mir der Ausführung in dem Beispiel, das Sie gegeben haben, nicht sicher. Der Effekt funktioniert bei der Hälfte der Bilder nicht optimal (das Hauptproblem besteht darin, dass dieses Konzept bei Bildern, die keine Fotos sind, nicht gleich gut funktioniert).

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.