Verwendung der Art und Weise, wie Menschen visuelle Informationen im Webdesign verarbeiten
Die Gestaltung von Websites und Benutzeroberflächen ist in den letzten Jahren wesentlich einfacher geworden. Es gibt so viele Tools, die Sie verwenden können, sodass Sie bei der Entwicklung von Benutzeroberflächen nicht ganz von vorne anfangen können (siehe unsere neue Benutzeroberflächen-Compilation). Aber ich bin nicht hier, um über den Tod von Webdesign zu streiten.
Stattdessen werde ich versuchen, die grundlegenden, auf Psychologie basierenden Konzepte hinter der Fülle visueller Design-Tools zu erklären (von den einfachsten CSS-Kits bis zu den fortgeschrittensten Premium-Themen).. Du wirst sie nicht nur benutzen, sondern auch verstehen. Ich bin zuversichtlich, dass dies auch die erfolgreiche Modifizierung bestehender Anlagen erleichtern wird.
Schauen wir uns einmal an, wie der menschliche Geist und Körper bei der Verarbeitung visueller Informationen funktioniert und wie dieses Wissen in das Design für das Web interpretiert wird.
Die Prinzipien der perzeptuellen Organisation
Nach der Gestaltpsychologie, das Ganze ist anders als die Summe seiner Teile. Anhänger dieser Denkschule behaupten, dass es einige Prinzipien darüber gibt, wie der menschliche Verstand Gegenstände formuliert. Das sind nicht einfach nur Theorien, sondern praktische Fakten über das Organisieren visueller Gruppen.
Nachfolgend finden Sie einige der Gesetze und die bekannteren Verwendungen dieser Prinzipien. Sie können sogar neue Ideen für Ihr nächstes Design finden.
Gesetz der Ähnlichkeit
Der erste Grundsatz besagt das kleine objekte, die ähnlich sind, werden als gruppe wahrgenommen, anstatt mehrere Instanzen des gleichen kleinen Objekts. Ähnlichkeit kann auf Form, Farbe, Schattierung oder einer anderen Qualität basieren. Dieses Prinzip ist die Basis von Musterdesign sowie viele geometrische und minimalistische Logo-Designs.
Zum Beispiel zeigt dieses Bild ein kreisförmiges Logo anstelle von separaten Dreiecken. Die dreieckige Form am unteren Ende des Adlers lässt uns denken, dass die Form auch Teil des Bildes ist.
Sie haben dieses Gesetz wahrscheinlich auch unbewusst angewendet, wenn Sie einige erstellen, Inhaltskästen gleicher Größe für Ihre Website. Wenn Sie zeigen möchten, dass bestimmte Inhaltselemente die gleiche Bedeutung haben oder ähnliche Informationen teilen, Nur für diesen Zweck eine bestimmte Form erstellen. Auf diese Weise verknüpft Ihr Benutzer diese bestimmte Form sofort mit einem bestimmten Informationsbereich.
Gesetz der Nähe
Nach diesem Gesetz Objekte, die näher sind zu einander sind als aus derselben Gruppe betrachtet. Die gleichen Quadrate erzeugen, wenn sie in unmittelbarer Nähe nebeneinander gerendert werden, ein Gefühl der Gruppierung.
Dieses Prinzip wurde in letzter Zeit in großem Umfang genutzt, insbesondere beim Arbeiten mit Inhaltsschleifen, z.B. auf Blogs und Webshops.
Sie können den Titel, das vorgestellte Bild, die Metadaten und den Ausschnitt sofort auch ohne Ränder oder Hintergründe zusammenfassen. Möglicherweise können Sie unnötige Linien und Farben von Ihrem Design entfernen, um es minimalistisch und dennoch vollständig verständlich zu machen.
Zur Vereinfachung zitiere ich auch Wikipedia, in der es heißt:
Gesetz der guten Form
Das Gesetz, das auch als Pragnanzgesetz oder Gute Gestalt bekannt ist, besagt, dass wir dazu neigen, Objekte zusammenzufassen, wenn sie diese sind bilden Sie ein Muster, das einfach, regelmäßig und ordentlich ist. Unser Geist versucht komplexe und wahrnehmungsmäßig schwierige Formen in viele Gruppen von einfach verständlichen Formen zu unterteilen; das führte zum Wichtigkeit der Prägnanz.
Dies ist auch einer der möglichen Gründe für den Erfolg von gitterbasiertes Design und dies machte tisch- und rahmenbasierte Webstrukturen (zum Glück Dinge des dunklen Zeitalters des Designs) so beliebt.
Wenn Sie sich an dieses Prinzip halten, werden Sie wahrscheinlich keine Website mit komplexen Formen von Inhaltsblöcken erstellen, die über die anderen oben genannten Gesetze miteinander verbunden wären. Trotzdem kannst du Gruppieren Sie Ihre Objekte auf interessante Weise, z.B. in rauten- oder drachenform, da diese noch als ordentlich und prägnant wahrgenommen werden.
Farbtheorie, Wahrnehmung und Verwendung
Farbwahrnehmung und Farbwahrnehmung ist weitgehend subjektiv beyogen auf wie die Gehirne der Zuschauer reagieren zu den Lichtwellen, die von bunten Objekten oder Formen reflektiert werden. Die Regel ist, dass verschiedene Personen, auch ohne Sehbehinderung, dasselbe Objekt in einer anderen Farbe sehen (Sie können sich an das Kleid erinnern).
Farbeigenschaften
Noch gibt es drei objektive Eigenschaften der Farbe; Farbton, Wert und Intensität.
Farbton ist der Name der Farbe, die auf einem Farbkreis oder in einem Regenbogen angegeben ist. Es gibt sechs (oder zwölf, je nachdem mit wem Sie sprechen) Grundfarben: Rot, Orange, Gelb, Grün, Blau und Violett.
Gelb, Blau und Rot sind primär, orange, grün und violett sind sekundär Farbtöne; es gibt auch Tertiär- Farbtöne, die die direkte Mischung aus zwei primären und sekundären Farbtönen sind (z. B. Gelbgrün oder Rotviolett).
Wert ist die Helligkeit oder Dunkelheit der Farbe, die als bezeichnet wird hochwertig für helle Farben oder niedriger Wert für dunkle Farben.
Intensität bezieht sich auf Helligkeit oder Dunkelheit einer Farbe; Dies bedeutet, dass eine Farbe mit demselben Farbton und demselben Wert immer noch gedimmt oder aufgehellt werden kann, indem die Intensität geändert und verschiedene Farbausgänge erzeugt werden.
Die höchste Intensität jeder Farbe ist der Farbton, den sie auf dem Farbkreis zeigen (siehe unten), während die niedrigste Farbe die Farbe Grau ist.
Farbkontraste
In Bezug auf die oben genannten Gesetze der Ähnlichkeit, bilden die Köpfe der Wahrnehmenden Gruppen von kleinen Objekten, die sie auf der Grundlage ähnlicher und unterschiedlicher Eigenschaften - häufig von Farben - betrachten.
Wenn Sie Ihre Farbpalette für Ihre Website auswählen, insbesondere wenn Sie sich für einen minimalistischen Ansatz entscheiden oder einen textintensiven Inhaltsbereich entwerfen, z. Blogs oder Anzeigen sollten Sie Achten Sie auf unterschiedliche Farbkontraste Das könnte Ihnen helfen, die richtigen Farbwerte für das beste Ergebnis zu finden.
Laut Johannes Itten gibt es 7 Farbkontraste, obwohl ich nur 3 erwähnen möchte.
1. Kontrast des Farbtons
Gelb, Rot und Blau bei voller Intensität sind direkte und lebendige Kontraste. Sekundäre Farbtöne machen die Unterscheidung weniger scharf, funktionieren jedoch genauso wie Tertiärfarbtöne, obwohl beide keine Farbtöne erzeugen tolle Ergebnisse wie bei den Primärfarben.
2. Komplementärer Kontrast
Zwei Farben stehen im gegensätzlichen Kontrast, wenn sie zusammen gemischt ein neutrales Grau erzeugen. Diese werden auch genannt seltsame Paare. Wenn sie benachbart sind, verbessern sie die Lebendigkeit und Intensität, während sie sich miteinander vermischen. Jede Farbe hat eine und nur eine Ergänzung; Auf dem Farbkreis liegen sich die Paare diagonal gegenüber.
3. Hell-Dunkel-Kontrast
Wenn Sie mit einer einfarbigen Website experimentieren möchten, verschiedene Werte desselben Farbtons verwenden kann großartige Ergebnisse produzieren. Oft im minimalistischen Webdesign verwendet, können Sie auf der Grundlage des Hell-Dunkel-Kontrasts auch großartige Ergebnisse erzielen, wenn Sie Ihrem Benutzer Farboptionen für das Design anbieten möchten. Dieser Kontrast wird auch für das Graustufen-Design verwendet.
Wenn Sie die restlichen 4 Farbkontraste verfolgen möchten, finden Sie sie hier.
Paletten erstellen und auf Kontraste prüfen
Die Theorie zu kennen ist großartig, die Interpretation Ihrer Ideen ist etwas ganz anderes. Sie sollten sich jedoch keine Sorgen machen, das Web bietet eine großartige Unterstützung für Ihre Bedürfnisse beim Farbjonglieren. Es gibt eine Vielzahl von Tools, mit deren Hilfe Sie benutzerdefinierte Farbmuster auf der Grundlage von Farbkontrastregeln erstellen können, z. Paletton oder Adobe Kuler.
Für Web-Zwecke sollten Sie die von webAIM auf der Website von Jonathan Snook ausgewählten Kontraste überprüfen oder eine Instanz des Color Contrast Analyzer von The Paciello Group hier herunterladen.
Fazit
Wenn Sie mit einem neuen Thema arbeiten oder vorhandene ändern, denken Sie an die Prinzipien der Wahrnehmung, um Ihren Inhalt zu organisieren, und denken Sie daran, die Farbregeln zu beachten, wenn Sie Ihrem Design die endgültige Form und den Farbton geben.
Anmerkung des Herausgebers: Dieser Gastbeitrag wurde für Hongkiat.com von geschrieben Marton Fekete. Marton ist ein ungarischer Website-Entwickler, der kürzlich an WordPress gebunden ist. Er ist ein Redesign-Enthusiast und freiberuflicher Content-Autor, der in seiner Freizeit gerne RPGs spielt.
