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 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..e0b8bafcae --- /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 che definiscono lo spazio occupato dagli elementi di design all'interno di un'interfaccia" + image: null + twitterImage: null + canonical: null + pathname: /design-system/fondamenti/dimensioni/ + +components: + hero: + background: null + title: Dimensioni + column: true + 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 + + # 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 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à generale. + + 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. + + - name: TextImageCta + title: Come usarle + headingLevel: 2 + text: | + 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. + + 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/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" 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 0000000000..c4ea8e585b Binary files /dev/null and b/static/images/design-system/fondamenti/sizing-full.png differ 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 0000000000..19a6b575b1 Binary files /dev/null and b/static/images/design-system/fondamenti/sizing-half.png differ 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 0000000000..29c8b0c540 Binary files /dev/null and b/static/images/design-system/fondamenti/sizing-quarter.png differ diff --git a/static/images/design-system/fondamenti/sizing-two-thirds.png b/static/images/design-system/fondamenti/sizing-two-thirds.png new file mode 100644 index 0000000000..8f72ff318d Binary files /dev/null and b/static/images/design-system/fondamenti/sizing-two-thirds.png differ