From edf959dafcea5e3a8d565737eec8d9f13e402b0f Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Wed, 29 Nov 2023 18:19:35 +0100 Subject: [PATCH 1/9] docs: added sizing page and images --- .../design-system/fondamenti/dimensioni.yaml | 181 ++++++++++++++++++ .../design-system/fondamenti/sizing-full.png | Bin 0 -> 287 bytes .../design-system/fondamenti/sizing-half.png | Bin 0 -> 316 bytes .../fondamenti/sizing-quarter.png | Bin 0 -> 315 bytes .../fondamenti/sizing-two-thirds.png | Bin 0 -> 316 bytes 5 files changed, 181 insertions(+) create mode 100644 src/data/content/design-system/fondamenti/dimensioni.yaml create mode 100644 static/images/design-system/fondamenti/sizing-full.png create mode 100644 static/images/design-system/fondamenti/sizing-half.png create mode 100644 static/images/design-system/fondamenti/sizing-quarter.png create mode 100644 static/images/design-system/fondamenti/sizing-two-thirds.png diff --git a/src/data/content/design-system/fondamenti/dimensioni.yaml b/src/data/content/design-system/fondamenti/dimensioni.yaml new file mode 100644 index 0000000000..749093d6e3 --- /dev/null +++ b/src/data/content/design-system/fondamenti/dimensioni.yaml @@ -0,0 +1,181 @@ +# ———————————————————————————————————————————— +# CREATEPAGE GATSBY +# ———————————————————————————————————————————— +metadata: + template: + name: design-system-index + +seo: + name: Dimensioni + description: "Le misure utilizzate per definire lo spazio occupato dagli elementi all'interno di un'interfaccia" + image: null + twitterImage: null + canonical: null + pathname: /design-system/fondamenti/bordi-e-raggi/ + +components: + hero: + background: null + title: Dimensioni + column: true + subtitle: "Le misure utilizzate per definire lo spazio occupato dagli elementi all'interno di un'interfaccia" + tag: + label: Fondamenti #C + addonClasses: mt-3 text-uppercase + + # KANGAROO: METADATA + kangaroo: + id: kangarooHero + noPadding: true + titleSr: Metadati e link per approfondire + navposition: + items: + - title: Ti trovi in + tooltip: "La sezione di Designers Italia cui appartiene questa pagina" + icon: + icon: "sprites.svg#it-folder" + size: "sm" + align: "middle" + color: "secondary" + label: Fondamenti #C + url: "../../" #M + otherInfo: + items: + - title: Rispettando + tooltip: "Norme e riferimenti che i contenuti di questa pagina ti aiutano a rispettare" + icon: + icon: "sprites.svg#it-pa" + size: "sm" + align: "middle" + color: "secondary" + label: Linee guida di design #C + url: "/norme-e-riferimenti/linee-guida-di-design" #M + personalInfo: + items: #C + - title: Sei + tooltip: "Se non ti riconosci in questi profili non preoccuparti: potrai scoprire informazioni utili per saperne di più. In alternativa, naviga la sezione superiore per approfondire il contesto" + icon: + icon: "sprites.svg#it-user" + size: "sm" + align: "middle" + color: "secondary" + label: Designer, Developer, Qui per curiosità #C + - title: Vuoi + tooltip: "Obiettivi di progettazione per cui sono utili i contenuti di questa pagina" + icon: + icon: "sprites.svg#it-flag" + size: "sm" + align: "middle" + color: "secondary" + label: Progettare e sviluppare l'interfaccia utente #C + tagsLabel: Parliamo di + color: secondary + icon: + icon: sprites.svg#it-horn + size: sm + color: secondary + tags: [Progettazione interfaccia, Sviluppo interfaccia] + + sectionsEditorial: + - full: true + noSpace: false + paddingLeft: true + title: null + text: null + background: null + components: + - name: TextImageCta + title: A cosa servono + headingLevel: 2 + text: | + Le dimensioni di un elemento sono misure che **definiscono lo spazio occupato** in altezza e in larghezza da un elemento. + + Definendo dimensioni standard, infatti, è possibile garantire una coerenza visiva all'interno di un'interfaccia. + + Le misure sono espresse in **percentuale** perché possono essere relative a: + - la dimensione dello schermo (_viewport_); + - la dimensione del contenitore in cui è inserito l'elemento, come le colonne della griglia. + + - name: TextImageCta + title: Come usarle + headingLevel: 2 + text: | + È possibile utilizzare misure diverse per uno stesso elemento in base a specifiche necessità di layout. + + Ad esempio, un pulsante può avere una dimensione `100%` su dispositivi mobile perché essere facilmente cliccabile, mentre una dimensione ridotta su dispositivi più grandi dove lo spazio a disposizione è maggiore. + + Queste misure si **adattano alla griglia**, ma non la sostituiscono in quanto non prevedono intercolonna e margini laterali. + + ctas: + - label: Vai al fondamento Griglia + url: "/design-system/fondamenti/griglia" #M + blank: false #M #C true if new tab for external links + icon: + icon: sprites.svg#it-arrow-right #C #I #it-arrow-right | it-external-link for external links + color: primary + align: middle + hidden: true + size: sm + addonClasses: ms-2 + + - name: TextImageCta + title: I token per le dimensioni + headingLevel: 2 + text: | + I token relativi alle dimensioni appartengono alla tipologia **globali**. Come tali, possono essere riutilizzati come misura di riferimento per token semantici o specifici. + + ctas: + - label: Vai al fondamento Design tokens #C + url: "/design-system/fondamenti/design-tokens" #M + blank: false #M #C true if new tab for external links + icon: + icon: sprites.svg#it-arrow-right #C #I #it-arrow-right | it-external-link for external links + color: primary + align: middle + hidden: true + size: sm + addonClasses: ms-2 + + - name: Table + title: Token per le dimensioni + responsive: table-responsive + addonClasses: mb-5 + head: + - text: Valore + - text: Descrizione + - text: Token + rows: + - cols: + - text: | + ![dimensione di un quarto](/images/design-system/fondamenti/sizing-quarter.png) + 25% + - text: Dimensione di un quarto del contenitore + - tag: + label: sizing.quarter + addonClasses: neutral-1-bg-a1 text-black fw-semibold font-monospace text-lowercase + - cols: + - text: | + ![dimensione della metà](/images/design-system/fondamenti/sizing-half.png) + 50% + - text: Dimensione della metà del contenitore + - tag: + label: sizing.half + addonClasses: neutral-1-bg-a1 text-black fw-semibold font-monospace text-lowercase + - cols: + - text: | + ![dimensione di due terzi](/images/design-system/fondamenti/sizing-two-thirds.png) + 75% + - text: Dimensione di due terzi del contenitore + - tag: + label: sizing.two-thirds + addonClasses: neutral-1-bg-a1 text-black fw-semibold font-monospace text-lowercase + - cols: + - text: | + ![dimensione piena](/images/design-system/fondamenti/sizing-full.png) + 100%s + - text: Dimensione piena del contenitore + - tag: + label: sizing.full + addonClasses: neutral-1-bg-a1 text-black fw-semibold font-monospace text-lowercase + + \ No newline at end of file diff --git a/static/images/design-system/fondamenti/sizing-full.png b/static/images/design-system/fondamenti/sizing-full.png new file mode 100644 index 0000000000000000000000000000000000000000..c4ea8e585bb20b3931abf2854a36fe294b50431d GIT binary patch literal 287 zcmeAS@N?(olHy`uVBq!ia0vp^0U*r51|<6gKdl8)oCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{uWOc$B+ufw-*c<4=4yQY|KBpNX-91W3({m z&$PG3Hox0l5>yO?BshCm+?bRbCm!$^cmdKI;Vst07PI+ AUjP6A literal 0 HcmV?d00001 diff --git a/static/images/design-system/fondamenti/sizing-half.png b/static/images/design-system/fondamenti/sizing-half.png new file mode 100644 index 0000000000000000000000000000000000000000..19a6b575b1d1c80b99da987022e79409d9ca5570 GIT binary patch literal 316 zcmeAS@N?(olHy`uVBq!ia0vp^0U*r51|<6gKdl8)oCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{zXq0$B+ufx3>)i8w?m&4mPOTJY+02Y+zr) zB6xktjj08n-^xF(yME(F&AN@7izjeMa8eD*evXd*?^2fDII)3x@FM>Oe)j7(-*(>v PdXB-<)z4*}Q$iB}*6m@9 literal 0 HcmV?d00001 diff --git a/static/images/design-system/fondamenti/sizing-quarter.png b/static/images/design-system/fondamenti/sizing-quarter.png new file mode 100644 index 0000000000000000000000000000000000000000..29c8b0c5405d230fdc74e68442a07e37980ecb69 GIT binary patch literal 315 zcmeAS@N?(olHy`uVBq!ia0vp^0U*r51|<6gKdl8)oCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{sm7L$B+ufw>J$18w?m&4mPOTJY+1DIKUj_ zaAfJ}buF{s*GWJB+}ru?wS@Lf_RfZh1mVT9{r9i``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{zXq0$B+ufw|5K$8w?m&4mPOTJY+1DIKUj_ zaAfJ}buF{k*GoVD+}nERx?$Qa_RfZhbcYwq_TLY>AGtX)L4^qTh54Nx`}KEAuI&VR Oj=|H_&t;ucLK6Tj=zD|! literal 0 HcmV?d00001 From 96c7ecc9c1ba163d6c73967fc0d30da79ec1869e Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Wed, 29 Nov 2023 23:08:26 +0100 Subject: [PATCH 2/9] docs: added nav link --- src/data/dsnav.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/dsnav.yaml b/src/data/dsnav.yaml index 6c8c0a9a00..e23c9bd8f3 100644 --- a/src/data/dsnav.yaml +++ b/src/data/dsnav.yaml @@ -74,7 +74,7 @@ list: - label: "Bordi e raggi" url: "/design-system/fondamenti/bordi-e-raggi/" - label: "Dimensioni" - disabled: true + url: "/design-system/fondamenti/dimensioni/" - label: "Posizionamento" disabled: true - label: "Proporzioni media" From 962ba89ed2ec59f34477eab1bd8324e3ce6976b4 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Fri, 1 Dec 2023 15:07:42 +0100 Subject: [PATCH 3/9] docs: fixes and improvement @danielaiozzo --- .../content/design-system/fondamenti/dimensioni.yaml | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/data/content/design-system/fondamenti/dimensioni.yaml b/src/data/content/design-system/fondamenti/dimensioni.yaml index 749093d6e3..9ec391e165 100644 --- a/src/data/content/design-system/fondamenti/dimensioni.yaml +++ b/src/data/content/design-system/fondamenti/dimensioni.yaml @@ -7,7 +7,7 @@ metadata: seo: name: Dimensioni - description: "Le misure utilizzate per definire lo spazio occupato dagli elementi all'interno di un'interfaccia" + description: "Le misure che definiscono lo spazio occupato dagli elementi di design all'interno di un'interfaccia" image: null twitterImage: null canonical: null @@ -18,7 +18,7 @@ components: background: null title: Dimensioni column: true - subtitle: "Le misure utilizzate per definire lo spazio occupato dagli elementi all'interno di un'interfaccia" + subtitle: "Le misure che definiscono lo spazio occupato dagli elementi di design all'interno di un'interfaccia" tag: label: Fondamenti #C addonClasses: mt-3 text-uppercase @@ -90,11 +90,11 @@ components: text: | Le dimensioni di un elemento sono misure che **definiscono lo spazio occupato** in altezza e in larghezza da un elemento. - Definendo dimensioni standard, infatti, è possibile garantire una coerenza visiva all'interno di un'interfaccia. + L'uso di dimensioni standard garantisce coerenza visiva e armonia, migliorando non solo l'aspetto estetico dell'interfaccia ma anche la sua usabilità complessiva. Le misure sono espresse in **percentuale** perché possono essere relative a: - la dimensione dello schermo (_viewport_); - - la dimensione del contenitore in cui è inserito l'elemento, come le colonne della griglia. + - la dimensione del contenitore in cui è inserito l'elemento, ad esempio le colonne della griglia. - name: TextImageCta title: Come usarle @@ -102,9 +102,9 @@ components: text: | È possibile utilizzare misure diverse per uno stesso elemento in base a specifiche necessità di layout. - Ad esempio, un pulsante può avere una dimensione `100%` su dispositivi mobile perché essere facilmente cliccabile, mentre una dimensione ridotta su dispositivi più grandi dove lo spazio a disposizione è maggiore. + Ad esempio, un pulsante può avere una dimensione `100%` su dispositivi mobili per facilitare l'interazione in uno spazio ridotto, mentre una dimensione inferiore su dispositivi più grandi dove invece lo spazio a disposizione per interagire con gli elementi visibili a schermo è maggiore. - Queste misure si **adattano alla griglia**, ma non la sostituiscono in quanto non prevedono intercolonna e margini laterali. + Queste misure si **adattano alla griglia** ma non la sostituiscono, in quanto non prevedono intercolonna e margini laterali. ctas: - label: Vai al fondamento Griglia From 69ccb4299b6aa340c11ae27512e392ce9289d918 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Fri, 1 Dec 2023 17:26:50 +0100 Subject: [PATCH 4/9] docs: improvement Co-authored-by: Daniela Iozzo --- src/data/content/design-system/fondamenti/dimensioni.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/content/design-system/fondamenti/dimensioni.yaml b/src/data/content/design-system/fondamenti/dimensioni.yaml index 9ec391e165..c32f7a14eb 100644 --- a/src/data/content/design-system/fondamenti/dimensioni.yaml +++ b/src/data/content/design-system/fondamenti/dimensioni.yaml @@ -88,7 +88,7 @@ components: title: A cosa servono headingLevel: 2 text: | - Le dimensioni di un elemento sono misure che **definiscono lo spazio occupato** in altezza e in larghezza da un elemento. + Le dimensioni di un elemento di design sono misure che **definiscono lo spazio occupato** in altezza e in larghezza dall'elemento, le sue proporzioni e la sua disposizione nello spazio complessivo dell'interfaccia. L'uso di dimensioni standard garantisce coerenza visiva e armonia, migliorando non solo l'aspetto estetico dell'interfaccia ma anche la sua usabilità complessiva. From 985985e5c0d28d6e6652870b15a8548a7ea68344 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Fri, 1 Dec 2023 17:28:15 +0100 Subject: [PATCH 5/9] docs: improvement Co-authored-by: Daniela Iozzo --- src/data/content/design-system/fondamenti/dimensioni.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/content/design-system/fondamenti/dimensioni.yaml b/src/data/content/design-system/fondamenti/dimensioni.yaml index c32f7a14eb..29ffceb7b2 100644 --- a/src/data/content/design-system/fondamenti/dimensioni.yaml +++ b/src/data/content/design-system/fondamenti/dimensioni.yaml @@ -100,7 +100,7 @@ components: title: Come usarle headingLevel: 2 text: | - È possibile utilizzare misure diverse per uno stesso elemento in base a specifiche necessità di layout. + Puoi usare misure diverse per uno stesso elemento in base a specifiche necessità di layout e per garantire che gli elementi di design siano sempre ottimizzati in base alla risoluzione dello schermo e al tipo di dispositivo. Ad esempio, un pulsante può avere una dimensione `100%` su dispositivi mobili per facilitare l'interazione in uno spazio ridotto, mentre una dimensione inferiore su dispositivi più grandi dove invece lo spazio a disposizione per interagire con gli elementi visibili a schermo è maggiore. From 1ae9195a10b61027a077db55682d90626e9a5a70 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Mon, 4 Dec 2023 17:29:33 +0100 Subject: [PATCH 6/9] docs: improvement Co-authored-by: Daniela Iozzo --- src/data/content/design-system/fondamenti/dimensioni.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/content/design-system/fondamenti/dimensioni.yaml b/src/data/content/design-system/fondamenti/dimensioni.yaml index 29ffceb7b2..90489f0837 100644 --- a/src/data/content/design-system/fondamenti/dimensioni.yaml +++ b/src/data/content/design-system/fondamenti/dimensioni.yaml @@ -90,7 +90,7 @@ components: text: | Le dimensioni di un elemento di design sono misure che **definiscono lo spazio occupato** in altezza e in larghezza dall'elemento, le sue proporzioni e la sua disposizione nello spazio complessivo dell'interfaccia. - L'uso di dimensioni standard garantisce coerenza visiva e armonia, migliorando non solo l'aspetto estetico dell'interfaccia ma anche la sua usabilità complessiva. + L'uso di dimensioni standard garantisce coerenza visiva e armonia, migliorando non solo l'aspetto estetico dell'interfaccia ma anche la sua usabilità generale. Le misure sono espresse in **percentuale** perché possono essere relative a: - la dimensione dello schermo (_viewport_); From b013cd92e3d5f54695dca33e53a3deb55f3d662d Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Tue, 5 Dec 2023 19:26:29 +0100 Subject: [PATCH 7/9] docs: improvement Co-authored-by: Daniela Iozzo --- src/data/content/design-system/fondamenti/dimensioni.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/content/design-system/fondamenti/dimensioni.yaml b/src/data/content/design-system/fondamenti/dimensioni.yaml index 90489f0837..96c75a152a 100644 --- a/src/data/content/design-system/fondamenti/dimensioni.yaml +++ b/src/data/content/design-system/fondamenti/dimensioni.yaml @@ -92,7 +92,7 @@ components: L'uso di dimensioni standard garantisce coerenza visiva e armonia, migliorando non solo l'aspetto estetico dell'interfaccia ma anche la sua usabilità generale. - Le misure sono espresse in **percentuale** perché possono essere relative a: + Le misure delle dimensioni sono espresse in **percentuale** e possono essere relative a: - la dimensione dello schermo (_viewport_); - la dimensione del contenitore in cui è inserito l'elemento, ad esempio le colonne della griglia. From 058fcfe1c2e398965da0df843227a3adf525f4e0 Mon Sep 17 00:00:00 2001 From: Daniele T Date: Thu, 14 Dec 2023 17:18:43 +0100 Subject: [PATCH 8/9] feat: enhance fondamenti list --- .../content/design-system/fondamenti.yaml | 156 +++--------------- 1 file changed, 22 insertions(+), 134 deletions(-) diff --git a/src/data/content/design-system/fondamenti.yaml b/src/data/content/design-system/fondamenti.yaml index 69a9d3556a..ee55129363 100644 --- a/src/data/content/design-system/fondamenti.yaml +++ b/src/data/content/design-system/fondamenti.yaml @@ -65,173 +65,92 @@ components: showTags: false noSpace: true paddingX: true - # idInput: fundamentCardsInput # < XXX ENABLE TO ENABLE FILTER INPUT FORM ON FRONT END col2: true - # button: - # btnStyle: outline-secondary justify-content-center w-100 - # label: Filtra - # iconRight: true - # icon: - # icon: sprites.svg#it-funnel - # color: secondary - # addonClasses: ms-1 flex-shrink-0 cards: - title: Princìpi e intenzioni - # img: /images/600x400.png - # alt: Descrizione immagine - imgRatio: 16x9 - imgPlaceholder: false url: "principi-e-intenzioni/" fullHeight: true rounded: true - text: | - Il design system del Paese, open source e in continuo aggiornamento, rende la progettazione di servizi pubblici digitali più efficiente. Ecco come contribuisce a una PA più vicina, semplice e utile per le persone e come ne supportiamo l'adozione. - # tags: [Progettazione servizi,Accessibilità,Cultura progettuale,Design system] + text: "Il design system del Paese, open source e in continuo aggiornamento, rende la progettazione di servizi pubblici digitali più efficiente. Ecco come contribuisce a una PA più vicina, semplice e utile per le persone e come ne supportiamo l'adozione." - title: Accessibilità - # img: /images/600x400.png - # alt: Descrizione immagine - imgRatio: 16x9 - imgPlaceholder: false url: "accessibilita/" fullHeight: true rounded: true - text: | - Progettare e sviluppare interfacce digitali significa decidere continuamente chi includere, o escludere, dall’esperienza di utilizzo e fruizione, a seconda delle proprie caratteristiche, conoscenze, capacità o condizioni di disabilità, temporanee o meno. - # tags: [Accessibilità,Design system,Inclusione] + text: "Progettare e sviluppare interfacce digitali significa decidere continuamente chi includere, o escludere, dall’esperienza di utilizzo e fruizione, a seconda delle proprie caratteristiche, conoscenze, capacità o condizioni di disabilità, temporanee o meno." - title: Design tokens - # img: /images/600x400.png - # alt: Descrizione immagine - imgRatio: 16x9 - imgPlaceholder: false url: "design-tokens/" fullHeight: true rounded: true - text: | - Le scelte visive strutturali per la progettazione e lo sviluppo delle interfacce digitali. - # tags: [Accessibilità,Design system,Inclusione] + text: "Le scelte visive strutturali per la progettazione e lo sviluppo delle interfacce digitali." - title: Tono di voce - # img: /images/600x400.png - # alt: Descrizione immagine - imgRatio: 16x9 - imgPlaceholder: false url: "tono-di-voce/" fullHeight: true rounded: true - text: | - Una Pubblica Amministrazione che mette le persone al centro sa parlare con una voce semplice, chiara ed empatica. In questo fondamento trovi le indicazioni per dare al tuo sito o servizio pubblico digitale un’identità verbale coerente e modularne il tono in base alle emozioni degli utenti. - # tags: [Contenuti e linguaggio,Design system] + text: "Una Pubblica Amministrazione che mette le persone al centro sa parlare con una voce semplice, chiara ed empatica. In questo fondamento trovi le indicazioni per dare al tuo sito o servizio pubblico digitale un’identità verbale coerente e modularne il tono in base alle emozioni degli utenti." - title: Linguaggio - # img: /images/600x400.png - # alt: Descrizione immagine - imgRatio: 16x9 - imgPlaceholder: false url: "linguaggio/" fullHeight: true rounded: true - text: | - Il linguaggio è un elemento cruciale dell’esperienza utente di un sito o servizio digitale. In questo fondamento trovi i punti di riferimento per progettare contenuti chiari, inclusivi, efficaci e pensati per andare incontro alle esigenze delle persone. - # tags: [Content design,Design system] + text: "Il linguaggio è un elemento cruciale dell’esperienza utente di un sito o servizio digitale. In questo fondamento trovi i punti di riferimento per progettare contenuti chiari, inclusivi, efficaci e pensati per andare incontro alle esigenze delle persone." - title: Microtesti - # img: /images/600x400.png - # alt: Descrizione immagine - imgRatio: 16x9 - imgPlaceholder: false url: "microtesti/" fullHeight: true rounded: true - text: | - Scrivere per la user experience significa progettare testi e microtesti dedicati alle interfacce, per rendere l’esperienza delle persone semplice, fluida e coerente con l’ecosistema di prodotto o di servizio. - # tags: [Content design,Design system] + text: "Scrivere per la user experience significa progettare testi e microtesti dedicati alle interfacce, per rendere l’esperienza delle persone semplice, fluida e coerente con l’ecosistema di prodotto o di servizio." - title: Versionamento - # img: /images/600x400.png - # alt: Descrizione immagine - imgRatio: 16x9 - imgPlaceholder: false url: "versionamento/" fullHeight: true rounded: true - text: | - Usiamo il versionamento semantico su ogni risorsa del design system del Paese. - # tags: [Organizzazione,Design system] + text: "Usiamo il versionamento semantico su ogni risorsa del design system del Paese." - title: Colori - # img: /images/600x400.png - # alt: Descrizione immagine - imgRatio: 16x9 - imgPlaceholder: false url: "colori/" fullHeight: true rounded: true - text: | - Usiamo un sistema di colori per garantire coerenza visiva a siti e servizi e orientare le persone verso azioni e informazioni importanti, rendendo i contenuti accessibili a tutti. - # tags: [Contenuti e linguaggio,Progettazione grafica,Design system] + text: "Usiamo un sistema di colori per garantire coerenza visiva a siti e servizi e orientare le persone verso azioni e informazioni importanti, rendendo i contenuti accessibili a tutti." - title: Tipografia - # img: /images/600x400.png - # alt: Descrizione immagine - imgRatio: 16x9 - imgPlaceholder: false url: "tipografia/" fullHeight: true rounded: true - text: | - I caratteri, gli stili e le regole tipografiche da usare per presentare i contenuti di un'interfaccia digitale in modo chiaro, leggibile ed efficace. - # tags: [Contenuti e linguaggio,Progettazione grafica,Design system] + text: "I caratteri, gli stili e le regole tipografiche da usare per presentare i contenuti di un'interfaccia digitale in modo chiaro, leggibile ed efficace." - title: Griglia - # img: /images/600x400.png - # alt: Descrizione immagine - imgRatio: 16x9 - imgPlaceholder: false url: "griglia/" fullHeight: true rounded: true - text: | - La griglia di impaginazione rappresenta la struttura invisibile che permette di organizzare i contenuti della pagina. - # tags: [Contenuti e linguaggio,Progettazione Grafica,Design system] + text: "La griglia di impaginazione rappresenta la struttura invisibile che permette di organizzare i contenuti della pagina." - title: Spaziature - # img: /images/600x400.png - # alt: Descrizione immagine - imgRatio: 16x9 - imgPlaceholder: false url: "spaziature/" fullHeight: true rounded: true - text: | - Le spaziature hanno il ruolo fondamentale di creare un layout dalla struttura armonica e di definire gli intervalli di spazio fra gli elementi della pagina. Un uso coerente ed equilibrato delle spaziature contribuisce a migliorare la leggibilità, l'usabilità e l'aspetto generale di un'interfaccia. - # tags: [Contenuti e linguaggio,Progettazione Grafica,Design system] - + text: "Le spaziature hanno il ruolo fondamentale di creare un layout dalla struttura armonica e di definire gli intervalli di spazio fra gli elementi della pagina. Un uso coerente ed equilibrato delle spaziature contribuisce a migliorare la leggibilità, l'usabilità e l'aspetto generale di un'interfaccia." + - title: Ombre - # img: /images/600x400.png - # alt: Descrizione immagine - imgRatio: 16x9 - imgPlaceholder: false url: "ombre/" fullHeight: true rounded: true - text: | - Le ombre aggiungono profondità, contrasto ed enfasi visiva ai componenti, contribuendo a migliorare l'usabilità e l'aspetto generale dell'interfaccia. - # tags: [Contenuti e linguaggio,Progettazione Grafica,Design system] - + text: "Le ombre aggiungono profondità, contrasto ed enfasi visiva ai componenti, contribuendo a migliorare l'usabilità e l'aspetto generale dell'interfaccia." + - title: Bordi e raggi - # img: /images/600x400.png - # alt: Descrizione immagine - imgRatio: 16x9 - imgPlaceholder: false url: "bordi-e-raggi/" fullHeight: true rounded: true - text: | - I bordi e i raggi sono elementi fondamentali che influenzano l'aspetto visivo degli oggetti e componenti di un'interfaccia. - # tags: [Contenuti e linguaggio,Progettazione Grafica,Design system] - + text: "I bordi e i raggi sono elementi fondamentali che influenzano l'aspetto visivo degli oggetti e componenti di un'interfaccia." + + - title: Dimensioni + url: "dimensioni/" + fullHeight: true + rounded: true + text: "Le misure che definiscono lo spazio occupato dagli elementi di design all'interno di un'interfaccia." + # /////////// EDITORIAL CONTENTS FROM HERE //////////// sectionsEditorial: - fullColumn: true @@ -240,34 +159,3 @@ components: - name: ImgFull img: /images/design-system/fondamenti.jpg alt: "" - - sectionsEditorial2: - - full: true - noSpace: false - paddingLeft: true - components: - - name: TextImageCta - noSpace: true - # text: | - # Puoi contribuire anche tu all'evoluzione del design system del Paese proponendo suggerimenti utili: se ti occupi di design, puoi utilizzare lo UI Kit e i design token per prototipare in alta fedeltà; se ti interessi di sviluppo, fai riferimento al framework di sviluppo Bootstrap Italia. - # ctas: - # - label: "Vai allo UI Kit nella community Figma " #C - # url: https://www.figma.com/community/file/1105848677422572920 #M - # blank: true #M #C true if new tab for external links - # icon: - # icon: sprites.svg#it-figma #C #I #it-arrow-right | it-external-link for external links - # color: primary - # align: middle - # hidden: true - # size: sm - # addonClasses: ms-2 - # - label: "Vai a Bootstrap Italia su GitHub " #C - # url: https://github.com/italia/bootstrap-italia #M - # blank: true #M #C true if new tab for external links - # icon: - # icon: sprites.svg#it-github #C #I #it-arrow-right | it-external-link for external links - # color: primary - # align: middle - # hidden: true - # size: sm - # addonClasses: ms-2 From d3544c15941d6829f7af4050aeaadf4ff14c82cc Mon Sep 17 00:00:00 2001 From: Daniele T Date: Thu, 14 Dec 2023 17:18:50 +0100 Subject: [PATCH 9/9] fix: pathname --- src/data/content/design-system/fondamenti/dimensioni.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/content/design-system/fondamenti/dimensioni.yaml b/src/data/content/design-system/fondamenti/dimensioni.yaml index 96c75a152a..e0b8bafcae 100644 --- a/src/data/content/design-system/fondamenti/dimensioni.yaml +++ b/src/data/content/design-system/fondamenti/dimensioni.yaml @@ -11,7 +11,7 @@ seo: image: null twitterImage: null canonical: null - pathname: /design-system/fondamenti/bordi-e-raggi/ + pathname: /design-system/fondamenti/dimensioni/ components: hero: