Folgende Informationen, Dateien und Gestaltungselemente müssen zu Beginn der Webentwicklung vorliegen.

Allgemeines zu Weblayouts

Übergabeformat

• Figma ♥️

• Sketch

• Adobe XD → Zeplin

Auflösung

Grid und Webdesign werden in einfacher Größe angelegt und nicht in doppelter Größe. Der Zoomfaktor 100% zeigt im Layoutprogramm die spätere Ausgabegröße im Browser an.

Schriftgrößen

Müssen in den Weblayouts in Pixel (px) definiert sein und niemals in Punkt (pt).

Font-Weight-Konzept

Es sollte vorab klar definiert sein, welche Schriftschnitte bei welchen Schriftarten überhaupt zum Einsatz kommen. Beispiel:

Die Website nutzt OpenSans in Light und Medium sowie Roboto in Bold und Heavy.

Schriftart-Konzept

Kommt mehr als eine Schriftart zum Einsatz, dann sollte es ein globales Konzept geben, welche Schriftarten konkret für welche Dinge zum Einsatz kommen. Dieses Konzept sollte zentral in Worten festgehalten werden. Beispiel:

Die Website verwendet die Schriftart OpenSans. Ausnahme sind Formularlabels und Buttons. Diese nutzen die Schriftart "Roboto"

Line-Height-Konzept

Alle Line-Height-Angaben sollten global als dezimaler Faktor zur Schriftgröße angegeben sein. Etwa "1,7". Sollten für die Website unterschiedliche Faktoren benötigt werden sollte es ein verständliches Konzept geben, welche Line-Height-Faktoren an welcher Stelle zum Einsatz kommen. Dieses Konzept sollte zentral in Worten festgehalten werden. Beispiel:

Die Website verwendet einen Line-Height-Faktor von 1,5. Ausnahme sind H1-Headlines und Caption in Slidern. Diese haben einen Line-Height-Faktor von 1,4.

Breakranges

Eine Breakrange nennen wir den Bereich, der zwischen zwei Breakpoints liegt, die sich nach handelsüblichen Bildschirmabmessungen definieren.

Eine Breakrange schließt immer den unteren Breakpoint ein und den oberen Breakpoint gerade nicht mehr mit ein.

Benötigte Elemente

1. Grid

Layouts des Grids für alle genutzten Breakranges mit leeren Containern/Flächen sowie Ausklappelementen, aus denen man die Positionierung und Spaltigkeit sowie deren genaue Abstände (paddings/margins) pixelgenau ablesen kann.

2. Webdesign (Reinzeichnung)

Alle Seitentypen inkl. sichtbarer und unsichtbarer Inhaltselemente müssen mindestens für folgende Bildschirmauflösungen pixelgenau gestaltet werden:

• Pocket: 360px

• Desktop: 1280px

Zu den Inhaltselementen gehören u.a. Textelemente, Bild-Textelemente, Teaser, Störer, Bühne, (filterbare) Listen, Akkordeons, Webformulare, Slider, Bildleisten, Ausklappflächen, Suchfunktion, Sprachumschalter, Modal-Elemente, Tooltips, usw.

3. Zustände interaktiver Elemente

Allgemeine Elemente

Navigation

Widgets

Formularelemente

4. Medientypen

Eine Liste von Fotos, Grafiken und Videos, die in der Website eingesetzt werden, z.B.

5. Page Transitions

Beschreibung animierter Seitenübergänge und sonstiger Animationen ... z.B.

6. Assets

Webfonts

Alle erforderlichen Schriftschnitte müssen als Webfonts im Dateiformat WOFF2 vorliegen, die lizenzfrei bzw. mit gültiger Lizenz des Kunden datenschutzkonform auf dem Webserver gehostet werden dürfen. Die Lizenz sollte nicht den Einsatz von Trackingpixeln erfordern - sonst würden wir vom Einsatz der Schrift abraten.

Icons und Logos

Alle Grafiken werden im Dateiformat SVG benötigt.

Zusammenfassung

1. Grid für alle Breakranges

2. Vollständiges Webdesign, min. für Pocket und Desktop

3. Gestaltung aller Zustände von interaktiven Elementen

4. Liste von Medientypen und deren Seitenverhältnissen je Breakrange

5. Beschreibung Page Transitions

6. Assets

   • Webfonts im Format WOFF2

   • Icons und Logos im Format SVG