Die Königsdisziplin

Variable Bild-Text-Kombi

Wenn Bild und Text aufeinandertreffen, kann extrem viel passieren.

Besonders, wenn man (nach dem Launch) nur mit dem CMS arbeitet und kein «Styling» pro Inhaltsobjekt vornimmt.

GIF-Animation bei der von einem Dunklen Bild mit kurzem hellem Text auf ein helles Bild mit hellem langen Text gewechselt wird.
Webdesign Essentials

Bild-Text-Kombo Probleme

Priorität

Wir müssen für die Bild-Text-Kombination aus dem Kontext des Inhaltes entscheiden, ob im Zweifelsfalle der Text oder das Bild mehr Priorität hat. Dies muss als allgemeine Regel für dieses Element (z. B. Blog-Teaser-Box) gelten und nicht pro Inhalts-Element (z. B. spezifisches Bild eines Blogeintrages) jeweils neu entschieden werden.

Textlänge

Text-Boxen in Bildern sollten flexible die Wortlänge adaptieren. Gleichzeitig muss eine max. Limite definiert werden. Besonders auf Mobile-Devices ist die Textlänge eine Platzfrage im Bild. Oft wird dann das Bild und der Text separiert.

Kontrast

Die Textfarbe ist in der Regel gegeben. Bilder können aber jegliche Tonalität aufweisen. Daher muss sichergestellt werden, dass die Lesbarkeit des Textes gegeben ist.

Entweder wird ein unauffälliger Schlagschatten (im Kontrast zur Textfarbe) hinter den Text gelegt oder das ganze Bild kriegt einen Farbverlauf (meist von Schwarz/Weiss in die Transparenz).

Platzierung

Wenn wir mit Bilder mit variablen Seitenverhältnissen arbeiten, muss sichergestellt werden, dass der Text und das Bild sich nicht zu stark in die Quere kommen. Es löst die Frage nach der Priorität aus oder die Textplatzierung definiert für alle zukünftigen Bildern in welchem Bereich das Bild nicht-essentielle Bildinformation hat und den Text nicht stört.

Focal-Point & Responsiveness

Der Focal-Point ist der Punkt im Bild wo die Aufmerksamkeit und die Botschaft des Bildes am stärksten konzentriert wird. Besonders auf Mobile-Devices buhlen Bilder und Texte um ihren Platz. Der Entscheid, welcher Aspekt entscheidender ist, muss von der Informations-Architektur gefällt und vom Design gelöst werden.

Vertiefe dich ins ganze Kapitel

Variabler Inhalt