Vom Print- zum Screendesign wechseln, was ist zu beachten?

0
3475
Bleisatz-Buchstaben

Bleisatz-BuchstabenIch habe in den letzten Jahren während meiner Tätigkeit als Flash- und Frontend-Developer einer mittelgroßen Internet-Agentur, häufiger Layouts von Designern bekommen, die ursprünglich aus dem Printbereich kommen. Und ich habe festgestellt, dass es teilweise enorm an nötigem Fachwissen zur Erstellung von Bildschirm- bzw. mobilen Anwendungen mangelt. Dieser Artikel soll einige der wichtigsten Punkte erklären, die zur Erstellung eines zeitgemäßen Screendesigns nötig sind.

Alles nur Pixel, vergesst den Zentimeter

Im Screendesign, also der Gestaltung von Layouts für die Bildschirmausgabe, wird grundsätzlich alles in Pixeln gemessen. Es gibt immer noch Designer, die das nicht wissen und mit Zentimetern oder Millimetern arbeiten. Für den Programmierer, oder Frontend-Entwickler wird es dann ungemütlich, denn er muss das Layout umrechnen.

Sauberes Layout und gerade Maße

Ebenso wichtig ist das Anlegen möglichst gerader Maße. Ein Button, der im „groben“ Layout beispielsweise eine Breite von 172 Pixeln hat, könnte höchstwahrscheinlich ebenso auf 170 Pixel verkleinert werden. Entwickler sind über solche Ungenauigkeiten oft empört, wie ich aus eigener Erfahrung heraus weiß. Besonders wenn sich ungerade Zahlen durch das gesamte Layout ziehen. Eine gute Hilfe kann hierbei das „960 Grid System“ sein, welches sich an die im Printbereich bekannte Methode mit einem Raster zu arbeiten, anlehnt. Natürlich gibt es hier auch Ausnahmen.

Unterschiedliche Größendarstellung

Ein Flyer in DIN/A6 hat immer dieselbe Größe, denn er wird ja gedruckt. Eine Website hingegen wird auf fast jedem Endgerät unterschiedlich dargestellt, da jeder User einen anderen Monitor, einen anderen Browser, oder eine andere Bildschirmauflösung haben kann. In der Regel wird bei der Gestaltung einer Website zunächst eine Zielgruppe ermittelt, und das Layout an die voraussichtlichen Eigenschaften dieser Zielgruppe angepasst. Lässt das Design es zu, kann je nach Anforderungen der Zielgruppe ein flexibles Layout erstellt werden, was sich dem Bildschirm anpasst. In vielen Fällen wird für unterschiedliche Ausgabearten ein angepasstes Layout erstellt, wie etwa für mobile Endgeräte, Smartphones, Netbooks oder Tablet-PCs. Gerade im Zuge der rasanten Entwicklung in Sachen SmartPhones, sollte man immer die Anpassung des Layouts an mobile Endgeräte und Browser im Hinterkopf haben.

Die Auflösung: 72dpi statt 300dpi

Die übliche Auflösung im professionellen Printbereich liegt bei 300dpi oder mehr, was der Druckqualität ja auch gut tut. Ein Monitor jedoch kann nur eine Auflösung von 72dpi darstellen. Es bereichert die Qualität einer auf einem Monitor dargestellten Grafik in keinster Weise, wenn diese in einer Auflösung von 300dpi angelegt ist. Ein Layout für die Darstellung auf Monitoren oder mobilen Endgeräten ist daher immer in 72dpi anzulegen.

Farben

Ein Bildschirm arbeitet mit RGB-Farben statt CMYK. Der Webdesigner arbeitet am liebsten mit sogenannten Hex-Codes, die er in CSS-Code einbindet. Adobe Photoshop, das Tool mit dem die meisten Designer arbeiten, bietet von Haus aus bereits die Möglichkeit bei der Auswahl der Farbe, diese in Hex-Code umzuwandeln. Hier ist allerdings Vorsicht geboten. Photoshop rechnet jeden beliebigen CMYK-Wert in Hex-Code um, was auch korrekt funktioniert. Aber nicht jeder Hex-Code wird auf jedem Gerät gleich dargestellt, und es kann zu Darstellungsfehlern, bzw. Farbunterschieden kommen, wenn beispielsweise Grafiken mit Hintergrundfarben nahtlos ineinander übergehen sollen. Dazu gibt es die so genannten websicheren Farben, die Photoshop ebenfalls automatisch herausfiltern kann. Dazu muss das Häkchen „Nur Webfarben anzeigen“ aktiviert werden. Photoshop errechnet dann automatisch den naheliegendsten websicheren Hex-Code, den man nach Möglichkeit verwenden sollte. Hier ein Beispiel:

Photoshop CMYK in Hex-Code umrechnen
Photoshop CMYK (90,90,0,0) in Hex-Code (#38378b) umrechnen, ist NICHT websicher!
Photoshop CMYK in Hex-Code umrechnen
Photoshop berechnet automatisch den naheliegendsten websicheren Farbwert!

Schriften

Für den Flyer, die Image-Broschüre oder die Print-Magazin-Werbeanzeige kann im Prinzip jede auf dem Computer des Designers installierte Schriftart verwendet werden, sofern man die nötigen Nutzungsrechte oder Lizenzen besitzt. Bei Websites sieht das anders aus. Zwar gibt es heutzutage verschiedene Möglichkeiten, individuelle Schrifttypen auch für Websites zu verwenden, wie etwa das Einbinden von Google-Webfonts oder die JavaScript-Variante Cufon, aber diese Techniken lassen es noch nicht zu das sich Webdesigner 100% frei entfalten können. Bei nachgeladenen Webfonts sieht man zum Beispiel häufig noch während des Ladevorgangs, für einen kleinen Moment die eingestellte Standardschrift, bevor diese durch die Webfont ersetzt wird. Zudem gibt es hier auch unterschiedliche Darstellungen auf verschiedenen Plattformen und Browsern. Die Cufon-Variante erfordert JavaScript, und erzeugt Grafiken aus den im HTML-Code eingegebenen Zeichen. Es können zudem auch Probleme bei der Optimierung für Suchmaschinen auftreten. Ich möchte jedoch keinesfalls generell davon abraten, da ich beide Varianten gelegentlich selbst verwende, sondern nur etwas Klarheit schaffen. Meiner eigenen Erfahrung nach hat es sich bewährt, Headlines durch Webfonts oder Cufon zu ersetzen, und die Fließtexte mit einer websicheren Schrift darzustellen. Navigationselemente gestalte ich nach Möglichkeit mit websicheren Schriften, also Schriften, die möglichst auf jedem Computer oder mobilen Gerät installiert sind.

Der Designer eines Layouts für Websites sollte sich also über folgende Punkte Gedanken machen, bzw. sie mit dem zuständigen Programmierer oder Frontend-Entwickler abstimmen:

  • Erfordert mein Projekt zwingend die Verwendung einer speziellen Schriftart?
  • Können die Endgeräte der Zielgruppe bestimmte Techniken fehlerfrei darstellen?
  • Eignet sich die Schrift für die Darstellung am Monitor?

Worttrennung, Textumbrüche und Formatierung

Im Printdesign kann man Worttrennungen, Zeilenumbrüche, Zeichen- und Zeilenabstände manuell setzen, oder den Text um beliebige Formen fließen lassen. Wenn das einmal steht, kann eigentlich nichts mehr schief gehen. Im Webdesign geht dies auch. Der Unterschied besteht jedoch darin, dass der Text in verschiedenen Browsern, oder durch benutzerdefinierte Einstellungen, zum Beispiel die der Schriftgröße, unterschiedlich dargestellt werden kann. So kann es passieren, dass man Trennzeichen mitten in Sätzen statt am Zeilenende vorfindet, weil der Browser des Designers die Schrift kleiner oder größer ausgibt als der des Betrachters. Auf einer Website verwendet man daher nur in wirklichen Ausnahmefällen Trennzeichen, niemals in längerem HTML-Fließtext. Auch die Formatierung des Textes im Blocksatz ist nicht empfehlenswert, denn dieser lässt sich mit HTML/CSS nur eingeschränkt anpassen. Dadurch entstehen unter Umständen sehr große Lücken, die sich nicht schließen lassen. Das Umfließen von Grafiken ist auf Websites auch möglich, jedoch können keine beliebigen Formen in den Textfluss integriert werden, sondern nur rechteckige Formen.

Trennzeichen im HTML-Text
Fehldarstellung der Trennzeichen im HTML-Text

Fazit

Wer gutes Printdesign macht, ist nicht automatisch ein guter Screendesigner. Sicherlich gibt es weitere Punkte zu beachten oder Verbesserungsvorschläge, jedoch möchte ich hier auch nur die aus meiner eigenen Erfahrung wichtig erscheinenden aufzeigen. Gerne kann die Kommentarfunktion zur Diskussion genutzt werden. Kritik oder Anregungen zum Artikel sind ebenso gern willkommen.

Foto: © Bernd Ehrhardt Werbegrafiker  / pixelio.de