risorse-per-progettare.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: level1
  redirect_from:
    - /kit
  activeLabel: Risorse per progettare

# ————————————————————————————————————————————
# SEO, OPENGRAPH
# ————————————————————————————————————————————
seo:
  name: Risorse per progettare - Designers Italia #C REMIND "- Designers Italia" #AUTO
  description: Strumenti e attività già pronti per creare siti, app e interfacce digitali dei servizi pubblici. #C
  image: https://designers.italia.it/images/risorse-per-progettare/social/risorse-per-progettare.png
  canonical: null
  pathname: /risorse-per-progettare/ #M

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

  # ///////////////////
  # HERO
  # ///////////////////
  hero:
    background: primary
    title: Risorse per progettare #C
    subtitle: Strumenti e attività già pronti per creare siti, app e interfacce digitali dei servizi pubblici #C
    pretext:
      icon:
        icon: sprites.svg#it-help-circle
        size: sm
      text: In breve
    text: | #C
      In questa sezione, trovi i kit per raggiungere gli obiettivi delle cinque fasi di un progetto, da quando lo imposti a quando validi la soluzione progettata. Ogni kit contiene strumenti e attività già testati sul campo per progettare siti, app e interfacce digitali. Riutilizzali quando ne hai bisogno: non serve reinventare la ruota ogni volta.
    img: /images/risorse-per-progettare/icons/risorse-per-progettare.svg #I
    alt: "Il design è un processo iterativo" #C
    imgRatio: 4x3

    # KANGAROO: METADATA
    kangaroo:
      id: metadati-e-link
      titleSr: Metadati e link per approfondire
      tagsLabel: Parliamo di
      color: white
      icon:
        icon: sprites.svg#it-horn
        size: sm
        color: white
      tags: [Progettazione interfaccia, Progettazione servizi, Progettazione contenuti]

      # KANGAROO: CHILDREN SHORTCUTS
      dropdown:
        btnId: dropdownKang
        button:
          addonStyle: dropdown-toggle btn-dropdown
          label: Fasi di un progetto #C
          iconRight: true
          icon:
            icon: sprites.svg#it-expand
            size: sm
            color: white
            addonClasses: icon-expand ms-2
        list:
          listItems: #AUTO
            - url: "organizzare/" #M
              label: "Organizzare" #C
            - url: "comprendere/" #M
              label: "Comprendere" #C
            - url: "progettare/" #M
              label: "Progettare" #C
            - url: "realizzare/" #M
              label: "Realizzare" #C
            - url: "validare/" #M
              label: "Validare" #C

  # ///////////////////
  # INTRO
  # ///////////////////
  sectionIntro:
    section: true
    id: intro
    headingLevel: 2
    title: Progettare è più semplice col nostro approccio di design in cinque fasi #C
    background: null
    text: | #C
      Il design è la disciplina che si occupa di **risolvere problemi complessi**, come quelli modo che coinvolgono molti attori diversi fra loro, come accade nella Pubblica Amministrazione. Le risorse create da Designers Italia, insieme al nostro approccio già testato sul campo, possono aiutarti a **ridurre questa complessità** e progettare servizi per la PA in modo più semplice e rispettando le normative.
      Grazie a un **approccio sistemico, che mette la persona al centro, partecipato, aperto e iterativo** puoi ottimizzare al meglio il design di siti e servizi, individuando soluzioni utili a soddisfare i bisogni di cittadini, pubbliche amministrazioni e fornitori.
    moreButton: Leggi di più
    moreButtonClose: Chiudi
    moreText: | #C
      ### Sistemico
      Per progettare, bisogna **guardare a tutti gli elementi in campo**: non solo le persone che utilizzano un servizio, ma anche tutti gli attori che lo rendono possibile, come le pubbliche amministrazioni e i fornitori. Solo quando si ha una visione complessiva, si può definire il perimetro del progetto, fissare le priorità e progettare come e dove questi attori interagiscono, e quali infrastrutture sono necessarie per farlo.

      ### Con la persona al centro
      Progettare con la persona al centro significa comprenderne le necessità, osservarne i comportamenti, conoscere le sue preferenze e le aspettative rispetto all’esperienza di utilizzo di un servizio. Significa, soprattutto **creare soluzioni che sono realmente adeguate per tutte le persone**, riducendo le disuguaglianze.

      Per farlo, chi progetta deve entrare in contatto con le persone, mettersi nei suoi panni e sospendere il più possibile i propri *bias* (pregiudizi), utilizzando i diversi strumenti di ricerca e validazione disponibili.

      ### Partecipato
      Il modo migliore di entrare in contatto con le persone è coinvolgerle direttamente nelle diverse fasi del progetto. È fondamentale, quindi, individuare i diversi i portatori d’interesse (stakeholder) interni ed esterni alla Pubblica Amministrazione che sono toccati dal servizio e creare le condizioni per facilitare la loro partecipazione, utilizzando diversi strumenti e attività già pronti all’uso.

      Il valore di una progettazione partecipativa non sta solo nelle informazioni che si raccolgono durante il percorso, ma nel processo stesso. **Un processo partecipativo permette alle persone di lavorare alla soluzione dei propri problemi**, generando quel senso d’appartenenza che "olia" tutti gli ingranaggi e crea le condizioni per il successo del progetto.

      ### Aperto
      L’esistenza di Designers Italia è la manifestazione più concreta del nostro approccio aperto. Incoraggiamo, soprattutto in ambito pubblico, la **collaborazione attiva** fra tutti gli attori interessati alla trasformazione digitale della PA, attraverso la condivisione d’informazioni, conoscenze, strumenti e risorse progettuali.

      Come abbiamo già scritto in questa pagina: per migliorare la qualità e usabilità dei servizi pubblici digitali non serve reinventare la ruota ogni volta, ma **si può riutilizzare il lavoro di altre persone** in pieno spirito *open source.*

      ### Iterativo
      **Un progetto di servizi e prodotti digitali non ha mai una vera fine**, perchè l’obiettivo è migliorarli continuamente. Il nostro approccio prevede quindi cicli di pianificazione, analisi, definizione, sviluppo e validazione delle soluzioni, oltre a stabilire **chiari criteri di valutazione per verificare i risultati.** Prototipare, testare e validare non si applicano solo al prodotto finito, ma riguardano tutte le fasi del processo di progettazione.

  # ///////////////////
  # HIGHLIGHTS
  # ///////////////////
  titleText:
    title: Scopri e usa le risorse per progettare #C

  # —
  # HIGHLIGHT LOOP
  # —
  highlightsLoop1 :
    # —
    # HIGHLIGHT OVERLAY ICON
    # —
    - title: Organizzare #C
      id: organizzare
      # img: /images/400x300.png #I
      # alt: "" #C #IF NEED DESCRIBE ALSO THE ICON NOT JUST THE BACKGROUND IMAGE IN THE MAIN ALT
      overlayImg: /images/risorse-per-progettare/icons/organizzare-large.svg #I
      overlayAlt: "" #C
      headingLevel: 3
      background: light # null | light | medium | dark
      big: false
      specular: false
      subtitle: "Organizza il progetto: pianifica le attività e coordina il lavoro dal punto di vista operativo" #C: IF "BIG==TRUE" USE ONLY THIS SUBTITLE, NO TEXT!
      buttons: #C #M
        - label: Esplora i kit per organizzare
          btnStyle: primary
          url: "organizzare/"
          addonStyle: mb-3

    - title: Comprendere #C
      id: comprendere
      # img: /images/400x300.png #I
      # alt: "" #C #IF NEED DESCRIBE ALSO THE ICON NOT JUST THE BACKGROUND IMAGE IN THE MAIN ALT
      overlayImg: /images/risorse-per-progettare/icons/comprendere-large.svg #I
      overlayAlt: "" #C
      headingLevel: 3
      background: null # null | light | medium | dark
      big: false
      specular: false
      subtitle: "Comprendi lo scenario d'uso del servizio: studia il contesto di fruizione con l'analisi e la ricerca utente" #C: IF "BIG==TRUE" USE ONLY THIS SUBTITLE, NO TEXT!
      buttons: #C #M
        - label: Esplora i kit per comprendere
          btnStyle: primary
          url: "comprendere/"
          addonStyle: mb-3

    - title: Progettare #C
      id: progettare
      # img: /images/400x300.png #I
      # alt: "" #C #IF NEED DESCRIBE ALSO THE ICON NOT JUST THE BACKGROUND IMAGE IN THE MAIN ALT
      overlayImg: /images/risorse-per-progettare/icons/progettare-large.svg #I
      overlayAlt: "" #C
      headingLevel: 3
      background: light # null | light | medium | dark
      big: false
      specular: false
      subtitle: "Progetta il servizio immaginando e prototipando l’interazione fra utente e touchpoint" #C: IF "BIG==TRUE" USE ONLY THIS SUBTITLE, NO TEXT!
      buttons: #C #M
        - label: Esplora i kit per progettare
          btnStyle: primary
          url: "progettare/"
          addonStyle: mb-3

    - title: Realizzare #C
      id: realizzare
      # img: /images/400x300.png #I
      # alt: "" #C #IF NEED DESCRIBE ALSO THE ICON NOT JUST THE BACKGROUND IMAGE IN THE MAIN ALT
      overlayImg: /images/risorse-per-progettare/icons/realizzare-large.svg #I
      overlayAlt: "" #C
      headingLevel: 3
      background: null # null | light | medium | dark
      big: false
      specular: false
      subtitle: "Realizza il progetto: costruisci e sviluppa l’interfaccia digitale del servizio usando il design system .italia" #C: IF "BIG==TRUE" USE ONLY THIS SUBTITLE, NO TEXT!
      buttons: #C #M
        - label: Esplora i kit per realizzare
          btnStyle: primary
          url: "realizzare/"
          addonStyle: mb-3

    - title: Validare #C
      id: validare
      # img: /images/400x300.png #I
      # alt: "" #C #IF NEED DESCRIBE ALSO THE ICON NOT JUST THE BACKGROUND IMAGE IN THE MAIN ALT
      overlayImg: /images/risorse-per-progettare/icons/validare-large.svg #I
      overlayAlt: "" #C
      headingLevel: 3
      background: light # null | light | medium | dark
      big: false
      specular: false
      subtitle: "Valida la soluzione ottenuta: scopri come monitorare e valutare le prestazioni" #C: IF "BIG==TRUE" USE ONLY THIS SUBTITLE, NO TEXT!
      buttons: #C #M
        - label: Esplora i kit per validare
          btnStyle: primary
          url: "validare/"
          addonStyle: mb-3