Design

Progetta il layout del sito, con controllo su ogni dettaglio.

Spazi, tipografia, colore e gerarchia: li decidi nello stesso progetto, visibili su desktop, tablet e mobile.

Pannello stile

Tutto il design, sotto controllo

Layout, tipografia, colore, breakpoint, componenti e interazioni: le scegli nello stesso inspector, sul blocco selezionato.

Layout

Flex, griglia o blocco: direzione, allineamento e gap. Le misure Fill, Hug e Fixed restano visibili sul canvas.

Tipografia

Famiglia, peso, misura, allineamento.

Colore

Tinte del blocco o token del brand.

Responsive

Desktop, tablet, mobile: stesso progetto, stili per breakpoint.

Componenti

Salvi una sezione e la riusi, con classi allineate.

Interazioni

Hover, click, comparsa allo scroll: preset e timeline.

Inspector

Un pannello, ogni proprietà visiva

Nel pannello Stile passi da layout a tipografia, colore ed effetti. Il canvas mostra subito la scelta sul blocco selezionato.

Maison

Note che restano.

Maison

Note che restano.

Plus Jakarta · 700 · 64

Maison

Note che restano.

Composizione

Lo stesso gruppo di blocchi, tre letture di layout

Non ricominci la pagina: cambi display, allineamento e spazio. Il canvas mostra l’effetto sul gruppo selezionato.

01 · Display

Flex, griglia o blocco

Scegli come si dispongono i figli: in riga, in colonna o su una griglia.

02 · Allineamento

Dove sta ogni pezzo

Inizio, centro, fine o spazio distribuito. Qui il blocco centrale è selezionato.

03 · Gap e misure

Aria e Fill, Hug, Fixed

Regoli la distanza e come ogni figlio occupa lo spazio disponibile.

Tipografia e colore

Un titolo, due decisioni dall’inspector

Misura e colore non sono un’altra pagina: li cambi sul testo selezionato e li puoi salvare in una classe, per riusarli.

Prima

Note che restano.

Peso 400Misura 22Colore #8A8A96

Dopo

Note che restano.

Peso 700Misura 64Colore #C45C26

Proprietà

Cosa controlli, proprietà per proprietà

L’inspector raggruppa le decisioni visive: display, dimensioni, spaziatura e stati. Niente da scrivere a mano.

  • Display e flex

    Blocco, flex o griglia. Poi direzione, wrap, allineamento e gap.

    • DisplayFlex · Griglia · Blocco
    • DirezioneRiga o colonna
    • AllineamentoInizio, centro, fine, stretch
  • Dimensioni

    Fill, Hug e Fixed sul blocco, con minimo e massimo.

    • LarghezzaFill · Hug · Fixed
    • AltezzaFill · Hug · Fixed
    • Min / Maxpx o %
  • Spaziatura e posizione

    Margini, padding e posizione: relativa, assoluta, fissa o sticky.

    • Margine / paddingPer lato o uniforme
    • PosizioneRelativa, assoluta, sticky
    • OverflowVisibile, nascosto, auto
  • Stati

    Lo stesso blocco, con uno stile diverso al passaggio o al focus.

    • NessunoStato base
    • HoverAl passaggio del mouse
    • Premuto / FocusClick e tastiera

Scala tipografica

Una voce sola, da H1 alla caption

Peso, misura e interlinea si impostano sul testo o sulla classe. La gerarchia resta quella, su ogni pagina del sito.

Plus Jakarta Sans · peso 400–700 Classi riusabili sul testo selezionato Stesso sistema su desktop, tablet e mobile

FAQ

Domande su Design

Cos’è Design rispetto alla piattaforma?

Design è il capitolo dedicato al look del sito: layout, tipografia, colore e gerarchia. La piattaforma è la panoramica di canvas, componenti, pubblicazione e template.

Posso partire da un template?

Sì: apri un template nel canvas e adatti layout, testi, colori e sezioni senza ricominciare da zero.

Come si collega a Brand identity e Colori e stile?

In Brand identity imposti palette e font del progetto; in Colori e stile trovi il sistema di riferimento. Qui decidi come quelle scelte diventano layout e gerarchia sulle pagine.

Preferisco che il sito lo progetti tu?

Sì: lavoro io sulla stessa piattaforma, dal primo confronto alla messa online. Scrivimi in consulenza e definiamo insieme perimetro e tempi.