Was Print-Designer für die Umsetzung eines Webdesigns liefern müssen

(Vorbemerkung: Dieser Artikel hat noch kein Endzustand erreicht und wird noch nach und nach durch das eingehende Feedback korrigiert und erweitert.)

Das Webseiten keine Gemälde sind und die Gestaltung für das Web anderen Regeln gehorcht als bei der Print- oder Screengestaltung wurde bereits in vielen Artikeln von Experten ausführlich und in nahezu epischer Breite beschrieben.
Stellvertretend für viele Artikel verweise ich auf den aktuellen Artikel von Marc Hinse, ein professioneller Webdesigner und Webentwickler, der in klaren und offensichtlichen Beispielen die wichtigsten Dinge aufzeigt: Web ≠ Print

Ein Rant zum Einstieg

Trotz der großen Zahl an Artikeln, Büchern und Studien (insbesondere solche die die Themen Usability und der Barrierefreiheit behandeln) gibt es immer noch sehr viele Agenturen und Screen/Print-Designer, die glauben mit der Erstellung einer Photoshop-Vorlage sei alles getan um ein Webdesign fertig zu stellen; Und nun müsse nur noch ein „Programmierer“ es einfach umsetzen.
Noch schlimmer: Es gibt sogar Studiengänge oder Kurse die damit werben, daß man in diesen die Erstellung von Webdesigns erlernt; bei denen allerdings nur Grundlagen von HTML 4.0 (!) gestreift werden, der Schwerpunkt aber nur daraus besteht, (zugegebenermaßen) schöne Grafiken mit Photoshop zu erstellen.

Doch genug geschimpft, kommen wir zur Sache.

Was braucht ein Webdesigner von einem Print-Designer?

Es gibt Situationen bei denen man nicht umhin kommt, doch die Vorlage eines Print-Designer umzusetzen.
Die Ausgangslage ist die folgende: Kunde hat sich von einer Print-Agentur beschwatzen lassen, ein Design von der Agentur zu nehmen. Ein Webdesigner soll dieses Design danach umsetzen. Was braucht er dazu?

Die Photoshop-Vorlage für die Startseite eines größeren Webangebotes ist allenfalls der allererste und einfachste Schritt. Marc Hinse beschreibt in seinem Artikel ausführlich woran es Print-Designs mangelt. Dies kann als Orientierung genutzt werden, was ein Screen-Designer zusätzlich liefern muss.
Die folgende Auflistung soll versuchen, dies zusammenzufassen.

Grundlegendes

Vor der Umsetzung sollte eine Prüfung der Vorlage stattfinden auf visuelle und logische Fehler, sowie anderer offensichtlicher Mängel in Bezug auf Usability und Barrierefreiheit.

• Farbkontraste: Wenn unterschiedliche Farben verwendet werden für Texte und Hintergründe, ist zu prüfen ob die Kontraste ausreichend sind. Als Anhaltspunkt können hier die gängigen Formeln aus der barrierefreien Gestaltung von Webauftritten herangezogen werden.
• Navigation und aktuelle Position auf der Website: Wie wird bei einzelnen Unterseiten die aktuelle Position innerhalb des Webauftritts dargestellt? Ist eine entsprechende Navigation enthalten? Gibt es eine Vorlage für eine Inhaltsübersicht in Baumform und einer in alphabetischer Ansicht?
• Optische Bedienelemente: Gibt es rein optische Bedienelemente, die verlangen, daß Surfer sie auch optisch genauso wahrnehmen und nutzen können, wie der Design?
• Scrolling: Welches Scrollverhalten für Inhaltsbereiche ist vorgesehen? Kann es etwa passieren, daß Texte aus dem Sichtbereich verschwinden, nur weil der Surfer eine größere Schriftart verwendet?
  Welches optische Verhalten ist für Überschriften oder Slogans im Kopf der Seite vorgesehen, sollten diese auf zwei oder mehr Zeilen umbrechen?
• Formulare: Haben alle Formulare erkennbare Absendebuttons?

Vorlagen für unterschiedliche Seitentypen

Ein Webauftritt besteht aus unterschiedlichen Typen von Seiten. Für alle diese Typen muss eine Vorlage geliefert werden, wenn diese Typen vorhanden sind:

• Startseite
  Die Eingangsseite der Webpräsenz.
• Doorway-Page
  Hinweis: Doorway-Pages sollten nur in Ausnahmefällen verwendet werden. Für normale Webauftritte, derren Schwerpuntk auf der Informationsverbreitung liegt, sollten Doorway-Pages nicht mehr zum Einsatz kommen. Am Besten verzichtet man auf dieses Relikt des letzten Jahrtausends!

• Inhaltsübersichten / Inhaltsindex
  Bei komplexen Seiten reicht eine Navigation meist nicht aus, es muss auch eine Inhaltsübersicht und/oder ein alphabetischer Seitenindex geliefert werden. Dabei handelt es sich dann auch meist um eine umfangreiche Liste, derren optische Darstellung definiert sein sollte.
• Fehlerseiten
  Falls ungültige Adressen auf der Webseite aufgerufen werden, der Zugriff fehl schlug oder es zu einer anderen Art von Fehler kam.
• Ausgabeseiten für Suchergebnisse
  Falls der Webauftritt eine Suchmaske anbietet, muss definiert werden, wie das Ergebnis der Suche aussieht.
• Seiten mit Formularen
  Sind Eingabeformulare auf dem Webauftritt vorhanden, müssen diese vollumfänglich dargestellt werden. Dabei müssen alle üblichen Eingabemasken und Bedienmöglichkeiten definiert sein: Eingabemasken für Texte (sowohl mit aktiven Cursor als auch ohne), Auswahllisten, Checkboxen, Radioboxen und Absendebuttons.
  Bei textuellen Eingabemasken, sowie bei Auswahllisten ist anzugeben, ob es ein Default-Element gibt, welches sichtbar ist, wenn die Eingabemaske oder Auswahlliste nicht aktiv ist.
• Seiten mit viel Text, Seiten mit ganz wenig Text
  In der klassischen Vorlage eines Print-Designers ist Mustertext immer schön passend lang, damit die Seite optisch gut aussieht.
  In der Praxis allerdings gibt es unterschiedlich lange Texte. Die Länge des Textbereiches hat Einfluß auf das Scrollverhalten der Seite. Daher sind für beide Varianten Vorlagen zu liefern. Bei der Variante mit viel Text, muss dieser so lang sein, daß der gesamte Text nicht auf einer Bildschirmseite darstellbar ist. Nur so kann der Webdesigner erkennen, wie die Seite mit Scrollbalken auszusehen hat.
• Seiten mit kleiner Schriftgröße, Seiten mit großer Schriftgröße
  Damit klar ist, wie sich das Webdesign verhält, wenn Surfer mit unterschiedlich eingestellten Schriftgrößen die Seite besuchen, sind mindestens 4 Beispielvorlagen für folgende Varianten zu liefern:
  1. Startseite mit Schriftvergrößerung auf 150%
  2. Startseite mit Schriftverkleinerung auf 75%
  3. Inhaltsseite mit Schriftvergrößerung auf 150%
  4. Inhaltsseite mit Schriftverkleinerung auf 75%
• Seiten mit Bildern in den Textbereichen
  Verwendete Bilder in Textbereichen können in Größe und Position variieren. Zudem ist ihre Darstellung auch abhängig davon ob sie von Text umflossen werden sollen oder nicht. Daher muss eine Vorlage vorhanden sein, die zeigt, wie sowohl kleine Bilder (bis zu einer Größe von 300px in Höhe und Breite), als auch wie große Bilder (bis zu einer Größe von 1024px Breite und 800px in der Höhe) dargestellt werden sollen.
  (Diese Vorlage können ggf. mit der Vorlage der Seiten mit viel Text kombiniert werden.)

• Sonstige spezielle Inhaltsobjekte und „Web 2.0“-Elemente
  Wenn die Seite verschiedene eingebettete Objekte enthält, wie beispielsweise YouTube-Videos, Werbebanner und Werbetextbereiche, diverse Web 2.0-Bookmarklets, Feeds aus Blogs oder anderen Medien, dann muss auch hier die Position und die Art der Darstellung definiert sein.

  Ausserdem gibt es oft einige textuelle Informationen, die ebenfalls gesondert dargestellt werden sollten. Beispielsweise die „Personen-Visitenkarten“ bei einer Wir über uns-Seite oder die Kontaktdaten in einem Impressum.

Vorlagen für verschiedene Ausgabeformate

Neben der Vorlage für die Darstellung mit Webbrowsern müssen ebenso Vorlagen geliefert werden für die Darstellung derselben Seite mit folgenden Medien:

• Print
• Handheld
• Screenreader

Bei den unterschiedlichen Ausgabemedien sollte zudem bedacht werden, daß Bereiche der Webseite bei diesen gegebenfalls obsolet sind oder aber ob welche zusätzlich definiert werden müssen, die in der Monitordarstellung jedoch fehlen:

• Bei der Print-Darstellung ist die optische Darstellung von Links und Menüs zu hinterfragen. Einige Links machen bei der Print-Ausgabe keinen Sinn mehr und sollten daher dann unsichtbar sein.
• Bei der Print-Darstellung könnte möglicherweise eine für Print-Publikationen andere Corporate Design-Vorgabe für den Kopfteil der Seite gelten.
• Bei der Handheld- und Screenreader-Darstellung sind etwaige vorher unsichtbare Skiplinks sichtbar zu machen.

Unterstützung verschiedener Fensterauflösungen

Wenn ein Print-Designer anhand der obigen Anforderungen noch nicht verzweifelte und laut über diese unangemessenen Nachfragen des unwürdigen Code-Sklavens geflucht haben, wird er gleich möglicherweise völlig aus der Haut fahren. Denn nun wird sich heraus stellen, ob das ganze Design überhaupt was wert ist: Wie soll das Design denn bei verschiedenen Fensterauflösungen reagieren?

Folgende Vorlagen sind zu liefern:

• Startseite mit Auflösungen von
  1. 1600×900 Pixel (neuer 16:9 Bildschirm)
  2. 1024×800 Pixel
  3. 950×500 Pixel
  4. 600×320 Pixel und 320x600Pixel (für diverse ältere Handhelds)
• Textseite, die auch Bilder enthält mit Auflösungen von
  1. 1600×900 Pixel (neuer 16:9 Bildschirm)
  2. 1024×800 Pixel
  3. 950×500 Pixel
  4. 600×320 Pixel und 320×600 Pixel (für diverse ältere Handhelds)

Ein Anhaltspunkt und Hintergrundinformationen liefert u.a. die Seite Browser Size von Google.

Verwendete Bilder

Alle für die Vorlage verwendeten Bilder (insbesondere bei Hintergründen zu Bereichen der Webseite) müssen einzelnt geliefert werden. Die Bilddateien sollten dabei möglichst im Orginal und in einem der gängigen Bildformate JPG, GIF, PNG, TIFF geliefert werden. Keinesfalls sollten Bilder vom Print-Designer selbst verkleinert werden. Bilder, welche in einem Word- oder PDF-Dokument embedded werden, sind nicht nutzbar.
Ausserdem müssen alle verwendeten Logos, die auf der Webseite dargestellt werden sollen, geliefert werden.
Für den Fall, daß Hintergrundbilder in einer oder zwei Dimensionen wiederholbar sein sollen, muss die Vorlage des Bildes entsprechende Ränder haben, die einen fließenden Übergang erlauben.

Verwendete Schriften

Wenn die Webseite verschiedene Schriften verwendet, sind diese anzugeben. Zusätzlich müssen zu jeder Schrift mindestens 2 weitere Alternativschriften genannt werden, die dann verwendet werden, wenn die favorisierte Schrift nicht verfügbar ist.
Weiterhin muss für den Fall, daß keine der drei Schriften verfügbar ist, angegeben werden, ob es sich um eine Serifenschrift handelt oder nicht.

Schriftgrößen

Für alle Bereiche der Homepage in der Texte dargestelt werden, sind die exakten Schriftgrößen anzugeben. Allerdings sollte nur der Haupttextbereich (=Inhaltsbereich) in der Größenangabe Pixel oder Point fest definiert werden. Die Schriftgrößen aller anderen Textbereiche werden dagegen proportional zu der Größe des Haupttextbereiches definiert werden.

Schriftgrafiken

Werden Schriftgrafiken verwendet, sind die dafür verwendete Schriftarten und Schriftgrößen ebenso wie bei den normalen Textbereichen anzugeben. Handelt es sich bei den Schriftgrafiken um Grafiken, bei der es zu keinen besonderen grafischen Modifikationen kam, werden diese vorzugsweise vom Webdesigner verworfen und über normale Texte dargestellt, derren Optik mit Hilfe von CSS an die Vorlage angepasst wird.

Reaktion bei Maus- und Tastaturbedienung, sowie Hovereffekte

Der aktuelle Fokus des Cursors (sowohl bei Maus- oder Tastaturbedienung) von Links ist sichtbar zu machen. Dies gilt für:

• Links in der Navigation
• Links in Textbereichen
• Links auf Grafiken
• mit der Tastatur angesteuerte aktive Skiplinks
• weitere mit Maus oder Tastatur angesteuerte reaktive Bereiche, die zu einer Aktion führen (Buttons, Ajax-Schaltflächen, usw.)

Zusätzlich muss definiert werden, wie ein selektierte Objekte (Texte und Bilder) in den jeweiligen Bereichen der Homepage aussieht.

Farben

Texte, Links, Hintergründe, Ränder und Bereiche haben unterschiedliche Farben. All diese müssen in RGB-Werten angegeben werden.
Zusätzlich sollte man bei Farbübergängen von Flächen die Start- und die Endfarbe angeben.

Verwendete Mustertexte

Wie oben bereits beschrieben, sollten die Vorlagen sowohl kurze, wie auch lange Texte beinhalten. Häufig wird dabei zurückgegriffen auf das bekannte Lorem Ipsum.
Leider fehlt es dem Lorem Ipsum-Text, wie auch meisten anderen Mustertexten, an unterschiedlichen Textarten. Beispielsweise Tabellen oder Zitate. Wenn der Webdesigner ein CSS entwerfen soll, muss dieser jedoch auch wissen, wie auszusehen haben.
Ein idealer Mustertext sollte daher folgende Elemente enthalten:

• Tabellen (mit mindestens 3 Zeilen und Überschriftenzeile, sowie mindestens 3 Spalten und Bezeichnungsspalte)
• Zitate (sowohl innerhalb eines Absatzes als auch in Form eigener Absatzzitate)
• Akronyme und Abkürzungen
• Listen (ungeordnete Listen, geordnete Listen; dabei auch Listen in Listen).
• Zitate oder Absätze in anderen Sprachen

Postionen und Ausrichtung von Bereichen

Falls in der Vorlage verschiedene Bereiche definiert wurden (zum Beispiel zwei nebeneinander stehende Textblöcke), ist zu definieren, wie diese zueinander positioniert sind und welche Textausrichtung genutzt werden soll.
Über die oben genannte Vorlage für kleinere Bildschirmauflösungen soll dabei auch gezeigt werden, wie die Textbereiche dargestellt werden, wenn der zur Verfügung stehende Platz nicht ausreicht, diese nebeneinander zu positionieren.

Rechtliche Aspekte

Viele Print-Designer greifen zurück auf ein großes Archiv von Bildern verschiedener Quellen. Diese werden z.B. für Hintergründe, als Schmuckgrafiken oder zur emotionellen Ansprache benutzt.
Beispielsweise finden sich auch Fotos von Menschen dabei, die in der eine oder anderen Situation aufgenommen wurden und sich damit eignen eine werbende Botschaft zu überbringen.
Hier ist zu hinterfragen, ob die Bilder überhaupt für die Nutzung im Internet frei gegeben sind, ob diese entsprechende Lizenzen haben. Dies gilt ganz besonderes auch dann, wenn nur einzelne oder wenige Personen abgebildet sind.
Die Vorlage einer Nutzungslizenz für eine begrenzte Auflage von Print-Publikationen reicht nämlich keinesfalls aus um das Recht zu erlangen, selbige Bilder weltweit abrufbar im Internet zu verbreiten.

Alles da? Dann los

Erst nachdem all das obige geliefert wurde, kann ein Webdesigner daran gehen, das Design für einen Webauftritt umzusetzen.
Sollte etwas fehlen, wird es zwangsläufig zu Rückfragen kommen. Dies kann auch sehr schnell sehr teuer werden. Beispielsweise dann, wenn Teile bereits umgesetzt wurden, sich dann aber herausstellt, dass aufgrund von mangelhaften Vorlagen (z.B. das Verhalten der Seite beim Einsatz von großen Bildern im Inhaltsbereich) die grundlegende Gestaltung nochmals neu gemacht werden muss.

Fazit

Das der Aufwand, den ein Print-Designer leisten müsste um all die oben definierten Informationen zu liefern sehr hoch ist, dürfte offensichtlich sein.
Der Aufwand dürfte eher selten wirklich geleistet werden. Trotzdem hab ich bislang keine andere ausreichende Checkliste gefunden, die alles auflistet, was ein Webdesigner im Idealfall bekommen sollte. Daher sehe ich diese Auflistung als idealtypischen Orientierungsrahmen an.
In der täglichen Praxis erwarte ich jedoch nicht, daß dieses Ideal erfüllt wird. So schön es auch wäre. Denn wenn alls richtig laufen würde, dann bräuchte man sowas garnicht:

Denn besser und kostengünstiger ist es immer noch, ein Webdesign gleich von einem richtigen Webdesigner entwerfen zu lassen, der dann das Print-Design zusammen mit dem Handheld- und Screenreader-Design erstellt.

Wenn ich meine Wohnung streichen lassen will, werde ich auch zum Maler gehen. Und nicht zum Lackierer.

Eine ebenfalls gute Variante wäre noch, wenn Webdesigner und Print-Designer noch während der ersten Erstellungsphase einer Vorlage schon zusammen und Hand-in-Hand arbeiten.

Weitere Links zum Thema

• Responsive Web Design: What It Is and How To Use It
• Web round up #11: The best responsive web design examples and resources
• Print Design to Web Design: Comparative Analogies
• [bueltge.de] HTML – Lorem ipsum Deutsch
• Webseiten keine Gemälde
• Web ≠ Print
• efa: Reine Formsache
• efa: Benimmregeln für Datentabellen