Generell zu beachten
Adobe XD
Layouts erstellen wir generell in Adobe XD.
Artboard Size und Breakpoints (Größe des Arbeitsbereichs und Umschaltpunkte)
Dabei sollten die Artboards eine Breite von 1080px haben – das Layout muss in dieser Form bis zum ersten Breakpoint (Umschaltpunkt) bei 989px gut aussehen. Der zweite Breakpoint kommt bei einer Breite von 756px – hier können Gestalter, wenn Zeit ist, angepasste Schriftgrößen und Abstände festlegen.
Wordpress-Raster (Blöcke und Spalten)
Vertikal gliedert sich die Website in theoretisch endlos viele Blöcke/Abschnitte. Horizontal kann jeder Block/Abschnitt individuell oft in Spalten geteilt werden – maximal jedoch 5 Spalten pro Block.
Navigation
Sollte nicht mehr als 7 Hauptpunkte beinhalten – eher weniger. Alles wichtige auf einen Blick.
mögliche Schriften (Überschriften/Fließtext)
Im besten Fall eine Font aus folgender Liste verwenden (nur Standart Schriftschnitt – Bold und Italic werden künstlich erzeugt und nicht identisch mit der Italic-/Bold-Font sein).
Um den Programmierern das Arbeiten zu erleichtern sollte VERSALIENSCHRIFT nicht durch die Shift-Taste entstehen, sondern normal Versalienschrift schreiben und bei den Optionen dann UPPERCASE, lowercase oder was auch immer aktivieren.
Sonst kann es sein dass wenn wir eure Texte in der Programmierung kopieren, alles händisch neu geschrieben werden muss, da das Ergebnis so aussieht: „WIR BIETEN IHNEN AUCH MASSGeschneiderte GRUPPEN- und Vereinsreisen AN“
Überschriften (H1, H2, H3,…)
Im besten Fall strukturiert ihr die Reihenfolge der Headlines wie folgt:
H1 – Hauptüberschrift (nru eine H1 im Headerbereich und Unterseite –> Kernaussage)
H2 – Zwischenüberschrift (alle darunter liegenenden Überschriften auf Start- und Unterseiten)
H3 – weitere Zwischenüberschrift (ist der H2 untergeordnet)
H4 – weitere Zwischenüberschrift (ist der H3 untergeordnet)
H5 – …
H6 – …
Text (Styles/Zeichenformate)
Zum schnelleren und übersichtlicherem Arbeiten lassen sich in Adobe XD Styles (wie Zeichenformate in InDesign/Illustrator) anlegen. Das hat den Vorteil dass man die Eigenschaften vom Text nicht immer neu einstellen muss. Jede Headline besteht dabei NUR aus Größe und Schriftschnitt – die Farbe spielt dabei keine Rolle. Von diesen Styles sollen nicht mehr als 7 angelegt werden.
Abstände für Blöcke/Abschnitte (Padding/Margin)
Jeder Abschnitt (z.B.: Leistungen) muss als Block betrachtet werden, welcher einen Abstand davor und danach (oben und unten) hat. So können alle Abstände für eine mobile Version einfach und schnell neu definiert werden. Außerdem lassen sich diese Blöcke/Abschnitte einfach duplizieren und an einer anderen Stelle der Website erneut platzieren. Am einfachsten ist es erfahrungsgemäß wenn man sich einen „abstand-oben“ und einen „abstand-unten“ als eine Komponente in XD anlegt um diese immer schnell zur Hand zu haben.