Share
Heute werfen wir einen Blick auf ein Designprinzip, das für den Erfolg eines Webdesigns eine entscheidende Rolle spielt: Unity. Wie bei vielen entworfenen Elementen auf der Welt kann auch die Einheit das Design einer Website beeinflussen oder verhindern. Eine gut "einheitliche" Site fühlt sich natürlich, organisch und nahtlos an; Wo ein Ort, dem die Einheit fehlt, sich unzusammenhängend, diskontinuierlich und discombobuliert fühlen kann (mit anderen Worten, er fällt nur visuell auseinander). Lesen Sie weiter, um mehr zu erfahren!
Einheit ist ein interessantes Konzept. Wenn wir einen Blick auf die technische Definition werfen, gibt es einige, die im Zusammenhang mit Webdesign gelten können. wie "der Zustand des Zusammenseins oder des Zusammenseins als Ganzes" und "Harmonie oder Vereinbarung zwischen Menschen oder Gruppen". Konkret können wir jedoch eine Definition betrachten, die für dieses Szenario gilt, und zwar nach den goldenen Regeln guten Webdesigns: "der Zustand der Bildung eines vollständigen und ansprechenden Ganzen".
Unity ist sehr wichtig, da dadurch eine einheitliche Marke und Identität für Ihre Website geschaffen wird. Es stellt eine Verbindung zwischen Ihren Elementen dar, so dass die Benutzer problemlos zwischen diesen Elementen und auch zwischen den verschiedenen Seiten Ihrer Website fortschreiten können. Grundsätzlich schafft der Begriff der Einheit eine starke Beziehung zwischen Elementen, so dass der Benutzer sie als eins und nicht als Gruppe wahrnimmt.
Denk darüber so. Wenn Sie in einem aus Ziegeln gebauten Haus wohnen, sagen Sie nicht "Ich wohne in einem Haufen Ziegelsteine". Stattdessen sagen Sie "Ich wohne in einem Haus". Das liegt daran, dass Sie eine Gruppe verschiedener Elemente (nämlich die Ziegelsteine) haben, die als Haus vereint sind, und die Menschen die Struktur als ein Element betrachten einzelnes Gebäude Dank der Verbindungen und starken Beziehungen zwischen den (wörtlichen) Bausteinen.
Dasselbe gilt für viele Dinge in der Natur. Betrachte das Blatt rechts. Es enthält Millionen von Zellen und anderen Bausteinstrukturen, aber die meisten Leute halten es nur für ein Blatt.
Unity hält Ihr Design sowohl visuell als auch konzeptuell als Struktur zusammen. Es fügt Organisation hinzu und erleichtert die Reise des Benutzers über Ihre Webseite, da er nicht jedes Element einzeln verarbeiten muss. Dies hilft indirekt, den Inhalt herauszuschieben, und der Benutzer kann sich auf die Hauptnachricht der Webseite konzentrieren.
Es gibt viele Faktoren, die zu einer Einheit innerhalb einer Webseite beitragen. Bevor Sie jedoch versuchen, eines davon anzuwenden, sollten Sie sicherstellen, dass Sie verstehen, was das Hauptziel des Designs ist. Der Zweck des Designs sollte durch das einheitliche Design unterstützt werden, das alles sichtbar vernetzt und leichter wahrnehmbar macht.
Lassen Sie uns nun ein wenig mehr erklären, wie jeder dieser Faktoren verwendet werden kann, um eine starke Beziehung zwischen Elementen herzustellen.
Wie wir bereits festgestellt haben, kann Farbe eine großartige Möglichkeit sein, eine Verbindung zwischen Objekten herzustellen. Fast alles hält sich an ein Farbschema - Website oder nicht -, da es eine Beziehung schafft, insbesondere wenn es in Verbindung mit einem Produkt oder einer Nicht-Web-Entität verwendet wird. Zum Beispiel verwendet die Coca-Cola-Website (siehe unten) die Hauptfarben Rot und Weiß, genau wie das Flaggschiff-Produkt. Daher kann unsere Verwendung des Produkts aufgrund der Farbkonsistenz sofort mit der Website verknüpft werden.
Einheit durch Farbe lässt sich auch dadurch erzeugen, dass Sie sicherstellen, dass Sie in Ihren Designs einem definierten Farbschema folgen. Wenn Sie in dieser Hinsicht nicht konsistent sind, führt dies zu einem Design, das sich losgelöst fühlt, weil einer der größten Einflüsse auf eine visuelle Verbindung fehlt. Wir können sogar so weit gehen und sagen, dass Sie Ihrer Einheit schaden können, wenn Ihre Wahl nicht von Ihrem Produkttyp abhängt, z. B. wie grün die Finanzierung ist.
Wiederkehrende Elemente, die identisch aussehen, bilden eine Verbindung, da Ihr Gehirn denkt: "Hey, ich habe das schon mal gesehen!". Es schafft Vertrautheit innerhalb des Designs, so dass Ihre Benutzer nicht verpflichtet sind, diesen bestimmten Teil Ihrer Website erneut zu verarbeiten. Es verbindet die Seiten durch ihre Ähnlichkeit miteinander, so dass Ihr Hauptaugenmerk auf dem Inhalt und der Nachricht liegt, die Sie weitergeben möchten.
Natürlich ist die Wiederholung von Elementen nicht die einzige Methode, um in Ihrem Entwurf Einheit zu schaffen. Durch die Verwendung ähnlicher Faktoren (wie Farbe oder Typografie) können die Elemente Ihres Designs miteinander verbunden werden, da sie ähnlich aussehen. Wenn Sie dasselbe Farbschema verwenden, kann derselbe Rahmenstil oder dieselbe Schriftart die Seiten oder Objekte in Ihrem Design anfügen.
Zum besseren Verständnis betrachten wir eine Analogie. Wir können die Wiederholung aus einer anderen Perspektive betrachten: Viele schädliche Websites replizieren das Design einer beliebten Website, sodass sie dem Benutzer wie eine andere Seite eines Dienstes erscheint, die sie täglich verwenden. Ein gefälschter Facebook-Anmeldebildschirm repliziert das Farbschema und das Layout von Facebook.com, so dass es für den unschuldigen Benutzer wie eine offizielle Seite des sozialen Netzwerks erscheint. Ungebildete Benutzer denken nicht zweimal darüber nach, da ihr Gehirn nicht gezwungen ist, diese bestimmten Elemente auf der Seite erneut zu verarbeiten.
Die konsistente Ausrichtung trägt zur visuellen Einheit bei innerhalb ein Element. Wenn Sie um eine gemeinsame Achse entwerfen, werden die Elemente miteinander verbunden. Eine Reihe von Absätzen mit derselben Ausrichtung sehen aus, als wären sie Teil eines Artikels, nicht nur verschiedene Textteile, die zusammengeworfen werden, und wirken am Ende organisiert und sauber positioniert.
Mehrere Ausrichtungen erfordern nur mehr Aufwand, um eine Verbindung herzustellen, und es ist einfach zu viel, um Zeit zu sparen.
Bedenken Sie, wie ein Raster auch bei der Ausrichtung eine Rolle spielen kann. So einschränkend ein Raster für einen neuen Designer sein mag, es bietet eine solide Grundlage für die Ausrichtung einer Vielzahl von Elementen auf ein einzelnes Raster. Betrachten Sie die Squarespace-Website unten:
Beachten Sie, wie das einfache dreispaltige Raster eine Seite voller Informationen in eine ordentlich gestaltete, gut ausgerichtete Seite umwandelt, die sich anfühlt einheitlich. Nicht schlecht, richtig?
Nähe ist ein weiteres Konzept, das zur Gesamteinheit Ihres Designs beiträgt. Wenn Sie Elemente näher aneinander drücken, werden sie leichter als eins aufgenommen. Bei einem Versuch, eine Analogie zu erstellen, konnte ich nur an Folgendes denken: Wenn Sie auf einem Feld einen Haufen Schafe zusammen hatten, könnten sie Herde genannt werden. Wenn sie jedoch auf verschiedenen Gebieten stationiert waren, erkennen Sie sie möglicherweise nicht sofort als Teil desselben Mobs (und ja, das ist ein korrekter Sammelbegriff für Schafe). Eine passendere Analogie wäre es vielleicht, zwei Leute anzusehen, die die Straße hinunter wachten, lachen und miteinander reden. Aufgrund ihrer Nähe zueinander können wir vermuten, dass sie eine Art Beziehung haben.
Da wir dies auf das Webdesign anwenden, ist es nicht zu unterschiedlich. Je näher die Elemente zusammen sind, desto stärker ist die Beziehung, die der Benutzer erkennt, und desto besser ist die Einheit, die er schafft. Wenn wir für einen Moment zurücktreten und erkennen, dass alle Einheit wirklich die Interaktion zwischen Elementen bedeutet, können wir erkennen, dass eine stärkere Beziehung reibungslos mit der Ebene der Interaktion und damit auch der Einheit korreliert.
Wir haben hier bei Tuts + einen großartigen Artikel über die visuelle Ausrichtung und wie sie einen Entwurf beeinflussen kann. Kurz gesagt ist es die Theorie, dass wir eine bestimmte Richtung eines Nutzers über eine Webseite beeinflussen können, indem wir unseren Inhalt auf dieses Ziel abstimmen. Bis zu einem gewissen Grad können wir die visuelle Ausrichtung in diesem Szenario nutzen, um Benutzer dazu zu bringen, auf natürliche Weise zu einem anderen Element zu gelangen.
Ich schiebe es hier vielleicht ein bisschen vor, aber durch diese Art der Manipulation können wir die Elemente einer Seite zusammenschieben, um stärkere Bindungen zu schaffen, sodass Sie nahtlos zwischen den einzelnen Seiten gleiten, aber alle Bereiche treffen, die der Designer Ihnen wünscht sehen. Diese Beziehung kann im Kontext verwendet werden, um die Aufmerksamkeit des Benutzers auf eine andere Geschichte auf Ihrer Webseite zu lenken oder möglicherweise eine Seite weiterzulesen. Sie können das Konzept verwenden, um natürlich unbewusst jemanden dazu anzuregen, mit dem Tweet-Button zu suchen und mit ihm zu interagieren, oder mit dem "Add to Cart" -Knopf.
Konsistenz in Ihrem Webdesign ist ein Grundprinzip, das zur Einheit beiträgt. Eine Fußballmannschaft würde nicht in Hemden mit einer anderen Farbe pro Spieler spielen. Stattdessen sind sie als Team mit einem einzigen Design vereint, das ihre Marke (oder in diesem Fall ein Team) repräsentiert..
Konsistenz wird erreicht, indem versucht wird, den Stil ähnlicher Elemente beizubehalten, und bezieht sich auf Themen wie Farbe, da sie die Faktoren sind, die eine erfolgreiche Konsistenz erzeugen. Um dies zu erreichen, gibt es nicht viel zu tun, außer sich an ein Schema in Ihren Elementen zu halten.
Einheit bewirkt, dass sich die Dinge miteinander verbunden fühlen, indem sie sie so aussehen lassen, wie sie sein sollten. Eine Website ist eine Website, keine Navigationsleiste und eine Seitenleiste sowie ein Logo und ein Teil des Inhalts. Nein, stattdessen besuchen wir eines: eine Website.
Wenn wir jedoch zu viele Farben und Schriftarten haben oder die Elemente weggedrückt werden oder sich die Ausrichtung in Ihrem Text unterscheidet, sind die Bindungen gebrochen und es fühlt sich nicht mehr verbunden an. Sie können jedoch fragen, warum mein Design vereinheitlicht werden muss. Einfach ausgedrückt bedeutet dies, dass der Benutzer nicht jedes Element oder jede Seite jedes Mal bearbeiten muss, wenn ein neues Element angezeigt wird, da es erkennbar ist. Es verbessert auch die Reise über eine Seite, da das Menü nicht so aussieht, als befände es sich in einem anderen Bereich als der Inhalt.
Accentsconagua