Inhaltsverzeichnis
Ein umfassender Leitfaden zum Erlernen der Grundlagen der visuellen Gestaltung.
Die Millionen-Dollar-Frage: Was ist das Geheimnis von gutem Design?
Man kann darüber philosophieren, aber im Allgemeinen liegt das sprichwörtliche "Geheimnis" eines guten Designs in der Art und Weise, wie Sie Ihre visuellen Elemente im Verhältnis zu Ihrer Leinwand und zueinander anordnen. Im Grunde haben wir gerade das Layout-Design beschrieben, das, wenn man es genau nimmt, überall zu finden ist.
Das Layout eines Magazins zum Beispiel folgt einem klassischen Rastersystem (wir werden gleich alles über Raster lernen). Alles ist in der Regel links, rechts und unten ausgerichtet. Vor allem die Spalten haben eine klare Ausrichtung im Blocksatz, die die Seite nicht nur optisch ansprechend, sondern auch gut lesbar und aussagekräftig macht. Die großen Überschriften ziehen die Aufmerksamkeit des Betrachters auf sichAufmerksamkeit, während die Zwischenüberschrift einen Größenkontrast bildet, um eine visuelle Hierarchie der Informationen zu schaffen.
Linda Gaom, Behance
All diese Eigenschaften machen das Seitendesign sauber, strukturiert und leicht lesbar und stehen im Einklang mit den Tipps, über die wir als Nächstes sprechen werden. Aber zunächst sollten wir mehr über das Layout-Design selbst erfahren.
Was ist Layout-Design?
Beim Layout-Design geht es um die Anordnung von grafischen Elementen, um die Aufmerksamkeit des Lesers zu erregen und eine bestimmte Botschaft auf visuell ansprechende Weise zu vermitteln.Wir sprechen hier also nicht von Logodesign, sondern von der Gestaltung von Drucksachen wie Zeitungen, Magazinen, Plakaten und ihren digitalen Pendants sowie von Web-, App- oder UX/UI-Design.
Das Wort "Layout" gibt uns eine Menge Hinweise: Es bedeutet eine Anordnung von vorgegebenen Elementen auf einer Seite.
Wenn ein Layout effektiv ist, sieht es gut aus und führt den Betrachter dazu, die Botschaft zu verstehen, die das Design zu vermitteln versucht. Das Verständnis des Layouts ist daher der Schlüssel zur Erstellung von ansprechenden, effektiven, benutzerfreundlichen und angenehmen Kompositionen.
Wenn ein Layout dem Publikum seine Botschaft nicht gut vermittelt, oder mit anderen Worten, es sich nicht "gut liest", wird das Design unwirksam sein, egal wie trendy es aussieht. Im Bereich des Layout-Designs steht der Inhalt über Trends und Gimmicks.
Der Zweck der Layoutgestaltung
Eine Nachricht schnell übermitteln
Das ist der Schlüssel: Das Layout-Design stellt die Beziehung zwischen den grafischen Elementen her, um einen reibungslosen Fluss der Augenbewegung für maximale Effektivität und Wirkung zu erreichen.
Gleichgewicht schaffen
Die Anwendung der Prinzipien des Layout-Designs ist der einfachste Weg, um ein Gefühl der Ausgewogenheit und Symmetrie in Ihren Designprojekten zu schaffen, ohne langweilig zu werden.
Kohäsion schaffen
Das Layout hilft Ihnen, die vielen Elemente Ihres Entwurfs in einer leicht verständlichen, zusammenhängenden und logischen Weise anzuordnen.
Schönheit schaffen
Ausgewogenheit und Struktur schaffen auf natürliche Weise Schönheit. Wenn Ihr Layout-Design richtig gemacht ist, wird es für den Betrachter automatisch visuell ansprechend. Je weniger Mühe der Betrachter aufwenden muss, um eine Botschaft zu verstehen, desto attraktiver wirkt Ihr Design.
Designer von Frank Philippin für sein Buch 'I Used to Be a Design Student: Then - Now' Quelle: DesignBoom
Die Elemente der Layoutgestaltung
Text
Dazu gehören nicht nur der Textkörper oder die Absätze, sondern auch Überschriften, Zwischenüberschriften, Kopf- und Fußzeilen. Die Wahl von Typografie, Farbe und Größe hat unterschiedliche Auswirkungen darauf, wie Ihr Layout bei Ihrem Publikum ankommt.
Bild
Die häufigsten Arten von Bildern sind Fotos, Illustrationen oder Infografiken.
Formen
Formen können geometrisch sein, also sehr eckig, oder sie können organisch sein und die Natur nachahmen. Sie können auch abstrakt sein. Abstrakte Formen waren im letzten Jahr sehr angesagt, denn wir haben gesehen, wie Webdesigner sie in komplexe und weitläufige Kompositionen eingebaut haben.
Formen können ein Bild ersetzen oder dazu verwendet werden, einer Seite grafische Elemente hinzuzufügen, Text hervorzuheben oder den Raum zwischen anderen visuellen Elementen abzugrenzen.
Weißer Raum
Jedes Layout hat einen gewissen Weißraum, der es Ihren Elementen ermöglicht, zu atmen und sich von anderen abzuheben.
Die goldenen Prinzipien der Layoutgestaltung
Sie werden feststellen, dass die Prinzipien des Layout-Designs viele der grundlegenden Prinzipien des Designs befolgen, wie z. B. die Verwendung von Farben in einer bestimmten Art und Weise, Typografie, Wiederholungen, Kontrast, Hierarchie und Ausgewogenheit.
Prinzip Nr. 1: Raster verwenden
Raster helfen Designern, verschiedene Designelemente wie Text und Bilder so zu positionieren, dass sie kohärent und leicht zu verfolgen sind.
Sie sorgen für Ordnung, verhindern, dass sich Elemente gegenseitig überlagern, und - was am wichtigsten ist - sie korrigieren auch die Ausrichtung, so dass Ihre Arbeit sauberer und professioneller wirkt.
Quelle: hgmlegal.com
Die Anatomie von Gittern
Man könnte meinen, dass es sich nur um vertikale und horizontale Linien handelt, aber ein Raster besteht aus mehreren Teilen, und zwar aus vielen. Hier sind die wichtigsten Begriffe, die Sie für ein Grundraster kennen müssen:
- Format Wenn Sie also etwas für den Druck entwerfen, ist das Format die Seite, und wenn Sie ein Webdesigner sind, ist das Format die Webseite oder das Browserfenster.
- Margen sind die gewollten Leerstellen zwischen dem Format und dem Design.
- Fließlinien Fließlinien sind die horizontalen Linien, die Ihr Layout in parallele Abschnitte unterteilen. Fließlinien tragen zur Lesbarkeit Ihres Designs bei und helfen dem Leser, dem Inhalt richtig zu folgen.
- Module sind die Blöcke, die von den horizontalen und vertikalen Flusslinien eines Gitters gebildet werden. Wenn Sie darüber nachdenken, sind sie die Bausteine eines jeden Gitters. Alle Ihre vertikalen Module bilden Ihre Spalten, während alle Ihre horizontalen Gitter Ihre Zeilen bilden.
- Regionen sind Gruppen von zusammenhängenden Modulen, entweder vertikal oder horizontal. Es gibt keine Regeln dafür, wie Sie diese organisieren.
Quelle: Radversity
Arten von Gittern
Layout-Raster wurden zunächst für die Anordnung von Handschriften auf Papier verwendet.
Sie gehen bereits auf das 13. Jahrhundert zurück, als der französische Künstler Villard De das Rastersystem mit dem Goldenen Schnitt kombinierte, um gedruckte Seitenlayouts mit Rändern zu erstellen. Dieses Rastersystem ist bis heute zu sehen, wie die meisten gedruckten Buch- und Zeitschriftenlayouts beweisen. Verleger, Redakteure und Designer bevorzugen Standardraster, nicht nur, weil sie gut aussehen, sondern auch, weil die Leser sich daran gewöhnt habenerwarten, dass bestimmte Designelemente an einer bestimmten Stelle zu finden sind.
Gitter können auf zwei Arten gestaltet werden: symmetrisch oder asymmetrisch. Symmetrische Netze einer Mittellinie folgen, wobei die vertikalen und horizontalen Bereiche gleich sind und die Spalten die gleiche Breite haben.
In einem asymmetrisches Gitter Wie der Name schon sagt, sind die Ränder und Spalten nicht alle identisch.
Auf der Grundlage dieser Klassifizierung gibt es fünf Haupttypen von Layoutrastern, die weltweit verwendet werden und auf die Sie sich verlassen können:
Manuskript-Raster sind die gebräuchlichste Art von Raster für Dokumente. Sie trennen Kopf- und Fußzeile sowie die Ränder und bilden im Grunde ein Rechteck innerhalb des Formats (oder der Seite), das den Text begrenzt. Sie sind die Grundlage für Zeitschriften, Zeitungen und Bücher. Es ist also wahrscheinlich das Layout, mit dem Sie am meisten vertraut sind.
Siehe auch: 99 Ideen zum Zeichnen, um Ihre Fähigkeiten zu verbessern
Quelle: UXplanet
Quelle: Radversity
Säulenraster Ein typisches Zeitschriftenlayout verwendet Spaltenraster, um den Text in leicht lesbare Abschnitte zu unterteilen. Aber auch für Websites sind sie sehr beliebt. Sie können zwei bis sechs Raster verwenden. Mehr ist möglich, aber nicht üblich. Ein sehr wichtiger Punkt bei Spaltenrastern ist, dass die Abstände zwischen den Spalten, die so genannten Rinnen, gleichmäßig voneinander entfernt sindandere.
Symmetrische Spaltenraster werden z. B. von Zeitungen verwendet, während im Webdesign ein asymmetrisches Spaltenraster bevorzugt wird.
Quelle: UX Planet
Siehe auch: Wie wird man ein freiberuflicher Designer?
Quelle: Radversity
Modulare Netze sind dem Spaltenraster ähnlich, berücksichtigen aber auch die horizontalen Fließlinien. Diese Art von Raster wird benötigt, wenn Sie verschiedene Elemente in Ihrem Layout organisieren müssen und die Spaltenraster einfach nicht ausreichen.
Modulare Raster haben gleich große Module, die es sehr einfach machen, Ihre räumlichen Zonen auf unterschiedliche Weise zu visualisieren.
Quelle: UX Planet
Quelle: Radversity
Grundlegende Raster Eine Grundlinie ist die Linie, auf der der Text beim Tippen ruht, und ein Zeilenabstand ist der Abstand zwischen zwei Grundlinien. Sie fragen sich, wie groß Ihre Überschriften oder Zwischenüberschriften sein sollen?
Grundlinienraster helfen, Ihrem Text einen fließenden Rhythmus zu geben.
Quelle: UX Planet
Quelle: Fragaria
Hierarchische Gitternetze sehen weniger wie ein Raster aus als ihre Gegenstücke. Dennoch sind sie sehr nützlich, wenn es darum geht, Designelemente nach ihrer Wichtigkeit zu ordnen. Hierarchische Raster können auf modularen Rastern basieren oder Sie können sogar Ihre eigenen erstellen. Websites verwenden dieses Raster häufig, vor allem digitale Magazine und Zeitungen neigen dazu, sich eher auf hierarchische Raster als auf Spaltenraster zu verlassen, wenn sie sich zudigital.
Quelle: UX Plane
Prinzip Nr. 2: Negativen Raum nutzen
Wir denken oft, dass Leere, Stille oder Farblosigkeit etwas Schlechtes sind, aber wir bedenken nicht, dass sie die solide Grundlage für den Kontrast bilden.
Der Negativraum, auch Weißraum genannt, ist der Bereich in Ihrem Design, der keine eigentlichen Elemente enthält. Es ist der Bereich, der leer bleibt. Er umgibt nicht nur Ihre Assets, sondern schafft auch die notwendigen Verbindungen zwischen ihnen. Daher ist der Negativraum ein rechtmäßiges Designelement und hat einen massiven Einfluss darauf, wie effektiv Ihr Layoutdesign ist.
Guter und schlechter negativer Raum
Der Negativraum hilft dabei, verschiedene Bereiche in Ihrem Design zu trennen und lässt Ihr Layout atmen. Er hilft bei der visuellen Hierarchie und der visuellen Ausgewogenheit; er lenkt den Fokus des Benutzers auf die Kernelemente; er reduziert den Grad der Ablenkung; und schließlich verleiht er Ihrem Design Stil und Eleganz.
Unerfahrene Designer neigen dazu, möglichst viel Fläche zu füllen, indem sie den Text vergrößern oder ein Logo oder ein Bild aufblähen. Aber wenn Sie Ihren Elementen Raum geben, kann der Betrachter bestimmte Informationen schneller und bequemer erfassen.
Wenn alles um die Aufmerksamkeit des Zuschauers schreit, wird nichts gehört.- Aaron Walter, 'Design für Emotionen'
Eine einfache Möglichkeit, den negativen Raum zu bestimmen, ist die Verwendung eines modularen Rasters. Wenn Sie dieses Raster über Ihren Entwurf legen, können Sie leicht erkennen, welche Module leer bleiben können und welche ausgefüllt werden sollten.
Designer von Brunswicker, Quelle: Codesignmag.com
Prinzip Nr. 3: Wählen Sie einen einzigen Schwerpunkt
Hat ein Kunde Sie schon einmal gebeten, das Logo größer zu machen, und dann die Überschrift noch größer?
Man kann nicht alles betonen, das würde den Sinn eines guten Designs zunichte machen. Genau wie die Zeit ist auch der Fokus relativ. Damit ein Element hervorsticht, muss ein anderes als Hintergrund dienen. Einige Elemente müssen andere dominieren, damit Ihr Design eine visuelle Hierarchie aufweist.
Der Fokuspunkt in einem Design ist das Element mit dem größten visuellen Gewicht. Es ist das Element, das das Auge zuerst anzieht, mehr als alles andere in Ihrem Layout.Ein Brennpunkt verkündet Ihrem Publikum, wo die Reise durch Ihr Design beginnt, er ist also der Anfang der Geschichte, die Sie erzählen.
Dies kann in der Regel durch die Verwendung eines großen Bildes oder einer großen Schrift erreicht werden. Beachten Sie, wie wirkungsvoll der folgende Schwerpunkt ist
Entworfen von Braulio Amado für Bloomberg Businessweek, Quelle: Es ist schön, dass
Aber während ein Schwerpunkt die Aufmerksamkeit Ihres Publikums auf sich zieht, hilft die nächste Regel dabei, sie zu lenken.
Prinzip Nr. 4: Denken Sie an Nähe und Fluss
Das Prinzip der Nähe ist einfach: Stellen Sie sicher, dass Elemente, die miteinander in Beziehung stehen, zusammen platziert werden.
Die räumliche Nähe zeigt an, dass die visuellen Elemente miteinander verbunden sind und eine visuelle Einheit bilden, die Ihr Layout organisiert.Gruppieren Sie also nur Design-Assets, die in einer Beziehung zueinander stehen, und verwenden Sie Informationstaschen in Ihrem Design, um Ihr Publikum zu den relevanten Inhalten zu führen, die es konsumieren muss. Dies wird auch als Flussprinzip bezeichnet.
Quelle: Satori Graphics
Ein gut durchdachtes Design führt das Auge des Betrachters mit Leichtigkeit durch das Layout, von Element zu Element. Ihre Schwerpunkte ziehen das Auge an und werden zum Ruhepunkt, während andere Elemente die Richtung vorgeben.
Am Beispiel unserer Website lässt sich dies leicht nachvollziehen: Die Grafiken sind klar vom Text getrennt, ebenso wie die Handlungsaufforderungen, so dass die Aufmerksamkeit des Betrachters von einer Informationsgruppe zur nächsten navigiert.
Prinzip Nr. 5: Verwenden Sie den Kontrast
Achten Sie auf einen ausreichenden Kontrast in Ihrem Design.
Kontraste helfen bei der Gliederung Ihres Designs, schaffen die dringend benötigte Hierarchie und heben das Wesentliche hervor.Darüber hinaus sorgt ein guter Kontrast für visuelles Interesse in Ihrem Design. Seien wir ehrlich, ein Layout, in dem alles die gleiche Größe, Form oder Farbe hat, sieht langweilig aus. Kontrast peppt die Dinge auf.
Ihr erster Gedanke ist vielleicht der Farbkontrast, z. B. warm gegen kühl, dunkel gegen hell, blau gegen orange. Aber während die Farbe ein äußerst wichtiges Prinzip des Kontrasts ist, gibt es auch Kontraste bei der Schrift, der Ausrichtung und der Größe. Und denken Sie daran, dass der Kontrast auch relativ ist. Er hat nur Bedeutung in der Gegenüberstellung mit anderen Elementen.
Hier sind einige Beispiele für Layouts, die diese Regel auf intelligente und schöne Weise anwenden. Beachten Sie den Kontrast in Typografie, Farbe und sogar den Kontrast in der Größe zwischen den Elementen.
Quelle: IAG-Aktionsplan zur Überleitung
Prinzip Nr. 6: Wiederholung, Muster, Rhythmus
Wenn wir an Wiederholung denken, denken wir an dasselbe Element, immer und immer wieder.
Aber im Design ist das anders. Es ist definitiv nicht so langweilig. Richtig eingesetzt, kann die Wiederholung Ihr Design sogar stärken.
Versuchen Sie, ein Motiv zu identifizieren und in Ihrem gesamten Layout wiederzuverwenden, damit sich die verschiedenen Bereiche verbunden und als Teil derselben Komposition fühlen. Das hilft Ihrem Design, ein Thema zu haben. Indem Sie Elemente wiederholen, erfüllen Sie nicht nur die Erwartungen Ihres Publikums, sondern verbessern auch die Benutzererfahrung. Wenn Sie konsistent sind, fühlen sich die Benutzer wohler.
Sie können dies tun, indem Sie Formen oder Symbole wiederholen, oder sogar ein Farbschema, eine Schriftart und denselben Stil im Allgemeinen.
Eine gute Angewohnheit ist es, eine Schriftart mit einer großen Familie zu verwenden. Begrenzen Sie die Anzahl der verschiedenen Muster, Strichstärken und Farben und wiederholen Sie diese. Versuchen Sie auch, den Stil der Bilder und Grafiken beizubehalten. Verwenden Sie zum Beispiel Illustrationen desselben Künstlers.
Quelle: Thepentool.co
Das sind die sechs Grundsätze, die Ihnen helfen werden, Ihr Design zu organisieren und ein sauberes, professionelles und ausgewogenes Layout zu erzielen.
Aber Ihre Reise ist hier noch nicht zu Ende. Grafikdesign ist keine exakte Wissenschaft und sollte sich nicht auf Tipps und Prinzipien beschränken. Wie in allen kreativen Bereichen gibt es keine feste Faustregel. Wenn Sie auf subtile Weise aus diesen Tipps ausbrechen, wird Ihr Design an Tiefe und Vielfalt gewinnen.
Dennoch sind sie ein guter Ausgangspunkt und wir ermutigen Sie, sie auszuprobieren und uns mitzuteilen, wie sie funktioniert haben!
Vectornator herunterladen und loslegen
Bringen Sie Ihre Entwürfe auf die nächste Stufe.
Datei herunterladen
