Hier gibt es natürlich zig Möglichkeiten - und keine davon ist falsch! Genau das ist das Schöne am Gestalten einer Homepage: Jeder kann sie so erstellen wie er möchte. Ich möchte euch heute ein paar Möglichkeiten aufzeigen, wie ihr eure Layouts aufbauen könnt (nicht müsst!).
Schauen wir uns zunächst an, was sich die letzen Jahre bei uns in der Szene eingebürgert hat:
Header oben, darunter Content und Navigation, zum Abschluss der Footer. Dieser Aufbau ist einfach klassisch. Er wirkt aufgeräumt, ordentlich und jeder findet sich schnell zurecht. Dabei ist es egal, ob die Navigation links oder rechts ist.
Nun kann man in diesem Model noch genug variieren. Hier ein paar Beispiele:
Wie ihr seht, könnt ihr mit den einzelnen Teilen des Layouts Beliebig variieren. So könnt ihr den Footer auch nur unter den Content setzen, oder eine zweite Navigation direkt unter dem Header platzieren und und und.
Ein paar Informationen
- Der obere Teil des Designs ist der Kopfbereich. Viele Designer bevorzugen den englischen Begriff "Header", ohne das HTML Tag <head> zu meinen. Typische Elemente des Header sind ein Logo, ein zentrales Bild oder eine Grafik auf farbigem Hintergrund. Das Bild bzw. die Grafik sollte den Inhalt der Website vermitteln. Oft besteht der Header aus einer einzigen großen Grafik.
- Innerhalb des Designs sollte der Besucher immer wieder auf die Start Seite zurück können, damit er die Orientierung nicht verliert. Daher sollte der erste Link in der Navigation nach Möglichkeit "Start" oder "Home" sein. Daher kommt übrigens der Begriff "Homepage".
Was ist wichtig beim Aufbau des Designs?
Wie ihr euer Layout aufbaut, ist komplett euch überlassen. Trotzdem solltet ihr ein paar Dinge beachten:
- Euer Header sollte zum Thema eurer Homepage passen
Wenn ihr eine Anime Seite betreibt, solltet ihr auch schauen, dass das Design zum Inhalt der Seite passt. Bei einer Anime Seite könnte der Header zum Beispiel aus einem Anime Bild bestehen oder aus einem Spielerischen Schriftzug oder dem Logo der Seite.
- Passt die Navigation dem Inhalt der Seite an
Habt ihr sehr viele Unterseiten auf eurer Homepage, bietet es sich an, zwei Navigationen zu machen oder aber die Links innerhalb einer Navigation nebeneinander zu platzieren. Das hat den Vorteil, dass die Navigation nicht zu lange wird und der Besucher auf einen Blick den gesamten Inhalt einsehen kann. Alternativ könnt ihr natürlich auch ein Drop-Down Menü oder sonstiges erstellen. Immer schön ist es, wenn die Navigation in weitere Unterpunkte gegliedert ist. So findet der Besucher sich noch schneller zurecht.
- Größe des Contents
Auch beim Content habt ihr die verschiedensten Möglichkeiten: schmal, breit, lang, kurz (mit Scrollbalken) und und und. Ihr solltet allerdings darauf achten, dass euer Inhalt auf den Unterseiten gut auf dem Content Platz hat. Bei einer Grafikseite sind schmale Contents meistens nicht sehr praktisch, da nur wenig Grafiken auf einer Seite Platz haben bzw. die größeren Grafiken gar keinen Platz haben.
- Inhalt des Footers
In den Footer könnt ihr alles mögliche rein klatschen: verschiedene Links (Affis/Partner/Cuties & mehr), Credits, Impressum, Kommentare.... Natürlich könnt ihr den Footer auch einfach weg lassen.
Achtet darauf, dass der Aufbau eurer Seite zum Inhalt und der Menge eurer Unterseiten passt. Viele skizzieren ihr Design auch erst auf ein Blatt Papier, bevor sie es umsetzen.
Aufbau Trend 2013
In der Szene sind vereinzelnd immer wieder ein paar Trends zu erkennen, die sich alle paar Monate oder Jahre abwechseln.
Diese Designs stammen von Bluehaze, Jolly Manga, The Peril, Auroria, Wedding Change und Crystal Blossom.
Aufbau außerhalb der Szene
Außerhalb der Szene herrscht 2013 ein vollkommen anderer Trend. Der komplette Bildschirm wird genutzt und auch die Ansicht für die mobilen Endgeräte sind wichtig. Flatdesign ist das neue Webdesign!
Bilder von Apple, The Expressive Web, Microsoft, Wp-Freemium, Design for better..., T3n
Hier findet ihr übrigens die Top 10 der Besten HTML 5 Websiten 2013.
Was meint ihr, warum unterscheiden sich die Homepages außerhalb der Szene von denen in der Szene?
Schöner Post! Du hast den klassischen Aufbau gut beschrieben. Für mich ist der Aufbau ja etwas, das jeder ganz individuell entscheiden kann. Es gibt da noch viel mehr Möglichkeiten, wie die Navi oberhalb des Headers oder im Footer einzubinden, das Bild seitlich und den Content nebenbei zu plazieren, das Bild unten,...
AntwortenLöschenDa sind einem einfach keine Grenzen gesetzt.
Ich glaube den Unterschied im Aufbau kann man sich ganz einfach erklären:
In der Szene wollen die meisten, dass die Seite wirkt als wäre sie sehr voll um den Anschein zu erwecken, dass es hier sehr viel zu entdecken gibt.
Vielen ist hier die Quantität sehr wichtig.
Aber außerhalb zählt eher das "professionelle". Und minimalistische Layouts lassen sich einfacher für jedes Gerät und jede Auflösung anpassen, so dass es überall gut aussieht.
Nimmt man eine Seite der Szene, wie z.B. Pinkpeal, wäre das erreichen über z.B. das Handy ziemlich ...anstrengend.
Da müsste man zu viel scrollen.
Und professionelle Seite legen auch keinen Wert darauf, dass die Seite nach Quantität wirkt.
Ganz nach dem Prinzip: Weniger ist mehr.
Und weniger lenkt den Besucher nicht so sehr vom wesentlichen ab.
Auf offiziellen Seiten verbringt man selten Stunden - hier will man nur überall und jederzeit hinein schauen können und schnell fündig werden.
Und das wissen die Webdesigner natürlich.