Farbanleitung: Webseiten-Palette erstellen

Farbnutzung und Farbpaletten

Das Farbsystem hilft Ihnen dabei, Farbe auf sinnvolle Weise auf Ihre Benutzeroberfläche anzuwenden. In diesem System wählen Sie eine Primär- und eine Sekundärfarbe aus, um Ihre Marke darzustellen. Dunkle und helle Varianten jeder Farbe und wenden sie auf unterschiedliche Weise auf Ihre Benutzeroberfläche an. Dies ist in Figma noch einfacher, sobald wir Farbstile erstellt haben, mit denen wir die Farben im gesamten Projekt einfach und effektiv verwalten können.

Farbdesigns sind so gestaltet, dass sie harmonisch sind, barrierefreien Text gewährleisten und UI-Elemente und Oberflächen voneinander unterscheiden.

Erstellung eines Farbthemas

Primäre Farbe

Eine Primärfarbe ist die Farbe, die auf den Seiten und Komponenten Ihrer Website am häufigsten angezeigt wird. Ihre Primärfarbe kann verwendet werden, um ein Farbdesign für Ihre Website zu erstellen, einschließlich heller und dunkler Varianten.

‍

Sekundäre Farbe

Diese Farbe bietet mehr Möglichkeiten, Ihre Website hervorzuheben und zu unterscheiden. Die Verwendung dieser Farbe ist optional und sollte sparsam angewendet werden, um ausgewählte Teile Ihrer Benutzeroberfläche hervorzuheben.

‍

Sekundärfarben eignen sich am besten für:

• Buttons und Links
• Hervorgehobener Text
• Schlagzeilen

‍

Hintergrund- und Fehler-/Warnfarben

Diese Arten von Farben stehen nicht für eine Marke, müssen aber zur allgemeinen Benutzeroberfläche passen.

Hintergrundfarben erscheinen hinter scrollbaren Inhalten und sind oft neutral. Fehler-/Warnfarben weisen auf Fehler und Warnungen in Formularen hin, z. B. auf ungültigen Text im Textfeld. Die hier verwendete Grundfarbe ist hauptsächlich Rot für Fehler und Orange für Warnungen.

‍

Zugängliche Farben

Um einen zugänglichen Hintergrund hinter hellem oder dunklem Text zu gewährleisten, kann Ihr Hintergrund helle oder dunkle Varianten Ihrer Primär- und Sekundärfarben verwenden.

Alternativ können diese Farben für Typografie verwendet werden, die vor hellen und dunklen Hintergründen erscheint.