Deine Markenfarbe auf einer Absende-Schaltfläche sagt jemandem, worauf er klicken soll. Dieselbe Farbe auf einem Formular-Label macht den Text schwer lesbar. Deine Markenschrift in einer Überschrift wirkt hochwertig. Dieselbe Schrift in einem Feld-Label wird bei 12 Pixeln unleserlich. Das ist die zentrale Spannung beim Formular-Design für Marken. Die Elemente, die deine Marke erkennbar machen, können dein Formular schwerer ausfüllbar machen.
Die Strategie ist nicht, deine Marke zu entfernen. Sie ist, deine Marke gezielt einzusetzen. Nutze die Markenfarbe dort, wo sie Menschen zur Handlung führt. Nutze die Markentypografie dort, wo sie lesbar bleibt. Lass die Markenpersönlichkeit dort weg, wo sie Reibung erzeugt. Dieser Artikel behandelt die konkreten Entscheidungen, die dein Formular zugleich markentypisch und nutzbar halten.
Wo du die Markenfarbe in einem Formular einsetzt
Deine primäre Markenfarbe gehört auf die Absende-Schaltfläche. Am Ende eines Formulars muss jemand wissen, worauf er klicken soll. Eine Schaltfläche in deiner Markenfarbe ist sofort erkennbar. Die Person hat diese Farbe auf deiner Website schon überall gesehen. Sie weiß, dass sie Handlung bedeutet. Eine Schaltfläche in Markenfarbe signalisiert: "Das gehört zu deiner Marke und ist sicher anzuklicken."
Halte den Hintergrund des Formulars neutral. Weiß, gebrochenes Weiß oder sehr helles Grau. Ein heller Hintergrund lässt Formularfelder hervortreten und macht Text lesbar. Viele Marken nutzen auf ihren Websites dunkle Hintergründe. Ein dunkles Marineblau wirkt im Header vielleicht hochwertig. Nutzt du es als Hintergrund deines Formulars, wird der weiße Text in den Feldern plötzlich schwerer lesbar. Die Leute kneifen die Augen zusammen. Sie fragen sich, ob das Formular kaputt ist. Das Formular ist dann kein Gewinn mehr für deine Marke, sondern Reibung.
Setze die Markenfarbe dezent bei den Fokuszuständen der Felder ein. Klickt jemand in ein Formularfeld, braucht dieses Feld eine optische Rückmeldung. Ein Rahmen erscheint oder ein Hintergrund ändert sich, um zu zeigen, dass das Feld aktiv ist. Nutze hier einen helleren Farbton deiner Markenfarbe. Nicht die volle Sättigung deiner Primärfarbe. Eine weichere Version zeigt, dass das Feld ausgewählt ist, ohne das Formular zu erdrücken.
Fehlermeldungen brauchen eine eigene Farbe. Rot ist der Standard. Menschen verstehen Rot als "Stopp" oder "etwas stimmt nicht". Nutze deine Markenfarbe nicht für Fehler, selbst wenn deine Marke rot ist. Ist deine Marke rot, füge einen dunkleren oder gesättigteren Ton speziell für Fehler hinzu. So entsteht ein optischer Unterschied zwischen "normal" und "Fehler", den Menschen sofort erkennen.
Erfolgsmeldungen können Grün nutzen. Grün signalisiert Abschluss und Fortschritt. Es wird überall verstanden. Nach dem Absenden deines Formulars wirkt eine Erfolgsseite oder Meldung in Grün wie eine Bestätigung.
Linkfarben in einem Formular sollten deine Markenfarbe sein. Von Links wird erwartet, dass sie durch Farbe auffallen. Hilfetexte oder erklärende Links sollten sich mit deiner Marke verbunden anfühlen, aber klar von den Formularfeldern getrennt sein.
Das Barrierefreiheitsproblem in Farbpaletten von Marken
Viele Farbpaletten von Marken verfehlen die WCAG-AA-Kontraststandards. Ein helles Mintgrün, das in deinem Markenhandbuch wunderschön aussieht, hat vielleicht ein Kontrastverhältnis von 2 zu 1 gegenüber Weiß. WCAG AA verlangt 4,5 zu 1. Ein edles Violett kann gegenüber dem gewählten Hintergrund deiner Formularfelder durchfallen. Das ist häufig. Es lässt sich auch beheben.
Teste deine Markenfarben, bevor du sie in Formularen nutzt. Nutze einen Kontrastprüfer. Erfüllt deine Markenfarbe WCAG AA nicht, hast du Optionen. Nutze eine dunklere oder gesättigtere Version dieser Farbe. Ein Mintgrün hat in deiner Palette vielleicht eine Variante in Waldgrün, die das Verhältnis erfüllt. Oder nutze deine Markenfarbe nur als Akzent auf Schaltflächen, wo der Kontrast von Natur aus höher ist. Nutze ein dunkles Neutral wie Anthrazit für Text, der Kontrast braucht.
Das ist besonders bei Labels wichtig. Stehen deine Labels in einer hellen Markenfarbe, hat jemand mit eingeschränktem Sehvermögen Mühe. Auch jemand, der das Formular draußen auf einem hellen Handybildschirm ansieht. Labels sind keine Dekoration. Sie sind wichtige Informationen. Halte sie dunkel und kontrastreich. Spare dir die Markenfarbe für Schaltflächen und Akzente auf, wo sie die Lesbarkeit nicht opfert.
Wie du Typografie für gute Lesbarkeit im Formular wählst
Deine Marke hat wahrscheinlich eine charakteristische Schrift. Serifenschriften signalisieren bei Kanzleien Seriosität. Geometrische Sans-Serif-Schriften wirken bei Technologieunternehmen modern. Verspielte Schreibschriften passen zu kreativen Marken. Diese Schriften sind wertvolle Markenwerte. Sie helfen Menschen, deine Marke wiederzuerkennen. In einem Formular schaffen sie Probleme.
Formular-Labels müssen auch in kleinen Größen überflogen und gelesen werden können. Die meisten dekorativen Markenschriften können das nicht. Eine Handschrift ist in einer Überschrift mit 36 Pixeln wunderschön. Bei 13 Pixeln für ein Formular-Label ist sie fast unleserlich. Eine dünne geometrische Schrift sieht in größeren Größen elegant aus. Bei 12 Pixeln wird sie schwer lesbar. Eine verschnörkelte Serifenschrift mit dekorativen Schwüngen erzeugt visuelles Rauschen in einem Formularfeld, das klar und sachlich sein sollte.
Die Lösung ist, für allen Formulartext eine klare Sans-Serif-Schrift zu nutzen. Labels, Hilfetexte, Platzhaltertexte, Fehlermeldungen. Alles sollte in einer einfachen, gut lesbaren Schrift stehen, etwa einer klaren Systemschrift ohne Serifen. Das heißt nicht, deine Marke aufzugeben. Es heißt, Klarheit dort zu wählen, wo sie zählt. Deine Marke zeigt sich in der Farbe deiner Schaltfläche, in deinem Layout, in deiner gesamten Ästhetik. Deine Formular-Labels müssen nicht das ganze Gewicht der Markenidentität tragen.
Nutzt deine Marke eine klare, gut lesbare Sans-Serif, teste sie bei 12 bis 14 Pixeln auf einem Handy. Kannst du sie klar lesen? Wenn ja, kannst du sie im Formular nutzen. Wenn nein, nutze eine Ersatzschrift.
Der Text deiner Absende-Schaltfläche kann deine Markenschrift nutzen, wenn sie bei 14 bis 16 Pixeln lesbar ist. Schaltflächentext ist größer als Label-Text. Eine dekorative Schrift hat mehr Spielraum. Scheitert deine Markenschrift aber bei Label-Größen, scheitert sie auch in Formularfeldern. Wähle zuerst Lesbarkeit, dann Markenpersönlichkeit.
Visuelle Hierarchie aufbauen, wenn Typografie und Farbe zusammenarbeiten
Visuelle Hierarchie in einem Formular führt eine Person von oben nach unten. Welche Elemente sind am wichtigsten? Welche zweitrangig? In einem Formular ist die Hierarchie einfach und eindeutig. Feld-Labels sind primär. Hilfetexte sind sekundär. Die Absende-Schaltfläche ist der Handlungsaufruf.
Nutze die Schriftgröße, um diese Hierarchie zu stützen. Labels sollten 13 bis 16 Pixel groß sein. Hilfetexte sollten kleiner und etwas heller sein, um 12 Pixel. Fehlermeldungen sollten genauso lesbar sein wie Labels. Mach Fehlertext nicht kleiner oder heller. Menschen müssen Fehler sofort sehen. Mach Fehlertext genauso auffällig wie das Label, das er korrigiert.
Deine Markenfarbe stützt diese Hierarchie. Die Absende-Schaltfläche hat deine primäre Markenfarbe und unterscheidet sich sichtbar von den Feld-Labels. Die Farbe allein sagt dem Nutzer: "Das ist die Aktion, die du als Nächstes ausführst." Labels sollten dunkel und neutral sein. Jede Markenfarbe in Labels sollte dezent sein und hinter der Lesbarkeit zurückstehen.
Abschnittsüberschriften in einem längeren Formular können deine Markenfarbe nutzen. So entstehen optische Pausen zwischen Feldgruppen. Eine Abschnittsüberschrift ist kein Eingabefeld. Sie hat Raum, ausdrucksstärker zu sein als Labels. Nutze diesen Raum und halte die Labels klar und lesbar.
Wann du Markenpersönlichkeit einsetzt und wann du sie weglässt
Ein Formular ist ein Werkzeug, mit dem jemand etwas erreichen will. Diese Person will schnell durch das Formular kommen. Jede Designentscheidung sollte ihr dabei entweder helfen oder verschwinden.
Markenpersönlichkeit gehört dorthin, wo sie Vertrauen schafft. Die gesamte visuelle Qualität deines Formulars, die Abstände zwischen den Feldern, die Konsistenz von Farben und Typografie, all das zeigt, dass deiner Marke Details wichtig sind. Ein gepflegtes, professionell wirkendes Formular gehört zu einer gepflegten, professionellen Marke. Das ist Markenpersönlichkeit bei der Arbeit. Sie hilft Menschen, dir zu vertrauen.
Markenpersönlichkeit gehört nicht dorthin, wo sie Reibung erzeugt. Nutze keine Labels in Großbuchstaben, nur weil sie bestimmter wirken. Nutze keinen sehr hellen Text auf dunklerem Hintergrund, nur weil er hochwertiger wirkt. Nutze keine schmale, verzierte Schrift, um mehr Text unterzubringen, nur weil sie zu deiner Markenästhetik passt. Diese Entscheidungen schaden der Nutzbarkeit. Sie bremsen Menschen aus. Formular-Design ist einer der wenigen Orte, an denen eine Marke sagen muss: "Meine Ästhetik tritt zurück, damit Menschen diese Aufgabe erledigen können."
Teste deine Markendesign-Entscheidungen auf einem Handy. Machen deine Entscheidungen zur Markenpersönlichkeit das Formular auf einem kleinen Bildschirm schwerer ausfüllbar, bringen sie keinen Wert. Entferne sie. Baue das Formular zurück, bis es sich auf dem Handy leicht anfühlt. Wende dann Markenentscheidungen an, die diese Leichtigkeit nicht stören.
Wie Konsistenz über verschiedene Formulararten hinweg funktioniert
Eine Marke kann verschiedene Arten von Formularen haben. Ein Kontaktformular ist kurz und im Gesprächston. Ein Checkout-Formular ist länger und strukturierter. Eine Umfrage ist erkundend. Eine Newsletter-Anmeldung ist minimal. Jedes hat einen anderen Zweck. Aber jedes sollte aussehen und sich anfühlen, als gehöre es zur selben Marke.
Die visuelle Kernsprache sollte bei jedem Formular gleich bleiben. Die Absende-Schaltfläche hat immer deine primäre Markenfarbe. Labels stehen immer in derselben gut lesbaren Schrift. Die Feldabstände folgen demselben Muster. Wechselt jemand von einem Kontaktformular zu einem Checkout-Formular und einer Umfrage, sollte er das Gefühl haben, im selben Markenerlebnis zu sein, auch wenn das Formular einen anderen Zweck hat.
Erstelle einen Styleguide für Formulare und halte deine Entscheidungen fest. Die Schrift für Labels ist eine klare Sans-Serif in 14 Pixeln. Die Farbe der primären Schaltfläche ist dein exakter Farbcode. Der Fokuszustand eines Feldes ist dieser bestimmte helle Ton deiner Markenfarbe. Hilfetext ist grau in 12 Pixeln. Sind diese Entscheidungen dokumentiert, wirkt jedes Formular, das dein Team baut, konsistent. Auch das Bauen geht schneller, weil die Entscheidungen schon getroffen sind.
Wie WEMASY dir hilft, Formulare im Markendesign zu bauen
Mit dem Formular-Builder von WEMASY steuerst du jedes visuelle Element und hältst dabei die Standards der Barrierefreiheit ein. Lege deine Markenfarbe als Schaltflächenfarbe fest. Wähle aus einer Bibliothek websicherer Schriften für Labels. Steuere Feldabstände und Layout. Sieh dir dein Formular vor der Veröffentlichung auf dem Handy in der Vorschau an.
Speichere deine Designentscheidungen als Vorlage. Jedes Formular, das du danach erstellst, übernimmt dieselbe einheitliche Gestaltung. Baue ein Kontaktformular, ein Checkout-Formular, ein Umfrageformular. Sie sehen alle nach deiner Marke aus, weil sie alle dieselbe Vorlage nutzen.
WEMASY-Formulare erfüllen automatisch die Kontrastanforderungen von WCAG AA für Formularelemente. Wählst du eine Markenfarbe für Schaltflächen oder Akzente, sorgt das System dafür, dass der Kontrast lesbar bleibt. Du kannst sicher sein, dass dein Formular im Markendesign unverwechselbar und barrierefrei ist.
Sieh dir an, welche Formularfunktionen in deinem WEMASY-Tarif enthalten sind.