Unabhängig vom dargestellten Inhalt wird das Design für eine Website definiert.

Im grundlegenden Layout (Template) wird der allgemeine Aufbau der einzelnen Webseiten festgelegt.

Es gibt Templates für Websites mit mehreren Seiten oder für Layouts für Websites, die nur aus einer Seite bestehen, deren Unterbereiche man durch Scrollen erreicht (One page design).

Die Bereiche einer Webseite sind im herkömmlichen Sinne:

  • ein Menü am oberen Rand der Website
  • eine Kopfzeile mit der Seitenüberschrift und z.B. einem Slider mit durchlaufenden Bildern
  • zusätzliche Menüs an den linken und rechten Rändern der Webseiten
  • in der Mitte ein ein- oder mehrspaltiger Bereich für den eigentlichen Inhalt der Webseite
  • am unteren Rand eine Fusszeile (footer) mit Links zu einzelnen Seiten (Impressum, Kontakt, Datenschutz) und Profilen, Kontaktinformationen, Copyright-Vermerk

In eingebundenen CSS-Dateien wird definiert, wie groß die einzelnen Bereiche erscheinen sollen, wie sie positioniert sind, welche Schriftarten und Schriftgrößen und Farben verwendet werden und vieles mehr.

Über CSS wird auch definiert, wie das Layout der Website sich an unterschiedliche Browser und Endgeräte (PC, Tablet, Smartphone) anpasst (responsive design, mobile first). Ein modernes Beispiel für responsive Design ist das Bootstrap Design.

Das Layout der Website sollte die dargestellten Inhalte und den Geschäftszweck widerspiegeln. So gibt es spezielle Templates z.B. für

  • Shops
  • Landingpages
  • Auftragsmanagement
  • Immobilienverwaltung