Farben, Hintergründe und Buttons
Anleitung mit Übung
Über die Verwendung
Mit der Auswahl von Hintergrundfarben, -bildern und Buttons geben Sie besonderen Webseiten die spezielle RPTU Ästhetik und darüber hinaus, und viel wichtiger, helfen Sie dem Seitenbesucher bei der Orientierung auf der Seite.
Hintergrundfarben heben einzelne Inhalte hervor. Hintergrundbilder sorgen zusätzlich für eine Art Hintergrundstimmung.
Doch nicht jede Seite und nicht jeder Seitenbereich benötigt einen zusätzlichen Hintergrund. Texte stehen gut lesbar und ablenkungsfrei auf dem sehr hellen, grauen Hintergrund der gesamten Webseite.
Der einzelne(!) Button auf einer Seite oder in einem großen Seitenbereich dient als Aufforderung an den Seitenbesucher, hier zu klicken und unseren Empfehlungen zu folgen. Das kann der Besuch einer speziellen Webseite sein (z.B. Übersicht über alle/Ihre Studiengänge) oder auch der Link zu einem Anmeldeformular für eine besondere Veranstaltung sein. (Empfehlung: Bild mit Störer)
Über Hintergrundfarben
Den meisten Inhaltselementen können Sie eine Hintergrundfarbe geben. Die Farbauswahl finden Sie im Reiter "Erscheinungsbild" des Inhaltselementes.
Eine Hintergrundfarbe dient der Hervorhebung eines Inhaltes auf einer Seite für ein bestimmtes Thema.
Wenn dabei umgebende Inhalte ohne Hintergrundfarbe sind, wirkt diese Hervorhebung besonders. Im Gegenteil geht der Effekt der Hervorhebung verloren, wenn überall auf einer Seite Hintergrundfarben genutzt werden. Zusätzlich entsteht das Erscheinungsbild von einer "geschachelten" Seite. Das entspricht nicht der gewünschten Ästhetik des aktuellen RPTU Designs.
Die Hervorhebung durch eine Hintergrundfarbe wird umso stärker, wenn Sie bei der Einstellung "Rahmen" die Option "volle Fensterbreite mit zentriertem Inhalt" wählen. Hiermit kann auch eine vertikale Unterteilung einer Seite nach Themenblöcken erfolgen. Das bietet sich auf Einstiegs- oder Übersichtsseiten an.
Durch die sehr helle Standardhintergrundfarbe ist es nicht mehr notwendig, Inhaltselementen einen weißen Hintergrund zu geben! Der weiße Hintergrund ist ein technisch notwendiges Überbleibsel aus alten Templates.
Über Hintergrundbilder
Den meisten Inhaltselementen können Sie auch ein Hintergrundbild geben und mit einer Hintergrundfarbe verblenden. Die Möglichkeit hierfür finden Sie im Reiter "Erscheinungsbild" des Inhaltselementes.
Ein Hintergrundbild hebt Inhalt hervor und kann/soll eine Stimmung transportieren. Das Hintergrundbild dient dabei nicht dem Transportieren von Inhalten.
Verwendung:
- Hervorhebung von Inhalt mit Stimmung
- Inhaltlich darf ein Hintergrundbild nicht wichtig sein.
- Die Seite wird verstanden auch ohne Hintergrundbild
- Das Bild und die Hintergrundfarbe sind so zu wählen, dass für alle Bildschirmgrößen ein großer Kontrast zwischen Schrift und Bild besteht!(Barrierefreiheit)
Besondere Einstellung Parralax-Effekt:
Wenn Sie die Einstellung "Parallax-Effekt aktivieren" nutzen, wird das Hintergrundbild fixiert und die Inhalte scrollen über das Bild.
Dieser Effekt fesselt die Aufmerksamkeit des Seitenbesuchers sehr stark. Trotzdem ist das Bild in der Bewegung nicht vollständig zu erfassen und Texte sind nur schwer zu erfassen.
Nutzen Sie diesen Effekt sparsam und nur für Informationen, die übersehen werden dürfen.
Hier ist noch wichtiger, dass der Kontrast zwischen Text und Bild in allen Bildschirmgrößen über die ganze Fläche des Bildes groß genug ist.
Über Buttons
Ein frei stehender Button verleitet den Seitenbesucher zu einem Klick. Das funktioniert i.d.R. nur, wenn keine anderen, starken Hervorhebungen im Sichtbereich des Seitenbesuchers sind. Geschickt plaziert kann man so einen Seitenbesucher gezielt über mehrere Seiten hinweg führen.
Das RPTU Design stellt zwei Button-Varianten zur Verfügung
- Primärer Button flächig ausgefüllt in
- schwarz bei hellem Hintergrund
- weiß bei dunklem Hintergrund
- Sekundär Button mit
- schwarzer Umrandung, farbloser Fläche und schwarzer Schrift auf hellem Hintergrund
- weißer Umrandung, farbloser Fläche und weißer Schrift auf hellem Hintergrund
Verwendung
- ein max. zwei Buttons im Sichtbereich des Seitebesuchers
- bei zwei Buttons werden primärer und sekundärer Button verwendet - dabei ist davon auszugehen, dass der primäre Button bevorzugt geklickt wird
- Buttons dienen nicht als Ersatz einer sichtbaren Navigation. Verwenden Sie hier lieber das Inhaltselement Menü (Gestaltung wird angepasst werden)
So sieht es aus
Live Ansicht von Farben und Hintergründen
Hervorhebung durch Hintergrundfarbe oben
Bei dieser Anleitung ist diese Seite selbst die Live-Vorschau.
Im oberen Bereich wird der Seitenbesucher durch den grauen Hintergrund auf dessen Inhalt gelenkt. Uns ist wichtig, den Leser auf das Thema einzustimmen und sich Gedanken zur Verwendung von Farben zu machen. Diese Informationen halten wir für wichtiger als die Schrittanleitung weiter unten.
Die Farbe der Hervorhebung ist neutral, grau. Für den hier benötigten Effekt werden keine kräftigen Farben benötig.
Hervorhebung durch Hintergrundfarbe mit Bild unten
Diese Darstellung wollen wir auf den Typo3 Seiten durchgehend dann verwenden, wenn es um das Sellbststudium geht. Der dunkelgrüne Bereich hebt sich deutlich hervor und dient hier einer Benutzeroberfläche für das Selbststudium. Der Primäre Button führt zum nächsten Schritt. Der sekundäre Button führt zur Übersicht.
Schritt für Schritt
Bebilderte Anleitung
Schritt 1: Auswahl der Hintergrundfarbe
Um eine Hintergrundfarbe für das Inhaltselement festzulegen, gehen Sie zunächst auf den Reiter "Erscheinungsbild". Dort wählen Sie im Bereich "Hintergrundfarbe" die gewünschte Rahmenfarbe aus.
Wählen Sie eine helle Hintergrundfarbe, wird der Text des Inhaltselements schwarz. Wählen Sie eine dunkle Hintergrundfarbe, wird der Text weiß.
Wichtig: Bitte nutzen Sie diese Option nur zum Hervorheben besonders wichtiger Elemente. Bunte Farben lenken gezielt die Blicke der User*innen. Zuviele Hervorhebeungen können den gegeteiligen Effekt haben.
Schritt 2: Auswahl des Hintergrundbildes
Um ein Hintergrundbild für das Inhaltselement festzulegen, gehen Sie zunächst auf den Reiter "Erscheinungsbild". Dort klicken Sie im Bereich "Hintergrundbild" auf "Bild hinzufügen". Anschließend werden Sie zur Dateiliste weitergeleitet und wählen dort das gewünschte Bild aus. Alternativ können Sie auch durch einen Klick auf "Datei auswählen und hochladen" eine lokale Datei direkt einbinden.
Anschließend können Sie in dem Bereich "Optionen für Hintergrundbilder" noch verschiedene Effekte und Filter für das Hintergrundbild einstellen. Beispielsweise können Sie mit dem "Verblassen-Effekt" sicherstellen, dass der Text des Elements nach wie vor gut lesbar ist. Des Weiteren lassen sich mittels "Verblassen-Effekt" auch Hintergrundfarbe und Hintergrundbild kombinieren.
Es empfiehlt sich eine Pixelbreite von 1200px bei 100 % Seitenbreite in der Desktopansicht. Und mindestens 750px bei 50 % Seitenbreite in der Desktopansicht. So sind die Bilder groß genug für alle möglichen Ansichten.
Bitte beachten Sie, dass die Mediendatei bei der Option "Datei auswählen und hochladen" in der Dateiliste im Ordner "user_upload" gespeichert wird. Dies erschwert Ihnen und anderen Redakteur*innen unter Umständen das Aufinden dieser Datei in der Dateiliste.
Wichtig: Bitte nutzen Sie diese Option nur zum Hervorheben besonders wichtiger Elemente. Hintergrundbilder lenken gezielt die Blicke der User*innen. Zuviele Hervorhebeungen können den gegeteiligen Effekt haben.
TYPO3 Selbststudium
Übung
- Legen Sie ein Text/Medien Inhaltselement an.
- Befüllen Sie das Inhaltselement mit Überschrift und Text.
- Spielen Sie mit den Möglichkeiten, Hintergrundfarben und Hintergrundbilder zu vergeben.
- Verlinken Sie diese Anleitung mit einem Button.
Nun beobarchten Sie sich bitte als Webseitenbesucher*in und machen Sie sich für sich Gedanken:
- Suchen Sie sich ein paar Seiten aus dem zentralen Webauftritt der RPTU aus.
- Wohin wurde Ihre Aufmerksamkeit gelenkt?
- Wenn diese gelenkt wurde, was hat Ihre Aufmerksamkeit auf sich gezogen?
- Gibt es auf der Seite Hintergrundfarben- und/oder Bilder? Wenn ja, helfen diese dabei, die wichtigste Stelle der Seite zu finden? Helfen diese bei der Orientierung auf der Seite? Erkennen Sie eine inhaltliche Struktur?
- Wiessen Sie, wie es nun weiter geht? Wohin sollen Sie klicken?