Designer Briefing

Eine reibungslose Zusammenarbeit zwischen Design & Entwicklung beginnt mit einer guten Abstimmung. Zum Beispiel darüber, wie die Designs später technisch umgesetzt werden, welche Seiten überhaupt als Gestaltungsvorlage angeliefert werden müssen und in welcher Größe diese angelegt werden sollen.

Component Driven Development

Wir arbeiten mit dem Komponenten-basierten Website Management System Flynt. Jeder inhaltliche Block einer Webseite ist im WordPress Content Management System daher potentiell auf jeder Unterseite einsetzbar und somit wiederverwendbar. Diesen Vorteil gilt es in der Gestaltung zu berücksichtigten.

Eine modulare Gestaltung bedingt, dass Komponenten sich klar voneinander abgrenzen. Sich überschneidende Grafiken von einer zur nächsten Sektion sollen vermieden werden.

WordPress Components Screenshot
Beispiel WordPress Backend

Responsive Breakpoints

Folgende Breakpoints sind standardmäßig definiert:

  • 0px – 479px (mobile)
  • 480px – 767px (mobile horizontal)
  • 768px – 1023px (tablet)
  • 1024px – 1279px (tablet horizontal)
  • 1280px – 1439px (desktop)
  • 1440px (desktop wide)

Je nach Projekt oder Komponente kann von diesen nach Absprache mit dem jeweiligen Projektverantwortlichen abgewichen werden.

Grids

Es empfiehlt sich dringend ein einheitliches Grid in der Gestaltung einzusetzen. In der Entwicklung arbeiten wir Framework-unabhängig, und können somit flexibel auf die gewählte Column- und Gutter-Width eingehen.

Deliverables

Folgende Layouts erwarten wir für eine reibungslose Zusammenarbeit:

  • 1 x Basis-Layout (Schriften, Headlines, Listen, Buttons, Tabellen, Formulare, Quotes)
  • Desktop-Layout für jede Haupt- und Unterseite die neue Komponenten einführen (auf 1280px oder 1440px Viewport Width)
  • Mobile-Layout für jede Komponente (also nur für jene Seiten, die neue Komponenten einführen, auf 320px Viewport Width)
  • Bitte auf ein Vektor-basiertes Programm zurückgreifen (z.B. Sketch, oder Figma) und mobile Designs nicht (!) in doppelter Auflösung anlegen (320px = 👌 / 640px = 🤬)

Übergabe

Wir nehmen Designs gern als offene Formate (z.B. Sketch), aber auch über Plattformen (z.B. Zeplin, InVision, oder Figma) an. Plattformen sind vor allem immer dann hilfreich, wenn sich Designs noch in der Abstimmung befinden und fortlaufend Anpassungen vorgenommen werden. Sobald aber alles abgenommen und bereit für die Programmierung ist, helfen uns offene Formate dabei möglichst schnell Icons und andere Assets so zu exportieren, wie wir sie benötigen.