Rheinwerk Computing < openbook >

 
Inhaltsverzeichnis
Vorwort
1 Prinzipien des modernen Webdesigns
2 Projektmanagement
3 Konzeption und Strategie
4 Responsive Webdesign
5 Informationsarchitektur
6 Gestaltungsgrundlagen
7 Screendesign
8 Layout und Raster
9 Farbe im Webdesign
10 Typografie
11 Bilder und Grafiken
12 Navigations- und Interaktionsdesign
13 Webdesign-Stile und -Trends
14 Animationen
15 Website-Typen
16 Tipps, Tricks und Tools
Stichwortverzeichnis

Download:
- Beispieldateien, ca. 3.64 MB

Buch bestellen
Ihre Meinung?

Spacer
<< zurück
Webdesign von Martin Hahn
Das Handbuch zur Webgestaltung
Buch: Webdesign

Webdesign
Pfeil 11 Bilder und Grafiken
Pfeil 11.1 Einführung: Die Macht der Bilder
Pfeil 11.1.1 Eigenschaften von Bildern
Pfeil 11.1.2 Konsequenzen für die Auswahl von Bildern
Pfeil 11.1.3 Bilder im Einsatz
Pfeil 11.2 Bilder im Web
Pfeil 11.2.1 Bilder als Layoutelemente
Pfeil 11.2.2 Bilder als Orientierungselemente
Pfeil 11.2.3 Bilder als Inhaltselemente
Pfeil 11.2.4 Bilder als emotionale Elemente
Pfeil 11.3 Bilderquellen
Pfeil 11.3.1 Urheberrecht
Pfeil 11.3.2 Creative-Commons-Bilder
Pfeil 11.3.3 Bilder vom Kunden
Pfeil 11.3.4 Fotos und Grafiken selbst erstellen
Pfeil 11.3.5 Fotoagenturen
Pfeil 11.3.6 Fotografen beauftragen
Pfeil 11.4 Motive & Bildstimmung 
Pfeil 11.4.1 Menschen, Mitarbeiter und das Team
Pfeil 11.4.2 Porträts
Pfeil 11.4.3 Profilbilder
Pfeil 11.4.4 Räumlichkeiten
Pfeil 11.4.5 Inszenierung von Produktfotos
Pfeil 11.4.6 Austauschbare Bilderwelten
Pfeil 11.5 Bildgestaltung
Pfeil 11.5.1 Der Bildausschnitt
Pfeil 11.5.2 »Unrechteckige« Formate und andere geometrische Formen
Pfeil 11.5.3 »Out of the Box«
Pfeil 11.5.4 Graustufen/Duplexfarben
Pfeil 11.5.5 Montagen/Collagen
Pfeil 11.5.6 Großformatige Bilder/Hintergrundbilder
Pfeil 11.6 Icons
Pfeil 11.6.1 Icons bringen Inhalte auf den Punkt
Pfeil 11.6.2 Aufmerksamkeit steuern und Struktur geben
Pfeil 11.7 Icon-Fonts
Pfeil 11.7.1 Vor- und Nachteile von Icon-Fonts
Pfeil 11.8 Illustrationen
Pfeil 11.8.1 Thematische Illustrationen
Pfeil 11.8.2 Dekorative Illustrationen
Pfeil 11.8.3 Illustrativer Text
Pfeil 11.8.4 Informative Illustrationen (Infografiken)
Pfeil 11.9 Bildbearbeitung
Pfeil 11.9.1 Die nicht destruktive Bildbearbeitung
Pfeil 11.10 Bildformate
Pfeil 11.10.1 Die Bildgröße
Pfeil 11.10.2 Die Bildkomprimierung
Pfeil 11.10.3 Die Auswahl des richtigen Bildformats
Pfeil 11.10.4 Für Web speichern
Pfeil 11.10.5 Bildgrößen optimieren
Pfeil 11.11 Bilder in HTML und CSS
Pfeil 11.11.1 Bilder in HTML
Pfeil 11.11.2 Bilder in CSS
Pfeil 11.11.3 Responsive Bilder
Pfeil 11.11.4 Retina-Displays
Pfeil 11.12 Weitere Bilder-Tools
Pfeil 11.13 Fazit
 
Zum Seitenanfang

11.2    Bilder im Web Zur vorigen ÜberschriftZur nächsten Überschrift

Das Internet unterscheidet sich von anderen klassischen Medien. Es ist ein sogenanntes Pull-Medium, das heißt, im Vergleich zum Fernsehen (Push-Medium) sucht der Anwender (mehr oder weniger) gezielt Informationen bzw. muss mit einer bewussten Entscheidung eine von ihm gewählte Seite aufrufen. Der Informationsfluss wird vom Anwender gesteuert. Ein passives Wahrnehmen und Erleben ist im Internet so gut wie gar nicht gegeben. Das Webdesign muss dem Benutzer also die Möglichkeit geben, sich schnell einen Überblick zu verschaffen, es muss seinen Blickverlauf steuern, und es soll ihm ein gutes Gefühl vermitteln. Bilder sind dazu prädestiniert, denn sie können verschiedene Aufgaben im Webdesign erfüllen:

 
Zum Seitenanfang

11.2.1    Bilder als Layoutelemente Zur vorigen ÜberschriftZur nächsten Überschrift

Bilder können als Layoutelemente eingesetzt werden, um dem Screendesign sein Look & Feel, seine Anmutung, zu geben. Diese Bildelemente schaffen in erster Linie Stimmungen. Klassische Beispiele für solche reinen Layoutbilder sind Webseitenhintergründe oder -muster.

Ein großformatiges Hintergrundbild mit Farbverlauf und Kurven setzt polymail.io ein.

Abbildung 11.8    Ein großformatiges Hintergrundbild mit Farbverlauf und Kurven setzt polymail.io ein.

Würden diese Grafiken fehlen, wären die Webseiten immer noch genauso gut bedienbar. Inhaltlich würde nichts fehlen. Für die visuelle Stimmung sind sie aber unentbehrlich.

Header-Bilder | Etwas anders sieht es beim sogenannten Header aus, also dem Kopfbereich des Screendesigns. Dieser ist der wichtigste Bereich einer Webseite, da der User optisch und inhaltlich abgeholt bzw. überzeugt werden muss, dass er auf dieser Seite richtig ist. Header-Bilder sind also nicht nur reine Layoutelemente, sondern meistens auch sehr bedeutende Inhaltselemente. Folgende Beispiele zeigen schön die inhaltliche und optische Bedeutung von Header-Bildern:

Header-Bild und Headline ergänzen sich inhaltlich und optisch wunderbar bei art4web.sk/en.

Abbildung 11.9    Header-Bild und Headline ergänzen sich inhaltlich und optisch wunderbar bei art4web.sk/en.

 
Zum Seitenanfang

11.2.2    Bilder als Orientierungselemente Zur vorigen ÜberschriftZur nächsten Überschrift

Der Anwender scannt erst eine Webseite, bevor er sich Inhalten detaillierter zuwendet. Da Bilder unsere Aufmerksamkeit auf sich ziehen, sind sie ein gutes Mittel, um diesen »Scanablauf« zu unterstützen oder zu beeinflussen. Sie können hier als Informationsanker dienen und die Übersichtlichkeit der Webseite erhöhen.

Gerade auf Newsseiten und Blogs werden Bilder gerne als Informationsanker eingesetzt. Sie markieren hier den Beginn einer neuen Informationseinheit, wie beispielsweise einen neuen Blogeintrag, und erleichtern dem Anwender so das schnelle Überfliegen der Seite.

Und auch den Lockerheitsfaktor sollte man nicht unterschätzen. Reine Textseiten – vor allem sehr lange – schrecken den Leser eher ab. Bilder lockern auf und nehmen den Schrecken vor der Bleiwüste. Abbildung 11.10 zeigt dies anschaulich: Die drei verwendeten Bilder lockern das Layout der Website auf. Allein stehend würden die Bilder keinerlei Assoziation mit den entsprechenden Themen zulassen. Im Zusammenspiel mit dem Text sind sie allerdings als wichtige Orientierungselemente hilfreich.

Auf hurra.com lockern drei Bilder das Layout auf und dienen als Orientierungselemente.

Abbildung 11.10    Auf hurra.com lockern drei Bilder das Layout auf und dienen als Orientierungselemente.

Weitere Orientierungselemente sind beispielsweise ausgestaltete Trennstriche oder Listenpunkte, die dadurch oft markanter sind, als es durch reine CSS-Formatierung möglich wäre.

Bilder als Orientierungselement auf Newsseiten wie spiegel.de

Abbildung 11.11    Bilder als Orientierungselement auf Newsseiten wie spiegel.de

thesocietyinc.com.au trennt einzelne Bereiche durch markant ausgestaltete Trennstriche.

Abbildung 11.12    thesocietyinc.com.au trennt einzelne Bereiche durch markant ausgestaltete Trennstriche.

 
Zum Seitenanfang

11.2.3    Bilder als Inhaltselemente Zur vorigen ÜberschriftZur nächsten Überschrift

Bilder sind oft genug aber auch als Informationsträger unersetzlich. Mal ergänzen sie inhaltlich den Artikel oder zeigen, was mit vielen Wörtern nicht ausreichend beschrieben werden könnte. Denn was würde beispielsweise besser funktionieren, ein Produkt vorzustellen, als das selbige fotografisch in Szene zu setzen? relogik.com macht dies gekonnt.

Das Produkt fotografisch in Szene gesetzt. Das Bild auf relogik.com ist eindeutig ein Inhaltselement.

Abbildung 11.13    Das Produkt fotografisch in Szene gesetzt. Das Bild auf relogik.com ist eindeutig ein Inhaltselement.

 
Zum Seitenanfang

11.2.4    Bilder als emotionale Elemente Zur vorigen ÜberschriftZur nächsten Überschrift

Bilder sind vor allem eins: emotional! Also ideal dafür geeignet, Stimmungen zu schaffen, Gefühle hervorzurufen, eine Webseite interessant, markant, unverwechselbar zu machen und so für eine hohe Wiedererkennbarkeit zu sorgen. Folgendes Beispiel demonstriert die hohe Emotionalität, die Bilder auf Webseiten erzeugen können, ganz gut:

Voller Emotionen: lordz.ch.

Abbildung 11.14    Voller Emotionen: lordz.ch.

 


Ihre Meinung?

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de

<< zurück
 Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Webdesign Webdesign
Jetzt Buch bestellen

 Buchempfehlungen
Zum Rheinwerk-Shop: HTML5 und CSS3
HTML5 und CSS3


Zum Rheinwerk-Shop: Praxisbuch Usability und UX
Praxisbuch Usability und UX


Zum Rheinwerk-Shop: Responsive Webdesign
Responsive Webdesign


Zum Rheinwerk-Shop: Website-Konzeption und Relaunch
Website-Konzeption und Relaunch


Zum Rheinwerk-Shop: UX Writing und Microcopy
UX Writing und Microcopy


Zum Rheinwerk-Shop: WordPress 5
WordPress 5


Zum Rheinwerk-Shop: Stile & Looks
Stile & Looks


Zum Rheinwerk-Shop: Digitale Illustration
Digitale Illustration


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und in die Schweiz
InfoInfo

 
 


Copyright © Rheinwerk Verlag GmbH 2020
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

 
[Rheinwerk Computing]

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern