[Seite 1]
Styleguide
familienplanung.de
Stand: 16.04.2021 // Version 0.2
[Seite 2]
FAMILIENPLANUNG.DE
Farben –
Primärfarben
Seegrün
Primärfarben
Die Hauptfarben Seegrün und Seegrün hell sind die Leitfarben von familienplanung.de #157B7C R21 G123 B124 Insgesamt ist die Grundgestaltung und Tonalität des Auftritts minimalistisch, neutral und leicht angelegt. Im Gesamteindruck Seegrün hell ist deshalb Weiß die dominierende Farbe.
Seegrün wird vor allem für die Marke (Logo), „Highlights“ sowie „Call-To-Actions“ benutzt. Es darf reduziert auch als Hintergrundfläche eingesetzt werden. #EBF5F5 R235 G245 B245
Seegrün hell dient hauptsächlich der Unterlegung von Content, sowie als Text– und Iconfarbe auf dunklen Hinterlegungen. Weiß
#ffffff R255 G255 B255
2 STYLEGUIDE | www.familienplanung.de
[Seite 3]
FAMILIENPLANUNG.DE
Farben –
Sekundärfarben
Blauschwarz
Sekundärfarben
Die Sekundärfarbe Blauschwarz wird hauptsächlich für Überschriften, Fließtexte und Icons eingesetzt. #2F2E33 R47 G46 B51 Durch das hohe Kontrastverhältnis auf Weiß (13.46:1) und Seegrün hell (12.12:1) ist eine barrierefreie Kontrastdarstellung Neutralgrau mittel nach BITV2.0 und WCAG AAA garantiert.
Neutralgrau mittel und Neutralgrau hell dienen der Gliederung, Abgrenzung und Hinterlegung des Contents. #C7C7C7 R199 G199 B199
Neutralgrau hell
#EFEFEF R239 G239 B239
3 STYLEGUIDE | www.familienplanung.de
[Seite 4]
FAMILIENPLANUNG.DE
Logo –
Wort-Bild-Marke
Offensive Kommunikation der URL
Die Bildmarke transportiert in einer sympathischen Darstellung die URL familienplanung.de. Der Bogen vermittelt das Gefühl, sich in einem geschützten Informationsbereich zu befinden.
Zentrales Produktversprechen
Unabhängig und wissenschaftlich fundiert – die Subline stellt die wesentlichen „Produktmerkmale“ des Informationsangebots heraus und vermittelt Kompetenz und Verlässlichkeit.
4 STYLEGUIDE | www.familienplanung.de
[Seite 5]
FAMILIENPLANUNG.DE
Logo –
Wort-Bild-Marke
Logo
Zentrale Bild- und Wortmarke, wie sie für den Einsatz im Portal und sämtlichen begleitenden Medien verbindlich ist.
Sonstiges
Submarke „Jung und Schwanger“ für den Einsatz für das sich an Jugendliche und junge Erwachsene richtende Angebot auf der Multisite jung-und-schwanger.de.
5 STYLEGUIDE | www.familienplanung.de
[Seite 6]
FAMILIENPLANUNG.DE
Logo –
Wort-Bild-Marke
Positionierung
Die Mittellänge des Schriftzuges familienplanung.de definiert die Größe der Schutzzone, die um das Logo liegt.
| Schutzzone | ||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Schutzzone |
Sonstiges
Im Umfeld einer Schwarzweiß(1c)-Umsetzung wird die komplette Wort-Bild-Marke in reinem Schwarz (#000000) / R0 G0 B0 gesetzt.
Eine Umsetzung kann auch in Weiß erfolgen, jedoch muss hier als Hintergrundfarbe immer eine die Anforderungen der Barrierefreiheit gewährleistende Kontrastfarbe gewählt werden.
6 STYLEGUIDE | www.familienplanung.de
[Seite 7]
[Seite 7: nicht lesbar — ValueError]
[Seite 8]
FAMILIENPLANUNG.DE
Bildwelten –
Fotografie
Authentisch und divers
Die Bildwelt von familienplanung.de ist ebenso vielfältig wie die Themenbereiche der Seite.
Die Palette reicht von Stimmungsbildern, die Emotionen wie Sicherheit und Ruhe transportieren bis zum dokumentarischen Stil z.B. eines Beratungsgespräches und Erfahrungsberichten.
Mit dieser Breite von fotografischen Darstellungsformen findet sich immer das geeignete Motiv um z.B. sensible Themen an den Nutzer heranzuführen.
Bei der Auswahl und Produktion von Bildern für familienplanung.de wird ein besonderer Augenmerk auf Diversität und Authentizität gelegt.
8 STYLEGUIDE | www.familienplanung.de
[Seite 9]
FAMILIENPLANUNG.DE
Geburtsterminrechner
EIN RATGEBENR IN 5 SCHRITTEN Bildwelten – Errechnen Sie mit unserem
Illustration
Pille vergessen
Geburtstermin- und Geburtszeitraum- …was tun? Rechner schnell und einfach, wann ihr Baby wahrscheinlich zur Welt kommt.
Humaaaans - Mix-&-Match-Illustrationen Je nachdem, wie oft und in welcher
Einnahmewoche Sie die Pille vergessen haben, kann der Verhütungsschutz noch Neue Illustrationen auf familienplanung.de werden mit der ausreichend sein oder nicht. Bei freien Bibliothek Humaaans (www.humaaans.com) von Pablo Einnahmefehlern einer Kombi-Pille (sie enthält die beiden Hormone Östrogen und Stanley umgesetzt. Diese Bibliothek bietet eine Art „Basis- Gestagen) hilft Ihnen unser Test, zu prüfen, Baukasten-System“, um Aspekte der Diversität ob noch Verhütungsschutz besteht. berücksichtigende Illustrationen von Personen und Interaktionen zu generieren. Wenn Sie eine Minipille nehmen
Die Bibliothek ist auf Basis einer Creative-Commons- Lizenzierung nutzbar und wird als Fundament für künftige Start Illustrationen eingesetzt. Dadurch wird die Bibliothek für die spezifischen Anforderungen von familienplanung.de fortlaufend individualisiert und erweitert.
Wann ist es soweit?
Datum eingeben
erster Tag der Regel Beispiele in Anwendung:
Tag der Zeugung
Illustration im „Pille vergessen“-Tool sowie im „Geburtsterminrechner" Geburtstermin berechnen!
9 STYLEGUIDE | www.familienplanung.de
[Seite 10]
FAMILIENPLANUNG.DE
Bildwelten –
Illustration
Beispiel: Illustrationen „Geburtspositionen“
Hier wurden im Stile der für die Illustrationen einzusetzenden Bibliothek Humaaans neue Figuren, Posen und Szenen kreiert, um das Thema „Geburtspositionen“ darzustellen.
Illustrationen sind ideal für Themen, die sich fotografisch nur schwer oder gar nicht realisieren lassen.
10 STYLEGUIDE | www.familienplanung.de
[Seite 11]
FAMILIENPLANUNG.DE
Bildwelten –
Icons und Symbole
Symbole
Icons werden auf familienplanung.de funktionsunterstützend eingesetzt, beispielsweise bei einer Call-To-Action, einer E-Mail-Adresse oder bei einem Download.
Symbole hingegen sind inhaltsunterstützend. Sie werden vor allem für Cards genutzt. Das abgebildete Symbol bezieht sich immer auf das jeweilige Thema, wie z.B. „Häufig gestellte Für Beratungsstellen: Fragen“, „Wissenswertes für Männer“ oder „Aktualisierung einer Wie aktualisieren wir unsere Daten Datenbank“.
Symbole und Icons können im definierten Stil ständig erweitert werden.
Wissenswertes für Männer
Häufig gestellte Fragen
11 STYLEGUIDE | www.familienplanung.de
[Seite 12]
FAMILIENPLANUNG.DE
Adaption Web –
Systematik
Komponenten-Bibliothek
Für die tägliche redaktionelle Arbeit steht eine Komponenten- Bibliothek (www.familienplanung.de/internes/komponenten) zur Verfügung, auf deren Basis Artikel- und Übersichtsseiten zusammengestellt werden können.
Die in der Komponenten-Bibliothek hinterlegten Elemente (Text, Text-Bild, Slider, Video, Listen, Teaser, Cards usw. usf.) sind sämtlich unter Abgleich der zentralen Aussagen dieses Styleguides (Farben, Fonts, Grundprinzipien der Gestaltung, Umgang mit Fotografie, Illustration usw.) erstellt worden.
12 STYLEGUIDE | www.familienplanung.de