Tipps

  • Usability/Accessibility (benutzendenfreundlich, barrierefrei)
  • Responsive Design (Anzeige auf verschiedenen Ausgabemedien)
  • Valid Coding (gültiger Quellcode)
  • Sinnvolle Struktur und Gestaltung


Zielpublikum
Aufgrund Zielpublikum Inhalt und Gestaltung erarbeiten und definieren. Grundsatzfragen beantworten: was will das Zielpublikum, was erwartet das Zielpublikum, wie funktioniert das Zielpublikum?

sinnvolle Gestaltung
Genau wie bei den traditionellen Printmedien gilt auch für eine Webseite, dass die Gestaltung ausgewogen sein soll und spannend. Dafür benötigt sie einen Schwerpunkt, der das Auge anzieht. Die Gewichtung der Elemente führt das Auge durch die Seite, mit dem Effekt, dass man nicht so rasch ermüdet.
+ Freitag Taschen / - Thermalbad Zürich

lesbarer Text (optisch und grammatikalisch)
Genug Kontrast zwischen Schrift und Hintergrund anlegen, ruhigen Hintergrund wählen. Durcheinander aus Text, Kästen, Bildern, Icons und Bannern vermeiden. Ebenso auf Grammatik, Orthographie und Schriftstil achten.
+ Zentrum Karl der Grosse / - Turbinenbräu / - Bambus Army

Links
Informationen können miteinander verknüpft werden. Verlinkung ist das typische Merkmal vom Web, Webseiten sind interaktiv. Entsprechend soll der Link auch als solcher erkennbar sein und das entsprechende Layout auch konsequent angewandt werden.
+ Restaurant LaSalle / - Badmintonhalle

Navigation
Es geht nichts über eine logisch aufgebaute Webseite mit einer übersichtlichen, funktionierenden und treffend betitelnden Navigation. Erster Schritt ist demnach die Erstellung einer Übersicht aller geplanten Seiten in Kategorien sowie Unterkategorien. Ab mehr als acht Kategorien wird ein Webangebot zu unübersichtlich, deshalb Unterkategorien verwenden. Eine Gruppe von Basis-Navigations-Links, bei allen Seiten am gleichen Ort platziert und immer sichtbar, führt zu den Unterkategorien.
+ Zürcher Hochschule der Künste / - KV Zurich Business School

Einstiegsseite
Auf einen Blick hat der Besuchende die Übersicht. Schon die erste Seite soll informativ sein, zeigen, was geboten wird: Orientierung über den Inhalt, Unterkategorien, Sprachoptionen, aktuelle Meldungen.
+ Opernhaus Zürich / - Hotel Leoneck

less is more
Animierte Buttons oder eine Diashow in einem kleinen Bild sind ganz ok, aber meistens ist auch das schon zu viel. Blinkende, piepende oder aufpoppende Element vermeiden. Jedoch kann man ruhig die Möglichkeit der Interaktivität nutzen, vorausgesetzt es macht Sinn.
+ Zürcher Brockenhaus / - sta travel

technische Seite
Syntax und Befehle validieren lassen, ob HTML und CSS korrekt geschrieben sind. Testen der Webseite in allen gängigen Browser: funktioniert das Design, funktionieren die Links, ist die E-Mail-Adresse noch gültig.


Aktuelle Trends Webdesign

Das neuste aus dem Webdesign - was ist momentan 'State of the Art'.
Der Trend Webseiten auf Mobilen Ausgabegeräten anzuschauen, verändert auch das Design klassischer Desktop-Webseiten.

>> Webdesign Trends 2017

One Page / Single Page Design
Hier werden alle Inhalte der Website auf einer Seite angezeigt. Durch scrollen nach unten werden die Inhalte ersichtlich. Diese Darstellung eignet sich hervorragend für Websites mit wenig Content. Auch für Webseiten die hauptsächlich auf Mobilen Ausgabegeräten angeschaut werden, eignet sich das 'One Page' Konzept sehr.
>> Migros

Parallax Scrolling
Hier verändert sich ein Teilbereichs des Inhalts der Webseite durch scrollen oder klicken. Die Webseite wirkt dadurch nicht mehr flach sondern bewegt. Dieser Effekt wird beim Webdesign Parallax Scrolling genannt. Durch moderne Webtechnologien wie HTML5, CSS3 und JavaScript, kann man heutzutage relativ einfach, beeindruckende visuelle Effekte erzeugen.
>> Life of Pi

Webfonts
Standardschriften wie Arial, Times New Roman oder Verdana müssen heutzutage nicht mehr sein. Heute kann man auf eine Vielzahl von Webfonts zugreifen. Gerade für Überschriften oder Highlights eignen sich solche Schriften ausgezeichnet.
>> Wicked Palate

Mobile First
Hier liegt das Hauptaugenmerk auf der mobilen Webseite. Zuerst wird das mobile Konzept und Design entworfen. Erst dann wird das Design für die anderen Ausgabegrössen weiterentwickelt. Dieses Konzept nennt man auch 'Progressive Enhancement'. Wenn ein grosser Anteil der Besuchende von mobilen Endgeräten erwartet wird, eignet sich diese Vorgehensweise besonders.
>> Mobile Web Design awwwards

Vorherige Seite: Responsive Design