Verbessere Deine Designs Mit Den Prinzipien Closure Und Figure-Ground (Teil 2)

Über Den Autor

Jon war viele Jahre Visual Designer, bevor er den Sprung zum Interaction Design schaffte., Er hat einen master in Mensch-Computer-Interaktion von der DePaul …Mehr aboutJon↬

Haben Sie sich jemals gefragt, wie die Elemente zusammen kommen, um erfolgreiche designs? Es ist kein Zufall, dass überzeugendes Design einfach zu funktionieren scheint., Was die meisten dieser Designs gemeinsam haben, ist die Verwendung von Gestaltgruppierungsprinzipien, um Informationen zu organisieren, die uns helfen, die Beziehungen und Unterschiede zwischen Elementen zu verstehen. Als Designer können wir diese Prinzipien nutzen, um unsere eigene engagierte und erfolgreiche Arbeit zu schaffen.

Beginnen wir mit dem Gestaltprinzip des Schließens.

Nach den universellen Prinzipien des Designs besagt dieses Prinzip, dass wir dazu neigen, eine Reihe einzelner Elemente als ein einziges, erkennbares Muster und nicht als mehrere Einzelteile wahrzunehmen., Die Verwendung von Closure verringert effektiv die Komplexität, indem Elemente auf die wenigsten Teile reduziert werden, die zum Vervollständigen eines Objekts erforderlich sind. Mit genügend Informationen versehen, füllen wir die fehlenden Teile aus, um ein Ganzes zu erstellen. Dies wird durch die Verwendung von positiven und negativen Raum erreicht.

Im folgenden Beispiel vervollständigen unsere Gedanken die Linien zu einem Kreis, obwohl die Form nicht existiert. Positiver und negativer Raum verbinden sich zu unserer Wahrnehmung des Kreises.,

Closure kann verwendet werden, um Objekte oder Muster mit der kleinsten Menge an Informationen wahrzunehmen. Unser Verstand ist so begierig darauf, die fehlenden Informationen auszufüllen, dass dies mit sehr wenigen Elementen möglich ist. Wenn wir jedoch nicht genügend Informationen bereitstellen, um das Muster zu vervollständigen, können wir das Objekt nicht wahrnehmen, und die Schließung schlägt fehl, was die Bildung des Kreises in unseren Köpfen erheblich erschwert. Werfen Sie einen Blick und sehen Sie, ob Sie es in Ihrem Kopf vervollständigen können. Es ist viel schwieriger, nicht wahr?, Wir können es jetzt nicht ganz mit der spärlichen Menge an Informationen zusammenstellen.

Erstellen effektiver Schließung

Die obigen Beispiele sind sehr grundlegende Illustrationen, wie wir Muster wahrnehmen, um Schließung zu bilden. In Wirklichkeit gibt es viele visuelle Elemente, mit denen wir einen effektiven Abschluss bilden können:

• Positiver und negativer Raum. Wie bereits erwähnt, verbinden sich positiver und negativer Raum in der Schließung zu einem Ganzen., Dies kann erreicht werden, indem nach den verborgenen Formen im negativen Raum eines Designs oder innerhalb des Typs gesucht wird. Darüber hinaus kann das Entfernen von Elementen aus dem Vordergrund interessante negative Formen erzeugen und damit ein Design vereinfachen.
• Kontrast. Der Schlüssel zur Schließung ist die Schaffung eines starken Kontrasts zwischen den Vordergrundelementen und dem Hintergrund. Wie immer schafft Schwarz und Weiß den besten Kontrast, aber Sie können auch mit Komplementärfarben für starken Kontrast experimentieren.
• Farbe., Farbe verleiht einem Design nicht nur Leben, sondern kann auch zur Verstärkung von Beziehungen verwendet werden, insbesondere wenn abstrakte Formen zur Darstellung von Formen verwendet werden.

Alle Verschluss-verwendet viele, wenn nicht alle der oben genannten visuellen Elementen. Wenn Sie diese verwenden und mit Ihnen in Ihren Designs experimentieren, können Sie neue Formen entdecken. Schauen wir uns nun die Schließung in der realen Welt an und sehen, wie alles zusammenkommt.

Closure In der Praxis

Mit closure können wir die Elemente reduzieren, die zur Übermittlung visueller Informationen erforderlich sind, wodurch die Komplexität verringert und Designs ansprechender gestaltet werden., Eine der häufigsten Anwendungen von Closure ist die Gestaltung von Firmenlogos, gerade weil Closure ein Design vereinfachen kann, um die Identität einer Marke schnell zu vermitteln.

Unten ist das berühmte Logo zu sehen, das wir als NBC Peacock erkennen. Wenn Sie das aktuelle Logo (rechts) mit dem alten Logo vergleichen, können Sie sehen, dass sie sich nicht stark unterscheiden. Durch die Reduzierung der Elemente und das Arbeiten mit negativem Raum wird das aktuelle Logo jedoch viel einfacher und eleganter., Der Verschluss wird erfolgreich mit eng gruppierten, positiven Formen wie Federn erreicht, wobei unsere Wahrnehmung des Pfauenkörpers durch die Verwendung des negativen weißen Raums in der Mitte entsteht.

Ein weiteres bekanntes Logo, das closure erfolgreich einsetzt, stammt von FedEx., In diesem Logo wird der Verschluss mit negativem Leerraum erreicht, wobei die Teile des Großbuchstabens E und des Kleinbuchstabens x verwendet werden, um den bekannten vorwärts bewegenden Pfeil zu bilden. Der Designer experimentierte mit vielen Designs und zog schließlich die Buchstaben immer näher zusammen, bis er sah, wie sich der Pfeil zwischen e und x bildete. Dies zeigt, dass das Experimentieren mit der Reduktion Ihrer Designs und das Suchen nach den Zwischenräumen fantastische Ergebnisse liefern kann. Die Geschichte hinter der Erstellung des Logos finden Sie in Matthew Mays großartigem Artikel bei Fast Company. Können Sie den Pfeil im Logo sehen?, Sie werden es von nun an nie mehr verpassen!

Die obigen Beispiele sind bekannte Logos, die closure auf etwas offensichtliche Weise verwenden. Es gibt jedoch weniger bekannte Logos, die es subtiler verwenden. Zum Beispiel beschäftigt Houzz die Schließung konzeptioneller. Auf den ersten Blick können die grünen, schwarzen und weißen Formen einem Regal, einem Teil eines Gebäudes oder einem Wandmuster ähneln, was darauf hindeutet, worum es auf der Website geht., Aber ein genauerer Blick verrät auch etwas anderes. Der Wunsch unseres Geistes, die Räume und vollständigen Muster auszufüllen, ermöglicht es uns, die einzelnen Formen zu einem Ganzen zu kombinieren und ein Großbuchstaben-H im dreidimensionalen Raum zu bilden.

Während closure ideal für die Erstellung interessanter Logos ist, kann es auch auf andere Weise funktionieren., Websites können auch positive und negative Leerzeichen bei der Gestaltung ihrer Schnittstellen verwenden, um einen effektiven Abschluss zu erzielen. Unten verwendet das Uncrate-Logo positiven Raum vor einem schwarzen, negativen Hintergrund, um die Buchstaben seines Logos zu bilden und das Branding der Website zu erstellen. Dies ist auch ein gutes Beispiel für Figure-Ground, auf das wir in Kürze eingehen werden.

Die Verwendung von Closure beim Erstellen von Symbolen

Symbole sind nützlich, wenn wir eine Nachricht übermitteln oder ein Konzept auf kleinem Raum verstärken müssen. Sie müssen einfach und auf ihre Grundelemente reduziert sein, um den Menschen zu helfen, ihre Bedeutung schnell zu verstehen. Closure funktioniert gut bei der Erstellung von Symbolen, wobei positiver und negativer Raum verwendet werden, um die Komplexität zu verringern, und gleichzeitig Formen oder Objekte vorgeschlagen werden, die wir als Löcher wahrnehmen, wie in diesen Beispielen auf der Website des Nomen-Projekts.,

Abstract Closure

Closure kann ziemlich abstrakt werden und uns dennoch erlauben, erkennbare Muster zu bilden. Eine meiner Lieblingsanwendungen von Closure ist das Google Doodle., Google verwendet Closure häufig in seinen Kritzeleien und verlässt sich auf unser inhärentes Bedürfnis, die fehlenden Informationen auszufüllen, um ein ganzes Objekt zu erstellen. Google Doodles hängen von unserer Vertrautheit mit dem Google-Logo ab, mit dem wir das Bild unten lesen können, obwohl es sehr abstrakte Formen enthält. Hier hilft Farbe, die Beziehung zwischen jedem Buchstaben des Google-Logos zu verstärken.,

Wie sie sehen können, mit positive und negative raum kreativ, und reduzierung elemente in unsere designs, wir können schaffen einige wirklich interessante designs mit verschluss. Wir können die Notwendigkeit nutzen, die fehlenden Teile auszufüllen, um die Komplexität zu verringern und unsere Designs zu vereinfachen., Als nächstes werden wir uns ansehen, wie wir positiven und negativen Raum nutzen können, um gute Figur-Boden-Beziehungen zu schaffen.

Figur-Boden

Was ist das prinzip der figur-boden? Nach universellen Prinzipien des Designs ist Figur-Boden der Zustand, in dem wir Elemente entweder als Objekte des Fokus oder des Hintergrunds wahrnehmen. Wie Closure funktioniert Figure-Ground durch die Verwendung von positivem und negativem Raum. Figure-Ground existiert in praktisch allem, was wir visuell wahrnehmen, sei es eine Szene, eine Komposition, eine Website, ein Logo oder eine Ikone.,

Figure-ground ist stabil, wenn Objekte vom Hintergrund zu unterscheiden sind und der Hintergrund kein Interesse hat. Stabile Figur-Boden bietet eine Einstellung für Objekte und ermöglicht es uns, die Aufmerksamkeit zu konzentrieren, wo wir es wollen. Zum Beispiel nehmen wir das Bild unten als Kreis auf einem Hintergrund wahr. Der Kreis steht im Mittelpunkt und hält unsere Aufmerksamkeit, während der Hintergrund von geringem Interesse ist. Dieses Beispiel zeigt eine starke Figur-Boden-Stabilität, da die Figur Form hat und als vorne wahrgenommen wird, während der Hintergrund formlos ist und sich hinter der Figur in einer weiteren Tiefe fortsetzt.,

Wenn figure-ground nicht stabil ist, wird wie im folgenden Beispiel eine Wahrnehmungsambiguität eingeführt und die Beziehungen zwischen Elementen werden unklar. In diesem bewusst vereinfachten Beispiel sind Figur und Boden reversibel, was dazu führt, dass wir abwechselnd einen Gegenstand und dann den anderen als Figur und dann den Boden sehen.

Aber, Mehrdeutigkeit ist nicht unbedingt eine schlechte Sache., Dieser Mangel an Stabilität kann zu unserem Vorteil bei der Gestaltung genutzt werden. Eine gezielte Destabilisierung der Figur-Boden-Beziehung kann zu Zwietracht oder Spannung führen und unseren Designs Aufregung und Interesse verleihen. Eine meiner Lieblingsanwendungen dieser Spannung in Figure-Ground ist die Posterserie Criminal Underworld von Simon C. Page. Hier destabilisiert Page bewusst Figur und Boden, indem er das Prinzip gegen sich selbst stellt, während Figur und Boden um unsere Aufmerksamkeit kämpfen, ähnlich wie der Held und Bösewicht im Plakatkampf gegeneinander.,

Gute Figur-Boden-Beziehungen schaffen

Es gibt viele visuelle Elemente, mit denen wir die Figur-Boden-Beziehung in unseren Designs verstärken können. Die Verwendung dieser Elemente kann uns dabei helfen, die Aufmerksamkeit dort zu lenken, wo wir sie möchten, und die Einprägbarkeit einer Website oder eines anderen Designs zu verbessern:

• Contrast., Weiß oder Schwarz, gepaart mit Farbe, wie in den kriminellen Unterweltplakaten zu sehen, schafft einen sehr starken Kontrast. Ebenso eignen sich Komplementärfarben hervorragend zur Kontrastierung. Wenn reine Farben zu intensiv sind, ändern Sie den Wert (wie dunkel oder hell die Farbe ist), um einen effektiveren Kontrast zu erzielen.
• Farbe. Warme Farben, wie Gelb, Orangen und Rot, werden als Annäherung wahrgenommen und können zur Stärkung der Figur verwendet werden. Kühle Farben wie Purpur, Blau und Grün werden als Zurückgehen wahrgenommen und können zur Stärkung des Bodens verwendet werden.
• Größe., Wenn ein großes Element den größten Teil des Bodens ausfüllt, wird es als Figur wahrgenommen. Umgekehrt wird ein kleines Element innerhalb eines großen Bodens als Figur wahrgenommen.
• Position. Elemente, die in unteren Bereichen positioniert sind, werden als Figur wahrgenommen, während Elemente, die in oberen Bereichen positioniert sind, als Masse wahrgenommen werden. Dies spielt mit unserer Wahrnehmung der Entfernung, da wir Objekte wahrnehmen, die sich in unteren Bereichen befinden, um näher an uns zu sein, und Objekte, die sich in oberen Bereichen befinden, um weiter entfernt zu sein.
• Fokus., Elemente, die im Fokus stehen, werden als Figur wahrgenommen, während Elemente, die unscharf, verschwommen, verblasst oder getönt sind, als Boden wahrgenommen werden.

Die meisten guten Figur-Boden-Beziehungen werden mit einer Kombination vieler dieser visuellen Elemente erstellt. Als nächstes schauen wir uns einige Beispiele aus der Praxis an und sehen, wie diese Elemente zusammenarbeiten, um eine erfolgreiche Figur zu schaffen.,

Figure-Ground In der Praxis

Das Beispiel figure-Ground in der obigen Posterserie Criminal Underworld zeigt das Prinzip in einem instabilen Zustand, in dem Figur und Boden um Aufmerksamkeit kämpfen. Instabile Figur-Boden funktioniert gut, wenn es nur wenige Elemente und das Design ist einfach. Dies ist jedoch möglicherweise nicht unbedingt die gewünschte Verwendung des Prinzips bei der Gestaltung von Websites, obwohl dies vom Inhalt und Kontext der Website abhängt. Websites müssen komplexe Informationen vermitteln und dennoch klar und nutzbar sein., Mit stabiler Figurenbasis können wir die Aufmerksamkeit dorthin lenken, wo wir es wollen, und Unklarheiten in der Botschaft vermeiden, die wir zu kommunizieren versuchen.

Schauen Sie sich das folgende Beispiel auf der Apple Music-Website an. Höchstwahrscheinlich wird Ihr Auge auf das Bild des Smartphones gezogen, das zusammen mit der Kopie links davon die Figurenelemente sind. Während der Hintergrund um unsere Aufmerksamkeit zu kämpfen beginnt, werden die Figurenelemente durch die Verwendung mehrerer visueller Elemente verbessert. Zunächst wird Figur durch große Kopie und die große Größe des Smartphones gestärkt., Die Positionierung des Smartphones am unteren Bildschirmrand hilft auch dabei, die Figur nach vorne zu bringen. Die Figur wird weiter verbessert, indem die Videoanimation im Hintergrund zurückgetönt wird, wodurch der Boden zurückgeht. Schließlich bietet der Kontrast zwischen dem hellen Bildschirm und dem dunklen Hintergrund eine gute Trennung zwischen Figur und Boden.

Im nächsten Beispiel von Nayas Website ist die Größe der Figur das stärkste visuelle Element, mit dem gute Figurenbilder erstellt werden. Hier nehmen wir die Frau (und ihren sehr großen Hut!) sobald sie den Großteil des Bodens ausfüllt. Darüber hinaus hilft die Verwendung einer coolen Farbe im Hintergrund sowie die clevere Verwendung überlappender Elemente dabei, den Hintergrund zurückzutreten. Schließlich gibt es wie beim Apple Music-Beispiel einen guten Kontrast, der den Vordergrund vom Hintergrund trennt.,

Schließlich ist der hervorragende Kontrast zwischen Figur und Boden die Stärke der Website der R/m Design School. Hier zeigt das Menü starken Kontrast, mit hellen Farben und Schwarz, um Figur von Boden zu trennen. Darüber hinaus wird warme Farbe verwendet, um die Wahrnehmung der auf uns zukommenden Figur zu stärken. Wollen Sie nicht nur erreichen und greifen diese roten Fliesen!,

Schlussfolgerung

Wenn Sie verstehen, wie closure und figure-ground verwendet werden, können Sie starke Beziehungen und Unterschiede zwischen Elementen in Ihren Designs aufbauen.,

• Betrachten Sie den negativen Raum genauso wie den positiven Raum, um interessante Formen zu entdecken;
• Spielen Sie mit dem Entfernen von Elementen im Vordergrund herum und verwenden Sie stattdessen den negativen Raum, um Formen zu bilden;
• Schließlich mischen Sie visuelle Elemente wie Kontrast, Farbe, Größe, Position und Fokus, um sowohl stabile als auch instabile Figur-Boden-Beziehungen zu erstellen.

Nachdem Sie nun wissen, wie Sie diese beiden Prinzipien in Ihrer Arbeit anwenden können, erstellen Sie Ihre eigenen ansprechenden und erfolgreichen Designs!,

Im dritten und letzten Teil dieser Serie konzentrieren wir uns auf die Prinzipien der Fortsetzung und des gemeinsamen Schicksals, bei denen sowohl implizite als auch animierte Bewegungen erforderlich sind, um Beziehungen herzustellen.

Ressourcen und gute Lesevorgänge

• „Gestaltprinzipien“ auf Scholarpedia.
• Universal Principles of Design, revised and updated: 125 ways to enhance usability, beeinflussen Wahrnehmung, erhöhen appeal, make better design decisions, and teach through design by William Lidwell, Kritina Holden und Jill Butler. Rockport Pub, 2010.,
• Informationsvisualisierung: perception for design von Colin Ware. Elsevier, 2012.

• Design-Prinzipien: die Visuelle Wahrnehmung Und den Prinzipien Der Gestalttherapie
• Verbindung Und Trennung von Elementen, die Durch Kontrast Und Ähnlichkeit
• Kompositorische Gleichgewicht, Symmetrie Und Asymmetrie
• Wie Verbessern Sie Ihr E-Mail-Workflow Mit Modulare Design

(ml, da, og, jb, il)