Unsere Projektanforderungen und hilfreiche Tipps.

Projekt starten
Tipps & Tricks
Webagentur Know-how

Damit die Umsetzung deiner Website effizient und ohne Verzögerungen erfolgen kann, benötigen wir einige wichtige Informationen im Voraus. Dieser Beitrag hilft dir, alle relevanten Inhalte, technischen Spezifikationen und Designvorgaben strukturiert bereitzustellen. So stellen wir sicher, dass dein Projekt schnell und optimal umgesetzt wird.

Zuletzt aktualisiert: 21. Mai 2026

Das wichtigste in Kürze

Allgemeines

Domain

Bei Projektanfrage mitteilen. Bei Bedarf kann die Domain direkt über cmsbox reserviert werden.

Software

Bitte das Layout in Figma oder Adobe XD erstellen und offene Layout-Dateien senden.

Design und Layout

Stylesheet

Übersicht mit Farben, Schriften, Buttons, Logos und Effekte erstellen.

Struktur

Achte darauf, dass die Website klar strukturiert ist und auf jeder Seite einen Seitentitel (H1-Tag) hat.

Schriften

Für die Lizenzierung der Schriften bist du verantwortlich. Bitte immer Web- (WOFF/WOFF2) als auch als Desktop-Fonts (OTF/TTF) schicken.

Navigation und Header

Visualisiere die Navigation inklusive Mechanismus und Hover- sowie Scroll-Zustand.

Hinweise

Vermerke funktionale Besonderheiten als Notizen im Design oder hinterlege Referenzlinks.

Domain

Die Domain dient uns als Projektreferenz. Teile uns die Domain immer frühzeitig mit und nenne sie im Betreff deiner E-Mails, damit wir die Kommunikation korrekt zuordnen können.

Falls du noch keine Domain hast, können wir diese gerne über cmsbox für dich reservieren. Eine passende Domain ist nicht nur für die Kommunikation entscheidend, sondern auch für die SEO-Performance deiner Website.

Software

Figma und Adobe XD sind unsere bevorzugten Tools für Webdesigns. Sie ermöglichen eine reibungslose Übergabe in den Entwicklungsprozess.

Nicht geeignete sind Illustrator, InDesign, Photoshop, PowerPoint und andere Office-Programme.

Wir benötigen stets die offenen Layout-Dateien. Reine Ansichts- oder Entwicklerlinks reichen nicht aus, da wir nachträgliche Änderungen sonst nicht nachvollziehen können.

Stylesheet

Das Design deiner Website wird auf Basis eines zentralen Stylesheets erstellt. Diese Zusammenstellung sollte alle notwendigen Designvorgaben enthalten:

  • Farben und Farbabstufungen.

  • Schriften und Schriftgrössen von H1 bis H6 sowie Fliesstext. Definiere für Desktop eine Maximalgrösse und für Mobile eine Mindestgrösse.

  • Links und Buttons inklusive Hover-Effekte.

  • Logo in verschiedenen Anwendungen, falls nötig.

  • Favicon als quadratische SVG-Datei.

Brauchst du eine Vorlage?

Struktur

Die Struktur einer Website sollte klar und benutzerfreundlich sein, mit einer logischen Hierarchie, die Nutzende intuitiv durch die Seiten führt. Wir empfehlen eine tiefere Seitenstruktur und raten von einem Onepager ab. Dieser wirkt oft überladen und erschwert die Suchmaschinenoptimierung (SEO & GEO).

Denke daran, auf jeder Seite einen Seitentitel (H1) einzubauen. Der H1-Tag hilft Suchmaschinen, den Hauptinhalt der Seite zu identifizieren und zu indexieren. Zudem sorgt er für eine klare Struktur, die Besuchenden hilft, schnell zu erkennen, worum es auf der jeweiligen Seite geht.

Kontaktiere uns

Egal, in welcher Phase sich dein Projekt befindet

Schriften

Schriften benötigen in der Regel eine Lizenz für die Verwendung auf einer Website. Um die Lizenzierung deiner Fonts musst du dich selbst kümmern. Verwendest du Google Fonts, ist keine Lizenzierung nötig. Weiterführende Informationen findest du in unserem Beitrag zu Webfonts.

Sende uns deine Schriften sowohl als lizenzierte Web-Font (WOFF2 oder WOFF) als auch als Desktop-Font (OTF oder TTF). So können wir das Design optimal beurteilen.

Ansicht

Erstelle das Design zunächst in der Desktop-Ansicht (1920 px), sie dient als Hauptversion und bildet die Grundlage für alle notwendigen Layouts und Artikelstile. Dabei sollte klar ersichtlich sein, welche Funktionen wo vorgesehen sind. Planst du einen Slider oder automatisch generierte Inhalte wie Blogbeiträge oder Newsartikel? Soll ein Filter integriert oder ein animierter Counter für Kennzahlen eingebaut werden? Dann ergänze dein Layout mit entsprechenden Anmerkungen oder visualisiere die Funktionen so detailliert wie möglich.

Hast du eine spezielle Vorstellung für das Mobile-Design? Dann schicke uns gerne auch diese Ansicht (375 px) mit. Andernfalls setzen wir die mobile Version nach bestem Ermessen um. Falls nachträglich grössere Anpassungen nötig sind, müssen dafür zusätzliche Ressourcen eingeplant und verrechnet werden.

Navigation und Header

Bitte visualisiere in deinem Design, wie die Navigation in den verschiedenen Ansichten aussehen soll. Mechanismus und Hover-Effekte sollen klar ersichtlich sein.

Wird ein Scrollheader gewünscht, bitte diesen ebenfalls im Design berücksichtigen und den normalen Zustand sowie den Zustand während des Scrollens klar darstellen.

Hinweise

Für die Erklärung bestimmter Ideen oder Funktionen empfehlen wir, die Bemerkungen direkt mit Notizzettel im Layout zu platzieren. So fallen sie uns sofort auf und gehen nicht unter.

FAQ

Häufig gestellte Fragen zum Projektablauf

Welche Informationen braucht cmsbox, um eine Offerte zu erstellen?

Für eine erste Offerte benötigen wir eine Übersicht der geplanten Funktionen und Seiten sowie die Domain. Ein fertiges Design ist hilfreich, aber nicht zwingend. Dank unserem modularen Preissystem können wir auch ohne Design bereits eine Einschätzung geben. Je genauer wir die Anforderungen kennen, desto verbindlicher wird die Offerte. Melde dich einfach bei uns und wir schauen gemeinsam, was du brauchst.

Kann ich das Design auch in einem anderen Tool als Figma oder Adobe XD erstellen?

Wir empfehlen Figma oder Adobe XD, da diese Tools eine reibungslose Übergabe in den Entwicklungsprozess ermöglichen. Andere Tools wie Illustrator, InDesign, Photoshop oder Office-Programme sind für die Umsetzung nicht geeignet, da wir die Dateien nicht vollständig bearbeiten können. Falls du ein anderes Tool verwendest, melde dich bei uns, damit wir gemeinsam eine Lösung finden.

Was gehört in ein Stylesheet und gibt es eine Vorlage?

Ein Stylesheet enthält alle zentralen Designvorgaben: Farben und Farbabstufungen, Schriften und Schriftgrössen von H1 bis H6, Links und Buttons inklusive Hover-Effekte, das Logo in verschiedenen Anwendungen sowie den Favicon als quadratische SVG-Datei. Damit du nichts vergisst, stellen wir dir eine Vorlage zur Verfügung, sowohl für Figma als auch für Adobe XD.

Muss ich zwingend eine Mobile-Ansicht mitliefern?

Nein, eine Mobile-Ansicht ist nicht zwingend. Wir setzen die mobile Version nach bestem Ermessen um, basierend auf der Desktop-Ansicht. Hast du aber spezifische Vorstellungen für das Mobile-Design, empfehlen wir, diese als Ansicht in 375 px mitzuliefern. So vermeiden wir nachträgliche Anpassungen, die zusätzliche Ressourcen erfordern und verrechnet werden müssten.

Was passiert, wenn ich die Anforderungen nicht vollständig erfülle?

Fehlende oder unklare Anforderungen können den Umsetzungsstart verzögern. In unserem Kalender sind Projekte nahtlos aneinandergereiht, weshalb ein Projekt bei unvollständigen Unterlagen auf den nächsten freien Slot verschoben werden muss. Das kann einige Wochen später sein. Deshalb empfehlen wir, alle Anforderungen vor dem geplanten Umsetzungsstart vollständig bereitzustellen. Bei Fragen helfen wir dir gerne dabei, alles rechtzeitig vorzubereiten.

Wie detailliert muss das Design sein, bevor ich es einreiche?

Das Design sollte so detailliert sein, dass wir alle Funktionen und Layouts ohne Rückfragen umsetzen können. Konkret bedeutet das: alle Seitentypen sind gestaltet, Interaktionen wie Hover-Effekte und Navigation sind visualisiert und Spezialfunktionen wie Slider, Filter oder animierte Elemente sind mit Anmerkungen versehen. Je detaillierter das Design, desto reibungsloser und schneller die Umsetzung. Bist du dir nicht sicher, ob dein Design bereit ist? Melde dich, wir schauen es gemeinsam an.

Wo und wie soll ich Funktionen oder Spezialwünsche im Design vermerken?

Vermerke funktionale Besonderheiten direkt als Notizzettel im Layout, zum Beispiel in Figma oder Adobe XD. So fallen sie uns sofort auf und gehen nicht in separaten Dokumenten oder E-Mails unter. Für komplexere Anforderungen kannst du zusätzlich Referenzlinks hinterlegen, die zeigen, wie eine Funktion aussehen oder sich verhalten soll. Je klarer die Hinweise, desto präziser die Umsetzung.

Bereit, dein Projekt zu starten?