Was enthalten gängige Weblayouts?

Es gibt einen Grund, warum wir über Webdesign sprechen. Sie beginnen mit einer leeren Seite, und es gibt so viele Richtungen, die Sie einschlagen können. Und wenn Sie nicht viel Erfahrung haben, kann ein leeres Blatt etwas beängstigend sein. Wir verfügen über mehr als 25 Jahre Erfahrung und geben Ihnen einige gängige Faustregeln an die Hand, um Ihnen bei der Gestaltung Ihrer Website zu helfen.

Selbst jetzt, mit dem neuen Fokus auf das mobile Web, bestehen fast alle Mainstream-Webseiten aus diesen Teilen:

Header

Sichtbar oben auf jeder Seite der Website. Enthält Informationen, die für alle Seiten relevant sind (wie den Namen der Website oder das Logo) und ein benutzerfreundliches Navigationssystem.

Hauptinhalt

Der größte Bereich, der Inhalte enthält, die einzigartig für die aktuelle Seite sind.

Elemente an der Seite

1) Informationen, die den Hauptinhalt ergänzen; 2) Informationen, die von einer Teilmenge von Seiten geteilt werden; 3) alternatives Navigationssystem. Tatsächlich alles, was nicht unbedingt vom Hauptinhalt der Seite benötigt wird.

Footer

Sichtbar unten auf jeder Seite der Website. Enthält wie der Header weniger prominente globale Informationen wie rechtliche Hinweise oder Kontaktinformationen.

Diese Elemente sind in allen Formfaktoren recht häufig, aber sie können unterschiedlich angeordnet werden. Hier einige Beispiele (1 stellt den Header dar, 2 den Footer; A den Hauptinhalt; B1, B2 Dinge an der Seite):

1-Spalten-Layout. Besonders wichtig für mobile Browser, um den kleinen Bildschirm nicht zu überladen.

2-Spalten-Layout. Häufig bei Tablets verwendet, da sie mittelgroße Bildschirme haben.

3-Spalten-Layouts. Nur für Desktops mit großen Bildschirmen geeignet. (Viele Desktop-Nutzer bevorzugen es sogar, Dinge in kleinen Fenstern anstelle von Vollbild anzuzeigen.)

Der eigentliche Spaß beginnt, wenn Sie alle miteinander vermischen:

…

Dies sind nur Beispiele und Sie sind frei, die Dinge so anzuordnen, wie Sie möchten. Sie werden bemerken, dass, obwohl der Inhalt auf dem Bildschirm verschoben werden kann, wir den Header (1) immer oben und den Footer (2) unten beibehalten. Auch der Hauptinhalt (A) ist am wichtigsten, daher geben Sie ihm den meisten Raum.

Dies sind Faustregeln, auf die Sie zurückgreifen können. Natürlich gibt es komplexe Designs und Ausnahmen. In anderen Artikeln werden wir besprechen, wie man responsive Seiten entwirft (Seiten, die sich je nach Bildschirmgröße ändern) und Seiten, deren Layouts zwischen den Seiten variieren. Vorerst ist es am besten, Ihr Layout auf Ihrer gesamten Website konsistent zu halten.

Es ist noch kein aktives Lernen verfügbar. Bitte erwägen Sie, einen Beitrag zu leisten.

Studieren wir einige konkretere Beispiele von bekannten Websites.

Ein typisches Einspalten-Layout, das alle Informationen linear auf einer Seite bereitstellt.

Ziemlich einfach. Denken Sie einfach daran, viele Leute werden Ihre Seite immer noch von Desktops aus durchsuchen, daher sollte Ihr Inhalt auch dort benutzbar/lesbar sein.

Blogs haben normalerweise zwei Spalten, eine breite für den Hauptinhalt und eine schmale für Dinge an der Seite (wie Widgets, sekundäre Navigationsebenen und Anzeigen).

In diesem Beispiel, schauen Sie sich das Bild (B1) direkt unter dem Header an. Es ist mit dem Hauptinhalt verbunden, aber der Hauptinhalt macht auch ohne ihn Sinn, also könnten Sie das Bild entweder als Hauptinhalt oder als Seiteninhalt betrachten. Es spielt nicht wirklich eine Rolle. Was wichtig ist: Wenn Sie etwas direkt unter den Header setzen, sollte es entweder der Hauptinhalt sein oder direkt mit dem Hauptinhalt in Zusammenhang stehen.

MICA. Dies ist etwas kniffliger. Es sieht aus wie ein Drei-Spalten-Layout:

Aber das ist es nicht! B1 und B2 schweben um den Hauptinhalt. Denken Sie an das Wort "schweben" – es wird Ihnen bekannt vorkommen, wenn Sie anfangen, CSS zu lernen.

Warum würden Sie denken, dass es ein Drei-Spalten-Layout ist? Weil das Bild oben rechts eine L-Form hat, weil B1 wie eine Spalte aussieht, die den verschobenen Hauptinhalt unterstützt, und weil das "M" und "I" des MICA-Logos eine vertikale Kraftlinie erzeugen.

Dies ist ein gutes Beispiel für ein klassisches Layout, das etwas gestalterische Kreativität unterstützt. Einfache Layouts sind einfacher zu implementieren, aber lassen Ihnen Spielraum, um in diesem Bereich Kreativität auszudrücken.

Die Oper von Paris.

Im Grunde ein Zwei-Spalten-Layout, aber Sie werden viele Feinheiten bemerken, die visuell die Anordnung aufbrechen. Insbesondere überlappt der Header das Bild des Hauptinhalts. Die Art, wie die Kurve des Menüs im Header mit der Kurve unten im Bild verbunden ist, lässt den Header und den Hauptinhalt wie eine Einheit erscheinen, obwohl sie technisch völlig unterschiedlich sind. Das Beispiel der Oper sieht komplexer aus als das MICA-Beispiel, ist aber tatsächlich leichter zu implementieren (gut, "leicht" ist ein relativer Begriff).

Wie Sie sehen, können Sie atemberaubende Websites auch mit nur grundlegenden Layouts gestalten. Werfen Sie einen Blick auf Ihre eigenen Lieblingswebsites und fragen Sie sich, wo der Header, der Footer, der Hauptinhalt und der Seiteninhalt sind? Das wird Sie für Ihr eigenes Design inspirieren und Ihnen gute Hinweise geben, welche Designs funktionieren und welche nicht.