Web-Layout vs. Print-Layout

• Home
• Magazin
• Know How
• Usability & Web Design

Zwei Welten mit eigenen Gesetzen

Ob ein Layout schön ist oder nicht, ist zuweilen Geschmackssache. Ob ein Layout web-tauglich ist, lässt sich aber eindeutig feststellen. Oft genügen dafür schon wenige Blicke, manchmal merken es die Web-Entwickler aber auch erst bei der Umsetzung. Denn ein Layout, das für eine Broschüre gut geeignet ist und sich im Grafikprogramm in ein Web-Layout überführen lässt, ist noch lange nicht für die echte Webseite geeignet. Dieser Beitrag zeigt Ihnen, worin sich Web- und Print-Layouts unterscheiden und was sie tun können, um Konflikte zu vermeiden.

Zum Einstieg zunächst eine Übersicht über verschiedene Kriterien, bei denen sich Print- und Screendesign unterscheiden.

Kriterium	Printdesign	Screendesign
Format	meistens Hochformat, oft DIN-AReihe (1:1,41)	Querformat, oft 16:9 oder 16:10 (entspricht 1,6:1), Höhe des Viewports zu berücksichtigen
Typografie	Schriftwahl beliebig	bei Standard-Webseiten im Fließtext nur Systemschriften möglich (mittlerweile gibt es aber Schriftersetzungsmethoden wie z.B. Cufón, die beliebige Schriften in ein proprietäres Format konvertieren können)
Farbgestaltung	subtraktive Farbmischung, CMYKFarbraum, dadurch Farbverbindlichkeit	additive Farbmischung, RGB-Farbraum, keine Farbverbindlichkeit
Dateigröße von Bildern	spielt keine Rolle	sollte möglichst klein sein, damit die Ladezeit gering ist (Ladezeit ist z.B. bei Google ein Rankingkriterium)
Auflösung	hoch: z.B. 2400 dpi (von Belichter abhängig); Details sind darstellbar	niedrig: 72 bis 96 ppi (fester Wert, von Monitor abhängig); Details sind nicht darstellbar
Positionierung von Elementen	beliebig möglich	nicht ganz beliebig möglich, zumindest oft nicht mit vertretbarem Aufwand

Darüber hinaus bieten Printerzeugnisse und Webseiten unterschiedliche Möglichkeiten, die auch einen Einfluss auf die Gestaltung haben können:

Kriterium	Printdesign	Screendesign
Interaktion	nicht möglich	zahlreiche Möglichkeiten, z.B. über Formulare, Anwendungen, Foren usw.
Navigation	nur durch Blättern (Seitenzahlen, Inhalts- und Stichwortverzeichnis als Hilfe)	über Hyperlinks beliebige (nichtlineare) Verknüpfungen der Inhalte
Multimedialität	nicht möglich	Sound, Video, Animation möglich
Aktualisierung und Erweiterung	aufwändig und teuer, da Nachdruck erforderlich	Inhalte meist einfach und kostengünstig zu aktualisieren, z.B. bei Content Management Systemen

Ein Print-Layout bzw. die in einem Corporate Styleguide festgelegten Regeln müssen also behutsam in ein Web-Layout überführt werden. Entscheidend ist erstens, ob sich das Screendesign aus der Bilddatei mit realistischem Aufwand in ein Web-Layout übertragen lässt. Und zweitens muss das Web-Layout natürlich auch den Standards und Erwartungen des Webs entsprechen. Betrachten wir nun die einzelnen Aspekte etwas näher.

Farbe

Farbe ist eines der wichtigsten Gestaltungsmittel. Leider ist die Farbwahrnehmung - wie übrigens alle Sinneswahrnehmungen - nicht eindeutig, d.h. Farben wirken in verschiedenen Umgebungen unterschiedlich. Natürlich stehen für jedes Medium grundsätzlich alle Farben zur Verfügung. Die Wirkung kann sich aber je nach Ausgabemedium deutlich unterscheiden. Bei den verschiedenen Druckverfahren und Technologien der Digitalmedien gibt es also fast keine technischen, wohl aber gestalterische Grenzen.

Die Farbwirkung im Druck

Beim Druck wird die Farbwirkung durch den Zusammendruck verschiedenfarbiger Druckfarben erzielt. Prozessgrundfarben sind die subtraktiven Primärfarben Cyan, Magenta und Gelb, die zusammen mit Schwarz zu CMYK führen. Für spezielle Anwendungen wie z.B. die Hausfarbe eines Unternehmen lassen sich mit Hilfe von Pantone- oder HKS-Farben individuelle Farbwerte erzeugen. Beim Druck wird für jede Farbe eine eigene Druckform benötigt. Der Begriff "4C", also 4 Farben, bedeutet, dass jede der vier Farben Cyan, Magenta, Gelb und Schwarz nacheinander auf das Medium gedruckt wird. Mit diesem Wissen können Sie schon bei der Gestaltung den Aufwand im Druck berücksichtigen.

Die Farbwirkung im Web

In den Digitalmedien, d.h. auf dem Monitor, in der Projektion durch einen Beamer oder beim Scannen, werden alle Farben durch die additive Mischung der drei Grundfarben Rot, Grün und Blau (RGB) erzeugt. Daraus ergeben sich die 16,7 Mio Farben des RGBFarbraums.

Farbmodus und Arbeitsfarbraum

Der Farbmodus eines Bildes gibt an, durch welche
Parameter eine Farbe beschrieben wird. Im RGB-Modus sind es die Rot-, Grün- und Blauanteile, im CMYK-Modus die Cyan-, Magenta-, Gelb- und Schwarzanteile. Wenn Sie die selbe Bilddatei auf zwei verschiedenen Monitoren betrachten oder sich Ihren Druck auf verschiedenen Bedruckstoffen vorstellen, dann ist klar, dass es für jeden Farbmodus verschiedene Farbräume gibt. Die jeweiligen RGB- oder CMYK-Werte erzeugen also einen eigenen Farbeindruck. Der Arbeitsfarbraum ist der Farbraum, in dem Sie die Bearbeitung von Bildern wie z.B. Ton- und Farbwertretuschen vornehmen. CMYK-Farbräume sind immer geräte- bzw. prozessbezogen. Lab-Farbräume sind zu groß, sodass nur der RGB-Farbraum bleibt, um einen brauchbaren Arbeitsfarbraum zu definieren. Hier besteht die Auswahl zwischen:

sRGB-Farbraum:
Kleiner als der Farbraum moderner Druckmaschinen, Farbdrucker oder Monitore und deshalb nur bedingt für den Print-Workflow geeignet.
Adobe RGB:
Guter großer Farbraum
eciRGB v2:
Von der ECI empfohlener RGB-Arbeitsfarbraum. Sie erhalten ihn kostenlos unter www.eci.org .

Farbseparation

Darunter versteht man die Umrechnung der digitalen Bilddaten aus einem gegebenen Farbraum, also z.B. von RGB in den CMYK-Farbraum des Mehrfarbendrucks. Der farbige Druck basiert auf den subtraktiven Grundfarben CMY. Da diese drei Farben aufgrund spektraler Mängel im Zusammendruck kein Schwarz ergeben, muss Schwarz (K) als vierte Prozessfarbe eingesetzt werden. Wenn Sie ein Layout erstellen, müssen Sie darauf achten, dass von Anfang an der richtige Farbraum für das jeweilige Ausgabemedium gewählt ist, um eine Verschiebung des Farbraumes zu verhindern.

Format und Auflösung

Satzspiegelentwurf

Jedes Print-Layout soll einen Rahmen schaffen, in dem der Inhalt angeordnet werden kann. Der Inhalt eines Werks soll harmonisch sein und einen ganzheitlichen Eindruck schaffen. Um Texte und Bilder zu ordnen, legt der Designer ein Gestaltungsraster als Ordnungssystem an. Dieses Raster ist bei Printmedien als Satzspiegel bekannt. Ein vergleichbarer Rahmen ist auch für Web-Layouts erforderlich. Bevor man mit dem Layouten einer Website beginnen kann, muss man sich für ein bestimmtes Format entscheiden. Die gesamte Breite ist ebenso wie die Breite und Höhe der einzelnen Bereiche in Pixel zu definieren. Was einfach klingt, erweist sich in der Praxis allerdings oft als knifflige Aufgabe, bei der folgende Faktoren berücksichtigt werden müssen: Monitorgröße
d.h. der Durchmesser eines Monitors in Zoll (z.B. Laptop mit 17-Zoll), wobei verschiedene Benutzer meist unterschiedlich große Monitore haben. Bildformat
das über das Verhältnis von Bildhöhe und Bildbreite (z.B. 16:10 Breitbild) definiert wird. Monitorauflösung
Sie gibt die Breite und Höhe in Pixel an: Bei einem Laptop mit 17-Zoll sind es 1280 x 800 Pixel, bei einem Cinema Display 2560 x 1600 Pixel. Falls die Website auf einem Handy dargestellt werden soll, stehen magere 320 x 240 Pixel zur Verfügung. Webbrowser
Hier ist zu beachten, dass Webseiten in jedem Browser, in der Vollbilddarstellung und als Browserfenster korrekt dargestellt werden müssen und die Anforderungen der Barrierefreiheit erfüllen sollten. Die wichtigsten Elemente einer Seite sollten immer im sichtbaren Bereich und ohne Scrollen zu finden sein. Denn oft entscheiden Besucher bereits nach einem ersten kurzen Blick, ob die Seite interessant erscheint oder nicht. Gerade auf der Startseite sind mehrere Teaserboxen empfehlenswert, die verschiedene Themen auf einen Blick zeigen und den Besucher dazu animieren, länger auf der Seite zu bleiben. In diesem Zusammenhang sollte man auch die Höhe der Headergrafik begrenzen, um damit – so schön die Bilder auch sein mögen – nicht den Großteil des Viewports schon zu belegen.

Typografie

Es ist etwas anderes, ob man einen Text am Bildschirm oder in gedruckter Form liest. Die Auflösung eines Monitors ist im Vergleich zur Auflösung einer Druckmaschine deutlich geringer. Deshalb erscheinen Schriften am Monitor mitunter "unruhig" und pixelig. Ein weiterer Grund für die verminderte Lesbarkeit am Monitor im Vergleich zu gedruckten Texten liegt in der Kontrast- und Farbwiedergabe von Bildschirmen: Monitore sind "Selbststrahler", d.h. die Farben werden durch den Monitor selbst erzeugt. Auf bedrucktem Papier hingegen entsteht die Farbwirkung durch Reflexion der Strahlen einer externen Lichtquelle. Aus diesem Grund ist die auf das Auge treffende Lichtmenge beim Monitor deutlich höher als beim Papier. Stark gesättigte Farben sowie (zu) hohe Kontraste sind deshalb am Monitor möglich. Beide Aspekte – Auflösung und Farb- bzw. Kontrastwiedergabe – erklären, warum Lesen am Bildschirm anstrengend und ermüdend ist. Deshalb sollten längere Texte, die am Bildschirm gelesen werden sollen, über eine größere Schriftlaufweite und einen größeren Zeilenabstand verfügen.

Schriftdarstellung

Während die Wahl der Schrift für Printmedien ausschließlich gestalterischen Kriterien unterliegt, erweist sich die Verwendung von Schriften in digitalen Produkten als problematisch. Der wesentliche Grund liegt in der geringen Auflösung des Monitors: Die Auflösung gibt die Anzahl an Punkten an, die pro Längeneinheit (Zentimeter oder Inch) dargestellt werden. Je höher die Auflösung, desto feiner die Details, die wiedergegeben werden können. Die Auflösung eines Monitors liegt bei 72 und 96 ppi (Pixel pro Inch). Zum Vergleich: Um eine Schrift drucken zu können, muss zunächst eine Druckplatte hergestellt werden. Zur Übertragung des Druckbildes auf die Platte wird diese belichtet. Eine hierfür typische Belichtungsauflösung beträgt 2540 dpi (Dots per Inch). Da unser Auge "nur" etwa 800 dpi auflösen kann, wirken gedruckt Schriften glatt und stufenlos. Die Auflösung eines Monitors ist hingegen deutlich schlechter als die Auflösung unserer Augen. Daraus folgt, dass wir einzelne Pixel unterscheiden und deshalb schräge Linien als Stufen wahrnehmen. Zusammenfassend lässt sich sagen, dass sich viele Druckschriften in den Lesegrößen zwischen 8 und 10 Punkt nur bedingt für die Bildschirmdarstellung eignen. Dies gilt insbesondere für Schriften mit filigranen Serifen und feinen Duktusunterschieden, kursive Schriften oder Schriftschnitte, Schreibschriften, schmal laufende Schriften oder Schriftschnitte und gebrochene Schriften.
Für Webseiten ist eine Schriftgröße von 12 Punkt und Schriftarten wie Arial und Verdana am besten geeignet.

Screen- und Print-Layout

Digital- und Printmedien sind eng miteinander verknüpft. Von einer Firma wird heute erwartet, dass sie eine Internetpräsenz besitzt. Und selbst Unternehmen, die ihren Vertrieb ausschließlich über das Internet abwickeln, wie z.B. Amazon oder eBay, brauchen Printmedien, um mit den Kunden zu korrespondieren, sich auf Messen zu präsentieren oder um Anzeigen zu schalten. Beide Komponenten, d.h. das Screen- und Printdesign ergeben das als Corporate Design bezeichnete Erscheinungsbild des Unternehmens. Screen- und Print-Layouts sind zwar eng miteinander verbunden, unterscheiden sich aber dennoch in vielen Fällen. Die Gestaltungsgrundlagen in beiden Bereichen sind identisch, aber eben nur die Grundlagen. Angefangen von der Auswahl der Farben über die Schriften und die Formate bis hin zu den multimedialen und interaktiven Möglichkeiten unterscheiden sich Screen- und Print-Layouts in vielen Details, auch wenn der Kunde dies aufgrund des Corporate Designs möglichst nicht bemerken soll. Die Nachteile des Mediums "Bildschirm" liegen vor allem in der geringen Auflösung der Monitore, in der fehlenden Farbverbindlichkeit, in der eingeschränkten Schriftauswahl sowie in der Festlegung auf eine querformatige Ausgabe. Die Stärken der Digitalmedien liegen in ihren vielfältigen interaktiven und multimedialen Möglichkeiten, sowie – im Falle des Internets – in einer hohen Aktualität und weltweiten Verfügbarkeit. Screendesign heißt also nicht, "hübsch" aussehende Seiten zu gestalten, sondern die Stärken des Mediums optimal zu nutzen und gleichzeitig die Nachteile durch passende Lösungen auszugleichen. Das Ziel ist doch ein insgesamt runder, attraktiver Internetauftritt, mit dem die gewünschten Ziele erreicht werden können.

Fazit

Screen- oder Webdesigner müssen - vielleicht noch mehr als im Printbereich - die Schnittstelle zwischen der Gestaltung, den technischen Möglichkeiten und Grenzen des Mediums kennen. Freies Gestalten mit Photoshop nach dem Motto "Um die Umsetzung kümmere ich mich nicht, das ist Aufgabe der Programmierer!" muss leider klar als der falsche Ansatz bezeichnet werden. Denn Gestaltung macht nur Sinn, wenn sie auch umsetzbar ist. Hierzu muss der Designer zumindest die technologischen Rahmenbedingungen und die damit verbundenen Einschränkungen kennen, damit er nichts gestaltet, das später nicht (oder nur mit unvertretbar hohem Aufwand) realisierbar ist. Es ist also ein durchaus umfangreiches Wissen erforderlich, um ein webtaugliches Layout zu erstellen und dieses anschließend in funktionsfähige Webseiten umzusetzen. Leider wird vielfach suggeriert, dass das "Zusammenklicken" von Webseiten ein Kinderspiel sei. Die Schar der Hobby-Webdesigner ist auch entsprechend groß. Die Qualität ihrer Webseiten kann aber in vielen Fällen nicht überzeugen. Um es nochmal klar zu sagen: Für das Funktionieren einer Website sind eine ganze Reihe von Programmier- und Skriptsprachen wie HTML, CSS, JavaScript, PHP, SQL, Ajax uvm. zuständig. Eine Website muss unter Windows, Linux und Mac OS funktionieren, egal ob der Anwender sie mit Firefox, Internet Explorer, Safari oder einem anderen Browser öffnet. Die Website muss im Extremfall auf einem Handy und auf einem 27-Zoll-Monitor brauchbar sein. Alle diese technischen Besonderheiten wirken sich auf die Konzeption, Gestaltung und Realisierung der Website aus. Dieser Artikel ist aus der fünften Ausgabe des eStrategy-Magazins. News, Tipps & Tricks sowie Fachbeiträge rund um die Themen eCommerce, Online-Marketing und Webentwicklung finden sie im eStrategy-Magazin. Das Magazin kann kostenlos unter www.estrategy-magazin.de heruntergeladen werden.

Kommentare

Bitte beachten Sie unsere Informationen zum Datenschutz.

blog comments powered by Disqus

Weitere Artikel zum Thema

alle Artikel zum Thema