linee-guida-di-design.yaml

# INSTRUCTIONS
# folder structure:
# levelX.yaml < contents and settings
# levelX/ < folder with childrens
# important: each level has its dedicated template, from level1 to level4
#
# comments:
# #C to locate all editable content
# #M for links/navigation
# #I for images/media
# #AUTO for parts that will soon be automated, preferably
#
# comment with # to hide something
# delete with caution

# ————————————————————————————————————————————
# CREATEPAGE GATSBY
# ————————————————————————————————————————————
metadata:
  template:
    name: level2


# ————————————————————————————————————————————
# SEO, OPENGRAPH
# ————————————————————————————————————————————
seo:
  name: Linee guida di design - Designers Italia #C REMIND "- Designers Italia" #AUTO
  description: La norma che devi rispettare in ogni fornitura di siti e servizi digitali per la Pubblica Amministrazione #C
  image: null #I
  canonical: null
  pathname: /norme-e-riferimenti/linee-guida-di-design/ #M

# ————————————————————————————————————————————
# NAV - PRE FOOTER
# ————————————————————————————————————————————
# navPreFooter:
#   navOtherPrevNext:
#     prev:
#       label: Titolo sorella precedente #C
#       url: "#" #M
#       # image: /images/link-custom-icon.svg #I
#       blank: false
#       specular: false
#       icon:
#         icon: "sprites.svg#it-arrow-left"
#         size: "sm"
#         align: "middle"
#         color: "primary"
#         hidden: true
#         addonClasses: flex-shrink-0 me-3
#     next:
#       label: Titolo sorella successiva #C
#       url: "#" #M
#       # image: /images/link-custom-icon.svg #I
#       blank: false
#       specular: true
#       icon:
#         icon: "sprites.svg#it-arrow-right"
#         size: "sm"
#         align: "middle"
#         color: "primary"
#         hidden: true
#         addonClasses: flex-shrink-0 ms-3

# ————————————————————————————————————————————
# CONTENT
# ————————————————————————————————————————————
components:

  # ///////////////////
  # HERO
  # ///////////////////
  hero:
    background: light
    title: Linee guida di design #C
    subtitle: La norma che devi rispettare in ogni fornitura di siti e servizi digitali per la Pubblica Amministrazione #C
    tag:
        label: Norme #C
        addonClasses: mt-3 text-uppercase
    pretext:
      icon:
        icon: sprites.svg#it-help-circle
        size: sm
      text: In breve
    text: | #C
      Le linee guida rappresentano le regole tecniche di riferimento per **orientare la progettazione e la realizzazione di siti e servizi pubblici digitali**, valorizzando l’usabilità e un approccio progettuale che mette le persone al centro.
    # img: /images/400x300.png #I
    # alt: alt lorem ipsum #C
    imgRatio: 4x3

    # KANGAROO: METADATA
    kangaroo:
      id: kangarooHero
      titleSr: Metadati e link per approfondire
      tagsLabel: Parliamo di
      color: secondary
      icon:
        icon: sprites.svg#it-horn
        size: sm
        color: secondary
      tags: [Normativa,Linee guida,Manuale operativo]

     # KANGAROO: CHILDREN SHORTCUTS
      dropdown:
        btnId: dropdownKang
        button:
          addonStyle: dropdown-toggle btn-dropdown
          label: Scopri i requisiti #C
          iconRight: true
          icon:
            icon: sprites.svg#it-expand
            size: sm
            color: primary
            addonClasses: icon-expand ms-2
        list:
          listItems: #AUTO
            - url: "requisito-4-1/" #M
              label: "4.1. Accessibilità" #C
            - url: "requisito-4-2/" #M
              label: "4.2. Affidabilità, trasparenza e sicurezza" #C
            - url: "requisito-4-3/" #M
              label: "4.3. Semplicità di consultazione ed esperienza d'uso" #C
            - url: "requisito-4-4/" #M
              label: "4.4. Monitoraggio dei servizi" #C
            - url: "requisito-4-5/" #M
              label: "4.5. Interfaccia utente" #C
            - url: "requisito-4-6/" #M
              label: "4.6. Integrazione piattaforme abilitanti" #C
            - url: "requisito-4-7/" #M
              label: "4.7. Licenze" #C
            - url: "requisito-4-8/" #M
              label: "4.8. Attuazione" #C

  # ///////////////////
  # SECTION EDITORIAL
  # ///////////////////
  sectionsEditorial:

    # —
    # IMG FULL COVER
    # —
    # - menu: false #TOGGLE RIGHT SECTION INDEX
    #   background: null
    #   full: true
    #   noSpace: true
    #   components:
    #     # IMG
    #     - name: ImageIcons
    #       image: /images/image-icons-fullwidth.jpg #I
    #       alt: Descrizione immagine grande #C

    # —
    # EDITORIAL #C #I
    # —
    - title: Progettare a norma di legge
      background: null
      menu: false
      centered: true
      text: | #C
        Le Linee guida di design garantiscono che l'accesso a servizi semplici e inclusivi sia un diritto per tutte le persone
      components:

        # TXT BLOCK
        - name: TextImageCta
          title: "La stella polare della progettazione per la PA" #C
          noSpace: true
          text: | #C
            Orientare la progettazione, la realizzazione e la manutenzione di siti e servizi pubblici digitali, con particolare attenzione all’usabilità e alla persona: sono questi gli obiettivi delle Linee guida di design per i siti internet e i servizi digitali della Pubblica Amministrazione, **emesse ai sensi dell’articolo 53, comma 1 ter - Siti internet delle pubbliche amministrazioni del Codice dell’amministrazione digitale (Cad)**.
          moreButton: Leggi di più
          moreButtonClose: Chiudi
          moreText: | #C
            Il documento è frutto del lavoro congiunto tra AGID e il Dipartimento per la trasformazione digitale, arricchito da una consultazione pubblica e da un dialogo costruttivo con la Conferenza Unificata e ANCI.

            Le Linee guida di design costituiscono uno **strumento funzionale alla realizzazione dei [progetti di miglioramento dei servizi pubblici previsti dal PNRR](https://padigitale2026.gov.it/misure/)**, cui sono destinati importanti investimenti.

            In base alle norme ISO/IEC Directives, Part 3 per la stesura dei documenti tecnici, le Linee Guida di design ti forniscono **le indicazioni che devi obbligatoriamente rispettare** per la realizzazione di siti internet e servizi digitali della PA, **quelle opzionali** e **quelle per cui ti è richiesta un’attenta valutazione**.

  highlightCards:
    id: requisiti
    title: Esplora i requisiti #C
    text: Scopri le schede informative che ti aiutano a rispettare i requisiti previsti dalle Linee guida, grazie alle indicazioni del Manuale operativo, le risorse per progettare e i modelli #C
    col4: false
    noSpace: true
    nopadtop: false
    hasCustomCols: true
    background: light

    # CARDS
    cards: # AUTO?

      # CARD CHILDREN
      - title: 4.1. Accessibilità #C
        text: | #C
          **Finalità**: rendere accessibili a tutti gli utenti il contenuto, la struttura e il comportamento degli strumenti informatici, secondo i requisiti di legge.
        titleSmall: false
        fullHeight: true
        # noShadow: true
        customCol: col-lg-9
        url: "requisito-4-1/" #M
        rounded: true
        # tag:
        #   label: Design standard #C

      # CARD CHILDREN
      - title: 4.2. Affidabilità, trasparenza e sicurezza #C
        text: | #C
          **Finalità**: progettare e sviluppare servizi digitali che garantiscano la trasparenza delle informazioni e la sicurezza, nel rispetto della normativa unionale e nazionale in materia di protezione dei dati personali.
        titleSmall: false
        fullHeight: true
        # noShadow: true
        customCol: col-lg-9
        url: "requisito-4-2/" #M
        rounded: true
        # tag:
        #   label: Design standard #C

       # CARD CHILDREN
      - title: 4.3. Semplicità di consultazione ed esperienza d’uso #C
        text: | #C
          **Finalità**: progettare, realizzare e mantenere siti internet e servizi digitali utili e facili da usare, secondo una metodologia di progettazione centrata sull’utente.
        titleSmall: false
        fullHeight: true
        # noShadow: true
        customCol: col-lg-9
        url: "requisito-4-3/" #M
        rounded: true
        # tag:
        #   label: Design standard #C

       # CARD CHILDREN
      - title: 4.4. Monitoraggio dei servizi #C
        text: | #C
          **Finalità**: analizzare e migliorare l’esperienza d’uso dei siti/servizi digitali mediante la rilevazione qualitativa e quantitativa dei dati di fruizione.
        titleSmall: false
        fullHeight: true
        # noShadow: true
        customCol: col-lg-9
        url: "requisito-4-4/" #M
        rounded: true
        # tag:
        #   label: Design standard #C

       # CARD CHILDREN
      - title: 4.5. Interfaccia utente #C
        text: | #C
          **Finalità**: mettere a disposizione interfacce utenti semplici da utilizzare.
        titleSmall: false
        fullHeight: true
        # noShadow: true
        customCol: col-lg-9
        url: "requisito-4-5/" #M
        rounded: true
        # tag:
        #   label: Design standard #C

       # CARD CHILDREN
      - title: 4.6. Integrazione delle piattaforme abilitanti #C
        text: | #C
          **Finalità**: prevedere un’esperienza d’uso comune alle diverse procedure on line.
        titleSmall: false
        fullHeight: true
        # noShadow: true
        customCol: col-lg-9
        url: "requisito-4-6/" #M
        rounded: true
        # tag:
        #   label: Design standard #C

       # CARD CHILDREN
      - title: 4.7. Licenze #C
        text: | #C
          **Finalità**: privilegiare l’applicazione di una licenza aperta ai contenuti.
        titleSmall: false
        fullHeight: true
        # noShadow: true
        customCol: col-lg-9
        url: "requisito-4-7/" #M
        rounded: true
        # tag:
        #   label: Design standard #C

        # CARD CHILDREN
      - title: 4.8. Attuazione #C
        text: | #C
          **Finalità**: assicurarsi che le attività di progettazione, sviluppo e manutenzione di siti e servizi digitali rispondano alle Linee guida di design per i siti internet e i servizi digitali della PA.
        titleSmall: false
        fullHeight: true
        # noShadow: true
        customCol: col-lg-9
        url: "requisito-4-8/" #M
        rounded: true
        # tag:
        #   label: Design standard #C


  # ///////////////////
  # SECTION EDITORIAL
  # ///////////////////
  sectionsEditorial2:
    # —
    # EDITORIAL #C #I
    # —
    - #title: Progettare a norma di legge
      background: null
      menu: false
      centered: true
      noSpace: false
      components:
        - name: TextImageCta
          title: "I requisiti enunciati dalle Linee guida" #C
          headingLevel: 2
          text: | #C
            **Semplicità di consultazione ed esperienza d’uso** costituiscono uno snodo cruciale per l’efficacia dei prodotti digitali della PA: siti internet e servizi digitali utili e facili da usare, progettati secondo una metodologia centrata sull’utente, sono un diritto per tutte le persone, che possono così usufruirne in modo semplice e chiaro, accrescendone la diffusione.

            Tra gli altri requisiti, grande valore è attribuito anche alla **trasparenza** e alla **sicurezza delle informazioni**, all’**accessibilità**, al **monitoraggio dei servizi**, alle **interfacce utente**, all’**integrazione delle piattaforme abilitanti** e alle **licenze**.

            Per l’implementazione di queste regole tecniche, hai a disposizione diversi strumenti: i **modelli**, i **kit** e il **Manuale operativo di design**, una guida pratica dedicata alla PA e ai suoi fornitori per raggiungere gli obiettivi definiti nelle Linee guida.
          ctas:
          - label: Linee guida di design su Docs Italia #C
            screenReaderText: " (si apre in una nuova finestra)" #C
            url: https://docs.italia.it/italia/design/lg-design-servizi-web/it/versione-corrente/index.html #M
            blank: true #M #C true if new tab for external links
            icon:
              icon: sprites.svg#it-external-link #C #I #it-arrow-right | it-external-link for external links
              color: primary
              align: middle
              hidden: true
              size: sm
              addonClasses: ms-2