Der eigene Onlineshop für Fotografen

Workshop HTML5 & CSS3 - Stephan Heller

Checkliste für die Grafiklieferung

Gerade als Einsteiger in die Webentwicklung erfüllen Sie in der Regel beide Aufgaben, Sie erstellen ein Layout und setzen eine Website dann auch mit HTML und CSS um. Häufig geschieht dies auch nicht getrennt voneinander, die Tätigkeiten vermischen sind.

Im professionellen Umfeld sind diese Aufgaben jedoch streng voneinander getrennt, es gibt Grafiker, die das eigentliche Screendesign erstellen, als Frontendentwickler besteht die Aufgabe dann darin, das vorgegebene Layout zu Codieren, sprich: in HTML und CSS umzusetzen.

In diesem Fall hängt die Qualität Ihrer Umsetzung von dem ab, was Ihnen Grafiker liefern. Auch wenn dies keine verbindliche Liste ist, würde ich folgende Punkte im professionellen Umfeld erwarten, damit Sie Ihre Aufgabe zielführend erfüllen können.

Dinge, welche Grafiker Ihnen liefern sollten:

  • Alle Screens als Grafik-Datei (PNG oder JPG)
    So können Sie einen Gesamteindruck vom Webauftritt erlangen. Die Screens sollten dabei den Ausmaßen entsprechen, wie sie später auch im Web erscheinen sollen.
  • Alle Grafiken, in finaler Größe und web-optimiert
    Alle Logos, Hauptgrafiken sowie Bilder für den Inhalt sollten in der Fassung geliefert werden, wie sie später im Webauftritt verwendet werden sollen.
    Hier sollten einerseits die Grafiken in der richtigen Größe vorliegen, ein späteres kleiner- oder gar größer-skalieren geht in der Regel mit Qualitätsverlust der Grafik einher. Auch das Dateiformat (JPG, PNG, GIF) sollte bereits bei der Lieferung stimmen. Nicht zuletzt sollten die Grafiken für das Web optimiert sein, das heißt, sie sollten bei guter Qualität eine möglichst kleine KB-Größe haben.
  • Aller Hintergrundgrafiken
    Alle Schmuckgrafiken, Hintergrundverläufe und sonstiges Grafikmaterial sollte wie die anderen Grafiken web-optimiert geliefert werden. Vor allem sollten Hintergrundgrafiken mit transparenten Hintergründen bereits im passenden Dateiformat (PNG oder GIF) geliefert werden. Ein extrahieren und freistellen aus den Screenlayout-Grafiken geht häufig auf Kosten der Qualitätsverlust.
  • Das Layout im Browser-Kontext
    Der Grafiker hat mit Sicherheit eine Vorstellung davon, wie sich die Seite im Browserfenster verhalten soll. Hierüber erfahren Sie, ob eine Seite linksbündig oder zentriert angezeigt werden soll. Hilfreich ist hier ebenfalls, wie die Seite bei einer kleinen oder sehr großen Fenstergroße aussehen soll.
  • Mini-Style-Guide
    In großen Webprojekten werden häufig Style-Guides erstellt, worin das grundsätzliche Screendesign beschrieben ist, durch welche Merkmale, also Farben, Dimensionen, Seitentypen etc. der Webauftritt seinen Wiedererkennungswert bekommt. Diese entstehen häufig jedoch erst am Ende eines Projekts und dienen vor allem der Dokumentation und der Weiterentwicklung eines Webauftritts.
    Zu Beginn sollte ein Mini-Style-Guide geliefert werden, der die wesentlichen Informationen über Farben, Schriftarten und -größen usw. enthält. Die wesentlichen Eigenschaften eines Layouts können in der Regel auf einer Seite zusammen gefasst werden:
    • Ausmaße / Raster des Layouts
      Sie müssen wissen, wie breit die Webseite und einzelne Elemente sein sollen und welche Abstände einzelne Bestandteile zueinander haben sollen. Hier können die Werte entweder auf einem Screen notiert sein, aber auch eine kurz schriftliche Zusammenfassung bringt hier oft Klarheit
    • Schrifteigenschaften
      Dies sind die Parameter, die aus einem gelieferten Screen nur schwer ermittelt werden können, auch eine PSD-Datei, je nachdem, wie sie aufgebaut ist, liefert nicht immer befriedigende Werte. Im Detail:
      • Schriftfarbe: Generelle Schriftfarbe für die Seite. Haben bestimmte Elemente (z.B. Überschriften) eigene Farben, sollten dies aufgelistet werden. Idealerweise bekommen Sie eine Liste mit allen Farbwerten, die auf der Webseite eingesetzt werden sollten/dürfen. So haben Sie die Möglichkeit, für Elemente, die nicht im Layout berücksichtigt sind, eine passende Farbe zu vergeben.
      • Schriftart: Auch hier sollte die Grundschriftart des Webauftritts definiert sein, falls einzelne Elemente eine andere Schriftart haben, sollten diese ebenfalls festgelegt sein. Idealerweise sind auch Alternativschriftarten benannt, um auch für die Website Alternativschriften anzugeben, für Nutzer, die über die gewünschte Schriftart auf Ihrem Rechner nicht verfügen. Sollen Webfonts eingesetzt werden, wäre die Quelle bzw. die Lieferung der Webfonts wünschenswert.
      • Schriftgrößen: Auch hier gilt, die generelle Schriftgröße für die Webseite sollte dokumentiert sein, sowie Schriftgrößen für alle abweichenden Elemente wie Überschriften, Zitate, usw.
    • Generelle Farbeigenschaften
      Neben den Schriftfarben sollten die Farben von Hintergründen und Linien (Rahmen und Umrisse) definiert sein.
    • Seitentypen
      Auch wenn die unterschiedlichen Seitentypen aus dem Screenlayout ersichtlich sind, ist es für die strukturierte Frontendentwicklung hilfreich, wenn Sie die Seitentypen von Anfang an kennen. Diese Information können entweder Grafiker liefern, bei professionellen Projekten sind diese aber auch im Konzept zu finden.
  • Layout als PSD-Datei (optional)
    Grundsätzlich reichen die Screens als PNG oder JPG-Datei, die PSD-Datei (Photoshop-Datei) eines professionellen Designs besteht häufig aus zig Ebenen. Falls Sie diese nicht selbst erstellt haben, kann das Zurechtfinden in der Datei schon mal kompliziert werden. Trotzdem ist es manchmal hilfreich, einen Blick in die PSD-Datei zu werfen, falls Ihnen ein bestimmter Farbwert oder eine Schriftgröße fehlt.

Enge Zusammenarbeit ist das A und O

Auch wenn diese Checkliste eine gute Richtlinie darstellt, was Sie zum Beginn Ihrer Arbeit vorliegen haben sollten, so bringt zusätzlich die enge Zusammenarbeit mit dem Grafiker (und später mit dem Programmierer, der Ihre Templates später dynamisiert) die besten Ergebnisse. Die Erfahrung in der Praxis hat gezeigt, dass Sie als Frontendler niemals 100% von dem erfassen, was der Grafiker im Layout berücksichtigt hat.

Vor allem erfahren Sie nur in der engen Zusammenarbeit, an welcher Stelle die exakte Darstellung des Layouts eingehalten werden soll, und wo Sie Spielraum bei der Umsetzung haben. Letzteres nicht, damit Sie selber Ihrer Kreativität ausleben können, sondern um bei der Codierung flexibler zu sein. Leider Gottes ist häufig nicht alles für den Browser 1 zu 1 umzusetzen, was über Grafikprogramme wie Photoshop & Co beherrschen.

Hinweis: Dieser Beitrag ist noch in Arbeit, Fortsetzung folgt!

Buchempfehlungen