Was enthalten gängige Webseitenlayouts?

Es gibt einen Grund, warum wir über Webdesign sprechen. Sie beginnen mit einer leeren Seite, und Sie können viele Richtungen einschlagen. Wenn Sie nicht viel Erfahrung haben, könnte der Start mit einer leeren Seite ein wenig beängstigend sein. Wir haben über 25 Jahre Erfahrung und geben Ihnen einige gängige Faustregeln, um Ihnen beim Design Ihrer Website zu helfen.

Selbst mit dem neuen Fokus auf mobiles Web werden fast alle Mainstream-Webseiten aus diesen Teilen aufgebaut:

Header

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

Hauptinhalt

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

Dinge an der Seite

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

Footer

Sichtbar am unteren Rand jeder Seite der Website. Enthält, wie der Header, weniger prominente globale Informationen wie rechtliche Hinweise oder Kontaktinformationen.

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

1-Spalten-Layout. Besonders wichtig für mobile Browser, damit der kleine Bildschirm nicht überladen wird.

2-Spalten-Layout. Oft verwendet, um Tablets anzusprechen, da sie mittelgroße Bildschirme haben.

3-Spalten-Layouts. Nur für Desktops mit großen Bildschirmen geeignet. (Sogar viele Desktop-Nutzer ziehen es vor, Dinge in kleinen Fenstern statt im Vollbildmodus anzusehen.)

Der echte Spaß beginnt, wenn Sie alles miteinander mischen:

...

Dies sind nur Beispiele, und Sie sind ziemlich frei, die Dinge so anzuordnen, wie Sie möchten. Sie werden feststellen, dass, während der Inhalt auf dem Bildschirm bewegt werden kann, wir den Header (1) immer oben und den Footer (2) unten halten. Auch der Hauptinhalt (A) ist der wichtigste, also geben Sie ihm den größten Raum.

Dies sind Faustregeln, auf die Sie zurückgreifen können. Natürlich gibt es komplexe Designs und Ausnahmen. In anderen Artikeln werden wir darüber sprechen, wie man responsive Seiten gestaltet (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 gibt noch kein aktives Lernen. Bitte überlegen Sie, beizutragen.

Lassen Sie uns einige konkrete Beispiele von bekannten Websites genauer untersuchen.

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

Ziemlich unkompliziert. Denken Sie daran, viele Menschen werden Ihre Website immer noch von Desktops aus durchsuchen, also machen Sie Ihren Inhalt dort ebenfalls benutzbar/lesbar.

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

In diesem Beispiel sehen Sie sich das Bild (B1) direkt unter dem Header an. Es steht in Bezug zum Hauptinhalt, macht aber auch ohne ihn Sinn, sodass Sie das Bild entweder als Hauptinhalt oder als Seiteninhalt betrachten könnten. Dies spielt keine große Rolle. Was wichtig ist, ist, dass, wenn Sie etwas direkt unter den Header setzen, es entweder Hauptinhalt ist oder direkt mit dem Hauptinhalt zusammenhängen sollte.

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

Aber das ist es nicht! B1 und B2 schweben um den Hauptinhalt herum. Erinnern Sie sich an das Wort "float" – es wird Ihnen vertraut vorkommen, wenn Sie anfangen, über CSS zu lernen.

Warum würden Sie denken, dass es ein Drei-Spalten-Layout ist? Weil das Bild oben rechts L-förmig ist, weil B1 wie eine Spalte aussieht, die den verschobenen Hauptinhalt stü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 Designkreativität unterstützt. Einfache Layouts sind leichter umzusetzen, aber lassen Sie sich Raum, um Ihre Kreativität in diesem Bereich auszudrücken.

Die Opera de Paris.

Grundsätzlich ein Zwei-Spalten-Layout, aber Sie werden viele Anpassungen hier und dort bemerken, die das Layout visuell aufbrechen. Besonders der Header überlappt das Bild des Hauptinhalts. Die Art, wie die Kurve des Menüs im Header mit der Kurve am unteren Rand des Bildes übereinstimmt, lässt den Header und den Hauptinhalt wie eine Einheit aussehen, auch wenn sie technisch völlig unterschiedlich sind. Das Opera-Beispiel sieht komplexer aus als das MICA-Beispiel, ist aber eigentlich einfacher umzusetzen (gut, "einfach" ist ein relativer Begriff).

Wie Sie sehen, können Sie atemberaubende Webseiten selbst mit einfachen Layouts gestalten. Schauen Sie sich Ihre eigenen Lieblingswebsites an und fragen Sie sich: Wo ist der Header, der Footer, der Hauptinhalt und der Seiteninhalt? Das wird Sie zu Ihrem eigenen Design inspirieren und Ihnen gute Hinweise geben, welche Designs funktionieren und welche nicht.