Zurück

UX/UI to Dev Checklist

Diese Checkliste dient zur Übergabe an die Devs.

Sprache

  • Die Sprache aller Elemente, Layers, Komponenten etc. ist in Englisch gehalten.

Module-Based

  • Pro Modul gibt es eine Figma Komponente und ggf. verschiedenen Varianten.

  • Die Komponenten sind so angelegt, dass einfach einzelne Seiten zusammengestellt werden können.

  • Keine Abhängigkeiten zwischen den ModulenJedes Modul ist frei einsetzbar und kann in belieber Reihenfolge belieb platziert werden. Ausnahme davon: Es ist okay, wenn Header-Modul nur an erster Stelle auf den Seiten funktionieren bzw. eingesetzt werden dürfen.

  • Abstände zwischen Modulen sind generisch definiert.

  • Abstände innerhalb der Module können frei und spezifisch gewählt werden.

Responsive Design

  • Das Design ist konsequent Fluid umgesetzt

  • Ein Breakpoint ist definiert. Alles darunter nennen wir das “Small” Layout, alles darüber “Large”.

  • Das Verhalten der Module innerhalb “Small” und “Large” (minimale und maximale Breiten) ist definiert.

  • Das Verhalten der Module bzw. der Elemente der Module je nach Viewport-Breite ist definiert.

  • Falls Module von weiteren Variablen abhängen, wie z.B. Viewport-Height oder Viewport-Aspect-Ratio, sind diese angegeben und erläutert.

  • Das verhalten der Bilder ist je nach Aspect Ratio definiert (Bsp: Wenn die Viewport-Höhe kleiner als 500px ist bei Viewport-Range “Large”, dann ist dieses Bild 100vh hoch, ansonsten 70vh ).

  • Responsive Layout-Anpassungen müssen immer an eine Variable gebunden sein und klar ausgewiesen werden.

Styleguide

  • Design Tokens sind definiert

    • Farben als Variablen

    • Text-Styles sind alle definiert und angewandt

    • Effekte sind definert

  • Typografie ist definiert

    • Generische, kontextunabhängige Text-Styles definieren (z.B. “text-2xl”).

    • Die Zuweisung zu semantischer Bedeutung ist separat auszuweisen, z.B. H2 auf “Large” ist “text-3xl”. Oder: Dem Titel des Header.Hero ist auf “Large” “text-5xl”. zugewiesen.

  • Effekte sind definiert (z.B. Schatten oder Blurs oder dergleichen)

  • Das übergeordnete Responsive Design Konzept ist erläutert und skizziert

  • Das Grid ist gezeichnet und beschrieben

    • Was ist das grundsätzliche Grid? Gibt es mehrere?

    • Aufzeigen, nach welcher Systematik Elemente auf der Seite ausgerichtet sind.

  • Button und Link Style sind definiert

  • Form-Elements sind definiertIcons sind aufgelistet, beschrieben und exportierbar.

  • Alle Fonts sind auf Synology abgelegt

Naming-Conventions

Die Module sind in die folgende Kategorien eingeteilt

  • Header

  • Teaser

  • Content

  • CTA

Die Modulbezeichnung ist daraus abgeleitet und entspricht der Konvention [Kategorie].[Genauer-Name] wie zB Header.Hero Teaser.Default, Teaser.Fullscreen, CTA.Default, CTA.Newsletter, Content.Benefits, Content.Facts-Figures, Content.Team, Content.Text

Content

  • Module sind so gestaltet, dass sie mit wenig und viel Inhalt funktionieren (auf allen Viewport-Sizes). Es wurde also nicht nur der Happy Case gestaltet.

  • Pro Feld sind maximale Character-Limitations angegeben (entspricht einer Hard Limit im CMS).

  • Pro Feld sind Empfehlungen an Character-Limitation angegeben, wo kein hartes Limit definiert wurde.

  • Content.Text ist eine spezielle Art Modul im CMS. Die Editoren können hier Freitext erfassen und teilweise formatieren. Mindestens H2-H5, Inline-Links, Lists (ul, ol) und Abstände zwischen Paragraphen müssen aufgezeigt werden

States

  • Default State ist definiert

  • Hover State ist definiert

  • Active State ist definiert (wenn nicht wird hover-style angewendet)

  • Focus State ist definiert

  • Disabled State ist definiert sofern notwendig

  • Inactive State ist definiert sofern notwendig

  • Error State ist definiert falls vorhanden

Animations, Interactions, Transitions

  • Alle Page Transitions sind gestaltet mit Beispielen versehen oder mit After Effects Files visualisiert

  • Elementanimation on Scroll sind mit Beispielen versehen oder mit After Effects Files visualisiert

  • Elementanimationen on Click or Hover sind mit Beispielen versehen oder mit After Effects Files visualisiert

Accessibility

  • Farb-Kontraste sind gemessen und erfüllen die Levels der APCA (Advanced Perceptual Contrast Algorithm) oder WCAG Level AA.

  • Bei Text auf Bild sind mögliche Edge Cases beschrieben und Lösungen gestaltet.

  • Alle interaktiven Elemente haben Fokus-Styles definiert.

Struktur / Logiken für die Umsetzung

  • Es ist definiert welche Collections notwendig sind im CMS.

  • Beschrieb des Tasks ist aus Sicht UX/UI Design vollständig.

  • Die Collection Records sind strukturiert und bezeichnet zB Collection “Team-Member”. Felder: Name (Plain Text), Bio (Formatted Text), Email (Plain-Text), Linkedin (Plain-Text), Tag der Taxonomie “Abteilung”.

  • Taxonomien sind durchdacht und definiertLogiken der Taxonomien sind definiert.

  • Logiken von Inhalten in Modulen sind definiert (zB neueste Inhalte zuerst anzeigen).

  • Weitere Features, die z.B. im Hintergrund laufen und nicht direkt vom Design her ersichtlich sind, sind definiert oder mindestens erwähnt.

  • Review intern im Projektteam ist erfolgtReview mit dem Kunden ist erfolgt

  • Alle offenen Fragen/Unklarheiten im Scoping Board wurden gestellt und geklärt geklärt

  • Edge Cases sind in den Tasks für die Devs erfasst

Feasibility

  • Review intern im Projektteam ist erfolgt

  • Review mit dem Kunden ist erfolgt

  • Alle offenen Fragen/Unklarheiten im Scoping Board wurden gestellt und geklärt geklärt

  • Edge Cases sind in den Tasks für die Devs erfasst