Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Grundlagen der guten Gestaltung

Vier Prinzipien

Testen Sie unsere 2013 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Lernen Sie anhand von Veranschaulichungen die vier Prinzipien guter Gestaltung kennen: die Nähe, die Ausrichtung, die Wiederholung und den Kontrast.

Transkript

Wenn man mit mehreren grafischen Elementen arbeitet, entsteht immer automatisch ein Layout. und genau für dieses Zusammenspiel verschiedener Elemente wie Text, Bilder, Flächen gibt es Grundregeln, die sogenannten Prinzipien. wie diese Elemente zueinander stehen sollten. In diesem Film möchte ich Ihnen diese Prinzipien vorstellen, und an einfachen Beispielen veranschaulichen. Die vier Prinzipien bestehen zum einen aus der Nähe, wie sind Elemente angeordnet zueinander, wie sind sie aber auch aneinander ausgerichtet, gibt es Wiederholungen für einen besseren Wiedererkennungswert, und bilden sie einen Kontrast. Zusätzlich zu diesen vier Prinzipien, nehme ich noch zwei weitere Punkte auf, die sehr wichtig sind in einem guten Layout, und das ist die Balance und der Weißraum. Schauen wir uns als allererstes Mal den ersten Punkt der Prinzipien an, die Nähe - welche Elemente gehören zusammen? Wenn wir uns dieses Beispiel näher betrachten, dann sieht man automatisch die Überschrift, aber in dem Text, den wir hier weiter unten haben, kann man nichts wirklich gut erkennen, das ist viel zu sehr aufeinander, man kann jetzt nicht sehen, wo hört der erste Punkt auf, wo fängt der zweite an. Wenn wir das Prinzip der Nähe anwenden, können wir einiges lesbarer gestalten, besser greifbar für den Betrachter. Was gehört also auch vom Sinn her zusammen? Das ist die Überschrift mit der Unterüberschrift, dann haben wir hier einen größeren Abstand, wir haben den ersten Punkt, dort haben wir wieder einen Abstand, der zweite Punkt, und der dritte Punkt. Da sieht man also mit Hilfe der Nähe kann man also lesbarer gestalten, was gehört sinnlich zusammen. Wenn wir uns den zweiten Punkt anschauen, dann geht es hier um die Ausrichtung, denn kein Element in einem Layout sollte willkürlich platziert sein. In dem Fall ist es nicht willkürlich platziert, weil wir das zentriert ausgerichtet haben. Das ist aber nicht immer die beste Wahl. Wenn wir dort also das Prinzip der Ausrichtung anwenden, dann haben wir das erst einmal linksbündig gesetzt, das heißt, hier haben wir eine Linie bei dem ersten Buchstaben der Überschrift und der Unterüberschrift, und das wenden wir genauso auch bei den einzelnen Punkten an. Die Eins startet ebenfalls hier, und wenn ich dann zusätzlich mal die Hilfslinien einblenden lasse, dann sehe ich, was aneinander ausgerichtet ist. Ich nehme mir also Linien auf, und führe das fort. Hier ist der Start, genauso aber auch weiter unten im Text. Diese Textblöcke starten mit dem zweiten Buchstaben, mit dem U, und genauso liegt die Eins auf einer Linie, mit meinem Text auf der rechten Seite. Ich lasse zusätzlich mal ein Raster einblenden, das ist ein Dokumentraster mit gleich großen Quadraten, man kann sich auch ein Grundlinienraster zu Hilfe nehmen, aber das Raster hilft dabei, eine einheitliche Form zu geben. und das ist eben das ganz WIchtige, das alles in eine Form gelegt wird, das nichts dem Zufall überlassen wird. Das musste ich selber erst lernen, dass das Raster nicht einschränkt, sondern hilft. Das habe ich während meines Studiums gelernt, ich hab das dann schnell wieder vergessen, nach meinem Studium, und bin zu meinem Glück aber dann ganz schnell wieder auf das Raster zurückgekehrt, weil ich so auch sehr viel Zeit sparen kann. Denn wenn man ein Layout anlegt, und ein Raster nicht verwendet, verwendet man es ja vielleicht in der Entwicklung später doch wieder, damit es wirklich gut ausschaut, damit man eine Ordnung, eine Struktur schafft. Und dann hätte man sehr viel Zeit gespart, wäre man gleich vom Raster ausgegangen. Wenn wir mal auf den dritten Punkt der vier Prinzipien schauen, dann geht es Wiederholung. denn die Wiederholung stärkt den Wiedererkennungswert. An diesem Beispiel kann das wie folgt ausschauen: dass wir eine bestimmte Formatierung wählen, für zum Beispiel die Überschrift, und die findet man auch wieder in den Punkten. das heißt, dass immer der erste Satz eben fett gesetzt ist, in diesem Schriftschnitt fett, damit der Kunde sofort weiß, wo sind die wichtigen Punkte. Der Betrachter wird also an die Hand genommen, es gibt eine schneller Auffassungsgabe der Informationen, weil genau gezeigt wird, wo sind die wichtigen Bereiche, die sind in Fett. In diesem Beispiel sieht man das sehr schön, mit der unterschiedlichen Formatierung. dass wir eben für das Frühstück, für die Desserts eine extra Spalte haben, und das wird damit gezeigt. Der Kunde fasst diese Information viel schneller auf. Und das ist natürlich auch ein wichtiger Punkt, was das Corporate Design angeht. dass man ein immer wiederkehrendes, gleiches Logo hat, immer wiederkehrende gleiche Farben und Schriften, damit sich das wie ein roter Faden durchzieht, und man so eben sofort eine Firma erkennt, wenn man zum Beispiel diese Farbe sieht, und das Enblem, entweder hier auf Rot oder auf Weiß, beziehungsweise diesen leicht transparenten, grauen Hintergrund. Wenn man diese Quadrate sieht in Magenta, dann hat man sofort eine Assoziation im Kopf, und das ist die Firma Telekom. und Telekom hat es geschafft, beziehungsweise die Agentur, die für Telekom arbeitet, dass man allein durch die Farbe Magenta direkt an Telekom denkt. Das geht auch mit Schrift, indem man immer die gleiche Schrift verwendet, hat man so einen Bezugspunkt. Das ist eine Anzeige, die ist für Mercedes-Benz, wenn ich jetzt mal hier Mercedes wieder einblenden lasse, oder das Logo. Wenn ich diesen Schriftzug auf einem LKW sehe, ohne dass ich das Logo sehe, denke ich sofort an Mercedes-Benz beziehungsweise Daimler. Also, ob das jetzt die Farbe ist, die sich wiederholt, ein Enblem oder ein Schriftzug, damit schaffe ich Wiedererkennungswert. Der letzte Punkt der vier Prinzipien ist der Kontrast, dass man wirklich Unterschiede deutlich hervorhebt. An diesem Beispiel kann das so umgesetzt sein, dass man mit zwei unterschiedlichen Schriftarten arbeitet, die sich nicht zu sehr ähneln. und somit einen Kontrast schafft, und auch dort das für den Betrachter wieder besser lesbar gestaltet. Das ist also jetzt hier allein durch die unterschiedliche Schrift, in der Formatierung, das ist einmal fett, in einer Schrift, das ist eine andere Schrift, in kursiv gesetzt, Wir haben die Punkte noch einmal heraus- gestellt, als entscheidende Blickfänger. Das kann zum Beispiel jetzt auch in so einer Form ausschauen. Da hat man ähnliche Schriftarten, da habe ich nur einmal mit Serifen, einmal ohne Serifen, aber trotzdem habe ich einen großen Unterschied. Ich kann also ganz deutlich mit Hilfe des Kontrasts etwas voneinander unterscheiden, ob das jetzt die Größe ist, eine unterschiedliche Schrift, die ich verwende, ob das eben der unterschiedliche Schriftschnitt ist, dass ich das in Fett oder in Schmal setze, dort habe ich ganz verschiedene Möglichkeiten, diesen Kontrast zu bilden. Und natürlich genauso mit Farbe, oder dem schwarz-weiß Kontrast. In dieser Anzeige von Apple zu dem iPod hat man eine ganz klare Bildsprache. was liegt im Fokus, was sticht heraus, das ist natürlich das Helle, das liegt im Vordergrund, das ist der iPod. Im Hintergrund habe ich eigentlich nur eine Silhouette, und da spielt genau dieser Schwarz-Weiß-Kontrast eine Riesenrolle, das ist unglaublich gut lesbar. Ähnlich auch bei dem Kinoplakat "The dark Knight", also Batman. Hier ist auch der Kontrast schwarz-weiß, das ist einfach der stärkste Kontrast, und der verfremdet eigentlich schon das Bild, weil wir haben zwar Gebäude, im dunklen Bereich außenherum, aber durch die Zerstörung dieser Gebäude entsteht schon wieder ein Logo, und zwar das Logo von Batman. Das ist zum einen die Wiederholung, das entsteht aber auch durch diesen Kontrast. Damit kann man auch ein Bild vereinfachen, verfremden. Zu den vier Prinzipien hatte ich noch zwei Punkte mit aufgenommen, und das ist zum einen der Weißraum - "Weniger ist mehr". Das hat man auch jetzt gerade schön bei dem Batman-Logo gesehen, eine weiße Fläche kann also sehr viel mehr aussagen. Jan Tschichold, ein Schweizer Typograf sagte einmal: "Die Lungen eines guten Designs, das ist der Weißraum." Ohne Weißraum kann nichts atmen, nichts wirken, nichts leben. Und das habe ich auch während meines Studiums lernen dürfen, von meinem Typografie-Professor, mit dem Weißraum zu arbeiten, dass ein Weißraum unglaubliche Freiheit schafft. Diese Anzeige von McDonalds die arbeitet mit einem roten Weißraum, wenn man so sagen kann, also Weißraum heißt nicht immer, dass man nur mit weißer Fläche arbeitet, sondern einfach reduziert ist. Und in dem Fall hat man wirklich Fokus, auf die Pommes, die ein Wifi-Netz darstellen. Das ist das Symbol des Wifi-Netzes, also des WLAN-Netzes, eines Netzwerkes ohne Kabel, und das wird dargestellt mit dem wichtigsten Element von McDonalds, was jeder kennt, die Pommes. Das ist also eine Anzeige, da wird für freies WiFi-Netz geworben. Alles andere, was drumherum gewesen wäre, würde nur ablenken. Das ist also wirklich auf den Punkt gebracht. Einen effektiven Einsatz von Weißraum kann man auch im Webdesign finden. Das ist eine Vorlage, die man kaufen kann, über Themeforest wenn wir dort einfach mal direkt hineinschauen, dann hat man dort wirklich einen sehr reduzierten Hintergrund, das ist also mein Weißraum, mit dem man arbeiten kann, wo die Überschrift mehr aufblüht, die steht im Fokus, und wenn ich weiter nach unten scrolle, dann habe ich dort also die einzelnen Bereiche, die auch wieder mit viel Weißraum arbeiten. Ich hab ein Bild, aber hier unten hab ich viel Weißraum, hier hab ich viel Weißraum, damit sehe ich auch wieder, welche Elemente gehören zusammen. so kann ich Informationen wieder viel besser aufnehmen. Das als kleinen Tipp, gerade wen es um den Webdesign geht, hat Themeforest oder auch über Wordpress einfach sehr schöne Beispiele, die man sich kaufen kann, die man nutzen kann. Wenn man sich in diese Richtung weiterentwickeln möchte, dann hilft einem das K.I.S.S.-Prinzip, vielleicht kennen Sie das, das steht für "Keep it short and simple", oder in dem Fall für "Keep it super simple". und das besagt, dass eine möglichst einfache Lösung eines Problems gewählt werden sollte. gleich dem Prinzip der Einfachheit: möglichst einfach, minimalistisch und reduziert. eine leicht verständliche Lösung ist. Eigentlich eben die beste Lösung. Neben dem Weißraum hatte ich auch einen zweiten Punkt erwähnt, die Balance, die visuelle Gewichtung in einem Layout. Und da gibt es zwei Wege zur Balance: Einmal die symmetrische Balance zu erzeugen, oder eine asymetrische. Bei der symmetrischen Balance geht es darum, Klarheit und Struktur zu vermitteln, man hat also immer die gleichen Größen, man geht von zwei Objekten, von vier Objekten, also von einer Symmetrie aus. Beide schauen in dem Fall gleich aus. In einem Layout kann das so ausschauen. das bietet Struktur, Ordnung, Im Gegensatz dazu bewirkt eine asymmetrische Balance Spannung und Dynamik. Ich habe vielleicht sogar die gleich großen Spalten, das ist wichtig in einem Raster, dass man hier gleich breit bleibt, ich muss aber nicht gleich hoch bleiben, ich kann also hier zum Beispiel mit Hilfe des Weißraums auch wieder Spannung erzeugen, und in dem Fall eben nicht mit zwei, arbeiten, sondern mit drei, allein diese dritte Spalte erzeugt schon Spannung. Ich habe also jetzt keine Symmetrie mehr mit dabei. In einem Layout kann das dann so ausschauen, dass ich weiter natürlich meine gleich breiten Spalten habe, aber eben im ersten Bereich sehr viel Weißraum, was wiederum Spannung erzeugt, und ich habe allein durch diese drei Spalten eine größere Dynamik. Also, je nachdem, was man bewirken möchte, ob man eher auf die rechte Seite geht, auf die Symmetrie, Ordnung, Struktur wiederspiegelt, oder ob man Spannung erzeugen möchte, auf der linken Seite, indem man einfach nicht nur mit zwei, oder vier Spalten arbeitet, sondern eben mit drei Spalten. Damit kann man unglaublich viel bewirken, und ich hab mir das angeeignet, dass ich eigentlich fast alle meine Layouts immer dreispaltig anlege. weil dadurch viel mehr Spannung erzeugt wird. Und jetzt? Jetzt heißt es, üben, üben, üben - das ist so das Allerwichtigste. Wenn man keine Projekte hat, keine festen, dann stellt man sich einfach selber eine Designaufgabe, und übt! "Teilhaben" - das heißt, dass man mit anderen seine Entwürfe teilt, seine Layouts, dass man kommuniziert und dadurch Feedback bekommt, aber auch selber Feedback geben kann. Ein weiterer wichtiger Punkt ist, dass man immer wieder Ideen aufnimmt, dass man sich inspirieren lässt, man geht durch die Welt und schaut einfach mit offenen Augen, man schaut viel im Internet, man sucht gute Beispiele und nimmt die auf, man lässt sich inspirieren, kopieren ist immer untersagt, das heißt, man darf nie kopieren, aber man kann sich Inspirationen holen, und daraus etwas ganz Eigenes entstehen lassen. Und man sollte schließlich ausprobieren, einfach anfangen und loslegen, und das überall und jederzeit.

Grundlagen der guten Gestaltung

Holen Sie sich einen Überblick über das, was das Grafikdesign ausmacht: Typografie, Layout und Farbe sowie den Umgang mit Kunden.

2 Std. 48 min (30 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!