Accentsconagua

Tipps zum richtigen Mischen von Text mit Bildmaterial

Web-Design
Share

Das Muster der Verwendung von Text auf Hintergrundbildern ist seit Jahren beliebt. Text, der weit vor dem Webdesign entstand, kann ein emotionaleres und kontextuelles Erlebnis bieten. Bis zum heutigen Tag mussten Bilder viel kleiner sein, um eine wesentlich geringere Bandbreite zu ermöglichen. Da die Verbindungsgeschwindigkeit und die Bildschirmdichte schnell zunehmen, sind wir offen für die Verwendung viel größerer Bilder in unseren Designs.

Konstruktionsentscheidungen im Zusammenhang mit dieser Technik sind unglaublich wichtig und die Entwicklung von Best Practices zur Steuerung dieser Vorgehensweise ist für die Beibehaltung eines hochwertigen Designs unerlässlich. Man kann nicht einfach Text über ein Bild setzen und erwarten, dass es richtig aussieht.

In diesem Artikel werden fünf verschiedene Aspekte des Platzierens von Text über Bilder beschrieben, mit denen Sie Kopien und Bilder richtig mischen können.

Hinweis: Im gesamten Artikel gelten die gleichen Prinzipien bei der Auswahl von Video- und Textkombinationen.

1. Kontrast durch Farbe und Helligkeit

Die Verwendung von Bildern, die einen signifikanten Kontrast zum Text haben, ist zwingend erforderlich. Die Verwendung dunklerer Bilder mit hellerem Text oder das Verdunkeln von Bildern mit Filtern oder einem Überlagerungselement kann insbesondere dazu beitragen, dass Sie ausreichend Kontrast verwenden. 

Einige Tipps zum Erzielen eines richtigen Farb- und Helligkeitskontrasts: 

  • Wenn Sie die Buchstaben nicht sofort sehen können, ist der Kontrast deaktiviert.
  • Kontrast bedeutet nicht immer dunkel gegen hell; Komplementärfarben sorgen auch für natürlichen Kontrast.
  • Wenn das Bild komplex und vollständig scharf ist, ist die Verwendung einer Überlagerung oder Bearbeitung des Bildes wahrscheinlich die effektivste Option.

In diesem Beispiel verwenden wir WebKit-Filter, um den Kontrast und die Helligkeit eines Bildes zu ändern, die wir mit einem Extra platzieren und bearbeiten 

. Der Filter sieht ohne Präfix folgendermaßen aus: Filter: Helligkeit (40%) Kontrast (70%);

Schwierig zu lesen; Kein Fokus auf Text oder im BildViel einfacher zu lesen; erfordert CSS-Filter

Schauen Sie sich die Demo an.

Mehr Beispiele

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

2. Kontrast durch Größenanpassung und Positionierung

Farbe ist nicht die einzige Möglichkeit, den Kontrast eines Bildes in Bezug auf überlagerten Text zu verbessern. Die Auswahl der Textgröße und -position in Bezug auf die fokussierten Bildelemente ist wesentlich, da dies die Lesbarkeit des Textes selbst betrifft.

In diesem Beispiel haben wir ein Bild mit einem großen, relativ homogenen Himmelsbereich ausgewählt. Dies ist der perfekte Bereich zum Platzieren von Text. Im Gegensatz dazu wäre eine viel weniger lesbare Position des Textes direkt in der Bildmitte, wo die Skyline erscheint.

Schlechtes Beispiel; Schlechter Kontrast, schlechte Platzierung.Guter Kontrast, bessere Platzierung.

Schauen Sie sich die Demo an.

Weitere Beispiele

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

3. Lesbarkeit durch Tiefe

Wählen Sie ein Bild, das Schärfentiefe verwendet. Dies ermöglicht einen glatteren Hintergrund für Text, wodurch die Lesbarkeit erhöht wird. Platzieren Sie Ihren Text im unscharfen Bereich des Bildes, und stellen Sie sicher, dass die Textfarbe einen ausreichenden Kontrast zur Primärfarbe des unscharfen Bereichs aufweist.

Dies können Sie ganz einfach tun, indem Sie Text in Bereichen mit niedrigerem Fokus positionieren, wie in diesem Beispiel.

Schauen Sie sich die Demo an.

Weitere Beispiele

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

4. Bildauswahl

Text über Bildmaterial ist nur so effektiv wie das aus der Kombination abgeleitete Meeting. Wählen Sie beispielsweise keine generischen Bilder, wenn spezifischere Bilder angemessener kommunizieren. Berücksichtigen Sie bei der Auswahl von Bildern die emotionale Evokation und den wörtlichen Kontext des Bildes, insbesondere in Bezug auf den Ton der Nachricht, die die Kopie vermitteln soll.

Einige Hinweise: 

  • Wählen Sie Bilder aus, die einen vollständigen Satz zeigen. Der Benutzer sollte das Motiv des Bildes deutlich sehen und die im Bild vorgenommenen Aktionen verstehen, falls vorhanden. 
  • Wählen Sie keine Bilder, die einen schwachen Fokus haben.
  • Beachten Sie die Wichtigkeit von Klarheit im Bild. Wenn das Bild mehr oder weniger zum Erwecken eines Gefühls und weniger der Details ist, können starke Überlagerungen oder Filter angewendet werden, ohne die Wirksamkeit des Bildes zu beeinträchtigen.

Beispiele

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

5. 3-dimensionales Bewusstsein

Überlegen Sie, wo der Text in Bezug auf die Fokusebene der verschiedenen Elemente im Bild angezeigt wird. Scheint der Text im Bild zurück zu liegen oder tritt er in den Vordergrund? Fügt sich der Text ein oder behält er seine eigene eindeutige Position im Z-Raum? In welcher Beziehung steht der Text zu den fokussierten Elementen des Bildes??

Faustregel: Je kleiner der Text, desto weiter erscheint der Text im Z-Raum.

In diesem Beispiel verwenden wir Vordergrundtext, der uns viel näher zu sein scheint als die Büsche im Hintergrund. Trotz des hohen Detaillierungsgrades im Hintergrund identifizieren unsere Augen natürlich die längeren Linien und größeren Formen des Textes und interpretieren den Text viel leichter als das schlechte Beispiel. Im schlechten Beispiel scheinen die Formen der Zeichen den Text ungefähr an der gleichen Z-Position wie die Blätter im Hintergrund anzuordnen.

Schauen Sie sich die Demo an.

Mehr Beispiele

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

Demnächst

Nun, das schließt unsere Diskussion über Ästhetik ab. Im nächsten Artikel werden verschiedene Möglichkeiten beschrieben, wie diese Techniken mit Hover-Interaktionen und Animation kombiniert werden können.

Web-Design
×