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
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
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.
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” und/oder “beere”
- Farbnutzung HR: ausschließlich “lavendel”
Seitenaufbau
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
Teaserbox
- wahlweise 2-3 Teaser als Abschluss
- wahlweise mit oder ohne Foto, aber bitte einheitlich auf einer Seite
- Hintergrundfarbe “betongrau”, falls Teaserbox auf weißem Hintergrund genutzt wird.
- Hintergrundfarbe “weiß”, falls Teaserbox auf blauem oder grauem Hintergrund genutzt wird.
- Hintergrundfarbe “tanne”, falls Teaserbox hervorgehoben werden soll (da z. B. neu oder aktueller Bezug)
- Hintergrundfarbe “lavendel”, sofern HR-Bezug
- Nutzung von Tags, um Beitrag auf einen Blick zuzuordnen, gerne “Tag-Liste” mitdenken, damit nicht ein Wust an Tags entsteht. Denkbar z. B. “Klimaschutz”, “Veranstaltung”, “Ratgeber”, “Kontakt”, “Nachbarschaft", “Aktion”, “Neubau”, “Vermietung” u. w. Hinweis:
- Max. 3 Tags pro Teaser!
- 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).
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
Beispiel für Breaker
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.
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!