Css Editor Css Editor Css Editor

Layout-Tipps für die eigene Homepage

...Hier findest Du alles Wissenswerte zum Thema

Es kommt nicht nur auf die Inhalte einer Website an, sondern auch wie diese vermittelt werden. Das Layout ist entscheidend für den Eindruck einer Homepage und sollte schon bevor der genaue Inhalt der Seite erarbeitet wird in groben Zügen feststehen. Als Layout wird die Anordnung der einzelnen Elemente, also zum Beispiel von Texten und Bildern, auf einer Web-Seite verstanden. Gemeinsam mit dem Design ist es für die Optik der Homepage verantwortlich.


Der folgende Text gibt Auskunft, was beim Festlegen des Layouts zu beachten ist und wie sich das Layout im Laufe der Zeit weiterentwickelt hat. Zum Schluss gibt der Text Anweisungen, mit deren Hilfe ein optimales Layout für eine Homepage gefunden werden kann.

Wix Homepage-Baukasten
Star (Full) Star (Full) Star (Full) Star (Full) Star (Full)

Sehr einfache Bedienung
Die schönsten Designvorlagen
Sehr flexible Gestaltung möglich
Über 100 Mio. Kunden weltweit

0,00 €
Dauerhaft kostenlos
Jimdo Homepage Baukasten
Star (Full) Star (Full) Star (Full) Star (Full) Star (Full)

Bestes Preis-Leistungs-Verhältnis
Sehr faire Vertragsbedingungen
Testsieger bei Computerbild & t3n
Beliebtester deutscher Anbieter

0,00 €
Dauerhaft kostenlos

Optik und Inhalt

Das Layout ist eng mit dem Design der Seite verbunden. Beides sollte mit dem Inhalt der Seite korrespondieren. Es gibt kein Patentrezept für die perfekte Internetseite, allerdings hilft der Grundsatz „Form follows Funcion“. Anders ausgedrückt: Die Inhalte und die Funktionen einer Website sollten ihr Aussehen bestimmen. Handelt es sich beispielsweise um eine Fotografen- oder Künstlerhomepage, sollte darauf geachtet werden, die Bilder in den Fokus zu stellen und Texten nicht zu viel Raum zu geben. Muss der Seitenbesucher erst einmal auf der Seite nach den Werken des Künstlers suchen oder über seitenlangen Text zum nächsten Bild scrollen, kann das Seitenlayout eher abschreckend wirken.


Weniger ist manchmal mehr

Besonders wichtig beim Anordnen der Seite: Nicht zu viel auf einmal und eine klare Struktur! Homepagebaukästen schaffen zwischen einzelnen Elementen in der Regel eine kleine Lücke und bieten mit ihren durchdachten Layout-Vorschlägen wenig Möglichkeit, etwas falsch zu machen. Trotzdem sollte auch hier darauf geachtet werden, dass die Web-Seite nicht überladen wirkt. Ein Aufbau der Seite mit Spalten wirkt angenehmer als Texte, die sich über die ganze Breite der Seite erstrecken. Um eine Struktur in die Seite zu bringen, eignen sich Bilder als Trennelemente zwischen verschiedenen Sinnabschnitten besonders gut.


Im Hinblick auf das Design sollte auch darauf geachtet werden, dass die Optik einer Seite nicht durch zu viele unterschiedliche Schriftgrößen und -arten gestört wird. Auch die Verwendung zu vieler Farben kann auf Dauer verwirren und anstrengend für das Auge sein. Im Laufe der Zeit hat sich ein einfacher Aufbau mit schlichten Farbtönen und ein bis zwei knalligeren Akzentfarben durchgesetzt. Durch Bilder ist eine Homepage schon bunt genug und die Akzentfarben, die für Überschriften, Icons oder andere Elemente eingesetzt werden können, runden die Optik der Seite ab und schaffen einen Wiedererkennungswert. Sie können auch als optische Trenner wirken, wenn sie sich auf unterschiedlichen Bereichen der Seite unterscheiden.


Entwicklung von Layoutkonzepten

Das “ideale” Design hat sich gemeinsam mit den technischen Möglichkeiten des Internets weiterentwickelt. Bis zum eher minimalistischen und schlichten Stil, der heute auf den meisten Internetseiten zu finden ist, haben Homepages im Laufe der Jahre schon einige Schritte zurückgelegt.


Zu den Anfangszeiten des Internets waren Layout und Design noch gar kein Thema. Internetseiten bestanden nur aus Text, der sich über die volle Bildschirmbreite erstreckte. Informationen wurden zu diesem Zeitpunkt statisch präsentiert und waren nichts anderes als ein online verfügbares Stück Papier. (MAC Bildschirm mit Seitenausschnitt von https://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html)


Mitte der Neunziger Jahre kamen mit der Programmiersprache HTML neue Gestaltungsmöglichkeiten dazu. Der Seitenaufbau wurde nun mit Hilfe einer Tabelle gegliedert und war nicht mehr auf eine Textspalte beschränkt. Gleichzeitig wurden Internetseiten auch komplexer, weshalb meist in einer Randspalte das Menü zu den einzelnen Unterseiten eingefügt wurde. (http://www.gyford.com/archive/1995/11/13/HotWiredDemo/)


Internetseiten orientierten sich in den Anfängen des World Wide Web hauptsächlich an der Aussage, die sie vermitteln sollten, nicht aber an den Nutzern. Das änderte sich vor allem dann als Flash-Webseiten populärer wurden. Durch Buttons zum Anklicken und anderen interaktiven Elementen wurden die Nutzer integriert. Mit aufwendigen Animationen, Videos und Bildern machten die Flash-Seiten einen Schritt weiter weg von ihren nur mit Text gefüllten Vorgängern. (http://www.thefwa.com/flash10/gabo.html)


Heutzutage sehen die Internetseiten wieder ganz anders aus. Die schrille, bunte Zeit ist vorbei und das World Wide Web ist heute schlichter und moderner. Das Menü ist nach oben gerutscht, um das heute gängige Breitbildformat besser nutzen zu können. Die großen Konzerne Apple und Google mit dem Material-Design haben es vorgemacht: Weiß, Grau oder Schwarz als Grundlage, darauf dann Text und ein bis zwei Akzentfarben, um der Seite Leben einzuhauchen. Bildschirmfüllende Bilder führen an Themen heran und geben einen Ausblick auf den Inhalt einer Seite. (http://www.jetradar.com/flights/) Heute sind Programmierkenntnisse keine Voraussetzung mehr, um eine Seite zu erstellen. Mit Homepagebaukästen können sich auch Laien im Internet verwirklichen – und das mit hochwertigem Layout und Design. Die Vorlagen der Anbieter orientieren sich an den aktuellen Trends und erleichtern es damit, die eigene Seite modern und ansprechend zu gestalten.


In 5 Schritten zum idealen Layout

1. Seitenaussage in Optik umwandeln: Die Optik einer Webseite muss mit ihrer inhaltlichen Aussage zusammenpassen. Die Homepage sollte aus diesem Grund auf ihre jeweilige Branche ausgerichtet sein. Damit steht auch fest, ob der Fokus mehr auf Bild, Videos oder Text liegt. Viele Homepagebaukästen bieten bei ihren Designvorlagen auch die Möglichkeit nach Branchen zu sortieren.

2. Klare Struktur finden: Damit der Besucher sich schnell zurecht findet, ist es besonders wichtig, die Seite zu strukturieren. Neben den Unterseiten, die über das Menü erreichbar sind und die Homepage inhaltlich grob gliedern, kann mit optischen Trennelementen wie Linien, Absätzen und Bildern auch im Kleineren nach Sinnaspekten aufgespalten werden.


3. Seite aus Sicht der Besucher betrachten: Eine Homepage sollte auf die Bedürfnisse des Besuchers ausgerichtet sein. Aus diesem Grund sollte beim Festlegen des Layouts im Fokus stehen, mit welcher Aufteilung sich der Nutzer am besten zurecht findet und am schnellsten an die für ihn relevanten Informationen kommt.


4. Layoutregeln festlegen: Ein Regelwerk für das Layout ist vor allem notwendig, wenn mehrere Personen an einer Seite arbeiten. Mit einem einheitlichen Layout, das von Unterseite zu Unterseite nur minimal verändert wird, kann ein Wiedererkennungswert geschaffen werden.


5. Layout anwenden: Im letzten Schritt müssen die festgelegten Regeln nur noch umgesetzt und auf die eigene Homepage angewendet werden.


Avatar Erstellt von:
Jens Walter
Homepage-Experte
Erstellt am:
05.07.2016
Zuletzt aktualisiert am:
17.01.2017
Hast Du Fragen oder Anregungen zu diesem Artikel?

Wir freuen uns über Dein Feedback, da es für uns eine wertvolle Unterstützung dabei ist, die langfristige Qualität unserer Inhalte zu gewährleisten.