È iniziato con una richiesta del sistema di progettazione. Al nostro team del sistema di progettazione è stato chiesto di aggiungere un'opzione di dimensioni maggiori al nostro componente pulsante esistente. Dopo aver esaminato le altre dimensioni, potremmo estrapolare un'altra dimensione, ma mi ha incuriosito... “come si confrontano tutte le dimensioni dei componenti nel nostro sistema di progettazione? Ci sono regole universali che dovremmo seguire per il dimensionamento?"

Purtroppo la risposta è stata no. Alcuni valori erano comuni, ma niente era coerente. Non c'erano regole in atto per garantire dimensioni, spaziatura e scala coerenti in tutto il nostro sistema.

Tornando alle origini

Il grande design di solito è radicato nell'ottenere i fondamenti giusti. Per molti designer (come me) la tipografia è l'elemento fondamentale più importante del design. Abbiamo esaminato la nostra scala di caratteri per vedere come creare progetti proporzionali scalabili in base a rapporti e metodi comuni.

Presentazione di Proporzione

Proportio è un'applicazione web per i progettisti per creare le basi di un sistema di progettazione proporzionale. Puoi esplorare le scale tipografiche e come possono essere applicate alle icone, al dimensionamento, alla spaziatura e alla composizione di un componente. Con un sistema di progettazione proporzionale, le dimensioni e la densità dei componenti sono un gioco da ragazzi.

Creazione di sistemi fondamentali

Si inizia definendo la scala del tipo, che verrà utilizzata per gran parte del resto del sistema. Viene utilizzata una dimensione del carattere di base, insieme a un fattore di scala come la terza minore (1:1.125). Ogni altra dimensione del carattere si basa su questo rapporto.

Le icone vengono ridimensionate automaticamente in base alla scala del tipo, poiché la tipografia e l'associazione di icone sono un elemento comune e importante nei sistemi di progettazione.

Anche la spaziatura tra testo e icona è proporzionale, in base alla scala del tipo. Ciò garantisce che la distanza tra loro sia relativa ed equilibrata. Allo stesso modo, è possibile creare scale di dimensionamento proporzionali, scale del raggio e persino scale di elevazione (ombreggiatura).

Il sistema dei componenti

Qui è dove le cose si fanno davvero interessanti.

Una volta che hai i nostri sistemi di base, puoi scegliere di utilizzare la nostra scala del tipo o la scala della spaziatura per dimensionare l'imbottitura e l'altezza dei nostri componenti. Il componente di dimensioni base (predefinito) utilizza la dimensione del tipo di base (per impostazione predefinita, 16px).

Puoi aggiungere dimensioni sempre più piccole, che vengono generate nell'interfaccia utente in base agli incrementi nelle scale selezionate.

Puoi anche aggiungere opzioni più o meno dense. La densità è come la dimensione, sebbene influenzi solo il riempimento e l'altezza del componente: le dimensioni del testo e delle icone rimangono le stesse. Anche questi vengono generati in base alle tue scale e puoi modificare la velocità con cui le tue densità crescono o si riducono.

Puoi attivare o disattivare la visualizzazione del componente per vedere come appare il tuo componente quando c'è solo testo, solo un'icona o entrambi. Puoi anche attivare o disattivare una vista per mostrare le specifiche del componente.

Il sistema dei contenitori

Proprio come il sistema di componenti, Proportio ti consente di creare contenitori in scala proporzionale.

Ad esempio, un popover potrebbe essere un piccolo contenitore (piccolo raggio d'angolo e riempimento). Contenitori più grandi come le carte potrebbero avere un raggio d'angolo e un'imbottitura più ampi. Le finestre di dialogo modali possono essere considerate contenitori ancora più grandi e necessitano della maggiore imbottitura e del raggio d'angolo più ampio per apparire appropriate in un sistema di interfaccia.

Usando gli stessi sistemi proporzionali, puoi creare contenitori con riempimento scalato, raggio scalato e persino elevazione (se necessario).

Esportare valori

Dopo aver creato un sistema che desideri utilizzare, possono essere esportati come Design Token (formato bozza W3C) o come variabili CSS. Ciò semplifica la consegna del sistema agli ingegneri.

Al momento, non c'è modo di inserire questi valori direttamente in Figma . Quindi, nel suo stato attuale, è più utile come prototipo per definire cosa vorresti usare nel tuo sistema, piuttosto che un vero "strumento di progettazione". Ma detto questo, questa funzione potrebbe essere aggiunta se ti senti così incline, perché Proportio è uno strumento open source.

Fonte aperta

Proportio è un progetto open-source . Sono un grande sostenitore della restituzione alla comunità dei sistemi di progettazione per aiutare a condividere o provocare nuove idee in modo che possiamo crescere tutti insieme.

Lo strumento è ancora agli inizi, ma ci sono funzionalità aggiuntive in lavorazione per aiutarti a sfruttare al meglio Proportio per la progettazione e lo sviluppo.