Sprache
Die Sprache aller Elemente, Layers, Komponenten etc. ist in Englisch gehalten.
Module-Based
Wir setzen Module um. Module sind die grundsätzlichen Bausteine, welche die Editoren im CMS aneinanderreihen können um so ihre Seiten zu erstellen. Eine Seite besteht also aus x verschiedenen Modulen, die untereinander platziert werden können.
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 Modulen
Jedes Modul ist frei einsetzbar und kann in belieber Reihenfolge belieb platziert werden. Ausnahme davon: Es ist okay, wenn Header-Module 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 muss responsive durchdacht sein, das heisst:
Das Design ist konsequent Fluid umgesetzt oder
Es sind entsprechend beliebige Breakpoints ausgestaltet.
Das Verhalten der Module zwischen den Breakpoints ist gestaltet oder schriftlich festgehalten.
Das Verhalten der Module bzw. der Elemente der Module je nach Viewport-Breite ist definiert.
Falls Module von weiteren Variablen abhängen, wie zB 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
Im Figma File hat es einen Styleguide. Dieser erklärt und zeigt die Systematik des Designs auf und umfasst die folgenden Punkte.
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.
Das übergeordnete Responsive Design Konzept ist erläutert und skizziert
Das Grid ist gezeichnet und beschrieben
Aufzeigen, nach welcher Systematik Elemente auf der Seite ausgerichtet sind.
Was ist das grundsätzliche Grid? Gibt es mehrere?
Button und Link Style sind definiert
Form-Elements sind definiert
Icons sind aufgelistet, beschrieben und exportierbar.
Effekte wie Schattierungen sind definiert
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-n-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 für Text-Längen 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
Die Collections sind strukturiert und bezeichnet, Bsp: Collection “Team-Member”. Felder: Name (Plain Text), Bio (Formatted Text), Email (Plain-Text), Linkedin (Plain-Text), Tag der Taxonomie “Abteilung”.
Taxonomien sind durchdacht und definiert
Logiken 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.