Checkliste: Übergabe vom Designer an den Entwickler

In der Entwicklung einer professionellen Website arbeiten oft verschiedene Teams zusammen. Eine Absprache über das Format und den Umfang der Unterlagen zwischen Designer und Entwickler macht dabei Sinn.

Im Folgenden beschreiben wir die Unterlagen, die wir in der Regel von den Designagenturen benötigen.

Die Vorlage der Website

In der Designvorlage ist vor allem das Format entscheidend. Wenn das Format gut gewählt ist, spart das am Ende für beide Seiten viel Zeit.

Mögliche Formate:

Adobe XD

Adobe XD eignet sich hervorragend für die Umsetzung von Websites. Es läuft auf nahezu jedem Betriebssystem und macht es möglich auf eine einfache Art und Weise die einzelnen Grafiken zu exportieren. Außerdem bietet es bereits eine Online-Vorschau.

Zu beachten Hier sollte der Designer darauf achten, dass die Assets einzeln und ohne Abstände in das Dokument eingefügt werden. Sonst kann es beim Export Probleme geben.

Adobe Photoshop

Photoshop ist in Sachen Websites im Handling etwas umständlicher. Vor allem was das Thema Schriftarten angeht. Um es in dem Fall korrekt zu nutzen, müssen in der Regel die Schriftarten auf dem Rechner installiert werden.

Sketch

Sketch läuft aktuell nur auf dem Mac ohne Probleme. In der Windows-Alternative Lunacy werden nicht immer alle Dinge korrekt dargestellt. Eine gute Hilfe ist die Kombination mit Invision. So ist keine Installation auf dem Rechner nötig. Hier müssten aber die Grafiken & Icons exportiert werden.

InDesign

InDesign eignet sich leider weniger zur Entwicklung von Websites. Es ist vor allem für den Druck konzipiert. Es ist nicht möglich Grafiken aus InDesign zu exportieren.

Grafiken und Icons

In der Regel macht es Sinn, neben der Website-Vorlage die genutzten Grafiken gesondert mitzuliefern. Hierbei empfehlen wir folgende Formate:

• Icons als SVG. Am besten alle mit gleichem Seitenverhältnis. Dadurch sehen die Abstände der Icons dann überall gleich aus.
• Fotos am besten als JPG. Nach Möglichkeit sollte die Größe 2MB nicht überschreiten.
• Illustrationen Je nach Umfang als SVG oder PNG.

Nutzer von Apple Mail müssen darauf achten, dass Grafiken nicht in die Nachricht eingebettet werden, sondern als Anhang hinzugefügt werden. Sonst kann es zu Qualitätsverlusten kommen. Zur Sicherheit kann man die Dateien auch als ZIP-Datei verpacken oder per WeTransfer verschicken.

Schriftarten

Die Schriftarten sollten am besten als Webfont vorliegen. Eine Konvertierung einer normalen Schriftart ist zwar möglich, aber evtl. mit Qualitätsverlusten verbunden. Außerdem kann es zu Lizenzproblemen kommen.

Abstände und Schriftgrößen

Als Entwickler kann es sehr hilfreich sein, wenn es vom Designer feste Regeln für Absätze gibt. So kann der Designer zum Beispiel angeben, dass die Abstände zwischen zwei Blöcken immer 100 Pixel groß sind. Durch die Angabe kann in der Entwicklung mit zentralen Werten gearbeitet werden, was eine spätere Anpassung deutlich vereinfacht.

Sollte die Schriftgröße nicht aus dem Format hervorgehen (z.B. bei InDesign) ist es hilfreich, gewünschte Schriftgrößen und Zeilenabstände zusätzlich anzugeben.

Zugänge

Um die Website hochzuladen wird ein Zugang zum Webhosting-Paket des Kunden benötigt. Am einfachsten ist es, wenn man die kompletten Zugangsdaten zur Oberfläche des Webhosters an den Entwickler übergibt. Das führt zu weniger Rückfragen.

Alternativ werden ein MySQL sowie ein FTP-Zugang benötigt.

Das Favicon

Das Favicon wird in der Regel oben im Browser oder bei Verknüpfungen angezeigt. Dies sollte im Optimalfall quadratisch und als SVG vom Designer geliefert werden. Vom Entwickler kann es dann einfach in die verschiedenen Formate konvertiert werden.

Texte

Wenn die Texte von der Agentur mitgeliefert werden, reicht es, ein Word-Dokument zu schicken. Am besten ist es, wenn die Texte so wenig Formatierungen wie möglich haben. Das macht es leichter Sie in das CMS einzufügen.

Gerade bei WordPress sollte darauf geachtet werden, dass ein Titel der Website mit angegeben wird. Sonst sieht man bei Google "Website XY - Eine weitere WordPress-Website".

Bei Texten ist es ratsam, die wichtigsten Regeln in Sachen SEO zu beachten. Schließlich soll die Website des Kunden auch gut gefunden werden.

Was bei den Designs oft noch nicht optimal ist, sind Überschriften. Dabei gibt es folgende Tipps:

• Überschriften sollten die Begriffe beinhalten, die der Nutzer auch sucht.
  Beispiel:
  Schlecht: "Für Ihre Gesundheit"
  Besser: "Fitnessstudio Münster - Für Ihre Gesundheit"
  
  Bei überwiegend regionaler Zielgruppe sollte man die Stadt nach Möglichkeit mit aufnehmen.
  Wir bauen die Überschriften unserer Angebote in der Regel so auf: Ihre Website aus Münster.
  
  
• Es sollte eine Hauptüberschrift geben, die entsprechend größer dargestellt wird.
• Auch in den Menüs sollten die Titel sprechend sein.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project