Nachfolgend finden Sie eine Reihe an Empfehlungen, wenn Sie die Designvorlage für Ihre Website selbst erstellen möchten.
Die Designvorlagen sollten alle global verwendeten Bestandteile der Website enthalten. Dazu gehören:
Schriften
Regular, Bold und davon jeweils einen Italic Schriftschnitt umfassen.Headline und Text.Farben
Primary – Die Hauptfarbe des jeweiligen Projekts, welche zwingend erforderlich ist. Die Hauptfarbe kann sich beispielsweise in Links, Buttons und hervorgehobenen Elementen wiederfinden.Primary Dark – Optional kann eine dunkle Variante angegeben werden.Primary Light – Optional kann eine helle Variante angegeben werden.Secondary – Die zur Hauptfarbe ergänzende Farbe, welche optional ist. Wie bei der Primary kann eine dunkle und helle Variante ergänzt werden. White – Falls kein Weißton angegeben wird, wird in der Regel #FFFFFF verwendet.Black – Falls kein Schwarzton angegeben wird, wird in der Regel #000000 verwendet.Grey – Ein Grauton kann sinnvoll sein, welcher beispielsweise für Hintergrundelemente verwendet werden kann. Auch hiervon kann wiederum eine dunkle und helle Variante vorgegeben werden.Seitenelemente
Hier finden Sie noch eine Sammlung an Tipps zur Usability von Gestaltungselementen: Usability-Hinweise zu typischen Website-Elementen
Sonderelemente sind einzelne Bausteine, die später flexibel auf den einzelnen Unterseiten verwendet werden können. Hier ist es insbesondere wichtig, verschiedene Darstellungsvarianten eines Elements zu gestalten, falls dies gewünscht ist. So weiß die Webdesign-Agentur, welche Konfigurationsmöglichkeiten in den einzelnen Elementen später verfügbar sein müssen.
Einige Beispiele für Sonderelemente:
Seitenlayouts beschreiben festgelegte Anordnungen von Elementen auf Unterseiten, die auf mehrere oder alle Unterseiten eines Typs angewandt werden. Beispiele dafür sind:
Wenn Ihnen wichtig ist, dass ein bestimmter Typ an Inhalt ein festgelegtes Layout hat, dann sollten Sie die gewünschten Seitenlayouts in die Designvorlagen aufnehmen. Darüber hinaus gibt es einige technische Sonderseiten, die fallabhängig auch in den Designvorlagen enthalten sein sollten:
Wir unterscheiden in der Regel folgende Auflösungen:
Die Landscape-Varianten sind in der Regel irrelevant, da diese in der Breite ungefähr dem nächstgrößeren Endgerät in der vertikalen Variante entsprechen. Die empfohlene Vorgehensweise ist wie folgt:
Konzentrieren Sie sich in den Designvorlagen im ersten Schritt auf die größtmögliche Ansicht, was die Desktop-Ansicht ist.
Dynamische Elemente verändern deren Aussehen abhängig von Interaktion. In den Designvorlagen sollte mindestens enthalten sein:
Die Designvorlagen müssen noch keine echten Texte und Bilder enthalten. Blindtexte sind vollkommen ausreichend, wobei die Länge ungefähr der später angedachten Textlänge entsprechen sollte. Bei Bildern kann man bereits ungefähr passende Stockbilder verwenden.
Falls bereits neue Bilder erstellt werden, dann finden Sie hier einige Tipps zu neuen Bildern: Tipps zu Bildern auf der eigenen Website
Die Suchmaschinenoptimierung spielt bei Designvorlagen noch eine untergeordnete Rolle. Es sollte allerdings bereits genügend Platz für Texte vorgesehen werden.
Bei Überschriften in Designvorlagen sollte bereits die technisch korrekte Hierarchie bedacht werden. Das heißt beispielsweise, dass jede Unterseite eine einzige Hauptüberschrift (H1) benötigt. Untergeordnete Überschriften müssen hierarchisch korrekt verschachtelt sein. Also beispielsweise muss eine Überschrift dritter Ebene (H3) unterhalb einer Überschrift zweiter Ebene (H2) sein, nicht umgekehrt.
Wenn einzelne Elemente oder responsive Ansichten nicht in den Designvorlagen enthalten sind, dann leitet die Webdesign-Agentur die fehlenden Designs aus den vorhandenen Elementen ab.