Nachfolgend finden Sie eine Reihe an Empfehlungen, wenn Sie die Designvorlage für Ihre Website selbst erstellen möchten.
Tools für Designvorlagen
- Das Designtool muss es ermöglichen, das Ergebnis entweder als Prototyp oder Export-Datei verfügbar zu machen.
- Idealerweise lassen sich die Eigenschaften einzelner Elemente (z. B. Farbcodes, Schriften, Größen in Pixel, CSS-Eigenschaften) direkt aus dem Export auslesen.
- Nicht geeignet sind Dateiformate wie PNG, BMP oder JPG. Aus diesen lassen sich keine konkreten Größenangaben, Abstände, Farben oder Schriften auslesen. PDF ist ebenfalls nur bedingt geeignet.
- „Webdesign-freundliche“ Designtools sind beispielsweise Adobe XD, Figma oder Sketch.
Grundelemente einer Website
Die Designvorlagen sollten alle global verwendeten Bestandteile der Website enthalten. Dazu gehören:
Schriften
- Schriften sollten mindestens einen
Regular
,Bold
und davon jeweils einenItalic
Schriftschnitt umfassen. - Mindestens angegeben werden muss die Schrift für
Headline
undText
.
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
- Kopfzeile mit Logo, Hauptmenü, ggf. Service-Zeile, ggf. Hinweis-Zeile
- Fußzeile mit Links, ggf. Social-Media-Icons, ggf. Zusatzinformationen
- Textabsätze, Überschriften (mindestens H1, H2 und H3), Links, Buttons, geordnete Listen, ungeordnete Listen, ggf. Tabellen
- Icons (Falls ein eigenes Iconset verwendet wird, dann bitte alle Icons als SVG übermitteln. Ansonsten die Verlinkung zum gewünschten Iconset angeben. Wir empfehlen Font Awesome.)
- Formulare (inklusive aller verwendeter Formular-Elemente, z. B. Dropdown, Radio-Button)
- Cookie-Consent-Manager
- Pagination (falls eine Ergebnisliste oder Listenansicht auf mehrere Unterseiten verteilt wird)
Hier finden Sie noch eine Sammlung an Tipps zur Usability von Gestaltungselementen: Usability-Hinweise zu typischen Website-Elementen
Sonderelemente
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:
- Banner und Slider
- Akkordeon-Element (z. B. für FAQ)
- Tabs
- Bildergalerie
- Zitat
- Google Maps
- Call-To-Action (hervorgehobene Bereiche, beispielsweise mit Text, Hintergrundbild und Button)
Seitenlayouts
Seitenlayouts beschreiben festgelegte Anordnungen von Elementen auf Unterseiten, die auf mehrere oder alle Unterseiten eines Typs angewandt werden. Beispiele dafür sind:
- Blogbeiträge
- Stellenanzeigen
- Kategorieseiten
- Produktdetailseiten
- Landing Pages
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:
- 404-Fehlerseite (falls eine aufgerufene Seite nicht gefunden werden konnte)
- Suchseite (mit Suchschlitz und Ergebnisliste)
- Login-Seite
- Registrieren-Seite
- Mein-Konto-Seite
- Warenkorb
- Kasse
- Newsletter-Anmeldung
Responsivität
Wir unterscheiden in der Regel folgende Auflösungen:
- Desktop (mindestens 1.920 px Breite)
- Laptop (rund 1.024 px Breite)
- Tablet (rund 768 px Breite)
- Mobile (rund 375 px Breite)
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:
- Erstellen Sie erst die Desktop-Ansicht.
- Erstellen Sie anschließend die Ansichten für Mobile. Insbesondere wichtig sind hierbei Kopfzeile, Menüs und Fußzeile. Sie müssen nicht alle Desktop-Ansichten auch für Mobile erstellen. Fehlende Ansichten werden sinnvoll auf Mobile aussehen. Im Standardfall werden auf Desktop nebeneinander angeordnete Elemente auf Mobile „stacken“ und untereinander sein.
- Die Zwischenversionen für Laptop und Tablet kann Ihre Webdesign-Agentur aus der Desktop- und Mobile-Ansicht ableiten. Wenn Sie explizit eine Vorgabe machen möchten, können Sie selbstverständlich einzelne Designvorlagen für die Zwischengrößen erstellen.
Konzentrieren Sie sich in den Designvorlagen im ersten Schritt auf die größtmögliche Ansicht, was die Desktop-Ansicht ist.
Dynamische Elemente
Dynamische Elemente verändern deren Aussehen abhängig von Interaktion. In den Designvorlagen sollte mindestens enthalten sein:
- Hover-Zustand von Links (z. B. Unterstreichung, andere Farbe)
- Hover-Zustand von Buttons (z. B. dunklere Hintergrundfarbe)
- Validierungsmeldungen von Formularfeldern
- Aussehen des Menüs während des Scrollens (falls dauerhaft sichtbar)
Inhalte in Designvorlagen
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
Hinweis zur SEO
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.
Falls Elemente nicht in den Designvorlagen enthalten sind
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.