Mathias Bamert
Mathias Bamert
07.12.2020

Grundlagen zu Webdesign

Jeder Website liegt ein Design zu Grunde. Dieses wird durch diverse Faktoren der fliessenden Gestaltung (Responsiveness) geprägt. In diesem Blog-Beitrag lernt ihr wie eine Website konzipiert und gestaltet.

Webdesign

1. Die Planung einer Website

Damit eine Website erarbeitet werden kann, müssen zuerst ein paar grundlegende Fragen beantwortet werden:

  • Welches Thema werde ich präsentieren?
  • Welche Zielgruppe möchte ich ansprechen?
  • Wie komme ich an interessante Inhalte?
  • Wer designed meine Website und wie soll dieses aussehen?
  • Wer programmiert meine Website?
  • Wer schreibt mir meine Texte?
  • Wie komme ich an gute Fotos und Videos?
  • Wer füllt mir meine Website ab?
  • Welche Domain passt und ist noch frei?
  • Wo hoste ich meine Website?

2. Webdesign

Das Webdesign, auch Webgestaltung genannt, umfasst als Disziplin des Mediendesigns die strategische, konzeptionelle, visuelle, funktionale und strukturelle Gestaltung von Websites für das Internet. Die technische Implementierung von Websites wird dagegen als Webentwicklung bezeichnet. (Quelle: Wikipedia)

3. Responsive Webdesign

Bildschirmfoto 2020 12 06 um 16 00 04

Beim Responsive Webdesign handelt es sich um ein gestalterisches und technisches Paradigma, bei welchem sich gestalterische Inhalte an den jeweiligen Bildschirm anpassen. Der grafische Aufbau einer «responsiven» Website erfolgt anhand der Anforderungen des jeweiligen Gerätes. Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente (z.B. Navigation, Seitenspalte, Text Bild), aber auch die Nutzung unterschiedlicher Eingabemethoden (z.B. Maus oder Touchscreen). Technische Basis hierfür sind die neueren Webstandards HTML5, CSS3(hier insbesondere die Media Queries) und JavaScript.

Breakpoint

Ein Breakpoint ist ein definierter Punkt im CSS, mit dem sich die Darstellung der Webseite an die unterschiedliche Displaygrößen anpasst.

Media Queries

Darstellung eines Dokuments für verschiedene Ausgabemedien. Dabei wird nicht ermittelt, um welchen Browser es sich handelt, sondern welcher Medientyp (z.B. Bildschirm oder Drucker).

Viewports

Anzeigebereich im Fenster der Anwendung, der für die Darstellung des Anwendungsinhaltes tatsächlich zur Verfügung steht.

4. Wireframing

Unter dem Begriff «Wireframe» wird ein Drahtmodell verstanden. Dieses wird dazu benutzt, einen sehr frühen konzeptionellen Entwurf einer Website, App oder Software-Frontends darzustellen. Dabei ist es wichtig, dass die Gestaltung und die Funktion noch keine Rolle spielen. Das Augenmerk liegt auf der Anordnung von Elementen und deren Benutzerführung bzw. Benutzererfahrung.

5. Screendesign

Screendesign ist ein Unterbereich des Grafikdesign. Dieser Bereich kümmert sich nicht nur um den visuellen Aspekt des Interfacedesigns, sondern auch um die Nutzerfreundlichkeit, genannt User Experience. Diese Mensch-Maschine-Kommunikation ist von zentraler Bedeutung wenn es um eine zugängliche Website geht, welche die Menschen gerne besuchen.

Bildschirmfoto 2020 12 06 um 16 09 43

6. Grid System

Jeder modernen Website liegt ein Grid System zu Grunde. Auf Basis dieses Systems lassen sich Anwendungen bauen, welche auf jedem Monitor flexibel (siehe Responsiveness) anpassbar sind. Bootstrap ist eines der bekanntesten Frontend-Frameworks, welches mittels einem Grid System möglich macht, fliessende Websites mittels HTML- und CSS-Styles zu erarbeiten. Eine grundlegende Übersicht bietet die W3C-School.

Unnamed

Quelle: HTW Chur

5c6f092b860f3e7e5172da09 grid

Quelle: CSSScript

960 Grid 732x519

Quelle: One.com

7. Tools

Ein Screendesigner ist nur dann happy, wenn er ein passendes Programm hat, diese zu gestalten. Momentan gibt es Konkurrenz am Markt. Neben dem Adobe XD challengen sich kleinere Player am Markt. Dazu gehören Sketch, InVision Studio und Figma. Letzteres ist browser-basiert und ein absolutes Highlight.

Adobe xd vs Sketch 730x410