Title: Designelemente der visuellen Kommunikation
Course: E-Design - Erzeugung und Gestaltung der Designidee > Section: Visuelle Kommunikation

Wir möchten Ihnen in diesem Kapitel die Grundlagen der visuellen Kommunikation näher bringen. Mithilfe welcher Elemente Sie besondere Effekte beim Betrachter erzielen können. Außerdem einige Stilregeln die Sie beachten sollten.

45 min

Ein Schlüsselfaktor für eine gute Komposition ist eine starke zentrale Position, da sie dem Betrachter hilft, einen wichtigen Punkt im Design zu finden. Beachten Sie bei der Auswahl eines Schwerpunkts, dass der Hauptzweck eines Designs die Kommunikation ist. Es ist eine Idee, Information oder nur ein Gefühl / eine Emotion, die Sie im Design vermitteln, dh. jedes Design erzählt eine bestimmte Geschichte. Wählen Sie also einen Schwerpunkt, der Ihnen hilft, die Geschichte auf die effektivste Weise zu erzählen. Es gibt verschiedene Techniken, um Aufmerksamkeit zu erregen, wie z. B. Kontrast, aber die Richtlinien werden später erläutert.

finden Sie den Fokus

Sehen Sie sich die Anzeige eines Modehändlers an, die sich eindeutig auf das Model und ihre Kleidung konzentriert. Das Modell wird zentral in der Werbung platziert, zusätzlich gibt es Text und einen farbigen Kreis, der so angeordnet ist, dass die Aufmerksamkeit auf das Gesicht und dann auf die Kleidung gelenkt wird. Die Hilfslinien lenken den Blick des Betrachters allmählich auf zusätzlichen Text.

Ein ähnlicher Ansatz wird in dieser Werbung verfolgt, bei der der Betrachter angewiesen wird, sich auf das Foto des Mannes zu konzentrieren, und das Foto zentral in der Mitte des Designs platziert wird, das ebenfalls mit Grafiken eingerahmt wird.

Grafiker nutzen verschiedene Grafikelemente wie Linien, Farben, Textur und Formen sowie Designprinzipien wie Proportionen, Kontrast, Lücken um ihr Design zu formen und die größtmögliche Wirkung beim Betrachter zu hinterlassen.

Komposition und Layout

Was ist eine Komposition?

Auf sehr einfache Weise ist es der Teil, in dem alle einzelnen Elemente zusammen ein Ganzes bilden. All seine verschiedenen Typen: Bilder, Grafiken und Farben verschmelzen zu einem einzigen Design. Eine erfolgreiche Komposition ist, wenn Sie Ihr Design so organisiert, ausgerichtet und kompiliert haben, dass es nicht nur eine gute Anzeige ist, sondern auch sehr funktional und effektiv.

Bei der Komposition oder Layout spricht man von der Anordnung der Designelemente die das vollendete Bild ergeben. Ein Layout besteht aus verschiedenen Designelementen die kombiniert werden. Beispielsweise Kontrast, Weißraum oder Gleichgewicht die den Blick des Betrachters für das Design führen. Wenn Sie eine Komposition mit vielen Elementen entwerfen, werfen Sie sie nicht nur alle auf die Seite, sondern ordnen und richten Sie sie so aus, dass Sie das gesamte Design auf einfache Weise stilvoll gestalten können. Die Ausrichtung wird durch Designprogramm-Anleitungen unterstützt, die Ihnen einfach Orte zeigen, die mit anderen Elementen zusammenhängen. Im folgenden Beispiel sind die Seiten des Magazins für das Auge angenehm, da alle Elemente sauber, scharf und effizient angeordnet sind.

Wenn das Design viele Bilder, Texte oder viele grafische Elemente enthält, ist die Ausrichtung Ihr bester Freund, um ein ausgewogenes Design zu erstellen.

Das Raster

Im heutigen Webdesign sind Rasterlinien mittlerweile sehr verbreitet. Ein unsichtbares Raster machen ein Design aufgeräumter, effizienter und flexibler anpassbar. Ein gut durchdachtes Raster vereinfacht den Designprozess. Wenn Sie z.B.: ein Plakat gestalten und sich dann unerwartet Daten, Text, Bilder ändern bleibt das grundlegende Design weiterhin bestehen und es erspart Ihnen Zeit beim Anpassen.

Hervorhebung und Skalierung

Größe und visuelle Hierarchie sind die Grundlagen des Designs. Um zu verdeutlichen, dass Hierarchie die Anordnung und Gestaltung von Elementen in der Reihenfolge ihrer Wichtigkeit ist. Auf diese Weise können Sie ein wichtigeres Element größer und mutiger machen als ein weniger wichtiges Element, das erheblich kleiner und flexibler sein kann.

Die Einhaltung der Hierarchie ist besonders wichtig für Text. Eine typografische Hierarchie erfordert definitiv 3 Hierarchieebenen. Titel, Untertitel, Text.

Größe wird oft verwendet, um eine Hierarchie zu vermitteln, indem bestimmte Elemente in den Mittelpunkt gestellt und als wichtig für die Kommunikation eingestuft werden.

Im folgenden Posterdesign wird beispielsweise das größte Bild als größtes Element verwendet, um die größte Aufmerksamkeit und Konzentration zu erzielen. Der Titel ist groß und fett gedruckt, da dies die wichtigste Information auf diesem Poster ist. Der Rest des Textes ist viel kleiner. Daher wurde die Größe als Brennpunktsignal und zur Aufrechterhaltung einer typografischen Hierarchie verwendet.

Nutzen Sie die Methode der Hervorhebung und Skalierung von Objekten um Ihre Komposition zu strukturieren und dem Auge eine Orientierungshilfe zu geben. An ein Design ohne Mittelpunkt oder Interessantem, das den Blick auf sich zieht, verliert der Betrachter schnell das Interesse.

Die Verwendung von Größe ist ein unglaublich praktisches Werkzeug im Design - Sie können Details hervorheben oder groß noch größer machen. Im folgenden Beispiel werden zwei sehr kleine menschliche Silhouetten verwendet, um die Größe und Größe der Szene hervorzuheben.

Propotionen

Proportionen sollten genutzt werden, um ein ausgewogenes Layout zu erzeugen. Die Anordnung der verschiedenen Elemente innerhalt einer Komposition verändern die Wirkung und Wahrnehmung des dargestellten Inhalts. Alle Bestandteile müssen gemeinsam betrachtet werden, die Anordnung und Größe aller Elemente steht in Beziehung zum ganzen Layout. Mit Elementen sind folgende Komponenten gemeint z.B.:: Logos, Texte, Produktgrafiken, Formulare, Tabellen, Schalter. Teil des Gestaltungsprinzips ist es ein gezieltes Anordnen der verschiedenen Komponenten nach deren Bedeutung oder worauf man den Betrachter lenken möchte zu nutzen. Je nach Zuweisung von Farbe und Größe, sowie die Aufteilung der gesamten Fläche in einzelne Parzellen bewirkt man eine bewusste Kommunikation, sie dient nicht nur der Ausgewogenheit der Komposition, sondern auch der Struktur und Dynamik.

Hilfslinien

Ordnen Sie Text / Linien und Formen im Layout so an, dass sich der Betrachter in die gewünschte Richtung bewegt. Mithilfe der Hilfslinien können Sie den Betrachter zu verschiedenen Ebenen führen und nicht nur zur Mitte des Designs, sondern auch zum Rest des Designs.

In diesem Beispiel wurden sehr strenge Richtlinien verwendet, um den Blick des Betrachters zuerst auf den Hauptfokuspunkt oder -titel und dann auf verschiedene Informationspunkte zu richten.

Natürlich ist es nicht möglich, solche offensichtlichen Linien in allen Designs zu verwenden. Suchen Sie daher Bilder und grafische Elemente und Linien im Design und verwenden Sie sie, um das Auge zu führen. Im folgenden Beispiel wird eine sogenannte Linie verwendet, die sich unter der linken Hand des Mannes befindet, um das Auge auf das Logo und weiter unten im Rest des Bildes zu richten. Hier werden auch Formen verwendet, um das Auge zu lenken.

Ausrichtung

Ausrichtung ist die Position des Textes oder der Grafiken, ob linksbündig, rechtsbündig, zentriert oder Blocksatz.

Weißraum

Mit Hilfe des Weißraum oder Negativraum erzeugen Sie eine Hierarchie und Ordnung in Ihrem Design. Dieses Designelement hilft Objekte hervorzuheben, da unser Gehirn Weißraum mit Bedeutung und Überfluss assoziiert. Es sollte stehts eine Balance zwischen Positiv- und Negativraum in Ihrem Design vorliegen. Weißraum bedeutet nicht einfach nur nichts oder leere, damit lassen sich ganz eigene Bilder gestalten.

In diesem Beispiel wurde ein weißer Raum verwendet, um das Design so auszugleichen, dass es sauber und klar ist.

Wie verwenden wir Leerraum in unserem Design?

Berücksichtigen Sie alle Ihre grafischen Elemente, Formen, Schriftstile und Grafiken. Der weiße Raum um die Objekte bildet einen luxuriösen Rahmen.

Füllen Sie nicht jeden leeren Raum mit Inhalten, wie ich bereits sagte. Der weiße Raum ist nicht leer, er erledigt seine Aufgabe und erfüllt seinen Zweck.

Das folgende Webdesign - einfaches Layout, gut ausgewählte Schriftart und viel Platz auf einer weißen Oberfläche, damit jedes Element atmen kann.

Eine weitere wichtige Sache: Wenn Sie ein Design erstellen, fragen Sie sich, ob jedes Designelement zu 100% erforderlich ist. Sind Sie sicher, dass Sie diese Schriftart, den blauen Titel und 3 verschiedene Bilder benötigen? Wenn Sie Ihr Design aufteilen und alles weglassen, was dem Design nichts hinzufügt, verwenden Sie am besten Leerzeichen.

Lesefluss

Im Textlayout hilft Weißraum außerdem die Lesbarkeit Ihrer Texte zu verbessern. Der Leser kann Inhalte schneller erfassen, gerade bei Internetseiten ist es besonders hilfreich, da die Nutzer meist den Inhalt nur überfliegen. Im Webdesign sollte zwischen Schriftgröße und Zeilenabstand ein Verhältnis von 150% liegen. Das bedeutet bei einer gewählten Schriftgröße in 20 Pixel, wäre der ideale Zeilenabstand bei 30 Pixel. Dies kann je nach gewählter Schriftart etwas abweichen. Vergleichen Sie diese beiden Absätze, welcher ist für Sie besser lesbar?

Elemente die Ergänzen

Sie haben wahrscheinlich schon von Komplementärfarben gehört, aber wie ergänzen Sie die Designelemente? Alle Designelemente sollten sorgfältig und zielgerichtet ausgewählt werden, damit jedes einzelne Teil das Ganze ergänzt. Ein häufiger Fehler bei Kompositionen ist die Verwendung komplementärer Bilder. Wenn Sie also mehr als ein Bild in einem Design verwenden, stellen Sie sicher, dass alle Bilder effektiv und gleichmäßig zusammenkommen. Es gibt viele verschiedene Möglichkeiten, dies zu erreichen. Hier sind einige Tipps.

Bearbeiten und färben Sie Ihre Fotos auf die gleiche Weise. Durch Einrichten von Filtern und Verwenden von Werkzeugen können Sie Ihre Fotos einfärben und anpassen, um sie konsistenter zu machen. Das unten stehende Poster-Design verwendet einen Schwarzweißfilter, der auf natürliche Weise alle Fotos kombiniert.

Zweitens wählen Sie Fotos aus, die auf ähnliche Weise aufgenommen wurden. Versuchen Sie, Bilder mit einer ähnlichen Ästhetik und einem ähnlichen Stil auszuwählen. Wenn beispielsweise ein Bild minimal ist, wählen Sie andere aus, die ebenfalls vom Minimalismus inspiriert sind. Die folgende Beispielwebsite enthält Bilder, die alle eine starke Textur mit Holzklingen und kühleren Tönen aufweisen.

Drittel-Regel

Eine einfache und effektive Richtlinie im Design ist die Drittel-Regel. Sie unterteilt Ihr Design neun Teile, in drei Zeilen und drei Spalten. Die Schnittpunkte der horizontalen und vertikalen Linien formen natürliche Leitlinien. Häufig wird das Hauptmotiv mittig platziert, dies wirkt aber oft wenig harmonisch und langweilig. Wenden Sie dir Dritte-Regel an, um Ihr Design auszubalancieren.

Dieses Beispiel zeigt deutlich, wie der Designer dieser Regel folgt und das Design insgesamt auffällig und effektiv ist. Der Designer hat diesbezüglich gesagt, dass Sie durch die Vermeidung von zentriertem Design dem Design Bewegung und Interesse verleihen. “

Ein sehr gutes Beispiel für die Verwendung der dritten Regel ist die folgende Website. Hier können Sie sehen, dass die Linien über dem Fokuspunkt jedes Bildes liegen - es sind zwei Wanderer und der andere ein Vogel, die Linien sind auch an den Punkten um die Textfelder aufgeteilt.

Jedes Mal, wenn Sie mit der Erstellung eines neuen Designs beginnen, insbesondere wenn Sie die dritte Regel verwenden, ist es sinnvoll, mit dem Netzwerk zu beginnen. Das Kernnetzwerk hilft Ihnen dabei, die Elemente logischer zusammenzuführen und klarer zu verstehen, wo sich die Zentren Ihres Designs befinden.

Wenn Sie ein Design finden, das Ihrer Meinung nach sehr effektiv ist, versuchen Sie, es zu zerlegen und das zugrunde liegende Netzwerk zu finden - unabhängig davon, ob die dritte Regel verwendet wurde oder ob ein bestimmtes Netzwerkdesign verwendet wurde.

Gleichgewicht

Die folgende Hochzeitseinladung ist ein Beispiel für eine symmetrische Komposition. Mit dieser Technik ist das Design elegant, sauber und schön ausgewogen.

Die zweite Art des Gleichgewichts ist ein ziemlich gewöhnliches oder asymmetrisches Gleichgewicht. Das asymmetrische Gleichgewicht ist ebenfalls ein relativ unabhängiges Konzept, da es das Ausbalancieren ohne Symmetrie bedeutet.

Das Folgende ist ein Beispiel für ein erfolgreiches asymmetrisches Gleichgewicht. Das Poster verwendet eine asymmetrische Balance, um die Elemente zu streuen und zu nivellieren. Das Design besteht aus drei zentralen Kreisen, die ebenfalls die größten Elemente darstellen. Sie werden jedoch durch einen kleinen Kreis am unteren Rand des Posters ausgeglichen. Um eine asymmetrische Balance zu erreichen, ist es eine gute Idee, jedes Element zu berücksichtigen und so eine Balance im gesamten Design zu finden.

Regel der Ungeraden

Mit einer weiteren einfachen Regel können Sie eine Komposition interessante und optisch ansprechend gestalten. Es empfiehlt sich in einem Bild oder auch Logo immer eine ungerade Anzahl von Motiven zu wählen.

Ein Logodesign, welches die Rule of Odds nutzt, um den Blick auf den Fokuspunkt zu lenken. Via Freshinnet.

Kontrast

Kontrast ist ein unglaublich nützliches Werkzeug zum Hervorheben oder Ausblenden bestimmter Designelemente. Um den Kontrast zu erhöhen oder kontrastreiche Farben zu verwenden, können wir Elemente hervorheben und die Aufmerksamkeit des Betrachters auf sich ziehen.

Um ein Design zu gestalten, dass heraussticht und beim Betrachter hängen bleiben soll, ist es ratsam mit Kontrast zu arbeiten. Hierbei ist es wichtig, dass der Hintergrund sich farblich von den Elementen (z.B.: Text) unterscheidet, um gut erkennbar zu sein. Sollten Sie Schrift verwenden wollen, müssen Sie drauf achten das Größe und Stärke ausbalanciert sind. Wird alles fett geschrieben ist für die Zielgruppe nicht mehr erkennbar was wirklich ist. Des weiteren sollten Sie maximal zwei Schriftarten für Ihr Design benutzen.

Die folgenden Poster verwenden kontrastreiche Farben, um Brennweiten einzurahmen und hervorzuheben, aber auch dünnere Schriftarten, um die Aufmerksamkeit zu lenken.

Wiederholung

Wiederholung schafft erfolgreiche Kompositionen.

Versuchen Sie, bestimmte Elemente aus einem Teil Ihres Entwurfs zu übernehmen und für andere Teile zu verwenden, um Konsistenz und logisches Layout zu gewährleisten. Grafikmotive können mehrmals verwendet werden und versuchen, Ihr gesamtes Design mit sich wiederholenden Elementen zu kombinieren. Wiederholung ist ein Schlüsselfaktor, wenn es um ein mehrseitiges Layout geht. In diesem Fall helfen die Entwurfswiederholungen dabei, reibungslos von einer Seite zur anderen zu gelangen und einen zusammenhängenden Satz von Seiten zu erstellen.

Das folgende Beispiel stammt aus einer Zeitschrift, in der dieselbe Komposition auf verschiedenen Seiten verwendet wird. Der einzige Unterschied besteht in Inhalt, Farben und Verwendung von Bildern. Diese sich wiederholende Komposition hilft dem Leser, die Formatierung schnell zu identifizieren, und führt den Inhalt daher viel schneller in den Betrachter ein.

Wie bereits erwähnt, ist die Wiederholung ein Schlüsselfaktor bei der Gestaltung der Komposition. Im folgenden Beispiel wird durch Wiederholen der Elemente ein starkes, kohärentes und effizientes Design erhalten. In diesem Beispiel sind die Farbpalette und die Grafikstile des Designs einfach und ähnlich, wenn das Design insgesamt schön und stark ist.

Quellen: https://99designs.de/blog/design-tipps/komposition-layout-design/
https://99designs.de/blog/design-tipps/designbegriffe/
kompositsioon.pptx