Zum Hauptinhalt springen

Webdesign

Übersicht

Digitale Angebote entstehen heute selten aus einem Guss. Neben der zentralen Website kommen Buchungstools, Ticketshops, Formulare, Karriereportale oder externe Fachanwendungen zum Einsatz. Technisch sind diese Systeme oft eigenständig – visuell und funktional sollen sie jedoch als Teil derselben Marke wahrgenommen werden.

Ziel dieses Kapitels ist es, eine gestalterische und typografische Grundlage für alle webbasierten Anwendungen zu definieren. Externe Anbieter und eingebundene Systeme (z. B. per iFrame oder API) sind angehalten, sich im Rahmen ihrer technischen Möglichkeiten eng an diese Vorgaben zu halten.

Neben der gestalterischen Kohärenz steht die Barrierefreiheit im Mittelpunkt. Typografie, Kontraste und Skalierbarkeit orientieren sich an den geltenden Web-Accessibility-Richtlinien (WCAG/BITV). Inhalte müssen wahrnehmbar, bedienbar und verständlich bleiben.

Ein konsistentes Webdesign ist kein ästhetisches Detail. Es ist Voraussetzung für Orientierung, Vertrauen und barrierefreie Nutzung.

Figma-Vorlage

Für die Gestaltung digitaler Formularelemente steht eine geprüfte Figma-Vorlage zur Verfügung. Diese enthält barrierefrei konzipierte Formularelemente sowie definierte Farbfelder gemäß Corporate Design. Die Vorlage kann über presse@vgf-ffm.de angefordert werden. Die Nutzung dieser Vorlage wird empfohlen, um eine konsistente und normkonforme Umsetzung sicherzustellen.

Screenshot der Figma-Datei

Typografie

Für die digitale Anwendung des Corporate Designs ist eine klare, robuste und barrierefreie Typografie verbindlich. Für Headlines wird Roboto Condensed eingesetzt, vorzugsweise jedoch Roboto Flex, da die variable Achsensteuerung (z. B. Weight, Width) eine präzisere Anpassung an unterschiedliche Bildschirmgrößen, Kontexte und Hierarchien ermöglicht. Roboto Flex bietet insbesondere bei responsiven Layouts und skalierbaren Interfaces Vorteile, da Gewicht und Laufweite ohne Schriftwechsel variiert werden können – bei konsistenter Anmutung.

Für GUI-Icons, Pfeile, Statussymbole und Interface-Elemente wird Font Awesome verwendet. Die Icons sind rein dekorativ oder funktional zu kennzeichnen (aria-hidden bzw. zugänglicher Alternativtext) und dürfen niemals alleinige Informationsträger sein. Größe, Strichstärke und Kontrast der Icons müssen sich harmonisch in das typografische System einfügen und ebenfalls barrierefrei wahrnehmbar sein.

Basis-Typo

SCSS-Basis für Headlines 

$font-variation-settings: "opsz" 10, "slnt" 0, "wdth" 63, "GRAD" 10, "XOPQ" 96, "XTRA" 368, "YOPQ" 79, "YTAS" 745, "YTDE" -203, "YTFI" 738, "YTLC" 490, "YTUC" 700;
$font-family--bold: 'RobotoFlexBold', Arial, Helvetica, sans-serif !default;
$font-family--light: 'RobotoFlexLight', Arial, Helvetica, sans-serif !default;

@font-face {
	font-family: 'RobotoFlexBold';
	font-stretch: 10%; 
	font-style: normal;
	font-weight: 600;
	src: url('/RobotoFlex/RobotoFlex.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'RobotoFlexLight';
	font-stretch: 10%; 
	font-style: normal;
	font-weight: 400;
	src: url('/RobotoFlex/RobotoFlex.woff2') format('woff2');
	font-display: swap;
}


.font-family-bold {
	font-family: $font-family--bold !important;
	font-variant: $font-variation-settings;
}

.font-family-light {
	font-variant: $font-variation-settings;
	font-family: $font-family--light !important;
}

Basis für Text 

a, div, li, p {
     font-family: Arial,Helvetica,sans-serif;
     font-size: 1rem;
     line-height: 1.5em;
     color: #000;
     hyphens: auto;
}

Web-Schriftart Roboto Flex

Datei laden

Akkordeons

Tab-Menü

Cards

Pagina

Auf dieser Seite