Smooth collaboration between design and development starts with good coordination. For example, on how the designs will be technically implemented later, which pages need to be supplied as design templates in the first place, and in what size they should be created.
Component Driven Development
We work with the component-based website management system Flynt. Each content block of a website potentially can be placed on any subpage in the WordPress Content Management System and therefore is reusable. This advantage has to be considered in the design.
A modular design requires that components are clearly separated from each other. Overlapping graphics from one section to the next shall be avoided.
The following breakpoints are defined by default:
- 0px – 479px (mobile)
- 480px – 767px (mobile horizontal)
- 768px – 1023px (tablet)
- 1024px – 1279px (tablet horizontal)
- 1280px – 1439px (desktop)
- 1440px (desktop wide)
Depending on the project or component, these can be deviated from after consultation with the respective project lead.
It is strongly recommended to use a uniform grid in the design. In the development we work framework-independent, and can therefore flexibly adjust to the selected column and gutter width.
We expect the following layouts for a smooth collaboration:
- 1 x base layout (fonts, headlines, lists, buttons, tables, forms, quotes)
- Desktop layout for each main page and subpage introducing new components (on 1280px or 1440px viewport width)
- Mobile layout for each component (i.e. only for those pages that introduce new components, on 320px viewport width)
- Please use a vector-based program (e.g. Sketch, or Figma) and do not (!) create mobile designs in double resolution (390px = 👌 / 780px = 🤬)
We like to accept designs as open formats (e.g. Sketch), but also via platforms (e.g. Zeplin, InVision, or Figma). Platforms are especially helpful whenever designs are still in the approval process and adjustments are being made on an ongoing basis. But once everything is approved and ready for programming, open formats help us export icons and other assets quickly in the way we need them.