Es gibt momentan eine Menge von Block- und Karten-Designs. Für Designer sind sie sowohl trendy als auch funktional. Der Look ist gestrafft und simpel und funktioniert in Bezug auf das Design der Website hervorragend in responsiven Frameworks.
Die Wurzel dieses Designtrends ist das modulare Design. Und unabhängig davon, was Sie denken, ist es nicht neu. Das modulare Design ist tief in der Designtheorie verwurzelt und wird von einer Reihe von Designern seit langem verwendet. Heute befassen wir uns mit dem Hintergrund und praktischen Anwendungen des modularen Designs!
Was ist modulares Design?
Modulares Design ist eine Technik, bei der alles mit einem Blockrastermuster erstellt wird. Jedes der Elemente des Designs passt in rechteckige Muster in die Module.
Modulares Design gibt es schon lange. Es wurde in verschiedenen Stadien von Zeitungsdesignern populär gemacht, als sie Module für die Bestandteile jeder Geschichte in der damaligen Ausgabe der Zeitung erstellten. Module sind jedoch auch für andere Designstile beliebt, da die Verwendung eines separaten Rasters eine gute Möglichkeit zum Organisieren und Verwalten von Inhalten ist.
Das modulare Raster eignet sich besonders für Projekte, bei denen es eine Fülle von Inhalten oder eine Vielzahl von Inhalten gibt, die zwar nicht im Gesicht miteinander verbunden sind, aber in einem Design zusammen erscheinen (deshalb war der Stil für Zeitungen mit so vielen nicht zusammenhängenden Teilen so beliebt auf einer großen Leinwand).
In der Website-Design-Landschaft ist das modulare Design aufgrund der Flexibilität des modularen Rasters eine beliebte Option. Modulare Konzepte lassen sich beim Entwerfen für responsive Frameworks problemlos verarbeiten. Das Rasterformat funktioniert besonders gut mit einigen anderen Trends wie Karten und Minimalismus.
Das modulare Design erfordert einige Überlegungen zum Frontend von Projekten, ist aber eigentlich nur ein gitterbasiertes Entwurfssystem, das wie jedes andere Grid funktioniert. Es funktioniert für jede Art von Projekt oder Stil. Und es wird Ihnen helfen, mit Organisation und Harmonie zu gestalten.
Wurzeln in anderen Bereichen
Modulares Design ist kein Konzept, das nur Grafikdesignern vorbehalten ist. Alles von der Architektur über die Innenarchitektur bis hin zum Bau von Computern oder sogar Autos kann modular aufgebaut sein. (Und jeder dieser Orte kann ein guter Ort sein, um nach Inspiration für das modulare Grafikdesign zu suchen.)
In anderen Bereichen ist die Definition des modularen Designs etwas weiter gefasst, kann jedoch immer noch in der Theorie des Grafikdesigns angewendet werden. Das modulare Design umfasst Elemente, die optisch wie Blöcke zusammenpassen, wie z. B. Kabinen in einem Büro oder eine Ziegelmauer an der Außenseite eines Gebäudes. Modular aufgebaute Elemente sind ebenfalls austauschbar, z. B. Teile, die Sie in einem Computer oder einem anderen Computer verwenden können, oder eine bestimmte Art von Autobatterie, die in mehreren Fahrzeugen funktioniert. In der physischen Praxis lässt das modulare Design den Menschen oft an ein Lego-Block-Design denken, bei dem Teile zusammengefügt oder voneinander getrennt werden können.
Modular im Druckdesign
Das modulare Design für Druckprojekte beginnt mit dem Raster. Das Raster und die beiliegenden Module im Raster bestimmen jede Konstruktionswahl, die Sie treffen. Mit dem Raster können Sie bestimmen, wo Elemente, Abstand und Ausrichtung von Text platziert werden sollen.
Glücklicherweise ist die Verwendung dieses Gitters nicht annähernd so einschränkend, wie Sie vielleicht denken. Da Sie in beliebig vielen Mustern oder Kombinationen innerhalb der Rasterlinien zeichnen können, sind die tatsächlichen Möglichkeiten nahezu unbegrenzt.
Diese Art von Gitternetz kann in nahezu jeder Art von Grafikdesign-Software eingerichtet werden, die Sie verwenden möchten, und besteht aus horizontalen und vertikalen Gitternetzlinien und Rinnen (Abstandsführungen). Sobald das Raster auf der Leinwand platziert ist, sollte es wie eine Reihe von Blöcken aussehen. - obwohl sie nicht eckig sein müssen - und dünne Blöcke (welche die Dachrinne oder Freiräume sind).
Wie es funktioniert, ist einfach. Jeder Inhalt lebt in den Blöcken und zwischen den Elementen muss ein Zwischenraum vorhanden sein. Sie können Blöcke unterschiedlicher Formen und Größen kombinieren und kombinieren, aber alles bleibt in einem harmonischen Designmuster mit horizontalem und vertikalem Fluss.
Hier finden Sie einige der Foto-Bild-Kombinationen, um eine Vorstellung davon zu erhalten, wie die Rasterblöcke zusammenarbeiten:
Modular im Webdesign
Wenn Sie über das modulare Design von Websites sprechen, werden Sie zunächst auf den Widerstand stoßen, der langweilig ist. Sie können das jetzt überwinden. Jedes Design kann langweilig oder interessant sein, aber ein Raster allein bestimmt das nicht.
Modular ist eine beliebte Option für das Website-Design, da es mit einigen anderen ziemlich trendigen Elementen übereinstimmt. Die Designer haben es mit flachem Design und vielen farbigen Blöcken als Entwurfsmuster wieder ins Gespräch gebracht. Windows verwendete eine modulare Schnittstelle für die Metro. Design von Windows.
Es ist jedoch auch ein hervorragendes Werkzeug zum Erstellen vieler anderer Arten von Websites. Genau wie beim modularen Druckdesign wurzelt das Konzept in einem vertikalen und horizontalen Raster auf der Leinwand. Wo es anders ist, ist in der Bildlaufleiste und für Haltepunkte für unterschiedliche Bildschirmauflösungen. (Sie können Ihre CSS-Magie hier bearbeiten und wir konzentrieren uns nur auf den visuellen Aspekt.)
Beim modularen Design von Websites denken wir zuerst an einen fast WYSIWYG-Stil für das Design, ähnlich dem, was Sie oft bei Premium-Webseitenthemen finden. Es gibt bereits vorgefertigte Blöcke, die bereits zusammenpassen - ähnlich wie beim Bau von Autos und Computern - so dass jeder Block in einen Gesamtrahmen passt und Sie nicht einmal über die Modularität des Designs nachdenken müssen.
Das ist der einfache Weg zu modular.
Es gibt auch die Option zum Selbermachen. Modulare Website-Raster weisen tendenziell größere Blöcke als Druckraster auf und zerlegen den Bildschirm in verdaubare Bits. Der einfachste Weg, um darüber nachzudenken, besteht in einem zweispaltigen Format, das den Bildschirm in zwei Hälften vertikal (mit einer Rinne) aufteilt.Horizontale Einteilungen sind oft die Tiefe eines Bildlaufs. Dies ist eine besonders beliebte Option, wenn Sie mit Parallax-Bildlaufanimationen arbeiten.
Eine der besten einfachen (und visuellen) Definitionen für die Funktionsweise des modularen Designs für Websites stammt von Christopher Butler von Newfangled:
10 Ressourcen für das modulare Design
Nun, da Sie bereit sind, Ihr erstes Projekt für das modulare Design zu starten, finden Sie hier einige weitere Ressourcen, die Sie dabei unterstützen werden.
- Modulares Gittermuster: Modulare Raster, die Sie anpassen und herunterladen können.
- Modulares oder nicht-modulares Design: Die Unterhaltung wird fortgesetzt von Mario Garcia
- All Mod Everything von Architizer: Beispiele zur Inspiration
- Modulare Layoutsysteme erstellen? von Jason Santa Maria
- Buch zu Rastern und Layouts: Layout-Grundlagen: 100 Design-Prinzipien für die Verwendung von Rastern
- Raster und experimentelle Typografie (PDF zum Herunterladen)
- Komplexes modulares Gitter von Karl Gerstner: Wenn Sie wirklich Gedanken machen wollen, wie Sie ein modulares Gitter denken und entwickeln können
- Griddle: CSS für ein fließendes und modulares Rastersystem für moderne Browser
- So erstellen Sie ein modulares Raster in Adobe Illustrator
- Modulare Themen von ThemeForest
Fazit
Lassen Sie sich nicht von den großen Ideen hinter einem modularen Design abschrecken. Erste Schritte mit dem modularen Design sind wie bei jedem anderen Raster oder Rahmen. Skizzieren Sie es, entwickeln Sie einen Plan und beginnen Sie mit dem Entwurf.
Die Vorteile des modularen Designs sind klarer Raum und Organisation, ein Raster, das in nahezu jedem Stil funktioniert, und die Benutzerfreundlichkeit für digitale Projekte. Aus einem bestimmten Grund wird sie immer beliebter. Es klappt. Gehen Sie jetzt aus und probieren Sie ein Projekt mit einem modularen Stil.
Bildquellen: Louise Cohen und Nils Mengedoht.