Diese Seite ist für alle im Haus, die etwas gestalten. Einen Aushang fürs Treppenhaus, eine Einladung zum Sommerfest, einen Flyer für eine Arbeitsgruppe, einen Text für die Website. Ihr müsst nichts davon auswendig können. Farbwerte abschreiben, Schriften einstellen, ein paar Regeln beachten, fertig.

Farben

Fünf Grundfarben. Amber ist der Blickfang und wird sparsam eingesetzt, Floral White ist der Papierton, Midnight Violet die Textfarbe. Die beiden Rosatöne sind die Flächenfarben.

Abgeleitete Töne

Diese Töne braucht ihr, sobald Text ins Spiel kommt. Überschriften in Aubergine, Links in Beere.

Eine Regel, die wirklich wichtig ist: Amber auf hellem Grund ist zu schwach, um Text lesbar zu machen. Etwa 1,9 zu 1 Kontrast, das genügt für niemanden mit eingeschränkter Sehkraft. Amber gehört auf Flächen, Punkte und Pfeile. Überschriften kommen in Aubergine, Links in Beere, Fließtext in Midnight Violet.

Zwei Kombinationen, die immer gehen: dunkler Text auf Floral White, heller Text auf Aubergine oder Midnight Violet.

Schriften

Zwei Schriften. Platypi ist die Serifenschrift für Überschriften, Zahlen und Zitate. Inter ist die serifenlose Schrift für den Fließtext. Beide sind frei verfügbar und liegen auf unserem Server, es werden keine Schriften von Google nachgeladen.

Für eigene Dokumente könnt ihr die beiden Schriften kostenlos herunterladen und installieren, Platypi und Inter gibt es bei Google Fonts. Wenn das zu umständlich ist, nehmt Ersatzschriften, die auf jedem Rechner liegen. Das Ergebnis wirkt dann nicht identisch, aber verwandt.

So sieht die Hierarchie aus

H1 Seitentitel in Platypi

H2 Abschnitt

H3 Unterabschnitt

Fließtext in Inter. Darüber steht auf vielen Seiten ein Einleitungssatz in Platypi und Mauve, der den Inhalt in einem Satz zusammenfasst. So sieht ein Link im Text aus.

Formen

Nichts hier ist exakt rechteckig und nichts exakt rund. Kacheln, Buttons und Bilder haben schiefe Ecken, jede Ecke ein bisschen anders. Das ist Absicht und macht den Unterschied zum Behördenlayout aus.

In Word oder Canva bekommt ihr das nicht exakt nachgebaut. Rundet die Ecken dort einfach großzügig ab, ungefähr ein Fünftel der Elementhöhe, und lasst die Kanten nicht messerscharf.

Das Kreismotiv

Aus dem Logo kommt ein zweites wiederkehrendes Element: ein Kreis, an dessen Rand ein zweiter Kreis angeschnitten sitzt. Auf der Website taucht es bei Beitragsbildern auf, ein Bild wird rund beschnitten und bekommt links einen Amber-Punkt. Wer das in eigenen Materialien aufgreifen will, nimmt ein rundes Bild und setzt einen orangefarbenen Kreis halb darüber. Mehr steckt nicht dahinter.

Kacheln

Kacheln führen zu Unterseiten. Vier Farben wechseln sich ab, damit nebeneinanderliegende Kacheln nicht gleich aussehen. Wo eine Seite ein Foto hat, tritt das Foto an die Stelle der Farbe.

Zahlen

Kennzahlen stehen auf organischen Farbflächen, nicht in Kreisen oder Kästen. Zahl groß, Bezeichnung darunter, eine Zeile Erklärung.

Tabellen für Eckdaten

Für kurze Fakten gibt es diese zweispaltige Form. Links das Stichwort, rechts der Wert. Den Doppelpunkt müsst ihr nicht schreiben, den setzt die Website selbst.

Sprache

Die Website spricht so, wie hier auch geredet wird. Kurze Sätze, konkrete Angaben, keine Werbesprache. Ein paar Sachen, auf die wir achten:

• Erst die Sache, dann die Erklärung. Wer wissen will, was der Förderverein macht, soll es im ersten Satz erfahren.
• Zahlen und Namen statt Adjektive. „88 Wohnungen auf sechs Häusern“ sagt mehr als „ein großes Ensemble“.
• Keine Überschriften mit Doppelpunkt und keine Gedankenstriche als Stilmittel.
• Wir schreiben von Mitgliedern, Nachbarinnen und Nachbarn, nicht von Bewohnerinnen und Bewohnern eines Objekts.
• Wenn etwas unklar oder noch offen ist, steht das da. Lieber ein ehrlicher Halbsatz als eine glatte Formulierung, die nichts sagt.

Fotos

Am besten funktionieren Bilder aus dem Alltag im Haus. Höfe, Werkstätten, Feste, Menschen bei etwas Konkretem. Gegenlicht und schiefe Horizonte stören nicht, gestellte Gruppenfotos schon eher.

• Querformat funktioniert auf der Website besser als Hochformat, Kacheln und Kopfbilder sind breit.
• Wer erkennbar drauf ist, sollte einverstanden sein. Bei Festen reicht in der Regel ein Hinweis vor Ort, bei Porträts fragt bitte nach.
• Ladet die Bilder in Originalgröße hoch, die Website rechnet selbst herunter.
• Schreibt eine kurze Bildbeschreibung dazu. Die brauchen Menschen, die den Bildschirm vorlesen lassen.

Wenn ihr an der Website arbeitet

Vieles baut sich von selbst. Wer das weiß, spart sich Arbeit und macht nichts kaputt.

• Pfad und Blätterpfeile nie selbst einbauen. Beides entsteht aus der Seitenstruktur. Wenn der Pfad falsch ist, hängt die Seite an der falschen Stelle im Seitenbaum.
• Kachelraster nicht von Hand schreiben. Die Kacheln einer Übersichtsseite sind ihre Unterseiten, in der Reihenfolge, die im Seitenbaum eingestellt ist.
• Der Auszug einer Seite ist ihr Kacheltext. Wer die Beschreibung auf der Kachel ändern will, ändert den Auszug der Seite, nicht die Kachel.
• Ein Beitragsbild macht aus der Farbkachel eine Fotokachel. Ohne Bild bleibt sie farbig, und das ist völlig in Ordnung. Ein paar einfarbige Kacheln zwischen den Fotos tun dem Raster gut.
• Farben und Schriftgrößen nicht im Editor einzeln einstellen. Was ihr dort setzt, gilt stärker als die zentralen Einstellungen und lässt sich später nur mühsam wieder einsammeln. Überschrift als Überschrift auszeichnen genügt.
• Im Zweifel eine Ebene tiefer. Neue Seiten gehören unter die passende Übersichtsseite, nicht auf die oberste Ebene.

Kurzfassung zum Abschreiben

Vorlagen

Vorlagen für Word und für Aushänge sind in Arbeit und kommen hier hin, sobald sie fertig sind. Wenn ihr etwas Bestimmtes braucht, sagt Bescheid, dann bauen wir das zuerst. Bei Fragen zu Gestaltung oder Website meldet euch über das Kontaktformular.

Für alle, die es genauer wissen wollen

Der technische Teil, für Leute, die im Editor oder im CSS arbeiten.