Es gibt immer den Moment am Anfang eines Website-Design-Projekts, in dem Sie denken, wo fange ich an? Sie kämpfen gegen den Wunsch, etwas völlig anderes und Neues zu schaffen, als etwas, das getestet und zuverlässig ist.
Realistisch gesehen gibt es einige Layouts, die einfach nie alt werden. Diese Muster werden von den Benutzern allgemein akzeptiert, sind leicht verständlich und bieten einen soliden Rahmen für nahezu alle Design- und Inhaltstypen. Hier betrachten wir diese fünf? Zeitlos? Website-Layouts und wie Sie diese für Ihr nächstes Projekt optimal nutzen können.
1. Heldenbild auf einem einfachen Gitter gestapelt
Unabhängig von der Bildschirmgröße bietet dieses Format dem Benutzer etwas zum Ansehen, Scrollen und Verdauen. Die tatsächlichen Spezifikationen für diese Form können sich je nach Gerätetyp oder ob Sie ein Bild mit voller Breite oder flacher Oberfläche bevorzugen, ändern. Die Skizze ist jedoch ungefähr gleich.
- Navigation
- Heldenbild mit Textüberlagerung
- 2 bis 4 Spalten mit kleinen Informationselementen mit oder ohne Symbole
- Hauptkörperbereich
- Fußzeile
Das Design ist sauber, bietet eine starke visuelle Präsenz und funktioniert unabhängig von Haltepunkten gut mit responsiven Frameworks. Einige alternative Anwendungen dieses Formats bestehen darin, einen statischen Heldenheader für einen Slider oder einen Videoheader zu wechseln.
Warum es funktioniert: Jedes Element hat einen Platz und es gibt einen logischen Fluss, um dem Inhalt zu folgen. Das Hauptbild ist der erste Eindruck, der die Benutzer in das Design einbeziehen sollte, und sekundäre Elemente sollten dazu führen, dass die Benutzer klicken möchten.
Einen Trend einbinden: Fügen Sie den spaltenbasierten Informationselementen farbige Symbole oder Kästchen hinzu, oder verwenden Sie im gesamten Design einen flachen Stil für die Elemente der Benutzeroberfläche.
2. Eine Seite, eine Spalte
One-Page-Layouts sind eine der besten Lösungen für Websites mit minimalem Inhalt und einem einzigen Fokus oder einer einzigen Nachricht. Wenn die Botschaft einfach ist, muss die Form des Layouts auch nicht verrückt werden. Ein einspaltiges Layout kann die perfekte Lösung sein.
- Navigation
- Hauptteilbereich mit Bildern und Text
- Fußzeile
Bei Verwendung dieses Entwurfsmusters ist der Raum ein wichtiges Gestaltungselement. Stellen Sie sicher, dass zwischen den Elementen genügend Platz ist, und achten Sie auf einen übertriebenen Abstand an den Außenkanten des Designs. Das Risiko einer einseitigen Website besteht darin, dass sie sich beengt oder unstrukturiert anfühlt, wenn der Abstand nicht stimmt.
Warum es funktioniert: Die einseitige Formel eignet sich am besten für kleine Websites. Dies kann dazu führen, dass das Fehlen von Inhalten auf einer Einführungsseite oder einem einfachen Portfolio gewichtiger wird als es ist. Das Format eignet sich auch für einfache Blogs oder Inhaltspläne, die sich auf ein einziges Format beziehen.
Einen Trend einbinden: Fügen Sie Parallax-Bildlauf hinzu, um die Seite beim Scrollen der Benutzer ansprechender zu gestalten. Diese einfachen Effekte können dazu führen, dass ein einfaches einseitiges Design tiefer und robuster wirkt (und wie es tatsächlich mehrere Seiten mit jedem Mausklick gibt).
3. Definiertes Gitter
Ordentlich gestapelte Zeilen und Spalten des Inhalts werden nie aus der Mode geraten. Unabhängig davon, ob das Raster aus vielen kleinen Stücken oder nur einer Anordnung von vier mal vier besteht, informiert ein sauberes Raster Ihren Benutzer von Anfang an über Sie. Dieser Inhalt wird gut organisiert, verwaltet und für Sie bestellt.
Grids sind bei Designern für ihre eigenen Portfolio-Websites äußerst beliebt. Das Schöne an einem Bildgitter ist, dass Sie eine Menge visueller Inhalte präsentieren können, ohne Junkies zu wirken. Dieser Galerieeffekt kann sehr wirkungsvoll sein.
Raster können auch in Form von farbigen Kästchen oder Behältern zum Organisieren von Text vorliegen. Rasterlinien können sichtbar oder unsichtbar sein. Es gibt so viele Möglichkeiten zur Auswahl. Denken Sie daran, besonders auf die Breite und Tiefe der Spalten und Zeilen sowie den Abstand zwischen ihnen zu achten. Diese kleinen Details können das gesamte Design beeinflussen oder zerstören.
Warum es funktioniert: Die Organisation, die ein Raster schafft, ist schwer zu schlagen. Ein schönes Raster erleichtert es Benutzern, Inhalte zu finden und mit ihnen zu interagieren, während visuelle Harmonie entsteht.
Einen Trend einbinden: Verwenden Sie einfache Animationen für ein gekacheltes Gitter, so dass ein Klick mit dem Mauszeiger einen Rasterblock, um zusätzliche Informationen anzuzeigen. Willst du eine andere Option? Erwägen Sie, das Raster in ein Kartendeck mit einem Materialdesign-Stil zu verwandeln.
4. Das klassische F-Muster
Die Erforschung der Art und Weise, wie Menschen Websites betrachten, enthüllte einen bestimmten Fluss, der als F-Pattern bezeichnet wird. Das Lesemuster zeigte, dass Benutzer am oberen Rand einer Website beginnen und von links nach rechts über den Bildschirm lesen. Dann bewegen sie sich nach unten und lesen weiter. Zum Schluss blättern sie gerade in einer geraden Linie zum unteren Rand der Seite.
Durch das Erstellen von Inhalten in diesem F-Pattern können Sie die Inhalte, auf die der Benutzer am wichtigsten ist, richtig einordnen. Dieses Konzept überträgt sich auf eine gemeinsame Designlinie.
- Kopfzeile und Navigation
- Breite linke Spalte als Hauptinhaltsbereich
- Dünne rechte Spalte (Seitenleiste) für Links und verwandte Informationen, die nicht am Ende der Seite angezeigt werden
- Fußzeile
Warum es funktioniert: Menschen sind Gewohnheitstiere, und dies ist ein erprobtes Muster, das zeigt, wie Menschen Websites denken, betrachten und lesen. Es ist bequem und üblich, sodass Benutzer leicht verstehen und mit ihnen interagieren können.
Einen Trend einbinden: Drehen Sie die Position der Seitenleiste um oder drehen Sie die Seitenleiste in den Navigationsbereich oder verwenden Sie ein Heldenbild über dem F-förmigen Muster.
5. Minimale Schichtung
Ein minimalistisches Design ist einfach etwas. Der offene Raum ermöglicht es dem Benutzer, sich mit einem gerichteten Fokus wohl zu fühlen. Dann gibt es die Aneinanderreihung von Ebenen in diesem Raum, die komplexer und detaillierter sind.
Diese Kombination aus Einfachheit und Interesse macht diesen Designstil für eine Reihe von Projekttypen praktikabel und formbar. Es ist auch etwas, an das Benutzer gewöhnt sind, da Apple auf ihrer Website häufig verwendet wird.
Warum es funktioniert: Durch das Layering kann der Blick genau auf die Stelle gelenkt werden, an der es im Design am wichtigsten ist. Besonders in Verbindung mit einem einfachen Gesamtdesign ist dies das Element, das den Benutzer zur Aufmerksamkeit auffordert. Das Schichten auf einer minimalen Kontur ist eine großartige Möglichkeit, einen bestimmten Inhalt oder einen Aufruf zum Handeln zu präsentieren oder hervorzuheben.
Einen Trend einbinden: Verwenden Sie subtile Farbverläufe oder Schatten, um Elemente in verschiedenen Ebenen zu definieren. Während diese Designtechniken für eine Weile aus der Mode geraten sind, wird die Differenzierung durch Material Design und die Neuausrichtung auf das Ertasten eines Tastbereichs im zweidimensionalen Raum zu einem großen Comeback.
Fazit
Wenn Sie Zweifel an einer beliebigen Art von Design haben, können Sie zu den Wurzeln der Designtheorie zurückkehren. Nutzen Sie klassische Ideen und Prinzipien, um Ihre Entscheidungen zu treffen.
In den meisten Fällen führt dies zu etwas, das sauber und leicht lesbar ist und dem herkömmlichen Stil folgt. Sobald Sie dieses grundlegende Framework erstellt haben, können Sie ein trendiges Element hinzufügen, um das Layout frisch zu halten. Wenn Sie eine dieser Layout-Philosophie verwenden, können Sie eine Website erstellen, die den Test der Zeit besser übersteht, ohne dass Sie alt aussehen. (Jetzt, da Sie darüber nachdenken, werden Sie wahrscheinlich feststellen, wie viele Websites tatsächlich eines dieser Konzepte verwenden.)