CO2 Reduktion / IconWir reduzieren CO2
Rechtsfraagen IconAbmahnung? Nicht mit uns!
Newsletter IconAnmeldung zum Newsletter
Nach oben scrollen

Notwendige Informationen für das Umsetzen von Photoshopvorlagen in WordPress

Photoshopvorlagen in Wordpress

Für das Umsetzen von Photoshopvorlagen in WordPress benötige ich eine Reihe von Informationen, die ich in einer idealen Welt alle vom Auftraggeber gebündelt erhalten würde. Leider leben wir nicht in einer idealen Welt, wer das nicht glaubt, muss sich nur die Ergebnisse der amerikanischen Wahlen auf der Zunge zergehen lassen*. Um die Welt wenigstens ein bisschen besser zu machen, gibt es hier eine Liste von allen Dingen, die ich für das Coden von Photoshopvorlagen in WordPress benötige.

Auf jeden Fall sind notwendig:

    • Mindestens ein Screen(shot), der als JPG oder PNG mit einer Auflösung von 72 Pixel abgespeichert ist. Der Screenshop sollte genau so breit abgespeichert werden, dass die Größen 1:1 aus dem Screen übernommen werden können. Konkret bedeutet das: Falls die Seite z. B. 1080px breit sein soll, sollte der Contentbereich im Screenshot auch exakt 1080px breit sein. Das Drumherum bzw. der Hintergrund links und rechts des Contents ist also nicht für die Breite des JPGs oder PNGs maßgeblich. Aus diesem Screenshot kann ich im Photoshop alle relevanten Daten entnehmen, falls sie nicht mitgeschickt wurden. Ein PDF ist deshalb keine Alternative, weil ein PDF skaliert werden kann und ich die Farbwerte nicht mit der Photoshop-Pipette entnehmen kann.
    • Es sollte auch eine Variante des Screens geben(oder wenigstens die schriftliche Information dazu), auf der zu sehen ist, wie sich die Webseite auf sehr großen Bildschirmen verhält. Angenommen das Design ist genau 1080px breit und ist im Browserfenster zentriert. Wie sieht der Teil des Browserfensters aus, der auf großen Bildschirmen nicht genutzt wird? Gehen Header und Footer ganz an den Rand des Browserfensters oder sind sie auch nur 1080px breit? Welche Hintergrundfarbe hat der Rest des Browserfensters, also der Bereich, wo es keine Inhalte gibt?
    • Alle Bilder in der Größe, in der sie beim Umsetzten der Photoshopvorlagen in WordPress zum Einsatz kommen werden. Also pixelgenau zugeschnitten. Dabei ist zu beachten:
      • Bilder sind natürlich in erster Linie die Fotos und Grafiken, die im Inhaltsbereich genutzt werden.
      • Darunter fallen aber auch alle Logos und Designelemente, die vielleicht nicht so prominent platziert sind.
      • Fotos sollten als PNGs abgespeichert sein, Grafiken auch als PNG, eventuell auch als SVGs, das würde ich gerne vorab im Gespräch klären.
      • Aufgrund der modernen, hochauflösenden Bildschirme (z. B. Retina-Bildschirme), sollten Bilder doppelt so groß geliefert werden, als sie im Layout benötigt werden.
    • Alle Farbwerte, der Photoshopvorlage in WordPress, die auf der Seite genutzt werden, am besten mit Beispielfarbe und dem Wert als Hexadezimalwert (#- – – – – -) sowie als rgba ( –, –, –, –) Damit die Beispielfarbe klar ersichtlich ist, wäre es schön, wenn sie eine Mindestgöße von 20mm x 20mm hat.
    • Eine Übersicht über die genutzten Schriften, falls es ein Google-Font ist, die Angabe, dass ich ihn auf Google-Fonts finden kann, falls notwendig die Schrift selbst. Darüber hinaus auch Infos zur Lizenz der Schrift, also falls die Schrift kein Freefont ist, Angaben ob eine Lizenz für die Nutzung im Web erworben wurde.
    • Eine Liste der genutzen Schriften, Größen und Farbwerte. Also z. B.
      h1: 35px, Helvetica, #666666
      h2: 25px, Helvetica, #666666
      Fliesstext groß: 18px, Helvetica, #666666
      Fliesstext klein: 12px, Helvetica, #666666
    • Eine Liste der wesentlichen Designelemente und deren Farben. Also z. B. Umrandungen. Hier wäre es schön, wenn ich die Strichstärke und die Farbe bereits aufgelistet erhalte. Oder Buttons: Welche Icons werden genutzt, wo sind die Icons her?
    • Eine Liste der Linkfarben und wie sich die Links beim Hovern (Mouseover) mit der Maus ändern. Also z. B.
      Menü:
      – normaler Menüpunkt: #111111
      – gehoverter (mouseover) Menüpunkt: #2f22f2
      – aktiver Menüpunkt: #3ff3ff
      Fliesstext:
      – normaler Link: ##111111
      – gehoverter (mouseover) Link: #2f22f2

Eine Version des Screens auf der die genutzten Schriften als Beispiele markiert sind und die wichtigsten . Also der Screenshot der Seite mit zusätzlichen Angaben zu wesentlichen Designelementen.

Hier einige Bildbeispiele, für Informationen, die ich benötige:

Und schön wären auch noch folgende Infos:

  • Bei welchen Breakpoints soll sich das Layout auf kleinen Screens grundsätzlich ändern? Sind es die (mehr oder weniger) üblichen Werte 890px und 767px oder andere?
  • Und falls es Designs für Tablets und Smartphones gibt, bin ich auch froh. Falls nein, mache ich es eben nach “best practice”.
  • Auch Informationen wie sich animierte Elemente (ausklappbare Menüs etc.) verhalten, sobald sie aktiviert werden, sind wichtig.

* Weniger als 50% der Amerikaner wählen einen Präsidenten, dessen Aussagen im Wahlkampf zu 80% frei erfunden oder gelogen waren. Der designierte Finanzminister Steven Mnuchin dagegen hat Mad Max IV produziert. Also: Sollten wir die Welt nicht doch ein bisschen besser machen?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.