Dokumentation
Design
Typografie
Die Schrift ist ein prägendes CD-Element des Website-Designs. Sie verleiht dem Auftritt einen eigenständigen Charakter und sorgt durch ihre klare typografische Hierarchie für Orientierung und gute Lesbarkeit.
Webfont: TheSans
Für die Website wird die Schriftfamilie TheSans in den Schriftschnitten Regular, Bold und ExtraBold eingesetzt. Sie ist Bestandteil des Corporate Designs der Handwerkskammern und prägt das einheitliche Erscheinungsbild.
TheSans muss als Webfont bei LucasFonts lizenziert werden.
Handwerkskammern, die nicht das einheitliche Corporate Design verwenden, können stattdessen ihre eigene Hausschrift einsetzen.
Schriftschnitte: TheSans C4s: Regular – Bold – ExtraBold
Lizenzierung und Vertrieb:
LucasFonts
www.lucasfonts.com
sales@lucasfonts.com
+49 (0)30 78718567
Icons
Icons sind ein wichtiger Bestandteil des Website-Designs. Sie helfen, Themen schnell zu erfassen, erleichtern die Orientierung und unterstützen die visuelle Zuordnung von Inhalten und Funktionen.
HWK Iconfont
Die Website verwendet einen eigens entwickelten Iconfont. Er umfasst aktuell Icons für Beratungsthemen sowie Funktionsicons für die Benutzeroberfläche.
Der Iconfont wird kontinuierlich erweitert. Geplant sind für Anfang 2027 unter anderem Icons für Handwerksberufe und weitere Themen aus dem Bildungsbereich.
Der HWK Iconfont ist lizenzfrei und im Download-Paket enthalten.
Farbwelt
Dunkelblau und Hellblau sind die charaktergebenden Farben des Website-Designs. Sie prägen das Erscheinungsbild und sorgen für einen hohen Wiedererkennungswert. Ergänzende Sekundärfarben unterstützen die thematische Orientierung und ermöglichen eine visuelle Unterscheidung einzelner Bereiche.
Primärfarben
Dunkelblau und Hellblau bilden die Grundlage der Farbgestaltung. Um die Anforderungen an die Barrierefreiheit nach WCAG Level AA zu erfüllen, werden ausschließlich Dunkelblau, Hellblau und definierte Schwarzabstufungen als Schrift- und Iconfarben eingesetzt.
Sekundärfarben und Bereichsfarben
Die Sekundärfarben werden ausschließlich für Hintergrundflächen verwendet. Sie können zugleich als Bereichsfarben eingesetzt werden, um thematische Zusammenhänge sichtbar zu machen und die Orientierung innerhalb der Website zu erleichtern.
Bei einer festen Farbkodierung gelten folgende Zuordnungen:
- Orange: Bildungsangebote und Weiterbildung
- Dunkelgrün: Beratung und Beratungsangebote
Handwerkskammern, die keine feste Farbkodierung verwenden, können die Sekundärfarben flexibel und themenspezifisch einsetzen, beispielsweise Grün für Nachhaltigkeit.
Farbabstufungen und Anwendung
Für die Gestaltung stehen unterschiedliche Abstufungen der Sekundärfarben zur Verfügung:
- 75-%-Farbton: Wird insbesondere für größere Farbflächen im Hero- und Headerbereich verwendet.
- 25-%-Farbton: Eignet sich für dezente Hintergrundflächen innerhalb des Seiteninhalts.
Durch die Beschränkung auf Hintergrundflächen unterstützen die Sekundärfarben die visuelle Orientierung, ohne die Lesbarkeit der Inhalte zu beeinträchtigen.
Designsystem
Das HWK-Designsystem ist modular aufgebaut. Durch diese Flexibilität lassen sich unterschiedlichste Kommunikationsbedürfnisse in Websiteangeboten darstellen ohne die Designsprache der Handwerkskammer zu verlassen.
Webangebote wie die Hauptseite, Bildungsangebote, Mikrosites zu Spezialthemen und Landing Pages lassen sich umsetzen indem sich die Module bedarfsgerecht anpassen.
Header
Der Header bildet den oberen Bereich einer Website und enthält zentrale Elemente wie Logo, Navigation und wichtige Funktionen. Er unterstützt die Orientierung und ermöglicht einen schnellen Zugang zu den wichtigsten Seitenbereichen.
Regional-Logo oder HWK-Logo
Optional: Site-Name
Website-Angebote, die über die Hauptseite hinausgehen, können hier thematisch gekennzeichnet werden, z.B. mit Begriffen wie Bildungsportal, Karriere.
Optional: Regional-Header
Bei Verwendung des HWK-Logos kann hier der Standort benannt werden
. Bei Bildungsseiten kann hier das Bildungszentrum benannt werden
Hauptnavigation
Suche
Optional: Zwichen Suche und Funktionsmenü kann ein Sekundärmenü Platz finden
Funktionsmenü
Optional: Hamburger-Menü
Varianten
Hero
Der Hero bildet den visuellen und kommunikativen Einstieg einer Seite. Er verbindet eine prägnante Botschaft mit einem passenden Bildmotiv und kann durch einen Call-to-Action ergänzt werden. Je nach Bildmaterial und gewünschter Wirkung stehen zwei Gestaltungsvarianten zur Verfügung.
Optional: Topline
Headline
Text
2–4 Zeilen
Optional: Call-To-Action
Ein Button kann zu einer Aktion auffordern. Bei mehreren Buttons kann farblich gewichtet werden.
Hero mit Bild und Textfläche
Bei dieser Variante stehen Text und Bild in getrennten Bereichen. Dadurch lassen sich nahezu alle geeigneten Bildmotive verwenden, da bei der Bildauswahl keine Rücksicht auf die Platzierung der Schrift genommen werden muss. Die Lesbarkeit bleibt unabhängig vom Motiv gewährleistet.
Hero mit Text im Bild
Bei dieser Variante wird der Text direkt auf dem Bild platziert. Das Bildmotiv muss dafür ausreichend ruhige und kontrastreiche Flächen bieten, damit die Schrift gut lesbar bleibt und keine wichtigen Bildinhalte überdeckt werden. Die Auswahl und der Zuschnitt des Motivs müssen entsprechend auf die Textplatzierung abgestimmt sein.