4 design principles that help you to layout your ideas visually

Here are four principles that will help you become better at designing almost anything. They won’t magically turn you into a pro designer and they certainly don’t replace any formal education, but they take you a long way to

  • understanding why some designs look so much more pleasant than others
  • having a vocabulary to verbalise what you like and dislike
  • visualising things in an accessible way with a clear visual hierarchy
  • achieving more professional looking designs

So here they are:
1. Proximity
Place things that relate to each other in close proximity, and vice versa. Obvious for pro/contra lists but not so obvious for more complex ideas. But if you start to look, you’ll find plenty of ways to use spatial proximity to give your information better structure.

2. Alignment
If there’s already an element on the page then try to align new elements to this. This might be left/right, center, or top/bottom aligned. In any case, what this does is provide order to chaos. It’s easier to read and looks way more professional.

3. Repetition
Things that are the same or mean the same should look the same. It’s an unnecessary source of confusion when product A is red on slide 3 and blue on slide 5. Unless there’s a good reason to add color or fonts, stick with what you already used. It greatly helps your reader to make sense of your designs.

4. Contrast
Things that are different should look different. And when I say different, I mean different. Don’t just make the font 1pt larger, make it significantly larger. This is particularly helpful to create a visual hierarchy. Make the most important visual element stand out and then direct the eye with a proper use of proximity and alignment towards other parts.

Here’s an easy to follow example of how these principles are put into practice. I’ve originally encountered them in Robin Williams’ classic “The Non-Designer’s Design Book”.

Also, these principles are very much in line with the posture of the lazy designer when you keep it simple. If your content makes sense, these principles will in many cases guide you to a pretty straightforward design of the content.

Die vier Prinzipien professionellen Designs

In ihrem hervorragenden Buch Design & Typografie behauptet Robin Williams, jeder könne ein besserer Designer werden, wenn er vier Prinzipien berherzigt: Nähe, Ausrichtung, Wiederholung, Kontrast. Wie einfach es tatsächlich ist, durch Anwendung dieser vier Regeln ein völlig langweiliges Design in ein ansprechendes und interessantes Design zu verwandeln, möchte ich Ihnen an einem Beispiel vorführen, das ich schrittweise anhand der Regeln überarbeite.

Als Ausgangspunkt dient die fiktive Titelfolie eines PowerPoint-Vortrags, die so schlecht ist, dass sie in einem typischen Vortrag nicht weiter auffallen würde – unübersichtlich, chaotisch und hässlich:

Beispiel-Titelfolie: Langweilig und ungeordnet

Zwar lässt sich der Titel gut lesen, aber die übrigen Angaben sind über die Folie verstreut, so dass das Auge nicht weiß, wohin es zuerst blicken soll; man erkennt keine Hierarchie und springt zwischen den einzelnen Elementen hin und her. Mit Williams’ vier Prinzipien lässt sich diese Folie so umwandeln, dass sie übersichtlich, professionell und nett anzusehen ist. Gestalterische Meisterwerke brauchen vielleicht noch etwas mehr Übung. Aber als übersichtlich, professionell und einigermaßen ansprechend sind für die meisten Präsentationen angemessene Ziele.

Gestaltungsprinzip 1: Nähe

Das Gestaltungsprinzip der Nähe besagt, dass Elemente, die inhaltlich zusammengehören, auch räumlich nah angeordnet werden sollen. Bei Pro-/Contra-Argumenten käme niemand auf die Idee, die Argumente wild auf der Folie zu verstreuen. Sobald es aber weniger offensichtlich wird, ist das Prinzip der Nähe für viele nicht vertraut. Das Prinzip macht die logische Struktur der Elementen eines Designs sichtbar. Auf dieser Folie gibt es drei Arten von Informationen: Informationen zum Titel, Informationen zum Vortragenden und Informationen zum Ort. Und tatsächlich, wenn wir als einzige Änderung die räumliche Anordnung der Elemente anpassen, sieht das Layout geordneter aus. Nicht schön, aber ein klein wenig übersichtlicher:

Prinzip Nähe: Räumlich anordnen nach inhaltlicher Zusammengehörigkeit

Gestaltungsprinzip 2: Ausrichtung

Das Gestaltungsprinzip der Ausrichtung besagt, dass kein Element auf einer Seite willkürlich angeordnet werden soll. Durch eine einheitliche Ausrichtung der Elemente verstärken Sie deren Zusammengehörigkeit. Gerade wenn es um Überschriften und Titel geht, wird sehr oft eine zentrierte Ausrichtunge gewählt, sie ist aber nicht die Wirkungsvollste. Zwar ist Symmetrie ein naheliegendes Formprinzip, es wirkt aber auch schnell langweilig und förmlich. Wenn Sie eine links- oder rechtsbündige Ausrichtung wählen, wirkt das Design noch aufgeräumter, weil Sie eine unsichtbare Verbindunglinie erzeugen, die die Zusammengehörigkeit, in anderen Worten die Einheit des Designs verstärkt:

Prinzip Ausrichtung: Elemente nicht willkürlich anordnen

Gestaltungsprinzip 3: Wiederholung

Das Gestaltungsprinzip der Wiederholung besagt, dass bestimmte Gestaltungselemente innerhalb eines Designs wiederholt werden sollen. Wiederholung stärkt den Wiedererkennungswert eines Designs. Durch wiederkehrende Elemente wie z.B. gleiche Schriften, Farben, Betonungen etc., findet sich das Auge leichter zurecht, der Aufbau des Designs wird strukturierter. Wenn Sie Abteilung A auf einer Folie grün kennzeichnen, sollten Sie dabei bleiben, solange es keinen starken Grund für eine andere Farbe gibt. Besonders hilfreich ist das Prinzip natürlich bei größeren Dokumenten, einmal gelerntes bleibt über viele Folien hinweg verständlich. Wenn sich über sämtliche Folien eines Vortrags hinweg bestimmte Gestaltungselemente, etwa zur Betonung, wiederholen, kann sich der Betrachter schneller orientieren. Aber auch auf einer einzelnen Folie lässt sich die Wirkung durch Wiederholung erkennen. Wenn wir die wichtigsten Informationen hervorheben, dann tun wir das auf stets gleiche Weise und wählen nicht jedesmal eine neue Schriftgröße und -farbe etc.:

Prinzip Wiederholung: Wiederholungen stärken die Einheit eines Designs

Gestaltungsprinzip 4: Kontrast

Das Gestaltungsprinzip des Kontrasts besagt, dass sich zwei Elemente, die sich nicht gleichen, deutlich unterscheiden sollen. Mit anderen Worten: Sei kein Frosch! Die deutliche Betonung wichtiger Elemente macht ein Design interessanter und weckt somit die Bereitschaft, genauer hinzuschauen. Es hilft auch bei der Strukturierung der Informationen, indem wichtige von unwichtigeren Inhalten besser getrennt werden und so eine klare Hierarchie vorgegeben wird, in der die Informationen zu betrachten sind. Wenn wir die Schriftunterschiede vergrößern und Farbe zur Erhöhung des Kontrastes einführen, wirkt die Folie noch einmal übersichtlicher, professioneller und ansprechender:

Prinzip Kontrast: Kontraste machen ein Design interessanter

Vier einfache Gestaltungsprinzipien für Design, die die Wirkung einer Folie drastisch erhöhen und sie erheblich übersichtlicher machen, ohne dass eine einzige Informationen gestrichen worden wäre. Dazu gehört keine Zauberei, sondern einfach ein bisschen Sorgfalt bei der Anwendung der vier Prinzipien und ein wenig Mut bei deren Umsetzung: Sei kein Frosch. Probieren Sie einfach einmal ein bisschen aus. Sie werden sehen, welch erstaunliche Wirkung Sie mit ganz einfachen Mitteln erzielen, wenn Sie sich nur trauen. Haben Sie keine Angst vor Freiflächen, oft sind es gerade die (bewusst) ungenutzten Flächen, die ein Design interessant machen. Und schließlich: Die Prinzipien schränken die Kreativität nicht ein, sondern geben ihr ein geordnete Fläche. Durch Anwendung derselben vier Prinzipien kommt zu völlig unterschiedlichen Ergebnissen. Hier sind nur ganz wenige der unzähligen möglichen Layouts:

Fertiges Beispiel 1: Andere Schrift und kleine SymboleFertiges Besipiel 2: Rechtsbündig
Fertiges Besipiel 3: Kontrast durch zweifarbigen HintergrundFertiges Besipiel 4: Auch Serifenschriften können funktionieren

Design für Nicht-Designer

Buchcover: Robin Williams – Design und Typografie

Jeder ist ein Designer, zumindest wenn er schon einmal einen Flyer, eine Visitenkarte, eine Einladung, einen Bericht, Folien für einen Vortrag oder was auch immer entworfen hat. Die meisten verlassen sich dabei jedoch auf ihr Bauchgefühl und haben eine eher vage Vorstellung von „das sieht gut aus“ oder „das sieht nicht gut aus“. Das wird sich ändern, wenn Sie „Design & Typografie“ von Robin Williams lesen.

Die Kernaussage des hervorragenden Buches lautet: Design ist einfach und jeder – wirklich jeder – kann wirkungsvolle, optisch ansprechende Designs entwerfen. Und tatsächlich, während man das Buch liest, fühlt man sich, als könne man gleich loslegen mit der Designer-Karriere. Der Autorin gelingt es, in sehr einfacher Sprache die wichtigsten Grundsätze professionellen Designs zu erläutern und anhand anschaulicher, weil alltäglicher Beispiele verständlich zu machen. Durch die zahlreichen Beispiele erhält man zugleich viele Anregungen, wie man die Empfehlungen für die eigene Arbeit nutzen kann.

Im Wesentlichen reduziert Robin Williams erfolgreiches Design auf vier Grundprinzipien: Nähe, Ausrichtung, Wiederholung und Kontrast, die sie ausführlich erläutert. Daneben gibt es einen kleinen Exkurs in die Typografie, um Schriften bewusster und zielgerichteter auswählen und einsetzen zu können. Zahlreiche kleinere und größere Tricks und Kniffe runden das Buch ab. Ein Ratschlag bleibt dabei in besonderer Erinnerung: Sei kein Frosch, sei mutig!

Natürlich werden Sie nicht über Nacht zum Profi-Designer, nur weil Sie dieses Buch gelesen haben. Aber Sie werden die Welt mit anderen Augen betrachten, weil Sie verstehen und benennen können, was Sie täglich sehen; in Zeitschriften, auf Plakaten, auf Folien usw. Wenn Sie dieses Buch gelesen haben, werden Sie in der Lage sein zu sagen: „das sieht gut aus, weil…“ oder „das sieht nicht gut aus, weil…“ Das wichtigste dabei: Sie können das auch über Ihre eigenen Entwürfe sagen. Und wenn Sie einmal begonnen haben, durch diese Brille zu schauen, werden Sie kaum einen Weg zurückfinden, sondern nach mehr verlangen. Einen besseren Einstieg als dieses Buch werden Sie schwer finden.

Übrigens: Das Buch ist die Übersetzung der dritten Auflage des englischen Bestsellers „The Non-Designer’s Design Book“, das nun erstmals in Farbe erschienen ist.

Links zu dem Buch:
Leseprobe auf der Webseite des Verlags
Homepage von Robin Williams

Spread the Word

Picture of Dr. Michael Gerharz

Dr. Michael Gerharz