Bilder im Webdesign

Dass lange Texte kaum gelesen (und erst recht nicht verstanden) werden, hatte ich bereits geschrieben. Abgesehen davon, dass Sie keinen Mindestumfang erfüllen müssen, also keinen Grund haben, Inhalte auszudehnen – was bleibt Ihnen dann?

Bildinformationen. Natürlich! Bilder vermitteln Emotionen, sie geben Informationen oft verständlicher wieder (“Ein Bild sagt mehr als tausend Worte.”) und eine bebilderte Website macht mehr Freude beim Betrachten als eine Textwüste.

Wenn Sie sich gezwungen sehen, trotz der geringen Lesebereitschaft umfangreichere Texte zu veröffentlichen, schaffen Sie durch Bilder Auflockerung und Anreize für den Leser, den Text weiter durchzugehen.

Aufgrund der zunehmenden Informationen auf immer mehr Kanälen ist unsere Bereitschaft, sich auf einen lesbaren Text einzulassen ohne durch Bilder wenigstens ein “Gefühl” für den Inhalt vermittelt zu bekommen, immer mehr gesunken.

Im Printsektor wird dieses Phänomen schon lange berücksichtigt. Zeitungen verstärken nahezu jeden längeren Artikel durch Fotografien und Grafiken. Selbst die FAZ brach irgendwann ihre eiserne Regel, kein Foto auf der Titelseite einzusetzen.

Kurze Texte werden eher geteilt

Bei der Nutzung sozialer Netzwerke zeigte sich bereits früh, dass Bildinformationen sehr viel häufiger beachtet wurden. Kurze Texte werden sogar eher geteilt, wenn sie grafisch dargestellt werden (also als fette, gestaltete Schrift auf einem Foto – dazu reicht selbst ein einfarbiger Hintergrund aus).

Damit steht außer Frage, dass Bilder kaum verzichtbar sind, sondern im Gegenteil sogar hilfreich, um die Mitteilung einfach und einprägsam zu gestalten. Wie immer gibt es die Ausnahme von der Regel: Der weitgehende oder gar vollständige Verzicht auf Bilder kann, je nach Thema, wieder eine wohltuende Abwechslung zur Bilderflut anderer Seiten sein. Das aber erfordert ein sehr gutes, ausgewogenes Design, denn nun müssen Schrift und Farbe allein den optischen Eindruck bestimmen. Großzügige Freiflächen und erstklassig getextete Inhalte, bestenfalls wenige schwarzweiße oder einfarbige Fotografien bewirken dann Wunder. Diese Lösung kann sinnvoll sein, wenn es einfach kein brauchbares Bildmaterial gibt oder auch nur die Spannung verstärkt werden soll.

Bilder sind keine längst keine Mangelware mehr. Selbst in der schieren Masse der täglichen Handyfotografie wächst die Anzahl der interessantenund hochwertigen Fotos. Instagram, Pinterest, aber auch Facebook spucken ohne Unterlass neue Abbilder unserer Welt aus.

Ansprüche an die Bildqualität steigen

Damit verändern sich die Sehgewohnheiten und die Ansprüche wiederum steigen. Vor einigen Jahren wäre es noch ein ungewöhnlicher Aufwand gewesen, die Verpackungsmaschine auf der Seite „Unsere Produktion“ durch Beleuchtung und Nachbearbeitung in Szene zu setzen. Heute dagegen ist ein schlichtes Maschinenfoto schon eine Nachlässigkeit, die das gesamte Unternehmen hinterwäldlerisch erscheinen lässt.

Auch wenn sie so leicht verfügbar scheinen: Gute Fotos bleiben eine große Hürde bei der Neugestaltung einer Website. Das hat verschiedene Gründe:

  • die Motive geben ohne kreativen Einsatz nichts her
  • die Bilder sind alle sehr unterschiedlich in Stil, Farbgebung, Blickwinkel, Hintergrund…
  • die Qualität der Fotos ist nicht ausreichend für hohe Auflösungen

Der Einsatz eines professionellen Fotografen ist meist eine gute Investition. Auch hier lohnt es, verschiedene Angebote einzuholen und sich Referenzen zeigen zu lassen, vor allem von vergleichbaren Webprojekten. Der hervorragende Fotograf, der Ihre letzte Hochzeit so wunderbar fotografiert hat, kann mit Ihren technischen Produkten völlig überfordert sein. Gerade wenn Sie regelmäßig neue Produkte auf den Markt bringen oder Ihr Team schnell wächst und immer neue Porträts hinzukommen, sollten Sie mit jemandem zusammenarbeiten, der auch dauerhaft zur Verfügung steht und sich preislich darauf einrichten kann.

Sieht man den Aufwand für die Nachbearbeitung, Beleuchtungund Assistenz, wird wohl jeder Verständnis für die Tagessätze eines Fotografen haben. Dennoch kann dieser Faktor gerade für kleinere Unternehmen zu kostspielig sein – stehen Aufwand und Ertrag nicht im Verhältnis, lohnt der Einsatz eben nicht.

Bleiben zwei Alternativen: In Ihrem Unternehmen gibt es womöglich einen Hobbyfotografen, der sich gerne außerhalb seiner üblichen Aufgabe betätigt. Klären Sie hier aber in jedem Fall auch die Verwertungsrechte an den entstandenen Bildern. Das kann sich sonst im Streitfall rächen: Nur weil Ihr neuer Fotograf sowieso einen Arbeitsvertrag hat, bleibt er dennoch Urheber seiner Werke. Der zweite Weg führt in die immer endloser wachsenden Archive der Fotoanbieter im Netz. Noch vor einigen Jahren wurden Stockfotos nach Umfang der Nutzung abgerechnet und damit ebenfalls recht kostspielig. Heute bekommen Sie Bilder zu jedem Anlass bei Fotolia und anderen Anbietern für ein paar Euro zur nahezu freien Verwendung.

Bildquellen im Internet

Selbst Flickr und andere Netzwerke zum Austausch privater Fotografien können eine Quelle sein, wenn die Schöpfer dort die kommerzielle Nutzung ihrer Werke frei gegeben haben.Hhier sollten Sie aber besonders vorsichtig sein und die Nutzung sicher klären.

So hochwertig diese Aufnahmen auch sein mögen: Bei guten Motiven können Sie sicher sein, dass diese bereits an anderen Stellen im Netz auf-tauchen. Es wäre auch nicht das erste Mal, das zwei konkurrierende Unternehmen sich – trotz hunderter Alternativen – für das gleiche (eben perfekt passende) Motiv entschieden haben.

Zudem fehlt diesen Bildern meist jede individuelle Aussage. Sie haben keinen verbindenden Stil und werden so zu nichtssagendem Füllwerk.

Das Foto der strahlend lächelnden Telefonistin auf Ihrer “Kontakt”-Seite wird Ihr Unternehmen eher anonymer wirken lassen, wenn niemand glaubt, dass diese freundliche Frau Ihre Mitarbeiterin ist. Und in zwanzig Jahren Internetgeschichte haben die Nutzer so etwas gelernt.

Gerade bei den Fertiglayouts, wie sie speziell bei Baukastensystemen, vor allem aber auch in Form der zahllosen Themes des meistverbreiteten WordPress-CMS angeboten werden, dominieren starke Bilder einen sonst doch meist gleichförmigen Content.

Dabei vergessen deren Nutzer meist, dass ihr Thema solche Bilder gar nicht hergibt oder aber sie sind nicht bereit, Fotos in dieser Qualität erstellen zu lassen.

Ebenso wie die inhaltliche Struktur und der inhaltliche Rahmen muss der Bildbestand zu Beginn der Designphase festgelegt sein.

Das heißt nicht, dass jedes Motiv stehen muss. Klar sollte aber sein,

  • wie viele Bilder verwendet werden,
  • welche “Bildsprache” genutzt werden soll,
  • ob die Bilder eine konkrete, darstellende Funktion haben (Maschinen, Produkte, Fuhrpark, Team…) oder eher emotional/symbolisch wirken sollen.

Bilder im Webdesign nicht wahllos einsetzen

Umgekehrt muss der Designer frühzeitig seine Rückmeldung über das benötigte Material abgeben:

  • Welcher Ausschnitt wird in welcher Qualität zum Beispiel für ein ganzseitiges Eröffnungsbild benötigt?
  • Sind verschiedene Ausschnitte eines Bildes erforderlich?Von der Möglichkeit, je nach Betrachtung unterschiedliche Bilder zu verwenden, wird immer noch zu selten Gebrauch gemacht.

Ein Rasenmäh-Roboter wird sich überzeugender verkaufen, wenn er in einer eindrucksvollen Gartenlandschaft steht: vor ihm die noch nicht gemähte Wiese, dahinter das großartige Ergebnis. Wenn Sie dieses Bild im Büro auf ihrem riesigen Mac-Monitor betrachten, werden Sie kaum noch widerstehen können…

Schon auf dem iPad ist dieser Eindruck nicht mehr ganz so stark, aber der Garten ist schon beeindruckend…

Auf dem iPhone sehen Sie vor allem viel Grün, buntes Drumherum und die Ameise in der Mitte muss dieser Roboter sein…

Ein komplexes Motiv, in dem das, was eigentlich gezeigt werden soll, vor einem stimmungsvollen Hintergrund zur Geltung kommt, wird auf dem Handy- Bildschirm kaum noch zu erkennen sein. Entsprechend müssen für die gängigen Ausgabeformate zwei, besser drei unterschiedliche Ausschnitte vorbereitet werden (oder sogar ganz andere Motive, denn nicht alles ergibt im Ausschnitt noch den gleichen Sinn). .

Sobald die Bilder konkret ausgewählt und den Seiten zugeordnet sind, sollten auch die zugehörigen Texte festgelegt werden. Diese Aufgabe wird gerne auf später verschoben und dann natürlich vergessen.

Dabei ist sie für einen professionellen, runden Auftritt unverzichtbar und jetzt ist der richtige Moment dafür:

Bildbeschreibung: Unverzichtbare Textinformation

Bildunterschriften – also das, was man wirklich direkt am Foto lesen kann – sollten eine zusätzliche Information geben und nicht nur eine launige Beschreibung des Gesehenen sein. Gerade hier finden sich aber die unangenehmsten Stilblüten. Bildunterschriften sind letztlich verzichtbar. Für die Suchmaschinen sind Titel und Alternativangaben wichtiger.

Der Bildtitel ist das, was Sie sehen, wenn Sie mit dem Mauszeiger über das Bild fahren. Er bringt sie in eine Zwickmühle: Einerseits muss hier etwas stehen (relevant für die Suchmaschinen), es sollte ähnlich sinnvoll formuliert sein wie die Bildunterschrift, da der Besucher es sehen kann – in der Regel aber nicht sehen wird, wodurch dieser Teil auch nicht als Zusatzinformation brauchbar ist.

Ganz ungesehen bleibt für die meisten Nutzer der Alternativtext. Deshalb wird er – wenn überhaupt – oft identisch mit dem Titel gesetzt. Das allerdings ist ein großer Fehler, denn die Alternativ-Info wird von den Suchmaschinen ausgewertet (und diese reagieren zerknirscht, wenn der “alt”-Teil des Bildes fehlt oder leer ist). Der mit alt=”Beschreibungstext” neben der Bildquelle angegebene Hinweis hatte in früheren Zeiten die Aufgabe, Informationen über fehlende Bilder anzuzeigen – dann nämlich, wenn man aufgrund sehr langsamer Internetverbindungen die Funktion “Bilder anzeigen” im Browser deaktiviert hatte.

Mit der Zeit wurden die Verbindungen besser, aber inzwischen hatten sich auch immer mehr Möglichkeiten entwickelt, Menschen mit Behinderungen das Netz zugänglich zu machen. Die alt-Information spielt seitdem eine entscheidende Rolle für die Barrierefreiheit der Seiten.

Stellen Sie sich also vor, was einem sehbehinderten Kunden vorgelesen (oder dem Eifeltalbewohner immer noch mit “Bilder nicht anzeigen” angezeigt) wird und versuchen Sie, das Gesehene möglichst genau zu beschreiben – dann erfüllen Sie die Anforderung perfekt. Wenn die Übersetzung in Sprache oder Blindenschrift hier nur unkonkrete Beschreibungen, die eigentlich in den Titel oder die Bildunterschrift gehört hätten, ausspuckt oder jedesmal “leer”sagt, ist das höchst frustrierend.

Selbst wenn Ihnen die sehbehinderten Nutzer gleichgültig sind oder Sie überzeugt sind, keine blinden Menschen oder Eifeltalbewohner in ihrem Kundenkreis zu haben: Sie sollten die Alternativtexte sachlich beschreibend angeben – denn ein “Mähroboter auf einer abschüssigen Rasenfläche” ist eine wertvolle Information für Google und andere Verwerter.

Infografiken: Starke Signale auf der Webseite

Wo keine Fotos verfügbar sind oder deren Aussagekraft zu schwach ist, bietet sich die Verwendung von Grafiken an. Noch mehr als bei Fotografien ist hier ein einheitlicher Stil zwingend.

Unterschiedliche Grafiken – schwarzweiß, knallbunt, pastellig, grafisch exakt, Sketch-Style, Icons – dürfen nicht vermischt genutzt werden, da sie sonst zusammenhanglos und lieblos ausgewählt wirken.

Dagegen schaffen einheitliche, passende Grafiken eine hervorragende Verbindung zwischen Texten, bieten Orientierung und schaffen Aufmerksamkeit auch für trockene Themen.

Eine höhere Form sind Infografiken, die Zusammenhänge kompakt darstellen und durch passende Motivwahl einen zusätzlichen Unterhaltungs- und auch Nutzwert liefern.

Gerade für die Verbreitung in sozialen Medien sind Infografiken sehr entscheidend, da hier reine Textinformationen kaum noch wahrgenommen werden. Allerdings sind dadurch auch die Anforderungen gestiegen.

Hier lohnt sich die Investition in Grafikdienstleistung. Kann Ihr Webdesigner diese Aufgabe nicht leisten (Mediengestalter, die erstklassige Weblayouts entwickeln, müssen nicht gleichzeitig gute Künstler sein) sollten Sie diese Aufgabe extern vergeben. Auch sollten Sie hierbei wieder eine langfristige Zusammenarbeit ins Auge fassen – noch mehr als bei den Fotografien ist eine Kontinuität im Stil hier zwingend erforderlich.

Relaunch! Buch mit Astronaut Cartoon

Leseprobe aus meinem im September 2020 erschienen Buch

Relaunch!

Mit neuen Webseiten in die Zukunft

Stefan Schmidt, Simone Sarodnick, Christian Behrends

Das Handbuch, ca. 192 Seiten
September 2020

ISBN 9783751954310