Was enthalten gängige Weblayouts?
Beim Entwerfen von Seiten für Ihre Website ist es gut, eine Vorstellung von den gängigsten Layouts zu haben.
Voraussetzungen: | Vergewissern Sie sich, dass Sie bereits darüber nachgedacht haben, was Sie mit Ihrem Webprojekt erreichen möchten. |
---|---|
Ziel: | Lernen, wo Sie Elemente auf Ihren Webseiten platzieren und wie Sie sie dort platzieren. |
Zusammenfassung
Es gibt einen Grund, warum wir von Webdesign sprechen. Sie beginnen mit einer leeren Seite und können in viele Richtungen gehen. Und wenn Sie nicht viel Erfahrung haben, kann eine leere Seite am Anfang etwas beängstigend sein. Wir haben über 25 Jahre Erfahrung und geben Ihnen einige gängige Faustregeln, die Ihnen beim Entwerfen Ihrer Website helfen.
Auch jetzt mit dem neuen Fokus auf das mobile Web werden fast alle Mainstream-Webseiten aus diesen Teilen gebaut:
- Header
-
Sichtbar oben auf jeder Seite der Website. Enthält Informationen, die für alle Seiten relevant sind (wie Website-Name oder Logo) und ein benutzerfreundliches Navigationssystem.
- Hauptinhalt
-
Der größte Bereich, der Inhalte enthält, die für die aktuelle Seite einzigartig sind.
- Dinge an der Seite
-
1) Informationen, die den Hauptinhalt ergänzen; 2) Informationen, die zwischen einem Teil der Seiten geteilt werden; 3) alternatives Navigationssystem. Im Grunde alles, was für den Hauptinhalt der Seite nicht absolut erforderlich ist.
-
Sichtbar unten auf jeder Seite der Website. Wie der Header, enthält weniger prominente globale Informationen wie rechtliche Hinweise oder Kontaktinformationen.
Diese Elemente sind in allen Formfaktoren sehr häufig, aber sie können unterschiedlich angeordnet werden. Hier 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, um den kleinen Bildschirm nicht mit zu viel Inhalt zu überladen.
2-Spalten-Layout. Häufig für Tablets verwendet, da sie mittelgroße Bildschirme haben.
3-Spalten-Layouts. Nur für Desktops mit großen Bildschirmen geeignet. (Viele Desktop-Benutzer ziehen es dennoch vor, Dinge in kleinen Fenstern anzuzeigen, anstatt im Vollbildmodus.)
Der eigentliche Spaß beginnt, wenn Sie alle zusammen mischen:
…
Dies sind nur Beispiele, und Sie können die Elemente nach Belieben anordnen. Sie werden feststellen, dass, obwohl der Inhalt auf dem Bildschirm bewegt werden kann, der Header (1) immer oben und der Footer (2) unten bleibt. Auch der Hauptinhalt (A) ist am wichtigsten, daher geben Sie ihm den meisten Platz.
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. Im Moment ist es am besten, Ihr Layout über die gesamte Website konsistent zu halten.
Aktives Lernen
Es steht derzeit kein aktives Lernen zur Verfügung. Bitte erwägen Sie einen Beitrag zu leisten.
Tiefergehende Einblicke
Lassen Sie uns einige konkretere Beispiele von bekannten Websites untersuchen.
Ein-Spalten-Layout
Invision-Anwendung. Ein typisches Ein-Spalten-Layout, das alle Informationen linear auf einer Seite bereitstellt.
Ganz einfach. Denken Sie daran, dass viele Menschen Ihre Website dennoch von Desktops aus durchsuchen werden, machen Sie also Ihre Inhalte dort nutzbar/lesbar.
Zwei-Spalten-Layout
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 Werbung).
In diesem Beispiel schauen Sie sich das Bild (B1) direkt unter dem Header an. Es steht in Bezug zum Hauptinhalt, aber der Hauptinhalt macht auch ohne Sinn, sodass Sie das Bild entweder als Hauptinhalt oder als Randinhalt betrachten könnten. Das spielt keine wirkliche Rolle. Was jedoch wichtig ist, wenn Sie direkt unter dem Header etwas platzieren, sollte es entweder Hauptinhalt oder direkt mit dem Hauptinhalt verwandt sein.
Es ist eine Falle
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 "float" - es wird Ihnen ein Begriff sein, wenn Sie anfangen, über CSS zu lernen.
Warum würden Sie denken, dass es sich um ein Drei-Spalten-Layout handelt? 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 das "I" des MICA-Logos eine vertikale Kraftlinie bilden.
Dies ist ein gutes Beispiel für ein klassisches Layout, das einige gestalterische Kreativität unterstützt. Einfache Layouts sind einfacher zu implementieren, aber lassen Sie sich Raum für kreative Ausdrucksmöglichkeiten in diesem Bereich.
Ein viel kniffligeres Layout
Die Opera de Paris.
Grundsätzlich ein Zwei-Spalten-Layout, aber Sie werden viele kleine Anpassungen bemerken, die das Layout visuell aufbrechen. Insbesondere überlappt der Header das Bild des Hauptinhalts. Die Art und Weise, wie die Kurve des Menüs im Header mit der Kurve am unteren Rand des Bildes verbunden ist, lässt den Header und den Hauptinhalt wie eine Einheit aussehen, obwohl sie technisch völlig unterschiedlich sind. Das Opera-Beispiel sieht komplexer aus als das MICA-Beispiel, ist tatsächlich aber leichter zu implementieren (na gut, "leicht" ist ein relativer Begriff).
Wie Sie sehen, können Sie mit nur grundlegenden Layouts atemberaubende Websites erstellen. Schauen Sie sich Ihre eigenen Lieblingswebsites an und fragen Sie sich, wo ist der Header, der Footer, der Hauptinhalt und der Randinhalt? Das wird Sie für Ihr eigenes Design inspirieren und Ihnen gute Hinweise darauf geben, welche Designs funktionieren und welche nicht.