WLO-Fachportale: Corporate Design

Wie jede Marke hat auch WirLernenOnline ein eigens entwickeltes Designsystem mit vorgeschriebenen Farben und zu verwendenden Schriften. Hier gehts zum Corporate Design Manual → https://docs.google.com/presentation/d/14DaiS1QkLm5OQHp2FWhQmowNFrYHDeqAq3sXjwJMfPw/edit?slide=id.p#slide=id.p

Eine konsistente Nutzung von Markenfarben im vorgegebenen Designsystem ist entscheidend für eine klare und wiedererkennbare Außenwahrnehmung. Einheitliche Farben stärken die visuelle Identität, fördern den Wiedererkennungswert und vermitteln Professionalität sowie Vertrauen. Werden Markenfarben hingegen vermischt oder falsch angewendet, entsteht ein inkonsistentes Erscheinungsbild, das Verwirrung stiften und die Marke schwächen kann. Eine klare Farbführung sorgt daher dafür, dass die Marke eindeutig, zuverlässig und hochwertig wahrgenommen wird.

Fachportale

Die Fachportale unterteilen sich in unterschiedliche Fächergruppen die einem festen Farbschema zugeordnet sind. Jedes Fachportal besitzt auch ein eigenes Icon in der entsprechenden Farbe. Sollte dein Fachportal noch kein Icon besitzen solltest du das schnell ändern. Was es dabei genau zu beachten gilt erfährst du hier. Im Idealfall hälst du dich bei der Erstellung deines Fachporala an folgende Designrichtlinen.

Farbsystem der Fachportale

Fächer	Naturwissen-schaften/MINT	Sprachen	Musische Fächer	Gesellschafts-wissenschaften	Geisteswissen-schaften	Zukunfts- und Überfachliche Bildung	Sport
Hauptfarbe	Dunkelblau	Pink	Rot	Hellblau	Lila	Gelb	Grün
Zugehörige Fächer	Biologie Chemie Methemathik Informatik Physik Evidentbasierte Medizin	Deutsch DAZ Englisch Spanisch Französich Türkisch	Musik Kunst Darstellendes Spiel	Geographie Geschichte Pädagogik Politische Bildung Wirtschaft	Philosophie und Ethik Religion	Medienbildung Zeitgemäße Bildung Projektmanagement Nachhaltigkeit Zukunfts- und Berufsorientierung Lernen lernen	Sport
Farbabstufungen und ihre Farbcodes
Farbcodes für Fachportal Icon	#003B7C	#EC4A70	#E73445	#3DA6EE	#7F6FEE	#FFB930	#B4DA1C

Icon

Richtlinien der Fachportale

Auf der Startseite in den Übersichtskacheln wird das Fachportal angezeigt und sollte immer aus einem passenden Icon bestehen. Dafür gibt es mehrere Möglichkeiten an ein passendes Icon zu gelangen:
A über eine open Soource Icon Bibliothek
B selbst zeichnen
C mit KI generieren
D Alternativ Initialien statt Icon

A An Bibliotheken bedienen

Es gibt verschiedene Open Source Icon Bibliotheken in unterschiedlichen Qualitäten an denen sich bedient werden kann. Am besten nimmst du diese Iconbibliothek von Google-Material Design und schaust nach einem Aussagekräftigem, passendem Icon mit folgenden Einstellungen:

Einstellungen im linken Seitenpanel festlegen

Icon auswählen
Exporteinstellungen wählen → im rechten Seitenpanel den Farbcode eingeben (siehe Tabelle) und als SVG exportieren

Im Fachportal hochladen -> in deinen Sammlungseinstellungen, fertig

B Spezifikationen beim Selbst zeichnen

Bildgröße 24x24px
Farbcodes je nach Fachgebiet (siehe Tabelle)
Liniendicke 2pt
Stil: Outlined, scharfe Kanten, einfarbig
optimal im svg Format ausgeben

C Icon mit KI erstellen

Verwende folgenden Promt und ersetze die Werte mit deinen Vorgaben in den eckigen Klammern:

Erstelle ein einfarbiges, minimalistisch gehaltenes SVG-Icon zum Thema [Thema einfügen] in der Farbe [#HEX eintragen] auf transparentem Hintergrund. Endformat 24×24 px, Outlined, Sharp, Strichstärke 2 px, ohne Füllflächen, optimiert für UI-Design.

D Alternativen zum Icon

Alternativ zum Icon können auch die Initialien (2-3 Buchstaben) verwendet werden (Bsp. Fachportal Künstliche Intelligenz - KI - in Lila

Schriftart Montserrat
Schriftschnitt Semibold
Schriftgrad 20pt
Ausrichtung zentriert

Wie wende ich das Designsystem auf meiner Fachportalseite richtig an?

Finde heraus zu welcher Fächergruppierung dein Portal am besten passt.
Nutze die vorgegebene Farbpalette im Seiteneditor und beginne mit der ersten, gesättigten 100% Hauptfarbe im Hero (erste Section im Startbildschirmbereich)
achte auf Lesbarkeit und gute Kontraste, es hängt auch immer von der Textgröße ab, es gibt auch Grenzfälle oder Varianten wo beides möglich ist:

Ja	Nein!	Ja	Nein!	Ja	Nein!

Wie gestalte ich mein Fachportal spannend und einladend?

Neben der Inhaltlichen Auswahl der Lernmaterialen die du auf deinem Fachportal deiner Zielgruppe anbieten möchtest - ist die Aufbereitung, also das WIE eine wichtige Komponente.

Ein gutes Fachportal ist klar strukturiert, visuell ruhig, zielgruppenorientiert und leicht zu bedienen – mit gezielten Highlights, die Interesse wecken.

klare, ruhige Struktur
- Nutze ein übersichtliches Layout mit klaren Bereichen (Hero, Navigation, Content, Footer). Nutze dafür die Bereichselemente.
- Ein Akkordeonelement nimmst du am besten wenn du z. B. eine Abfolge an kuratierten Lehrmaterialien anbieten möchtest (dazu später mehr)
- Vermeide Überladung: weniger ist mehr!
- Arbeite mit viel Weißraum, damit Inhalte wirken können.
Intuitive Navigation

Halte die Menüführung einfach und logisch.
Maximal 5–7 Hauptpunkte im Menü.
Wichtige Inhalte sollten mit max. 2–3 Klicks erreichbar sein.

Konsistentes Farbschema
- verwende die Farbabstufungen deiner Hauptfarbe
- setze Akzentfarben gezielt ein um wichtige oder besondere Informationen hervorzuheben.
- Achte auf gute Lesbarkeit!
Visuelle Auflockerung
- nutze unsere Hintergrundformen oder vergib ganzen Sections eine Hintzergrundfarbe

Gib deinen Inhalten auch ruhig etwas Platz und vergib bewusst keine Hintergrundfarbe, nutze Weißräume für mehr Ruhe
Nutze unterschiedliche Layouts um die Inhalte spannend aufzubereiten (achte dabei natürlich auf die Sinnhaftigkeit und entscheide je nach Inhaltetyp und Menge was angebracht ist)

Lesbare Typografie

Klare Hierarchie:
- große Überschriften
- gut lesbarer Fließtext
Lockere lange Texte mit Absätzen und Zwischenüberschriften auf.
Häufig werden Texte nur schnell gescannt bzw. macht es mehr Spaß einen gut strukturierten Text zu lesen.

Emotionen & Einstieg

Starte mit einem starken ersten Eindruck:
- klare Headline
- kurze Zusammenfassung im Teaser mit Nutzen für User
- ansprechendes Bild
Zeige sofort: „Warum lohnt sich das hier?“

Das Akkordeonelement

Ist im Prinzip wie ein Bereichselemt, mit dem Unterschied dass es sich zusammenklappen lässt.

Akkordeonelemente (aufklappbare Inhalte) sind besonders sinnvoll, wenn du Lerninhalte strukturiert und schrittweise vermitteln möchtest, ohne die Nutzer mit zu viel Information auf einmal zu überfordern.

Du solltest sie einsetzen, wenn Inhalte logisch aufeinander aufbauen. So kannst du z. B. Grundlagen zuerst sichtbar machen und weiterführende Details erst nach Interaktion anzeigen. Das unterstützt ein geführtes Lernen, bei dem sich Nutzer auf einen Abschnitt nach dem anderen konzentrieren.

Ein weiterer Vorteil ist die Reduktion kognitiver Belastung: Statt einer langen, unübersichtlichen Seite sehen Nutzer nur die aktuell relevanten Informationen. Das ist besonders hilfreich bei komplexen Themen oder Tutorials.

Akkordeons eignen sich auch, wenn du optionale Vertiefungen oder Zusatzwissen anbieten willst. Fortgeschrittene können Inhalte gezielt aufklappen, während Einsteiger sich auf das Wesentliche beschränken.

Wichtig ist, dass die Struktur klar bleibt: Verwende aussagekräftige Überschriften, halte die Reihenfolge sinnvoll und vermeide zu viele verschachtelte Ebenen. So wird das Akkordeon zu einem effektiven Werkzeug, um Lerninhalte kuratiert, verständlich und nutzerfreundlich zu präsentieren.

Und jetzt viel Spaß bei der Gestaltung deines eigenen Fachportals!