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.