Layout und Raster

Grundlegende Layouts

Im Web haben sich über die letzten Jahrzente einige Layout-Elemente und -Kombinationen bewährt.

Zu fast jeder Website gehören heutzutage die Bereiche:

  • Header (Kopfbereich mit Logo und Navigation)
  • Content (Inhaltsbereich)
  • Footer (Fußbereich mit zusätzlichen Informationen)

Häufig besitzt der "Content" auch eine seitliche Leiste, die sogenannte Sidebar.

Beim Webdesign und der Web-Entwicklung wird darauf geachtet, dass die Unterseiten immer im gleichen Layout, also der selben Kombination von Elementen, aufgebaut wird. Diese festgelegte Kombination wird auch als "Template" bezeichnet.

Manchmal macht die Verwendung eines anderen Template auf einer Unterseite Sinn, um gewisse Informationen aus einem anderen Themengebiet anders, und dadurch prägnanter, darzustellen.

Raster

Zur Vereinfachung der Schnittstelle von Design, Inhalt und Entwicklung wird beim professionellen Webdesign oft ein fest definiertes Raster (englisch: Grid) benutzt. Ein solches Raster unterteilt den verfügbaren Bereich eines Bildschirms in Spalten — früher in Pixel-Angaben, heutzutage in Hinblick auf Responsive Webdesign in Prozent-Angaben, damit das Spalten-Konzept in jeder Bildschirmauflösung auf jedem Gerät funktioniert.

Durch die Verwendung eines Rasters wird die Konzeption, Gestaltung und Entwicklung einer Website vereinfacht und die Adaption an verschiedene Bildschirmgrößen möglich:

image

Das Raster passt sich dem Ausgabemedium an 1


Quellenangaben


  1. Infografik von Sebastian G. Marinescu
    Vorlage von Tyagiarpit publiziert über WikiMedia und lizensiert unter der Creative Commons Attribution-Share Alike 4.0 International Lizenz