Antworten zu häufig gestellten Homepage-Fragen
 Alle Anleitungen
Einige Anleitungen
Intern
Kostenl. Partnerlinks
[,__,] Druckversion

Die Website Homepage-FAQs.de befindet sich im Archivmodus.
FAQS zu HP&Co.
Bildmotive und Farben - die richtige Auswahl unterstützt die Aussage der Webseite

Das Grundprinzip - Besucher durch Bildmotive und Farben positiv beeinflussen

Formen, Farben und Bildmotive erzeugen Assoziationen, d.h. gedankliche Vorstellungen und Gefühle, die auf die Webseite und den Betreiber übertragen werden. Da viele Entscheidungen unbewusst ablaufen, ist Farbpsychologie für die Webseitenerstellung wichtig. Nicht umsonst gibt es in guten Agenturen Fachleute für diese Aufgabe.

1) Die eigene Seite mal aus dem Blickwinkel von unbeteiligter Besucher betrachten

Als Webseitenersteller sich mal in die Lage von Besuchern versetzen, die den Seitenbetreiber und seine Seite noch nicht kennen und dann gedanklich nachvollziehen was diese Besucher wohl darüber denken. Ratsam ist es auch aussenstehende Personen, die nicht zum Bekannten- und Verwandtenkreis gehören, in die Beurteilung der Seite einzubeziehen - z.B. durch Vorstellung der eigene Seite in guten Foren.

Beispiele für verschiedene Beurteilungen:

a) Seite wirkt seriös / unseriös / wie eine Kinderbastelei.

b) Betreiber ist Fachmann / Amateur / totaler Anfänger.

c) Farben sind angenehm / etwas zu grell / tun den Augen weh.

d) Texte sind gut / schlecht lesbar / bereits nach kurzem Lesen ermüdend.

e) Inhalte sind flüssig / etwas holprig / schwerverständlich geschrieben.

==> Und wo steht die eigene Webseite?

2) Passen Bilder und Farben zur Seite?

Mit den richtigen Bildmotiven und den passenden Farben (die Texte sind natürlich auch wichtig) kann die Seite seriös wirken und neue Kunden bringen. Bei falscher Wahl sieht es nach Anfängerbastelei aus und macht alle Mühe zunichte, die eigenen Dienstleistungen positiv darzustellen.

Bei Kinderseiten ist seriöses Business-Design dagegen einfach nur langweilig, also fehl am Platze, hier darf es bunter und verspielter sein. Es kommt daher auf den Zweck und die Zielgruppe der Seite an, welche Farben und Bilder passend sind. Das Finden der richtigen Formen, Farben und Bildmotive ist leider nicht ganz leicht, daher greifen viele Anfänger in die falschen Farbtöpfe und verwenden unpassende Bilder. Und deshalb sehen deren Seiten oft "grauenhaft" aus.

Negative Beispiele:

a) Webseite für CAD-Dienstleistungen - grasgrünem Hintergrund und Bildern des PC-Arbeitsplatzes im Bastelkeller neben Werkzeugen.

Anmerkung: Habe dem Seitenersteller einen hellgrauen Hintergrund und Bilder von Fotolia.com (Suche: cad) empfohlen.

b) Webseite einer Metallbaufirma - Startseite mit rosafarbenen Hintergrund. Unterseite mit Foto der Produktionsstätte, einer alten, ehemaligen landwirtschaftlichen Halle mit lieblos montierter Leuchtreklame, umgeben von einem alten Zaun und mannshohem Gestrüpp.

Anmerkung: Bei geschäftlichen Webseiten geht fast immer ein hellgrauer Hintergrund, farbliche Akzente setzen das Logo bzw. der farbige Firmenname, sowie Navigation und Bilder. Fotos sollen einen positiven Eindruck von Betrieb vermitteln. Wenn es keine vorteilhaften Fotos gibt, dann besser gar keine Fotos verwenden. Evtl. an einen Berufsfotografen wenden.

c) Künstler-Webseite - unvorteilhaften Fotos der Sängerin von oben (sieht aus wie ein kleines, dickes Kind) oder von weit weg zwischen Sonnenschirmen alleine auf der Bühne mit ein paar Zuschauern und leeren Stühlen (sieht nach erfolgloser Sängerin aus). Texte in Grüntönen auf dunkelgrauem Hintergrund.

Anmerkung: Um den Bühneneffekt etwas zu verstärken sollte leicht von unten fotografiert werden (aber nicht übertreiben), dabei leere Stühle und unpassende Gegenstände (z.B. zugeklappte Sonnenschirme) möglichst vermeiden. Lieber nur ein gutes Foto verwenden statt vieler, wenn die anderen Fotos eine negative Aussage haben. Wenn ein dunkelgrauer Hintergrund verwendet wird, dann die normalen Texte in einem sehr hellem Grau, ist angenehmer für die Augen. Für Überschriften kann farbiger Text genommen werden, aber keine grellen Farben.

d) Schwarzweissfotos - ein Kunstruktionsbüro und ein Service für Bürodienstleistungen haben Schwarzweissfotos verwendet, einmal Arbeitsplatz in Grau (sah einfach nur alt, grau und matt aus) und die andere Seite mit der Inhaberin in Grau (sah wie 60 oder 70 Jahre aus, obwohl vermutlich jünger)

Anmerkung: Schwarzweissfotos heissen aus gutem Grunde nicht Grautonfotos, es genügt einfach nicht nur die Farben in Grautöne umzuwandeln. So gut wie immer muss mit einem Bildbearbeitungsprogramm der Kontrast deutlich erhöht und oft auch nachgeschärft werden, damit die Fotos nicht grau, fade und alt aussehen, sondern kraftvoll wirken. Übrigens: Das Kunstruktionsbüro verwendet nach meinem Hinweis wieder ein Farbfoto.

e) Tourismusseite - im Kopfbereich das Foto eines ländlichen Lebensmittelsgeschäftes, alles sehr schön, nur die Verkäuferin hinter dem Schaufenster schaut ziemlich bedrückt mit schweren Augen hinter der Brille - und futsch ist die schöne Stimmung. Auf anderen Seiten sind es Mülltonnen vor dem Restaurant, ein ramponierter, überlaufender Papierkorb vor dem Eiscafe oder Mitarbeiter in verknitterter Kleidung, weil mal eben schnell Fotos gemacht wurden.

Anmerkung: Fotos haben Aussagen und vermitteln Stimmungen, aber viele Seitenersteller sind auf diesem Auge blind. Warum sonst werden eine bedrückt schauende Verkäuferin, Mülltonnen, ramponierte Papierkörbe u.ä. gezeigt. Dabei sind gute Fotos gar nicht schwer, einfach mehrere Fotos von Personen machen, um auch mal ein Lächeln zu erwischen und nicht erst am Feierabend fotografieren, wenn die Bekleidung schon mitgenommen aussieht. Mülltonnen vorher beiseite stellen. Unschöne, fest montierte Gegenstände lassen sich durch entsprechende Bildausschnitte oder Bildretusche vermeiden.

3) Bilder - kostenlos oder kostenpflichtig?

Viele Seitenersteller suchen in kostenlosen Bilddatenbanken und finden auch nach langem Suchen selten das Passende, weil die Auswahl an guten und passenden Bildern meistens zu gering ist. Daher lohnt sich ein Blick in kostenpflichtige Bildarchive, hier gibt es eine grosse Auswahl an passenden Bildmotiven in guter Qualität und oftmals gar nicht teuer.

Digitalkameras hat fast jeder, aber das Ergebnis der eigenen Knipserei ist oft mager, vielfach fehlt der Blick für Motiv, Kameraposition, Brennweite und Beleuchtung. Oder die Umgebung ist schon zu alltäglich geworden, so dass viele unvorteilhafte Dinge im Foto gar nicht mehr wahrgenommen werden, die später bei den Besuchern einen negativen Eindruck hinterlassen. Oft lohnt es sich deshalb für Fotos des Betriebes, der Mitarbeiter und des Inhabers einen Berufsfotografen zu beauftragen.

a) Kostenpflichtige Bildarchive

Fotolia > http://de.fotolia.com/ (Bilder für Webseiten im unteren, einstelligen Euro-Preisbereich)

b) Kostenlose Bildarchive

http://www.lorm.de/2008/01/02/102-quellen-fuer-kostenlose-fotos/ (Blogbeitrag mit über 100 Quellen für kostenlose Bilder)

c) Berufsfotografen

http://www.berufsfotografen.com/

4) Farbharmonie / Colorschemer

Eine Hilfe beim Finden passender Farbzusammenstellungen sind Colorschemer, siehe meinen Beitrag

Colorschemer (Onlinetool) - passende Farbauswahl für eigene Designs mit Vorschau einer Beispielseite

Ein schöne Liste mit Webfarben, die auch die Wirkung von Textfarbe auf hellen und dunklem Hintergrund zeigt, gibt es hier

http://mahopa.de/murks/webfarben-namen.html

5) Textgestaltung

Nicht vergessen werden sollte, neben Farben und Bildern, auch die Gestaltung der Texte, denn sie sind nicht nur Information, sondern auch Teil des Designs, der Assoziation, also der gedanklichen Vorstellungen und Gefühle. Selbstverständlich sein sollte ein fehlerfreier Text (Rechtschreibprüfung nutzen), ein gute Formulierung und Textaufteilung (Absätze und Zwischenüberschriften), eine angenehme Schriftgrösse und passende Schriftart (Fliesstexte z.B. mit Verdana, Arial, u.ä.), ein guter Textkontrast und eine augenschonende Farbkombination (am Besten heller Hintergrund, aber kein reines Weiß, und schwarze Schriftfarbe).

Einige Infos zu Schriftarten in meinem Beitrag

Websichere Schriften / Schriftarten, alternative Schriftarten, schön gestaltete Texte in Textform und Text in Headergrafik als unsichtbarer H1-Tag


Siehe auch



Anleitung (C) 2011 Daniel Wurst - http://www.homepage-faqs.de