MOSS STUDIO

Webdesign · UX/UI · Webflow Development

Cyrclo: Eine digitale Plattform für skalierbares Marketing

Cyrclo verbindet intelligente Analytics, Automatisierung und datenbasierte Strategie. Wir übersetzten dieses komplexe Leistungsversprechen in eine klare digitale Erfahrung, die Technologie verständlich macht, Vertrauen aufbaut und mit dem Angebot wachsen kann.

Ähnliches Projekt startenWebsite ansehen
  • Cyrclo AI-Marketing-Website mit schwebenden visuellen Karten auf dunklem Hintergrund
  • Cyrclo Leistungsübersicht mit Karten für Advertising, Automation, Analytics und Strategy
  • Cyrclo Website Footer mit Navigation, Social Links und grosser Wortmarke
  • Monochrome Cyrclo Farbpalette mit Schwarz, Weiss und abgestuften Grautönen
  • Cyrclo Typographiesystem mit Google Sans Flex und Google Sans Code

Ein reduzierter Einstieg, der Technologie, Bewegung und kreative Möglichkeiten in einem einzigen visuellen System verbindet.

Projekt

  • Kunde

    Cyrclo

  • Branche

    AI Marketing & Analytics

  • Projekt

    Corporate Website

  • Leistungen

    Strategy, UX/UI, Web Development, CMS

  • Plattform

    Webflow

  • Jahr

    2026

01Herausforderung

Komplexe Technologie brauchte eine klare Geschichte

Cyrclo vereint mehrere Disziplinen: Automation, Analytics, strategische Planung und datenbasierte Werbung. Diese Breite ist eine Stärke, kann digital jedoch schnell abstrakt wirken. Die Website musste das Angebot verständlich strukturieren, ohne die technologische und progressive Identität der Marke zu vereinfachen.

Die zentralen Herausforderungen

  • Ein komplexes Angebot verständlich machen

    Vier eng verbundene Leistungsbereiche mussten innerhalb weniger Sekunden erfassbar werden, ohne sie in lange Textblöcke zu zerlegen.

  • Technologie menschlich inszenieren

    AI und Analytics sollten nicht kalt oder rein technisch wirken. Die Erfahrung musste Datenorientierung mit Kreativität und menschlicher Relevanz verbinden.

  • Aufmerksamkeit gezielt führen

    Die starke visuelle Bewegung durfte zentrale Botschaften, Navigation und Handlungsaufforderungen nicht überlagern.

  • Wachstum im System ermöglichen

    Neue Case Studies, Artikel und Leistungen sollten ergänzt werden können, ohne jedes Mal neue Seitentypen zu entwickeln.

Ziele

Was die neue Website leisten musste

  • 01

    Klarheit

    Besucher sollen schnell verstehen, wofür Cyrclo steht, welche Leistungen angeboten werden und wie diese zusammenwirken.

  • 02

    Differenzierung

    Die visuelle Sprache hebt Cyrclo von austauschbaren Agenturauftritten ab und macht die Marke sofort erkennbar.

  • 03

    Skalierbarkeit

    Ein modulares Seiten- und CMS-System soll neue Inhalte aufnehmen können, ohne Konsistenz oder Bedienbarkeit zu verlieren.

02Strategie

Ein digitales System statt einzelner Seiten

  • Strategy

    Wir ordneten die Inhalte nach Entscheidungsrelevanz. Das Markenversprechen steht zuerst, gefolgt von Leistungen, Projekten, Vertrauen und Conversion. So entsteht eine logische Argumentation statt einer Sammlung isolierter Sektionen.

  • UX Architecture

    Die Navigation bleibt bewusst kompakt. Wiederkehrende Layoutmuster und klare Inhaltsblöcke helfen Nutzern, auch auf langen Seiten schnell zu erkennen, wo sie sich befinden und was als Nächstes relevant ist.

  • Visual Design

    Schwarz, Weiss und abgestufte Grautöne bilden ein präzises monochromes System. Grosszügige Typografie, weiche Radien und räumliche Karten erzeugen Spannung, ohne die Marke mit dekorativen Farben zu überladen.

  • Development

    Wiederverwendbare Komponenten, strukturierte CMS Collections und responsive Layouts schaffen die technische Grundlage für ein System, das sich konsistent erweitern lässt.

03Umsetzung

Leistungen, die auf einen Blick verständlich werden

Die vier Kernbereiche Advertising, Automation, Analytics und Strategy erhielten jeweils eine klar definierte Karte. Jede Karte kombiniert Kontext, Leistungsname, kurze Nutzenargumentation und ein wiederkehrendes grafisches Element.

Cyrclo Leistungsübersicht mit Karten für Advertising, Automation, Analytics und Strategy
Vier Leistungsbereiche werden als eigenständige, aber visuell verbundene Module präsentiert.

Diese Struktur löst drei Probleme gleichzeitig:

  • Sie macht das Angebot in wenigen Sekunden scanbar.
  • Sie gibt jeder Leistung genügend Eigenständigkeit.
  • Sie zeigt über das gemeinsame Raster, dass alle Leistungen Teil eines Systems sind.

Der asymmetrische Aufbau verhindert visuelle Monotonie. Kleinere Vertrauenselemente ergänzen die Leistungsargumentation, ohne mit den primären Karten zu konkurrieren.

Entscheidungen

Warum wir uns für diese Richtung entschieden haben

  • 01

    Monochromes Farbsystem

    Das reduzierte Farbsystem positioniert Cyrclo als präzise und selbstbewusste Technologiemarke. Weiss erzeugt Klarheit, Schwarz schafft Tiefe, und die Grauabstufungen definieren Hierarchie und Zustände.

  • 02

    Orbit als Hero-Prinzip

    Die schwebenden visuellen Karten bilden ein Netzwerk rund um die zentrale Marke. Das Motiv vermittelt Bewegung, Datenpunkte und unterschiedliche kreative Möglichkeiten, ohne das Leistungsversprechen wörtlich zu illustrieren.

  • 03

    Bento-basierte Inhaltskarten

    Unterschiedlich grosse Karten erlauben es, Inhalte nach Relevanz zu gewichten. Nutzer erhalten zuerst die wichtigsten Informationen und können anschliessend Details erkunden.

  • 04

    Wechsel zwischen hellen und dunklen Flächen

    Der Kontrastwechsel strukturiert lange Seiten und erzeugt einen klaren Rhythmus. Helle Bereiche erklären. Dunkle Bereiche verdichten die Markenwirkung und markieren Übergänge.

Designsystem

Ein Designsystem für Konsistenz und Geschwindigkeit

Das visuelle System wurde auf wenige, klar definierte Grundlagen reduziert. Dadurch können neue Seiten und Komponenten ergänzt werden, ohne die Markenwirkung neu zu interpretieren.

  • Monochrome Cyrclo Farbpalette mit Schwarz, Weiss und abgestuften Grautönen

    Farbpalette

    Die Basisfarben #000000 und #FFFFFF erzeugen den stärksten Kontrast. Ergänzende Grautöne wie #1F1F1F, #808080, #A7A7A7 und #BBBBBB steuern Flächen, Sekundärtexte, Rahmen und interaktive Zustände.

  • Cyrclo Typographiesystem mit Google Sans Flex und Google Sans Code

    Typografie

    Google Sans Flex trägt Headlines, Navigation und Fliesstext. Die Schrift ist klar, modern und in unterschiedlichen Gewichtungen flexibel einsetzbar. Google Sans Code markiert Labels, Kategorien und technische Mikroinformationen. Dadurch entsteht ein kontrollierter Kontrast zwischen zugänglicher Markenkommunikation und technischer Präzision.

Typografische Rollen

  • Display

    Google Sans Flex

    500–600

    Hero und grosse Abschnittstitel

  • Heading

    Google Sans Flex

    500

    H2–H4 und Kartentitel

  • Body

    Google Sans Flex

    400

    Fliesstext und Beschreibungen

  • Label

    Google Sans Code

    400

    Eyebrows, Kategorien, Metadaten

Komponenten

Wiederverwendbare Komponenten statt starrer Einzellayouts

  • 01

    Hero Orbit

    Zentrale Markenbotschaft, umgeben von bewegten visuellen Karten. Die Animation erzeugt Tiefe, während Titel und Nutzenversprechen stabil und lesbar bleiben.

  • 02

    Service Cards

    Modulare Karten mit Kategorie, Titel, Kurzbeschreibung und grafischem Key Visual. Die Komponente funktioniert sowohl im Bento-Raster als auch als einzelne Teaser-Karte.

  • 03

    Case Study Cards

    CMS-basierte Projektkarten verbinden Bild, Jahr, Leistung und Projekttitel. Neue Projekte können ergänzt werden, ohne das Layout manuell neu aufzubauen.

  • 04

    Social Proof Module

    Kompakte Vertrauenselemente werden direkt neben relevanten Leistungen platziert. So unterstützen sie die Argumentation genau dort, wo Nutzer Sicherheit benötigen.

  • 05

    Pricing Cards

    Leistungsumfang, Positionierung und nächster Schritt werden in einem wiederholbaren Vergleichssystem zusammengeführt. Die visuelle Hierarchie verhindert, dass Preis und Nutzen voneinander getrennt wahrgenommen werden.

  • 06

    FAQ Accordion

    Wiederkehrende Einwände werden kompakt beantwortet. Das reduziert Reibung am Ende der Customer Journey und schafft zusätzliche semantische Tiefe für Suchmaschinen.

  • 07

    Navigation & Footer

    Die reduzierte Navigation hält den Fokus auf den Kernbereichen. Der grossflächige Footer bündelt Marke, Seitenstruktur, Social Links und den Weg zurück zum Seitenanfang.

Cyrclo Website Footer mit Navigation, Social Links und grosser Wortmarke

Ein konsistenter Abschluss der Customer Journey

Das System bleibt bis zum letzten Kontaktpunkt konsistent: klare Navigation, reduzierte Interaktionen und eine starke Markenpräsenz.

Der Footer ist nicht als Restfläche behandelt. Er wiederholt die zentrale Positionierung, bündelt Navigation und Social Channels und gibt Nutzern einen eindeutigen Weg zurück in die Website.

Die übergrosse Wortmarke verstärkt den Wiedererkennungswert, während klare Trennlinien und grosszügige Abstände auch auf einer informationsreichen Fläche Orientierung schaffen.

04Ergebnis

Das Ergebnis: Klarheit, Charakter und ein System für Wachstum

Qualitätsziel

90+

Performance

Zielwert für den mobilen Lighthouse Performance Score

Qualitätsziel

≤ 2,5 s

LCP

Das wichtigste sichtbare Element soll schnell geladen werden

Qualitätsziel

≤ 200 ms

INP

Interaktionen sollen ohne spürbare Verzögerung reagieren

Qualitätsziel

≤ 0,1

CLS

Inhalte sollen beim Laden visuell stabil bleiben

  • 4 Kernleistungen

    Klar strukturiert in einem gemeinsamen visuellen System

  • 1 skalierbares CMS

    Für Case Studies, Artikel und zukünftige Inhalte

  • Responsive by design

    Konsistente Nutzerführung auf Desktop, Tablet und Mobile

  • Modulares UI-System

    Wiederverwendbare Komponenten für nachhaltige Erweiterungen

05Weitere Projekte

Mehr digitale Projekte

Aktuelle Websites und Identitäten aus dem Studio.

Alle Case Studies ansehen
06Kompetenzen

Eingesetzte Kompetenzen

07FAQ

Fragen zu diesem Projekt

Die grösste Herausforderung bestand darin, vier eng verbundene Leistungsbereiche verständlich zu strukturieren, ohne die progressive und technologieorientierte Markenwirkung zu verlieren.

Schwarz, Weiss und abgestufte Grautöne vermitteln Präzision und schaffen eine klare visuelle Hierarchie. Gleichzeitig erhalten Typografie, Bewegung und Inhalte mehr Raum, ohne mit dekorativen Farben zu konkurrieren.

Die Website führt von Positionierung und Leistungen über Projekte und Vertrauenselemente zu klaren Handlungsaufforderungen. Wiederkehrende Komponenten machen den nächsten Schritt an relevanten Punkten sichtbar.

Leistungen, Case Studies und Artikel folgen wiederverwendbaren Inhaltsmodellen. Dadurch können neue Inhalte ergänzt werden, ohne die Seitenstruktur oder das Designsystem neu aufzubauen.

Layouts, Typografie, Karten und Navigation wurden responsiv gedacht. Inhalte werden auf kleineren Displays neu priorisiert, Animationen reduziert und Bilder passend zur tatsächlichen Darstellungsgrösse ausgeliefert.

Nächster Schritt

Braucht Ihre Marke eine Website, die Komplexität klar macht?

Wir verbinden Strategie, Design und Entwicklung zu einem digitalen System mit klarem Scope, nachvollziehbarem Prozess und einer Architektur, die mit Ihrem Unternehmen wachsen kann.

Projekt besprechen Webdesign für KMU ansehen