Das Webseitenlayout bestimmt die grundlegenden grafischen Eigenschaften der Internetseite. Diese informieren den Browser darüber, wie die Inhalte am PC und auf mobilen Geräten angezeigt werden sollen. Innerhalb des Gestaltungsprozesses wird das Layout skizziert und fortlaufend angepasst. Elemente die im Layout verwendet werden können sind Textblöcke, Grafiken, Bilder, Videos und Animationen.
Da sich die Darstellung am Computerbildschirm stark von der auf mobilen Geräten wie Smartphones und Tablets unterscheiden kann, gibt es zwei verschiedene Ansätze der Gestaltung. Bei Desktop First wird das Layout zuerst für die Desktop-Breite erstellt und anschließend auf die kleineren Geräte herunter skaliert. Bei Mobile First dagegen wird genau anders herum gehandelt.
"Ein Design ruft drei Reaktionen hervor - ja, nein und WOW! Wow ist das Ziel" - Milton Glaser
ES GIBT EINE REIHE VON LAYOUTTYPEN:
FESTES LAYOUT (FIXED LAYOUT) - Gestaltung mit vorher festgelegten Pixelwerten - keine Anpassung an unterschiedliche Endgeräte möglich - kleine Geräte skalieren die Website mit Raum nach oben und unten
FLUIDES LAYOUT (FLUID LAYOUT) - flexible Anpassung an Gerätegrößen durch Prozentwerte - Inhalte ändern flexibel ihre Position - Inhalte behalten ihre Größe
ELASTISCHES LAYOUT (ELASTIC LAYOUT) - festgelegte typografische Werte - Fokus auf dem Text - Zoomfunktion der Seite
Um Nachteile der einzelnen Layout Formen zu umgehen, gibt es auch Mischformen.
RESPONSIVES LAYOUT (REAKTIONSFÄHIGES LAYOUT) - Kombination von fluidem und adaptiven Layout - bei festem Umbruchpunkten verändert sich das Layout deutlich - zwischen den Umbruchpunkten funktioniert es als fluides Layout
ADAPTIVES LAYOUT (ANPASSUNGSFÄHIGES LAYOUT) - wechselt zwischen mehrere Darstellungsversionen im festen Layout - je nach Breite des Anzeigefensters wird die entsprechende Größe automatisch gewählt
GRAFISCHE GESTALTUNG IM WEBDESIGN
Ein wichtiger Bereich im Webdesign ist die grafische Gestaltung. Dazu zählen Elemente wie Farben, Typographie, Formen, Illustrationen, Tabellen und Animationen. Diese visuellen Parts müssen sofort die Aufmerksamkeit des Lesers auf sich ziehen und sein Interesse wecken, damit er sich überhaupt mit den eigentlichen Inhalten beschäftigt. Nur wenn ein harmonisches Gesamtbild vorhanden ist, ist man motiviert sich die Website genauer anzuschauen und durchzulesen. Grafiken sollten daher so gestaltet werden, dass sie die wichtigsten Informationen vermitteln oder untermalen, aber trotzdem schön anzusehen sind.
Man sollte allerdings darauf achten, das jedes Objekt einen Sinn erfüllt, der über den dekorativen Zweck hinausgeht. Wenn eine Website zu überladen ist von Grafiken, verwirrt das, weil das Auge des Lesers keine klaren Anhaltspunkte mehr findet und orientierungslos über den Bildschirm irrt. Da dies anstrengend und ineffektiv ist verlässt der Leser die Seite schneller. Grafische Elemente haben also einen informativen Zweck und bieten Orientierung während sie einer Website gleichzeitig Charakter und Wiedererkennungswert verschaffen.