Die 3 Cs der Benutzeroberflächen: Farbe, Kontrast und Inhalt

Es gibt ein altes Geschäftsmodell, nach dem viele Geschäftsstrategen leben - die 3 Cs. Es ist eine Erinnerung daran, sich auf das Unternehmen, die Kunden und die Wettbewerber zu konzentrieren . Viele kleine Unternehmen und Websites verwenden dieses Modell ebenfalls. Aber für Designer sind die drei Cs etwas anders.

Beim Erstellen von Benutzeroberflächen sollten Sie sich auf Farbe, Kontrast und Inhalt konzentrieren. Diese drei Elemente bilden die Grundlage für gutes Design. Aber jeder ist etwas komplexer, als es von der Oberfläche her scheint. Hier erfahren Sie, wie Sie über die drei Cs von Benutzeroberflächen nachdenken und diese in Ihre Designprojekte integrieren.

Entdecken Sie Designressourcen

Farbe

Farbe ist für die meisten Benutzer eines der offensichtlichsten visuellen Elemente. Designer und Nicht-Designer können gleichermaßen über Farben sprechen und darüber, ob ein bestimmter Farbton oder eine bestimmte Palette sie anspricht.

Farbe kann eigenständig unterschiedliche emotionale Verbindungen herstellen, ohne andere Effekte. Sie können fast jedem ein Farbfeld oder einen Chip geben und eine Reaktion auf die sichtbare Farbe erhalten. Es ist auch ein lustiges Gestaltungselement, da sich persönliche und gestalterische Vorlieben im Laufe der Zeit fast universell ändern.

Farbe kann ein Design aus vielen Gründen erstellen oder beschädigen, aber in erster Linie macht sie so viele Dinge und bietet dem Benutzer gleichzeitig so viele visuelle Hinweise, dass Sie es nicht ignorieren können.

Farbauswirkungen:

• Benutzerfreundlichkeit und Lesbarkeit
• Markenbekanntheit und Bekanntheit
• Wo Benutzer suchen und interagieren
• Organisation und Benutzerfluss
• Gesamterfolg des Designs

Verwenden Sie Farbe, um Folgendes zu erstellen:

• Navigation, die klar und verständlich ist
• Intuitive Interaktionen
• Eine Stimmung für das Projekt
• Erstellen Sie starke Handlungsaufforderungen oder verwendbare Elemente
• Stellen Sie ein Gefühl dafür her, worum es beim Design geht, beispielsweise um Realität oder Fantasie

Dies alles scheint eine große Herausforderung für etwas so Einfaches wie eine Mischung aus Rot, Grün und Blau zu sein.

Also, wo fängst du an? Die wohl wichtigste Variable in Bezug auf Farbe ist die Erstellung einer Palette, die die Benutzer anspricht und mit dem Design (wie Branding und Stimmung) spricht. Zum Beispiel würde eine Website für Coca-Cola, die Blau als dominierende Farbe anstelle von Rot verwendet, die Benutzer stören.

Eine einfarbige Palette basiert auf den Prinzipien der Farbtheorie.

Eine einfarbige Palette basiert auf den Prinzipien der Farbtheorie. Sie brauchen nicht mehr als ein paar Farben, damit es funktioniert. Zwei bis drei Farben und eine gute Bibliothek mit helleren und dunkleren Variationen reichen aus. Mockplus empfiehlt die 6: 3: 1-Regel: Wählen Sie drei Farben für eine Palette aus, darunter eine dominante Farbe, die 60 Prozent der Zeit verwendet wird, eine Sekundärfarbe, die 30 Prozent der Zeit verwendet wird, und eine Akzentfarbe, die in den verbleibenden Farben enthalten sein kann 10 Prozent des Designs. Die Regel basiert auf dem Goldenen Schnitt, einer Hauptstütze der Designtheorie, und kann ein guter Ausgangspunkt sein.

Hier ist eine weitere Regel zum Erstellen von Farbpaletten in Benutzeroberflächen: Beginnen Sie mit Schwarzweiß. Wenn das Design ohne Farbe verwendet werden kann, funktioniert es wahrscheinlich, sobald die Farbe hinzugefügt wurde. Der Schwarz-Weiß-Umriss gibt Ihnen auch eine gute Vorstellung davon, wie Sie Farben mit genügend Kontrast (das zweite C) auswählen können, um die Benutzerfreundlichkeit zu verbessern.

Kontrast

Kontrast schafft eine Unterscheidung zwischen Elementen. Es hilft dabei, visuelle Hierarchien und Scanbarkeit zu erstellen und trägt dazu bei, wie einfach etwas schnell zu verstehen ist. Elemente mit starkem Kontrast erleichtern dem Benutzer den Blick von einer Sache zur nächsten und erzeugen ein natürliches visuelles Muster und einen natürlichen Benutzerfluss.

Der Grund, warum der Kontrast für das Design der Benutzeroberfläche so wichtig ist, ist, dass er Teil von allem ist, was Sie tun. Wie Sie einen Kontrast erzeugen, hängt von der Art des Elements des visuellen Effekts ab.

Sie können einen Kontrast herstellen zu:

• Farbe
• Größe
• Richtung
• Platz
• Gestalten

Ein Schlüsselelement der Richtlinien zur Barrierefreiheit ist der Kontrast, da dadurch sichergestellt wird, dass Benutzer ein Element im Design von einem anderen unterscheiden können. Das A11Y-Projekt, das die Barrierefreiheit im Internet erleichtern soll, hat folgende Empfehlung: Beginnen Sie mit dem Farbkontrast, indem Sie Farben aus verschiedenen Segmenten des Farbkreises oder kontrastierende Farben verwenden. Denken Sie daran, dass Komplementärfarben - Gegensätze im Farbkreis - maximalen Kontrast bieten.

Das gleiche Konzept gilt auch für die Schaffung von Kontrasten zwischen anderen Elementen. Wählen Sie Schriften aus verschiedenen Familien aus oder verwenden Sie dramatisch unterschiedliche Größen, damit Benutzer die Wörter schnell lesen können.

Kurz gesagt, die Idee hinter dem Kontrast ist, dass sich Gegensätze anziehen.

Verwenden Sie Richtungszeichen, Pfeile oder Bilder mit Bewegung, um den Benutzer zu zwingen, in eine bestimmte Richtung zu schauen, und drehen Sie dann den Richtungshinweis, um noch mehr Kontrast zu erzielen.

Der Unterschied zwischen engem und offenem Raum schafft viel Kontrast. Wenn Sie sicherstellen möchten, dass Ihr Text leicht zu sehen und zu lesen ist, geben Sie ihm etwas mehr Platz, um auf ihn aufmerksam zu machen.

Kurz gesagt, die Idee hinter dem Kontrast ist, dass sich Gegensätze anziehen. Elemente, die scheinbar unterschiedlich sind, können tatsächlich zusammenarbeiten, sodass beide auf einen Blick leicht zu erkennen sind.

Um festzustellen, ob der Kontrast so funktioniert, wie Sie es beabsichtigen, sollten Sie beim Betrachten der Elemente auf dem Bildschirm einige Faktoren berücksichtigen:

• Lesbarkeit: Sind alle Wörter und Bilder leicht zu sehen und zu lesen?
• Klarheit: Ist es einfach, ein Element von einem anderen zu unterscheiden?
• Zugänglichkeit: Funktioniert es für so viele Menschen wie möglich?
• Umgebung: Können Benutzer das Design an den Orten sehen und verstehen, an denen es verwendet wird?

Inhalt

Das letzte der drei Cs ist zufrieden. Das Design der Benutzeroberfläche kann nur so gut sein wie die darin enthaltenen Informationen. Der Inhalt umfasst alles von Bildern über Text bis hin zu Illustrationen und Symbolen, Logos und Markenzeichen. Der Inhalt umfasst auch Videos und jede Kopie, von der vollständigen Nachrichtenübermittlung oder Erzählung über Blog-Beiträge bis hin zu winzigen Mikrokopien.

Nur Inhalte zu haben, reicht nicht aus. Sie müssen herausragenden Inhalt haben.

Alle diese Elemente kommen zusammen, um die Geschichte zu erzählen, die Ihr Design und Ihre Benutzeroberfläche so besonders macht. Warum sollten Benutzer Ihnen ihre Zeit geben, anstatt etwas anderes zu tun?

Und nur Inhalte zu haben, reicht nicht aus. Sie müssen herausragenden Inhalt haben. Hochauflösender Inhalt. Hochwertiger Inhalt. Ihr Inhalt muss besser / größer / spezieller sein als ähnlicher Inhalt, der um die Aufmerksamkeit der Benutzer konkurriert.

Das kann eine große Herausforderung sein, aber die meisten Designer können diese Inhalte erstellen, indem sie sich selbst, ihrer Marke und ihren Nachrichten treu bleiben. Bleib bei dem, was du bist und was du weißt. Benutzer werden diese Authentizität erkennen und sie hoffentlich schätzen, indem sie Zeit mit Ihrem Design verbringen.

Fazit

Jetzt, da Sie mit den alten drei Cs des Geschäfts - Unternehmen, Kunden und Konkurrenten - und drei Cs des Benutzeroberflächendesigns - Farbe, Kontrast und Inhalt - ausgestattet sind, verfügen Sie über die Werkzeuge und das Wissen, um ein Designprojekt zu erstellen, das nicht von dieser Welt ist gut. (Oder zumindest sehr gut verwendbar.)

Wenn Sie beide Strategien in Designprojekte einarbeiten, müssen Sie darüber nachdenken, wie Sie etwas erstellen können, das dem Websitebesitzer und dem Benutzer zugute kommt. Sie kreieren nicht nur, damit das Design schön ist, sondern auch, damit es funktional ist.

Hinweis: Alle Beispiele in diesem Artikel stammen aus der Design Shack Gallery. Schauen Sie sich unbedingt um. Es ist voller großartiger Arbeit und Inspiration.