Briefing: Design-Frontend
Welche Maße, welche Größen?
Einsatz von Grafiken
Hier ein paar Guidelines zum Einsatz von Bildern und PDF.
Für ein einheitliches Design auf unserer Website hier einige Richtlinien und Empfehlungen, wie wir Inhaltselemente nutzen und gestalten.
Hero / Header
Emotionaler Hero
- nur für die Startseite nutzen
Anleitung Hero - Emotional
Funktionaler Hero
- anzuwenden für die Rubriken der 1. Navigationsebene: Mieterservice, Unsere Kieze, Wir sind degewo und Wohnung finden
- Farbverlauf “blau-grün” nutzen
- immer mit Bild nutzen
- Empfehlung: Textkarte oder PlugIn nutzen, um Raum auszuschöpfen und auf wichtigen/neuen Inhalt aufmerksam zu machen (siehe Textkarte)
- Empfehlung: bei allen Verteilerseiten der 2. und 3. Navigationsebene bedarfsweise einsetzen, wo es Sinn macht, ein Bild zu verwenden. Sonst eher den “Platz sparen” und einfachen Hero nutzen, um möglichst schnell zu den Inhalten zu leiten
Anleitung Hero - Funktional
Einfacher Hero
- anzuwenden für Seiten ab der 2. Navigationsebene, also Verteiler- oder Inhaltsseiten, bei Bedarf auch mit Textkarten oder Plugin (siehe Textkarte)
- Farbe “betongrau” für emotionale Inhaltsseiten wie Einblicke hinter die Kulissen, Storys, Interviews und für Ratgeber-Seiten
- Farbe “blau” oder “grün” nutzen für fachliche Verteiler/Inhaltsseiten wie Partizipation, Neubau, Corporate Seiten. Innerhalb der gleichen Rubrik/Kategorie bitte gleiche Farbe nutzen.
Anleitung Hero - Einfach
Textkarte/PlugIn
- Anwendbar auf allen Hero-Elementen.
- Nutzung sehr ratsam bei Emotionalen Hero und Funktionalen Hero, da der Raum genutzt werden sollte, um auf Themen aufmerksam zu machen
- Farbnutzung: “grün”, “weiß” und/oder “beere”
- Farbnutzung HR: ausschließlich “lavendel”
Seitenaufbau
Inhaltscontainer
Der Inhaltscontainer ist die Grundlage für die Nutzung aller weiteren Inhaltselemente.
Hintergründe
Der Inhaltscontainer kann in folgenden Varianten genutzt werden:
- weiß (Standard)
- dunkelblau
- betongrau
Zusätzlich kann der Container mit einem Blasenhintergrund kombiniert werden.
Empfehlungen zur Nutzung
- Weiß ist der Standard und sollte bevorzugt eingesetzt werden
- Dunkelblau und betongrau gezielt nutzen
Anleitung Inhaltscontainer
Einspalter oder Zweispalter
- bei reinen Texten wird Einspaltigkeit bevorzugt.
- Zweispaltigkeit stört den Lesefluss in der Desktop-Version. Mobil wird eh alles einspaltig.
- Bild-Text-Kombinationen können zweispaltig erfolgen
Foto
- Inhaltsseiten: Beitrag startet immer mit großflächigem Bild, da Hero selbst kein Bild hat, nur Titel. Bild vollflächig ausspielen.
Teasertext
- Nach dem Bild folgt i. d. R. Teasertext.
- in fett, nicht als H3 anlegen. Hebt sich so vom Fließtext ab.
Text
Bitte Text & Media-Elemente separat mit jeder neuen Zwischenüberschrift anlegen. Grund: Wird H2 als Headline eingepflegt, ist der Abstand zum Fließtext größer und ansprechender. Wird H2 im Textfeld angelegt, ist Abstand zum Fließtext anders bzw. schmaler.
Teaserboxen
Am Ende einer Seite folgen wahlweise 2-3 Teaserboxen, die auf weiterführende Inhalte verlinken. (siehe Teaserboxen)
Ausnahme: Interview
Für Beiträge in Interviewform wird folgende Formatierung bevorzugt:
Teaser
- als H2
Interview Frage
- als H3
Antwort zur Frage
- als Absatz / Fließtext
Anleitung Text & Media
Teaserbox
- wahlweise 2-3 Teaser als Abschluss
- wahlweise mit oder ohne Foto, aber bitte einheitlich auf einer Seite.
- Hintergrundfarbe des Teasers sollte i. d. R. der Farbe des Inhaltscontainers entsprechen.
- Hintergrundfarbe “tanne”, falls Teaserbox hervorgehoben werden soll (da z. B. neu oder aktueller Bezug)
- Hintergrundfarbe “lavendel”, sofern HR-Bezug
- Keine Nutzung von Tags
- Länge Teasertext: 150–200 Zeichen (inkl. Leerzeichen). Erfahrungsgemäß die perfekte Länge für ein bis zwei kurze Sätze unter der Überschrift, und für konsistente Blockhöhen und gute Lesbarkeit (auch mobil).
Anleitung Teaser
Breaker
- Bitte Breaker auf gesamter Seitenlänge einbetten, nicht in eine Spalte, falls Nutzung eines Zweispalters
- Hinweis: Textlänge beschränkt auf 500 Zeichen.
Farbnutzung
- blau: degewo-Bezüge, Hinweise, interne Verlinkungen (z. B. Kontaktformular, ZKB, Vermietungsablauf)
- blau mit Kalle: Kalle erklärt etwas, Servicegedanken.
grün: Veranstaltungen, externe Verlinkungen, Tipps (z. B. Führung, Mieterfest)
rot: Wichtiger Hinweis, "Warnung", "Achtung" (z. B. Schwarzmakler, Enkel-Tricks akut)
lavendel: HR-Bezug
Anleitung Breaker
Zitate
- Größe “normal”: Storys, Geschichten
- Größe “klein”: Pressemitteilungen
- Zitat mit Foto: im offiziellen Kontext (bspw. Vorstand), sondern eher nicht.
- → Anführungszeichen werden automatisch gesetzt
… dass etwas schwer ist, muss uns ein Grund mehr sein, es zu tun.
Ich lerne es täglich, lerne es unter Schmerzen, denen ich dankbar bin: Geduld ist alles!