Konsistenz macht Ihr Design besser, benutzerfreundlicher und praktisch unsichtbar. Es gibt dem Benutzer viel Raum, um das Design in der von Ihnen gewünschten Weise zu erleben.
Design für Konsistenz ist in manchen Fällen ein Kinderspiel und in anderen etwas schwieriger zu verstehen. Ganz einfach: Konsistenz ist der Faden, der Elemente in einem einzigen Entwurf verbindet. Außerdem werden Entwürfe über eine einzige Kampagne oder Marke miteinander verbunden, wodurch ein Produkt entsteht, das unterscheidbar, nutzbar und effektiv ist. Beachten Sie alle unten aufgeführten Beispiele. Jede Marke ist führend, wenn es um konsistentes und nutzbares Design geht.
1. Dominante und sekundäre Farben und Farbtöne
Es gibt einen Grund dafür, dass es so viele Informationen zur Erstellung großartiger Farbpaletten gibt. Farbe kann einer der wichtigsten visuellen Faktoren sein, die eine Marke mit visueller Behandlung verbinden.
Eine spezielle Farbkennung gibt den Benutzern an, wer Sie auf einen Blick sehen. Denken Sie nur daran, wie einige der größten Marken der Welt - Coca-Cola, Facebook, T-Mobile - durch eine Farbe identifiziert werden. Würden Sie diese Marken überhaupt ohne ihren Unterschriftsfarbton erkennen?
Durch den guten Farbgebrauch können Benutzer auch durch eine Website navigieren und wissen, dass sie sich noch am richtigen Ort befinden. Wenn Sie mit jedem Klick zu einer Seite mit einer neuen Farbpalette gelangen würden, würden Sie fragen, ob Sie an der richtigen Stelle wären?
Um eine großartige Farbpalette zu erstellen, wählen Sie eine dominante Farbe aus und verwenden Sie Konzepte der Farbtheorie, um ein oder zwei sekundäre Farben hinzuzufügen. Dann notieren Sie eine kurze Reihe von Stil- und Verwendungsregeln für jede Farbe und wie sie im gesamten Design verwendet wird. Halten Sie sich an die Regeln und Sie haben Farbkonsistenz. (Bonus: Erstellen Sie eine lustige Sommerfarbpalette.)
2. Größe, Abstand und Position der Typografie
So wie Farbe auf einer Palette mit Stilregeln basieren sollte, muss bei der Typografie dieselbe Behandlung erfolgen. Und einfach für Sie, das Konzept ist das gleiche wie bei Farbe.
- Wählen Sie eine dominante Schrift und Größe aus.
- Wählen Sie sekundäre Schriftarten und -größen.
Es kann etwas komplexer sein als das für die Typografie für das Web, aber Sie haben die Idee, richtig? Wenn es um Webstile geht, sollten Sie dem CSS bestimmte Typbehandlungen, Größe, Abstand und Positionierung so zuordnen, dass jedes Tag (wie h1, h2, h3, body usw.) die richtige Typoption aufruft.
Ein weiterer Typ, der an einem einzigen Ort verwendet wird, beispielsweise die Navigation, sollte in diesem Element konsistent sein. Benutzer werden ziemlich verwirrt, wenn jedes Navigationselement eine andere Schriftart verwendet. Diese Konsistenz gilt für die gesamte Site. Alle ähnlichen Artikel sollten die gleichen Textbehandlungen verwenden.
3. Größe und Beziehungen der Elemente
Wie groß sind die Elemente in Ihrem Design? Sind alle Knöpfe gleich groß? Wie wäre es mit Schlagzeilen und Fotos?
Die Größe der Elemente sollte vom Stil bestimmt werden und bei jeder Verwendung gleich bleiben. (Denken Sie nur daran, wie lustig Ihr Slider aussehen wird, wenn Sie versuchen, Fotos mit unterschiedlichen Formen einzufügen. Das funktioniert nicht.)
Die allgemeine Größe und Beziehung zwischen Elementen hilft Benutzern, Muster zu erkennen und visuellen Fluss zu schaffen. Diese Gemeinsamkeiten schaffen Harmonie und Ausgewogenheit, die ein Design leicht verdaulich machen und die Nutzer engagieren kann.
4. Platz und Verwendungszweck
Ebenso wichtig wie die Größe der Elemente ist der Abstand zwischen ihnen. Es gibt nichts Ablenkenderes als ein Design, bei dem Elemente einfach ohne Organisation oder Regeln auf der Leinwand erscheinen. Einige Fotos überlappen sich, während andere zwischen ihnen viel Platz haben.
Die gängigsten Abstandsregeln lassen sich am besten mithilfe eines Rastersystems festlegen und einhalten. Mit diesen unsichtbaren Linien können Sie bestimmen, wo und wie Elemente platziert werden, sodass ein einzelner Block, vom Text über die Schaltflächen bis hin zu den Bildern, in vollkommene Harmonie gerät.
Denken Sie während des Nachdenkens an den Raum, ob der Abstand sowohl vertikal als auch horizontal konsistent ist. Dies beinhaltet die Betrachtung der Beziehung zwischen gleichen und anderen Elementen. (Es ist in Ordnung, Abstandsregeln für jeden zu haben.)
5. Visuals, die medienübergreifend sind
Markenvisualisierungen wie Bilder und Illustrationen sollten medienübergreifend sein. Unabhängig davon, ob Sie ein Projekt für eine Website oder Broschüre, Plakat oder Social Media entwerfen, sollte sich die visuelle Identität der Marke nicht ändern.
Dies beinhaltet häufig die Verwendung eines gemeinsamen Fotosets. Einige Marken haben detaillierte Regeln für die Verwendung von visuellen Elementen - von Farbüberlagerungen oder Wasserzeichen auf allen Bildern bis zu einem bestimmten Seitenverhältnis für alle Fotos. Unabhängig davon, was Sie Ihren Stil wünschen, ist die Verwendung unabhängig vom Ort wichtig.
Um dies am effektivsten zu erreichen, ist es wichtig, ein großartiges visuelles Deck mit hochwertigen Bildern mit hoher Auflösung zu haben, die Sie verwenden und wiederverwenden können.
6. Benutzermuster, die natürlich funktionieren
Ihr Design muss wie andere ähnliche Designs funktionieren und akzeptierten Benutzermustern folgen. Zu oft möchten Designer mit der Funktionsweise etwas anderes machen. falle nicht in diese Falle
Wenn eine Website oder App oder ein gedrucktes Element wie erwartet funktioniert, können sie problemlos damit interagieren. Sie wissen, was zu tun ist, und das Design wird mit der Durchsicht der Benutzerfreundlichkeit etwas unsichtbar. (Dies ist Ihr eigentliches Ziel als Designer.)
Es gibt vier Arten allgemein akzeptierter Muster, über die man nachdenken muss:
- Inhaltsmuster: Stil und Ton des Inhalts und Ihrer Marke
- Markierungsmuster: HTML und CSS, die Sie für die Gestaltung von Seiten und der gesamten Website benötigen
- Designmuster: Das Aussehen jedes Elements im Design und aller zugehörigen Stile
- Benutzermuster: Wie Benutzer mit Designelementen wie Schaltflächen, Menüs oder Symbolen umgehen
7. Elemente der Benutzeroberfläche, die haften
Dies ist keine klebrige Navigation, aber eine ähnliche Idee.
Alle Interaktions- und Schnittstellenelemente sollten sich auf dieselbe Weise verhalten.
- Links öffnen direkt oder in einem neuen Tab (für jeden Link einen auswählen)
- Knöpfe haben überall die gleiche Farbe
- Die Navigation bleibt am selben Ort und enthält dieselben Optionen
- Fußzeilen und Seitenleisten sollten eine bestimmte Position und Größe enthalten (machen Sie die Fußzeile auf einer Seite nicht zu groß und auf der nächsten Seite zu klein)
- Icons sind erkennbar und machen das, was die Benutzer erwarten
- Anklickbare Elemente sind immer anklickbar (z. B. Fotos, die verlinkt werden)
Bei der Liste handelt es sich um ein Sprungbrett, das alle winzigen Details enthält, die Sie in Bezug auf Klebrigkeit und Benutzerfreundlichkeit berücksichtigen müssen. Denken Sie daran, wenn Sie einem Element erlauben, eine Aktion auszuführen, ist es wahrscheinlich universell.
Fazit
Design-Konsistenz schafft die Struktur, die der Benutzer wünscht. Es schafft auch ein Framework, das die Benutzer verstehen und zur allgemeinen Benutzerfreundlichkeit und Einbindung beitragen.
Es beginnt mit einem Satz von Regeln und Stilvorgaben für jedes Projekt. Selbst wenn Sie alleine arbeiten, erstellen Sie eine Liste mit Regeln, wie ein Projekt Farbe, Typ, Größe, Raum, Elemente der Benutzeroberfläche und Interaktionen verwendet. Dies beschleunigt den Designprozess für Sie und führt zu einem besseren, benutzerfreundlichen Design.