Über Den Autor
Steven Bradley ist Autorin von Design-Grundlagen: Elemente, Attribute, & Grundlagen und CSS-Animationen und Übergänge für das Moderne Web., Wenn nicht …Mehr aboutSteven>↬
- 10 min lesen
- Inspiration,Design,Kreativität,Design Principles
- Saved for offline reading
- Share on Twitter, LinkedIn
– Design ist die Anordnung der beiden Formen und Raum. Um effektiver mit dem Raum zu arbeiten, müssen Sie sich dessen bewusst werden und lernen, es zu sehen — lernen, die Formen zu sehen, die der Raum bildet und wie der Raum kommuniziert. Dies ist der zweite Teil einer Reihe von Designprinzipien für Anfänger. Der erste Teil behandelte eine Einführung in gestalt; Der Rest der Serie (einschließlich dieses Beitrags) wird auf diesen Gestaltprinzipien aufbauen und zeigen, wie viele der grundlegenden Prinzipien, mit denen wir als Designer arbeiten, dort ihren Ursprung haben.,
Die Figur-Boden-Beziehung
Das Gestaltprinzip, das am meisten für den Raum gilt, ist das von Figur-Boden. Alles in einem Design von Ihnen wird als das eine oder andere gesehen, und die Beziehung zwischen ihnen schließt sich gegenseitig aus. Beides kann nur in Bezug auf das andere wahrgenommen werden, und es ist unmöglich, eines zu ändern, ohne auch das andere zu ändern.
Die Figur-Boden-Beziehung ist ebenfalls komplementär. Figur und Boden können sich gegenseitig verbessern oder beeinträchtigen, und die Organisation der beiden in Beziehung zueinander ist einer der wichtigeren Aspekte des Designs., Es legt einen Kontext fest, wie Ihr Design kommuniziert und wie es interpretiert wird.
“ Leerzeichen sind als aktives Element zu betrachten, nicht als passiver Hintergrund.“
— Jan Tschichold
Im dritten Panel wurden zwei der schwarzen Linien entfernt. Dies aktiviert den Raum, so dass es scheint, oben auf dem grauen Feld zu sitzen., Der Boden ist zur Figur geworden und verleiht dem Design mehr Tiefe.
Es gibt drei Arten von Figur-Boden-Beziehungen:
- Stabil (oben links)
Es ist klar, was Figur und was Boden ist. Das eine oder andere dominiert normalerweise die Komposition. - Reversibel (über der Mitte)
Figur und Boden ziehen gleichermaßen die Aufmerksamkeit des Betrachters auf sich., Dadurch entsteht Spannung, wodurch einer den anderen überholen kann, was zu einem dynamischen Design führt. - Mehrdeutig (oben rechts)
Elemente können sowohl Figur als auch Boden gleichzeitig erscheinen. Sie bilden ebenso interessante Formen, und der Betrachter muss seinen eigenen Einstiegspunkt in die Komposition finden.
Je nachdem, welche Beziehung Sie aufbauen und wie Sie Figur und Boden in Einklang bringen, leiten Sie das Publikum an, verschiedene Teile des Designs zu betrachten und zu interpretieren, was sie in verschiedenen Kontexten sehen.,
Figure-Ground ist nicht das einzige Gestaltprinzip, bei dem der Raum eine herausragende Rolle spielt. Zwei andere sind diese:
- Proximity
Proximity verwendet den Raum, um Elemente zu verbinden und zu trennen, indem einige Elemente in den Raum eingeschlossen werden. Ein Beispiel, das wir für selbstverständlich halten könnten, sind Textabsätze auf der Seite. Der Abstand zwischen Absätzen ist größer als der Abstand zwischen Textzeilen innerhalb eines Absatzes. - Closure
Dies nutzt den Raum als Lücken zwischen den Elementen. Zuschauer füllen die Lücken mit ihren eigenen Informationen aus, um ein Ganzes aus den Teilen zu vervollständigen. Zu viel Platz und kein Schließen tritt auf., Zu wenig Platz und kein Verschluss ist erforderlich. Nur das richtige Gleichgewicht zwischen Raum und ausgefülltem Raum aktiviert den Raum und führt zum Schließen.
Raum Als Design-Element
Denken über Musik für einen moment. Wenn jede Note oder jeder Akkord gleichzeitig gespielt würde, hätten Sie keine Musik. Sie hätten Lärm. Musik tritt auf, wenn Klänge gegen die Stille kontrastiert werden. Das Variieren des Klangmusters und der Stille erzeugt Rhythmus und Melodie., Ohne die Stille gibt es keine Musik.
Space führt die gleiche Funktion visuell aus. Es gibt positiven Elementen Raum zum Atmen. Es gibt dem Auge die Freiheit, sich durch ein Design zu bewegen und die gesuchten Elemente zu entdecken. Das Positive wird nur im Gegensatz zum Negativen gesehen. Ohne Platz haben Sie kein Design. Sie haben visuelle Geräusche.
Wenn Lärm nicht das ist, was Sie zu kommunizieren versuchen, lehnen Sie sich in Richtung Raum. Menschen beschweren sich weniger über zu viel Platz als über zu wenig.,
Der Raum kann Folgendes tun:
- Stellen Sie Kontrast, Betonung und Hierarchie her;
- Erzeugen Sie Drama und Spannung;
- bieten Sie visuelle Ruhe zwischen Elementgruppen.
Wie die Figur-Boden-Beziehung impliziert, haben Sie nur dann Platz, wenn etwas darin vorhanden ist. Vor dem Hinzufügen positiver Elemente ist der Raum undefiniert. Die Figur-Boden-Beziehung muss hergestellt werden, bevor der Raum existieren kann und seine Kommunikation beginnt.
Eine der wichtigsten Funktionen des Raums ist die Verbesserung der Lesbarkeit und Lesbarkeit., Makro-Raum macht Text einladender. Micro-Space macht es lesbarer.
- Mikroraum
Dies ist Raum innerhalb von Elementen in einer Gruppe. Es ist der Raum zwischen Buchstaben, Wörtern und Absätzen. - Makro-Raum
Dies ist der Raum zwischen den wichtigsten Elementen. Es trennt Elemente oder Gruppen von Elementen und bietet Wege für das Auge zu folgen und Orte zwischen den Elementen ruhen.
Der Raum korreliert mit der Qualität. Mehr Platz bringt weniger Elemente oder eine Seltenheit von Elementen mit sich. Vergleichen Sie High-End-und Discounter., Welcher hat normalerweise mehr Platz im Inneren und welcher packt Produkte in jedes verfügbare Feld? Was kommuniziert der Raum mit Ihnen?
Der Raum kann auch andere Attribute als Qualität vermitteln, wie:
- Raffinesse,
- Einfachheit,
- Luxus,
- Sauberkeit,
- Einsamkeit,
- Offenheit.
Sie verschwenden Platz, wenn Sie es nicht berücksichtigen. Sie können Platz verschwenden, indem Sie ihn überfüllen. Sie können Platz verschwenden, indem Sie ihn in Elemente eines Designs einfangen und nicht zulassen, dass er sich mit einem anderen Raum im Design verbindet.,
Design ist letztlich eine Anordnung von Formen, und das schließt die Formen ein, die durch den Raum gebildet werden. Haben Sie keine Angst, Platz zu nutzen. Betrachten Sie es als ein wichtiges Designelement unter Ihrer Kontrolle.
Ein Paar Beispiele für Speicherplatz auf Websites
Um den Speicherplatz besser nutzen zu können, müssen Sie sich dessen zunächst bewusst werden. Lernen Sie, Raum in verschiedenen Designs zu erkennen. Beachten Sie die Form, die es bildet, und denken Sie darüber nach, was der Raum kommuniziert. Schauen wir uns zu diesem Zweck das Design einiger Websites an und beachten Sie, wie Speicherplatz genutzt wird.,
Old Guard
Das Design von Tom Johnsons Old Guard verwendet viel Leerraum und gibt Text und anderen Elementen Raum zum Atmen. Es gibt keinen Fehler, was Figur und was Boden ist.
Informationen sind enthalten und durch Leerzeichen getrennt (erinnern Sie sich an das Prinzip der Nähe), wobei Gruppen von Elementen unterschieden werden., Sie können leicht erkennen, wo ein Beitrag endet und der nächste beginnt, nur durch den Raum zwischen ihnen.
Der Hauptinhalt ist etwas außerhalb der Mitte auf der Seite, mit großzügigem Platz auf beiden Seiten. Dieser Raum wird gelegentlich durch Elemente unterbrochen, wodurch sowohl der Raum als auch die unterbrechenden Elemente aktiviert werden. Dies hilft, die Aufmerksamkeit auf den Bereich und vor allem die Elemente innerhalb zu ziehen.
Herokus Staus Page
Das Bild unten zeigt einen Teil der Statusseite für Heroku als größtenteils Leerzeichen., Ich habe die Website zufällig an einem besonders guten Tag besucht, weil zusätzliche positive Elemente mehr gemeldete Vorfälle auf der Plattform bedeuten würden. Hier bedeutet mehr Leerraum einen besseren Service.
Beachten Sie, dass der Leerraum nicht weiß sein muss. Während die Seite übermäßig großzügig mit Platz ist, ist es unwahrscheinlich, dass Sie sich darüber beschweren, dass es zu viel davon gibt., Nur wichtige Informationen — in diesem Fall Statusaktualisierungen und Berichte über Vorfälle-unterbrechen den Raum.
Einführung des Romans
Der Raum an der Spitze der Einführung des Romans ist asymmetrisch und aktiv. Beachten Sie, wie der große Platzblock auf der linken Seite Ihr Auge direkt zum Inhalt führt. Wenn Sie auf die Website klicken und von oben nach unten scrollen, sehen Sie, dass der Speicherplatz auch zum Trennen und Gruppieren von Informationsblöcken verwendet wird.
Dünne Lichtlinien werden auch verwendet, um diese Blöcke zu gruppieren und zu trennen. Beachten Sie beim Anzeigen der Website, dass sich die Linien nicht immer berühren, sodass der Raum um sie herum fließen und eine Verbindung zu einem anderen Raum hergestellt werden kann. Dies verhindert, dass der Raum gefangen wird.
Elliot Jay Stocks
Die Website von Elliot Jay Stocks sollte Ihnen allen bekannt sein, da er hinter dem Design dieses steht. Asymmetrischer Raum auf Elliots Website führt wieder zu aktivem Raum.,
Das große Bild oben auf dieser Seite könnte möglicherweise als temporärer Block für den Zugriff auf den folgenden Inhalt dienen., Wenn die Seitenleiste links die gleiche Hintergrundfarbe wie der Hauptinhalt hätte, wäre es wahrscheinlich einfacher für das Auge, sich im Bild zu bewegen, aber die Farbänderung macht es kaum schwierig.
Wie bei den oben genannten Websites wird der Platz verwendet, um sowohl Gruppen unterschiedlicher Informationen einzuschließen als auch zu trennen, sodass jede Gruppe hervorstechen und das Auge finden kann, was es will, und dazwischen ruhen kann.
Phil Coffman
Der Inhalt auf Phil Coffmans Website bildet eine einzige Form, die sich in größtenteils leerem Raum befindet., Das Fehlen vieler positiver Elemente erhöht die Bedeutung der vorhandenen Elemente.
Selbst innerhalb der farbigen rechteckigen Hintergründe hat der Text genügend Platz, um leicht gelesen zu werden und nicht mit einer anderen Textkategorie auf der Seite verwechselt zu werden.,
Die positive Form (und die Form des Raums) passt sich responsiv an verschiedene Browserbreiten an, aber das Muster einer einzelnen großen Form, die vom Raum umgeben ist, bleibt erhalten.
Neue Abenteuer im Webdesign
Wie viele der Websites hier lässt die 2013-Website für die New Adventures in Web Design Conference großzügigen Raum um Elemente. Verschiedene Gruppen von Informationen sind durch den Raum enthalten, und der Raum ist während des gesamten Designs aktiv.
Interessant sind die grauen kreisförmigen Pfeile zwischen dem Bild oben links und dem Hauptinhalt rechts.
Blockieren diese Pfeile den Raumfluss? Weil sie sich nicht berühren und weil jeder dort gestrichelt ist, wo er den Raum unterbricht, kann der Raum durchfließen, obwohl er in diesem Fluss deutlich eingeschränkter ist.
Die hellgraue Farbe hilft. Es verhindert, dass die Pfeile dominieren, und es ist nicht schwer, sich den Raum vorzustellen, der über die Linien fließt.,
Fairerweise würden sich die Pfeile nicht mit dem Hauptinhalt überlappen, wenn mein Browser beim Aufnehmen des Screenshots breiter wäre. Rund 1280 Pixel bis zu dem Punkt, an dem das Design zu einer einzelnen Spalte wird, reichen jedoch aus. Insgesamt funktioniert es, obwohl ich mich frage, ob der Raum ohne die vorhandenen Pfeile besser fließen würde.
Ein paar Beispiele für Logos
Ich überlasse Ihnen einige Logos, in denen der Raum als integraler Bestandteil des Designs integriert ist. Anstatt auf die Verwendung von Platz in jedem hinzuweisen, werde ich ein paar allgemeine Kommentare abgeben und Sie dann die Räume für sich selbst erkunden lassen.,
Beachten Sie, wie die Logos unten die Figur-Boden-Beziehung nutzen. Bei einigen sehen Sie, bis Sie sowohl Figur als auch Boden sehen, nicht das vollständige Logo. Beide sind notwendige Beiträge zu dem, was kommuniziert wird.
Einige dieser Logos basieren auf dem Prinzip der Schließung. Was Sie sehen sollen, ist nicht wirklich da, aber Sie sehen es trotzdem. Einige dieser Logos spielen auch mit Figur und Boden. Was Figur ist, wenn Sie das gesamte Logo vor seinem Hintergrund aufnehmen, wird Boden für eine kleinere Figur innerhalb., Diese reversible Figur-Boden-Beziehung ist von zentraler Bedeutung für das, was kommuniziert wird.
- Cloud Bed
- Black Cat Lounge
- Shift
- Dolphin & Siegel-Logo-Designer
- Zahnimplantate Guide
- Wineforest
Zusammenfassung
ich hoffe, du nimmst mir die zwei wichtigsten Dinge aus diesem Beitrag., Erstens ist die Verbindung zwischen der Nutzung von Raum im Design und dem Gestaltprinzip von Figur-Boden. Gestaltprinzipien liegen viel von dem zugrunde, was wir als Designer tun.
Zweitens, und vielleicht noch wichtiger, bemühen Sie sich, Zeit damit zu verbringen, zu beobachten, wie Raum im Design verwendet wird. Lass den Raum kein Nebenprodukt deiner positiven Elemente sein. Lernen Sie, Raum so viel wie, wenn nicht mehr als, positive Elemente zu entwerfen. Das Layout einer Seite ist letztendlich eine Organisation des Raums.
Analysieren Sie diesen Raum bewusst und verwenden Sie ihn bewusst, um ein besseres Design zu erstellen. Lass es nicht sein, was übrig ist., Betrachten Sie es als wesentliches Designelement und dann die Beziehung zwischen Raum und positiven Elementen als Designelement, das Sie formen.
Nächstes Mal fügen wir dem Mix weitere Gestaltprinzipien hinzu und untersuchen, wie Schwerpunkte, Fortsetzungen und gemeinsames Schicksal uns zu Ideen wie visuellem Gewicht und kompositorischem Gleichgewicht führen.
- beachten Sie die En Und Em Gedankenstriche: Typografische Etikette
- Design-Prinzipien: Visuelles Gewicht Und Richtung
- Wie die Geometrie Beeinflusst Logo-Design
- Über die Kunst –
(al, ml, il)