Webdesign und Screendesign
Der Begriff Webdesign wird in der Umgangssprache oft synonym mit Screendesign verwendet. Genau genommen ist das Screendesign jedoch nur eine von vielen Tätigkeiten im Rahmen des Webdesigns. Bei der Tätigkeit des Screendesigns geht es nur die visuelle Gestaltung von Seitenlayouts für die Darstellung am Bildschirm, während die Tätigkeit des Webdesigns auch die programmiertechnische Umsetzung mit einschließt. Ein weiterer Unterschied besteht im Hinblick auf die zu gestaltenden Applikationen: Während es beim Webdesign immer um die Entwicklung von Webseiten geht, die mit dem Internet-Browser betrachtet werden, umfasst das Screendesign ganz allgemein die Gestaltung von Nutzeroberflächen für Anwendungssoftware.
Usability
Das oberste Ziel beim Webdesign ist, dem Nutzer ein intuitives Navigieren durch eine Website zu ermöglichen. Es geht also letzlich darum, dass sich die Webseite möglichst effizient benutzen lässt und schnell und ohne Umwege zu den gesuchten Inhalten führt. Hierfür hat sich auch im Deutschen der Begriff „Usability“ eingebürgert, was vereinfachend mit „Benutzbarkeit“ übersetzt werden kann. (Tatsächlich umfasst das Konzept der Usability in der Theorie mehrere Dimensionen: Benutzbarkeit, Gebrauchstauglichkeit, Benutzerfreundlichkeit und die sog. User Experience.)Gute Usability wird beim modernen Webdesign durch übersichtliche und durchdachte Layouts, transparente inhaltliche Strukturen und Sinn für Details erreicht.
Effektive Layouts
Webdesign mit klar strukturierter Benutzerführung
Die Gestaltung von Layouts beginnt zunächst mit der Positionierung der einzelnen Elemente, wie Haupt- und Subnavigation, evtl. Sidebar für Querverlinkungen, Stimmungsbilder (Key-Visuals), Inhaltsbereich für Text, Bilder und sonstige Grafiken (Content), Site Services (Impressum, Kontakt etc.) sowie das Firmenlogo. Optimal ist, wenn hierfür bereits ein Storyboard vorliegt, damit der Webdesigner weiß, welche Elemente auf den einzelnen Seiten untergebracht werden müssen. Im Anschluss daran werden die Farben festgelegt und passende Schriftarten und -größen ausgewählt. Ein weiterer Schritt ist das sogenannte Interface-Design, bei dem Schaltflächen und andere spezielle Elemente gestaltet werden.Wenn das Layout steht, erfolgt die sorgfältige Bildauswahl. Man unterscheidet beim Webdesign grundsätzlich zwischen sogenannten Stimmungsbildern (Mood-Images) und Bildern im Inhaltsbereich. Wie der Name schon sagt, dienen die Mood-Images der Erzeugung von Stimmung und Atmosphäre, transportieren Ideen und erwecken im Unterbewusstsein bestimmte Gefühle und Erwartungen. Als primäre Gestaltungselemente sollten solche Bilder aufeinander abgestimmt und möglichst hochwertig sein. Bei kleinen Budgets greift man daher gerne auf das Angebot von Bilddatenbanken zurück. Wenn es ganz exklusiv sein soll, engagiert man eine/n Fotografen/in oder Reinzeichner/in.
Die Bilder im Content-Bereich werden dagegen in der Regel vom Kunden geliefert. Hier geht es z. B. um die Darstellung und Illustration des Portfolios, der Produkte oder Dienstleistung(en) eines Unternehmens. Neben Fotos können hierbei natürlich auch Grafiken und Diagramme zum Einsatz kommen.
In aller Regel wird beim Webdesign als erstes die Startseite gestaltet und dem Kunden zur Abnahme vorgelegt. Auf dieser Basis werden anschließend Layouts für die weiteren Unterseiten erstellt, die sich je nach unterzubringendem Content mehr oder weniger stark von der Startseite unterscheiden.
Die richtige Schriftgröße
Die wichtigste Anforderung bei der Darstellung von Texten ist eine gute Lesbarkeit, denn der Leser muss die einzelnen Zeichen in sehr kurzer Zeit erfassen können, um einen Text flüssig zu lesen. Wie gut sich ein Text lesen lässt, hängt unter anderem von der Schriftgröße ab. Wenn sich die Besucher Ihrer Webseite aufgrund zu kleiner Schriftzeichen besonders anstrengen müssen, um die Texte zu lesen, werden sie nicht lange auf ihrer Webseite verweilen.Welche Schriftgröße angemessen ist, hängt unter anderem von der Zielgruppe ab: So elegant kleine Schriftgrößen auch wirken mögen, sie führen häufig zu Problemen mit der Lesbarkeit, insbesondere bei älteren Menschen. Aber auch bei jüngeren Nutzern, deren Sehschärfe möglicherweise noch optimal ist, kommt es bei zu kleiner Schrift früher oder später zu Ermüdungserscheinungen und zu nachlassender Konzentration bzw. schlimmstenfalls sogar zu Kopfschmerzen.
Ein Problem ergibt sich nun daraus, dass verschiedene Nutzer unterschiedliche Bildschirmauflösungen eingestellt haben. Zudem gibt es mittlerweile Monitore in den unterschiedlichsten Größen und je größer ein Bildschirm ist, muss auch der Abstand zum Monitor vergrößert werden, damit dessen Oberfläche vollständig wahrgenommen werden kann. Da der Abstand zum Bildschirm also variabel ist, wird die erforderliche Mindestzeichenhöhe in Bogenminuten angegeben. Ab einem Sehwinkel von 22 Bogenminuten (1 Winkelgrad = 60 Bogenminuten) erkennen wir Buchstaben und Zahlen schnell und zuverlässig, sodass ein flüssiges Lesen möglich ist. Bei einem Abstand von 50 cm ergibt sich daraus eine Mindesthöhe von 3,2 mm. Um den unterschiedlichen Bildschirmauflösungen gerecht zu werden, definiert man Schriftgrößen heute in Prozent bzw. in der Maßeinheit „em“. Dabei entspricht eine Schriftgröße von 16 Pixeln dem Wert 100% oder 1em.
Smartphone und Co.
Eine weitere Herausforderung beim Webdesign besteht in der heute gängigen Anforderung an sogenanntes Responsive Webdesign: Eine Webseite soll grundsätzlich auf jedem Endgerät gut aussehen und nutzbar sein – vom Cinema Display bis zum Smartphone. Somit sind die Zeiten, in denen man Webseiten für fixe Bildschirmauflösungen optimieren konnte, ein für alle mal vorbei!Mittels moderner Web-Technologien wie HTML5, CSS3 und Javascript ist es möglich, sogenannte Device-unabhängige Webseiten mit flexiblen Layouts zu programmieren. Das bedeutet, dass sowohl Schriften als auch Grafiken und Videos durch Skalierung automatisch an die Auflösung des jeweiligen Gerätes angepasst werden.
In der Praxis geht man dabei so vor, dass man für die einzelnen Elemente die maximalen Ausmaße mit relativen Größenangaben definiert. Die einzelnen Endgeräte berechnen dann je nach eingestellter Auflösung die für sie richtigen Werte. Darüber hinaus lassen sich für verschiedene Bildschirmauflösungen auch unterschiedliche Stylesheets definieren.
