MOSS STUDIO

Web design · UX/UI · Sviluppo Webflow

Cyrclo: una piattaforma digitale per un marketing che scala

Cyrclo unisce analytics intelligenti, automation e strategia basata sui dati. Abbiamo tradotto questa offerta complessa in un’esperienza digitale chiara, che rende la tecnologia comprensibile, costruisce fiducia e può crescere con l’offerta.

Avviare un progetto simileVedere il sito
  • Sito marketing AI Cyrclo con schede visive fluttuanti su sfondo scuro
  • Panoramica prestazioni Cyrclo con card Advertising, Automation, Analytics e Strategy
  • Footer del sito Cyrclo con navigazione, link social e grande wordmark
  • Palette monocromatica Cyrclo con nero, bianco e grigi a scalini
  • Sistema tipografico Cyrclo con Google Sans Flex e Google Sans Code

Un ingresso ridotto che unisce tecnologia, movimento e possibilità creative in un unico sistema visivo.

Progetto

  • Cliente

    Cyrclo

  • Settore

    AI Marketing & Analytics

  • Progetto

    Sito corporate

  • Prestazioni

    Strategy, UX/UI, web development, CMS

  • Piattaforma

    Webflow

  • Anno

    2026

01Sfida

Una tecnologia complessa aveva bisogno di una storia chiara

Cyrclo unisce automation, analytics, pianificazione strategica e advertising basato sui dati. Questa ampiezza è una forza, ma online può apparire astratta. Il sito doveva strutturare l’offerta senza semplificare l’identità tecnologica e progressiva del brand.

Le sfide centrali

  • Rendere comprensibile un’offerta complessa

    Quattro ambiti di prestazione strettamente collegati dovevano essere colti in pochi secondi, senza spezzarli in lunghi blocchi di testo.

  • Mettere in scena la tecnologia in modo umano

    AI e analytics non dovevano apparire freddi o puramente tecnici. L’esperienza doveva unire orientamento ai dati, creatività e rilevanza umana.

  • Guidare l’attenzione con intenzione

    Il forte movimento visivo non doveva coprire messaggi centrali, navigazione o call to action.

  • Consentire la crescita nel sistema

    Nuovi case study, articoli e prestazioni dovevano potersi aggiungere senza inventare ogni volta un nuovo tipo di pagina.

Obiettivi

Cosa doveva fare il nuovo sito

  • 01

    Chiarezza

    I visitatori devono capire in fretta cosa rappresenta Cyrclo, quali prestazioni offre e come si articolano.

  • 02

    Differenziazione

    Il linguaggio visivo distingue Cyrclo da siti di agenzia intercambiabili e rende il brand subito riconoscibile.

  • 03

    Scalabilità

    Un sistema di pagine e CMS modulare deve accogliere nuovi contenuti senza perdere coerenza o usabilità.

02Strategia

Un sistema digitale invece di pagine isolate

  • Strategy

    I contenuti sono ordinati per rilevanza decisionale. Prima la promessa di marca, poi prestazioni, progetti, fiducia e conversione — un’argomentazione, non una pila di sezioni isolate.

  • UX Architecture

    La navigazione resta volutamente compatta. Pattern di layout ricorrenti e blocchi chiari aiutano a capire dove si è, anche su pagine lunghe, e cosa conta dopo.

  • Visual Design

    Nero, bianco e grigi a scalini formano un sistema monocromatico preciso. Tipografia generosa, raggi morbidi e card spaziali creano tensione, senza caricare il brand di colori decorativi.

  • Development

    Componenti riutilizzabili, collection CMS strutturate e layout responsive sono la base tecnica di un sistema che si estende in modo coerente.

03Realizzazione

Prestazioni comprensibili a colpo d’occhio

Advertising, Automation, Analytics e Strategy hanno ciascuno una card definita. Ogni card unisce contesto, nome della prestazione, beneficio breve e un elemento grafico ricorrente.

Panoramica prestazioni Cyrclo con card Advertising, Automation, Analytics e Strategy
Quattro ambiti presentati come moduli autonomi, visivamente collegati.

Questa struttura risolve tre problemi insieme:

  • L’offerta è scansionabile in pochi secondi.
  • Ogni prestazione mantiene abbastanza autonomia.
  • La griglia comune mostra che tutte le prestazioni fanno parte di un sistema.

La composizione asimmetrica evita la monotonia. Elementi di fiducia più piccoli completano l’argomentazione senza competere con le card primarie.

Decisioni

Perché abbiamo scelto questa direzione

  • 01

    Sistema colore monocromatico

    La palette ridotta posiziona Cyrclo come brand tecnologico preciso e sicuro. Il bianco crea chiarezza, il nero profondità, i grigi definiscono gerarchia e stati.

  • 02

    Orbit come principio dell’hero

    Le card visive fluttuanti formano una rete intorno al brand. Il motivo suggerisce movimento, punti dati e possibilità creative, senza illustrare l’offerta alla lettera.

  • 03

    Card di contenuto in bento

    Card di dimensioni diverse pesano i contenuti per rilevanza. Prima le informazioni più importanti, poi il dettaglio.

  • 04

    Alternanza di superfici chiare e scure

    Il contrasto struttura le pagine lunghe e crea un ritmo. Le zone chiare spiegano. Le zone scure densificano il brand e segnano le transizioni.

Design system

Un design system per coerenza e velocità

Il sistema visivo è ridotto a poche fondamenta definite. Nuove pagine e componenti si aggiungono senza reinterpretare il brand.

  • Palette monocromatica Cyrclo con nero, bianco e grigi a scalini

    Palette colori

    I colori di base #000000 e #FFFFFF creano il contrasto più forte. Grigi di supporto come #1F1F1F, #808080, #A7A7A7 e #BBBBBB governano superfici, testi secondari, bordi e stati interattivi.

  • Sistema tipografico Cyrclo con Google Sans Flex e Google Sans Code

    Tipografia

    Google Sans Flex porta titoli, navigazione e testo corrente. Il carattere è chiaro, moderno e flessibile nei pesi. Google Sans Code marca label, categorie e micro-informazioni tecniche — un contrasto controllato tra comunicazione di marca accessibile e precisione tecnica.

Ruoli tipografici

  • Display

    Google Sans Flex

    500–600

    Hero e grandi titoli di sezione

  • Heading

    Google Sans Flex

    500

    H2–H4 e titoli delle card

  • Body

    Google Sans Flex

    400

    Testo corrente e descrizioni

  • Label

    Google Sans Code

    400

    Eyebrow, categorie, metadati

Componenti

Componenti riutilizzabili invece di layout unici

  • 01

    Hero Orbit

    Messaggio di marca centrale, circondato da card visive in movimento. L’animazione crea profondità, mentre titolo e promessa restano stabili e leggibili.

  • 02

    Service Cards

    Card modulari con categoria, titolo, breve descrizione e key visual. Il componente funziona in griglia bento e come teaser singolo.

  • 03

    Case Study Cards

    Card progetto basate sul CMS: immagine, anno, prestazione, titolo. Nuovi progetti si aggiungono senza ricostruire il layout a mano.

  • 04

    Social Proof Module

    Elementi di fiducia compatti, accanto alle prestazioni rilevanti, lì dove serve rassicurazione.

  • 05

    Pricing Cards

    Perimetro, posizionamento e passo successivo in un sistema di confronto ripetibile. La gerarchia visiva evita di separare prezzo e valore.

  • 06

    FAQ Accordion

    Le obiezioni ricorrenti hanno risposte compatte. Riduce l’attrito a fine percorso e aggiunge profondità semantica per la ricerca.

  • 07

    Navigation & Footer

    Navigazione ridotta che tiene il focus sulle aree core. Il footer ampio raccoglie brand, struttura, social e il percorso verso l’inizio pagina.

Footer del sito Cyrclo con navigazione, link social e grande wordmark

Una chiusura coerente del customer journey

Il sistema resta coerente fino all’ultimo punto di contatto: navigazione chiara, interazioni ridotte e una forte presenza di marca.

Il footer non è uno spazio residuo. Ripete il posizionamento centrale, raccoglie navigazione e canali social e dà un percorso chiaro per tornare nel sito.

La wordmark sovradimensionata rafforza il riconoscimento, mentre filetti e spazi generosi tengono l’orientamento su una superficie ricca di informazione.

04Risultati

Il risultato: chiarezza, carattere e un sistema per crescere

Obiettivo di qualità

90+

Performance

Valore obiettivo per il punteggio Lighthouse Performance mobile

Obiettivo di qualità

≤ 2,5 s

LCP

L’elemento visibile più importante deve caricarsi in fretta

Obiettivo di qualità

≤ 200 ms

INP

Le interazioni devono rispondere senza ritardo percepibile

Obiettivo di qualità

≤ 0,1

CLS

I contenuti devono restare visivamente stabili in caricamento

  • 4 prestazioni core

    Strutturate in un sistema visivo comune

  • 1 CMS scalabile

    Per case study, articoli e contenuti futuri

  • Responsive by design

    Guida coerente su desktop, tablet e mobile

  • Sistema UI modulare

    Componenti riutilizzabili per estensioni durature

05Progetti correlati

Altri progetti digitali

Siti e identità recenti dello studio.

Vedi tutti i case study
06Competenze

Competenze impiegate

07FAQ

Domande su questo progetto

La difficoltà principale era strutturare quattro ambiti di prestazione strettamente collegati in modo comprensibile in pochi secondi, senza appiattire l’identità progressiva e tecnologica di Cyrclo.

Nero, bianco e grigi a scalini comunicano precisione e creano una gerarchia visiva chiara. Tipografia, movimento e contenuti hanno così spazio, senza colori decorativi in concorrenza.

Il sito porta dal posizionamento e dalle prestazioni a progetti e prove, poi a call to action chiare. Componenti ricorrenti rendono visibile il passo successivo nei punti che contano.

Prestazioni, case study e articoli seguono modelli di contenuto riutilizzabili. Nuovi contenuti si aggiungono senza ricostruire tipi di pagina o design system.

Layout, tipografia, card e navigazione sono pensati in modo responsive. Su schermi piccoli i contenuti vengono riprioritizzati, le animazioni ridotte e le immagini servite alla dimensione reale di visualizzazione.

Prossimo passo

Il vostro brand ha bisogno di un sito che renda chiara la complessità?

Uniamo strategia, design e sviluppo in un sistema digitale con scope chiaro, processo leggibile e un’architettura che può crescere con l’azienda.

Parlare di un progetto Vedere il webdesign per PMI