Webdesign Aufbau

Woraus besteht eine Webseite?

Grundlagen

Logo

Aus dem Logo können sich Farben und Formen für andere Elemente ergeben.

Farben

Die Farben können in viele Elemente eingesetzt werden. Akzentuiert oder sehr prominent.

Schriftart/en

Die Schriftarten tragen viel zum Gesamterscheinungsbild eines Webdesigns bei.

Struktur

Kopfzeile

Standardmäßig enthält die Kopfzeile das Logo und die Navigation. Zusätzlich können in diesen Bereich der Webseite noch weitere Information wie Telefonnummer, Social-Media-Icons, Login-Link usw. untergebracht werden.

Inhaltsbereiche

Um die einzelnen Elemente eines Webdesigns für das Auge attraktiver wirken zu lassen, können die Inhaltsbereiche bspw. durch dezente Farben voneinander abgesetzt werden. Auch eine feine Linie trägt zur besseren Erfassbarkeit einzelner Elemente bei.

Fußzeile

In die Fußzeile werden im Webdesign meistens die Kontaktdaten gesetzt, sowie Links zu den Rechtstexten, wie bspw. dem Impressum, dem Datenschutz, den AGB. Zudem können hier auch gut weitere Logos untergebracht werden.

 

Elemente

Überschriften im Webdesign

Eine Überschrift kann auch mal alleine stehen, bspw. mit einer Unterüberschrift. Das lockert das Erscheinungsbild auf und kann das Webdesign der Seite in für den Besucher gut aufnehmbare Teile gliedern.

Die Textelemente

Da ein einfacher Textblock oft nicht zum Lesen einlädt, kann dieser durch verschiedene Darstellungen attraktiver gemacht werden. Es muss darauf geachtet werden, dass die Zeilen nicht zu lang werden, da das Auge dann evtl. die Anschlusszeile nicht gut findet. Beim Webdesign kann deswegen ein Textblock entweder 

  • nicht so breit sein,
  • er in Spalten aufgeteilt werden oder
  • die Zeilen durch andere Element verkürzt werden. 

Wie beispielsweise mit einem Bild, einer Liste, einem Formular.

Text und Bild

Ein Bild bietet eine gute Möglichkeit einen Text inhaltlich zu ergänzen. Ebenfalls bietet umgekehrt auch ein Text eine gute Möglichkeit ein Bild zu ergänzen.

 

Wenn es nur wenig Text ist, kann er beispielsweise mittig neben einem Bild den Besucher zum Lesen einladen.

Das Listenelement

Bei Aufzählungen kann eine Liste eine gute Übersicht schaffen um einzelne Inhalte schnell erfassen zu können.

 

Zudem kann eine Liste wunderbar einen Fließtext auflockern. Unterschiedliche Darstellungen oder Animationen können hier einen inhaltlichen Mehrwert bieten, oder den Besucher einladen sich näher mit der Aufzählung zu beschäftigen.

  • schnelle Erfassbarkeit
  • Auflockerung von Text
  • einfach fürs Auge
  • guter Transporter für Inhalte
  • einladend durch wenig Text

Bild, Bilder, Galerie & Slider

Bilder sagen mehr als 1000 Worte. Auch im Webdesign. Wenn aber die Bilder in unterschiedlichen Seitenverhältnissen neben einander stehen, kann es sehr unruhig und unaufgeräumt aussehen. Wenn es sich um viele darzustellende Bilder handelt, bietet sich als Element-Typ eine Galerie an. Um das Problem der Unruhe bei unterschiedlichen Seitenverhältnissen in den Griff zu bekommen, können Bilder, automatisiert, minimal beschnitten werden, um dann durch eine einheitlich Zeilenlänge und -höhe einen harmonischen Eindruck zu machen. Kostenfreie und kostenpflichtige Bilddatenbanken finden Sie hier.

 

Die Slideshow

Um dem Besucher einer Webseite eine Atmosphäre zu bieten eignet sich im Webdesign nichts besser als eine Slideshow. Neben dem "Sliden" können die Bilder auch ein- und ausgeblendet werden. Damit es noch attraktiver für das Auge wirkt können die Bilder bzw. mit dem Ken-Burns-Effekt leicht bewegt werden.

Bitte addieren Sie 7 und 9.

Formulare im Webdesign

Formulare auszufüllen sollte auf einer Webseite so einfach wie möglich gemacht werden, damit der Besucher so wenig wie möglich Arbeit damit hat.

 

Auch könnte bspw. der Spieltrieb mit dezenten Animationen angeregt werden und dabei helfen, dass die Verwendung von Formularen im Webdesign mehr Freude bereitet.

rotierende Zahlen

Überall wo eine Anzahl auf einer Webseite dargestellt werden soll, kann dies gut über rotierende Zahlen umgesetzt werden. In vielen Webdesigns wird dies als Visualisierung verwendet.

0

Tage in der Woche

0

Monate im Jahr

0

Tage im Jahr

Teaserelemente

Mit Hilfe von Teasern kann der Besucher einer Webseite auf weitere Inhalte neugierig gemacht werden.