(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:- Startseite mit Schriftvergrößerung auf 150%
- Startseite mit Schriftverkleinerung auf 75%
- Inhaltsseite mit Schriftvergrößerung auf 150%
- 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:
- 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
- 1600×900 Pixel (neuer 16:9 Bildschirm)
- 1024×800 Pixel
- 950×500 Pixel
- 600×320 Pixel und 320x600Pixel (für diverse ältere Handhelds)
- Textseite, die auch Bilder enthält mit Auflösungen von
- 1600×900 Pixel (neuer 16:9 Bildschirm)
- 1024×800 Pixel
- 950×500 Pixel
- 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
Sehr schöne, längliche Übersicht. Ich achte immer wieder auf folgende zusätzliche Punkte:
– Haben alle Formulare auch Absendebuttons?
– Steht in einem Passwortfeld nicht in Klatext „Passwort“?
– Gibt es auch mal zweizeilige Überschriften?
– Hat die horizontale Navigation realistische Einträge oder werden die am Ende länger?
– Haben nebeneinanderstehende Container immer die gleiche Höhe? Wenn ja: wie sieht es da mit der Überschrift aus? Kann das CMS die Texte zurechtschneiden?
– Werden deutsche Blindtexte benutzt oder nur Lorem ipsum?
Danke für die Punkte, ich schau das ich die noch einbaue.
Via Mail von einer Kollegin hab ich auch diesen wichtigen Punkt bekommen: Wenn Hintergrundgrafiken mit repeat* eingesetzt werden sollen, dann muss die Original-Hintergrundgrafik auch entsprechende Ränder haben, die einen fließenden Übergang erlauben.
Das Thema Lizenzen und Bildmaterial hast du schon erwähnt, ich würde hier noch eine kleine Ergänzung aus eigener Erfahrung einbringen.
Bei der Umsetzung einer „normalen“ Website reicht in der Regel eine einfache Lizenz bei den gängigen Diensten, die Lizenzfreie Bilder zur Verfügung stellen.
Soll man aber für den Kunden, zum Beispiel zu Werbezwecken, ein WordPress-Theme oder ein anderes CMS-Template umsetzen, welches man kostenlos oder kostenpflichtig einer breiten Nutzerschaft zur Verfügung stellt, dann muss man eine erweiterte Lizenz erwerben. Manche Dienste erlauben eine solche Nutzung nicht.
Wichtig ist imho auch zu schauen ob z. B. die Seitenleiste oder Fußbereich die „klassischen“ Bannergrößen aufnehmen kann.
Das ist nicht nur für die üblichen Affiliate- sondern auch für Veranstaltungsseiten (wegen Sponsoren) interessant. Es wäre ärgerlich wenn man nach der Umsetzung feststellt, dass die Sidebar 5 Pixel zu schmal ist um die Werbemittel aufzunehmen.
Gute Zusammenfassung – hier sieht man schon die Erfahrung und einigen Frust durchblicken.
Aber was ich nicht verstehe: Ich dachte „Webdesigner“ designen für das Web und Webentwickler setzen dieses Design dann um. Manchmal ist es auch eine Personalunion. Aber die Begrifflichkeit macht mich etwas stutzig.
@stefan: Jein, so war es früher mehr, wo ein Webmaster noch alles machen konnte. Inzwischen ist es aber so, daß unter Webentwickler eher solche Leute versteht, die Webanwendungen programmieren; Also Leute, die dafür sorgen, daß HTML am Ende in irgendeiner Form generiert wird.
Unter einen Webdesigner verstehe ich dagegen jemand, der ein definiertes HTML als Grundlage nimmt (am besten auf Basis eines Templates wie YAML) und dann mit Hilfe von CSS die Optik schön macht.
In Teilen gibt er dann auch den Webentwickler vor, wie die HTML-Strukturen auszusehen haben und wo z.B. Bereiche mit divs deklariert werden müssen.
Programmierung von Anwendungen und Erstellung von Designs verlangt zwar beides ein hohes Maß an Kreativität, aber das sind trotzdem zwei unterschiedliche Gebiete.
Meiner Erfahrung nach sind Allrounder, die sowohl serverseitig programmieren können (in PHP, Perl, Python u.a.) als auch ästhetisch gelungene Designs hinzaubern können, nur noch sehr selten. Das jeweilige Wissen ist auch inzwischen zu speziell geworden, daß man als Allrounder kaum genug Zeit haben kann um beide Gebiete zu verfolgen.
Lange rede, kurzer SInn: Unter einem Webdesigner verstehe ich jemand, der CSS-Designs erstellen kann und eine HTML-Struktur.
Der Webentwickler dagegen ist dafür da, daß der Server diese HTML-Struktur und die weiteren benötigten Dateien ausliefert.
Mir fällt gerade bei meinem aktuellen Job wieder so ein Unding auf, das unabhängig von Print- oder Webdesigner zu sein scheint: die Verwendung von Text ohne Anti-Alias. Da Browser automatisch den Text anti-aliasen (wie würde man das eindeutschen?), sollte das Layout dies auch tun.
Super Artikel!
Hervorragender Artikel! Mir fällt noch ein, bei Headergrafiken wie bei Dir zum Beispiel, die Grafiken entsprechend größer zu liefern, damit bei skalierenden Containern keine leeren Bereiche entstehen.
Hallo Wolfgang, danke für die Erwähnung und die Erstellung der Liste.
Ein paar Anmerkungen: Meiner Erfahrung nach ist solch eine Liste sinnvoll, aber leider auch Wunschdenken. Einige Punkte verstehen der Printler bzw. unerfahrene Screendesigner nicht bzw. setzt Du zu viel voraus, Beispiel:
– Vorlage für Print, Handheld und Screenreader:
— Print möchte ich dem Printler nicht an die Hand geben, da kommt mit Sicherheit unlösbares bzw. ineffizient kompliziertes bei raus, nämlich eine Art Broschüre.
— Handheld kommt später noch mit den Auflösungen, jedoch ist hier auch wieder die Frage, ob das nicht den Rahmen sprengt bei einem „klassischen“ Website-Projekt. Wichtiger als Handheld sehe ich eher, dass das (meist PS-)Dokument so angelegt ist, dass klar wird, was jenseits der (meist) 1024 Pixel-Auflösung passieren soll.
— Screenreader verstehe ich in dem Zusammenhang gar nicht. Denn das ist imho die Aufgabe des „Umsetzers“, ein Gestalter weiß im Zweifelsfall gar nicht was das ist bzw. was es bringen soll.
^^narf, im nächsten Absatz folgt ja Deine Erklärung. Soweit okay, trotzdem meine ich, dass das dem erfahrenen Entwickler zu überlassen ist.
@Jens: Jein, denn XP hat Cleartype von per default ausgeschaltet und Lieschen Müller weiß nicht, was das überhaupt ist, schaltet es also nie an. Wenn ein Gestalter den Fließtext zumindest ohne Anti-Alias liefert und der Kunde das so absegnet ist beim Live-Gang dann eher ein Aha-Effekt zu erzielen, wenn es besser aussieht (eben weil kein XP am Start ist).
Meiner Erfahrung nach ist es sinnvoller, wirklich kritische Bereiche, die eventuell komplett fehlen nachzufragen. Für andere Bereiche oder „Kleinigkeiten“ lieber vorher darauf hinweisen, dass das gesamte Konzept unvollständig ist und man eben selbst fehlende Dinge einbaut (Skiplinks etc.). Denn die Nachhilfe, die Du den Leuten geben musst, zahlt Dir keiner. Also lieber einfach machen.
Vielleicht verstehe ich die Begrifflichkeiten, die in dem Artikel verwendet werden, nicht richtig, aber ein Print-Designer sollte niemals Designs für Webseiten gestalten. Ohne Wenn und Aber. Print ist ein anderes Medium.
Und um Webseiten zu gestalten, gibt es Webdesigner. Also Designer, die ausschließlich das Design für Webseiten und Anwendungen konzipieren und gestalten. Als Grundlage haben viele Designer ein fundiertes Studium, das sich auf Mediendesign fokusiert.
Webdesign ist mehr als ’schöne‘ Bildchen in Photoshop anlegen. Die Umsetzbarkeit der Layouts ist Grundvoraussetzung.
Schließlich haben Designer sowie Front- und Backendprogrammierer Interesse daran, dass professionelle Webseiten online gehen.
@Daniela: Du musst schon zugeben, dass das eine Traumwelt ist, die Du da skizzierst ;-) Ich erhalte oft Designs von „Webagenturen“ oder Werbeagenturen mit „ausgebildeten Screendesignern“. Glaub mir, wenn 50% der oben genannten Punkte erfüllt sind, ist das schon ein super Ergebnis.
Nein, dass ist keine Traumwelt.
Ich habe als Ausbildung ein Studium als Informatiker im Bereich Multimedia. Ich weiß also als Designer, worauf es bei der Umsetzung ankommt. Mein Anspruch sind professionelle Layouts. Und meine Arbeit erfordert weit mehr als die Punkte, die in dem Artikel beschrieben wurden.
Und das kann ich ebenfalls von den Arbeiten vieler Kollegen behaupten, mit denen ich zusammengearbeitet habe. Profis im Bereich Webdesign arbeiten pixelgenau. Webstandards, Usability und Barrierefreiheit sind einfach Grundvoraussetzung. Und vor allem arbeiten Profis mit den Kollegen vom Front- und Backend zusammen.
Natürlich habe ich auch einige Designer erlebt, die ihren Job nicht so ernst nehmen und nicht auf Qualität achten. Oder Print-Designer, die keine Ahnung von den Anforderungen im Web haben. Aber zum Glück kommt das nicht so oft vor.
Aber dazu kann ich, wie schon vorher, nur eines sagen:
Die sollten kein Webdesign machen!
Wie der Autor des Artikel schon so treffend gesagt hat:
Nur zu dem Thema: Ich komme gerade aus einem Gespräch mit einer „Designerin“, die auch für einen Kunden alle Print-Produkte fertig stellte. Nun soll die Vorlage aus Print nun auch im Web gehen. Natürlich am besten 1:1 obwohl bei der Vorlage (die ich leider nicht zeigen und als sehr passendes Beispiel vorexerzieren könnte) so ziemlich alles genau falsch gemacht wurde was fluides nachhaltiges Design angeht, was möglich war.
Dummerweise haben die Designer oft einen zeitlichen Vorsprung bei der Kommunikation und Überzeugung ihres Kundens. Weil der wendete sich ja zuerst an die Print-Agentur. Und der Kunde hat auch keine Ahnung. In diesem Fall haben wir es, auf meinen Satz oben bezogen, es also mit jemand zu tun, der nichtmal den Unterschied zwischen Maler und Lackierer kennt! Und dem es auch nicht interessiert. Der sich also an den Lackierer wendete und wo dieser nun schon mehrere Wochen Zeit hatte, den Kunden kennen zu lernen, weiss wie der tickt und wie man den Kunden überzeugt und von sich und seinen Werken einnimmt!
Wenn dann ein weiterer Webdesigner hinzugezogen wird, der dann innerlich die Hände über die Köpfe zusammenschlägt, hat der Webdesigner einfach schlechte Karten: Er kennt den Kunden nicht genauer, weiss nicht wie er mit den reden soll. Der Kunde ist dagegen vom Print-Designer angetan und sieht in dem Webdesigner, wenn dieser von problemen berichtet -die der Kunde selbst nicht sehen und interpretieren kann- , dann nur als nervigen Typen, der einfach aufhören soll zu jammern sondern endlich das machen soll, was der „Designer“ vorgab.
Ausserdem sitzt der Print-Designer daneben, der keinesfalls zulassen will und wird, daß dessen Kunde die Probleme mit dem tollen Design bewusst gemacht werden.
@xwolf: ein designer nimmt ein html als grundlage? die designer mit denen ich zusammenarbeite, nehmen die kundenwünsche und das cd als grundlage für ein webdesign – also nur das reine „bild“ quasi.
der eine teil setzt das dann selbst in html um (ist quasi schon webentwickler) – der andere gibt es mir zum umsetzen. alles was dann mit programmieren zu tun hat, ist dann ja schon ein job für die webprogrammierer. aber wahrscheinlich sehe ich den „designer“-begriff auch zu spitzfindig und die grenzen sind teilweise fließend.
aber es ging ja ursprünglich eigentlich um print vs. web :-)
Dann am Besten gleich mal mit einem zusätzlichen „s“ im einleitenden „Das“ anfangen ;)
Hallo Daniela, ich kann Xwolfs Erfahrungen bestätigen und finde seine Liste super. Ich kenne genug Missverständnisse und Schwierigkeiten zwischen Grafikdesignern und Programmierern, um Schulungen für das gegenseitige Verstehen zu leiten. Und oft erlebe ich, dass Agenturen Print-Designer für die Gestaltung der Webseiten einstellen. Wenn Du das bisher so nicht erlebt hast, ist es schön für Dich, aber ich kann schwören, dass woanders Abgründe, die Du gar nicht kennen willst, lauern ;-)
Gegenfrage: Hast Du noch nie erlebt, dass nach vom Kunden abgenommenen Entwürfen die Designerin später bei der technischen Umsetzung auf die Frage „Was passiert mit dem Design, wenn ich das Browserfenster verkleinere / vergrößere / links eine Sidebar aufklappt?“ keine – repeat: KEINE – Antwort wusste, außer „… öhm …“? Selbst wenn Du meine Frage zu Deinem Glück verneinen kannst, kannst Du sicher sein, dass ich – und ich denke auch Xwolf und Mark – diese Situation anders kennen als Du und der Blog-Beitrag seine Hintergründe hat.
@Martin / Daniela: Eine Print-Designerin mit der ich zuletzt zu tun hatte, wusste darauf schon eine Antwort: „Über Design wollen wir heute mit Ihnen nicht sprechen.“ …