realizzare.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: Realizzare - Designers Italia #C REMIND "- Designers Italia" #AUTO
  description: "Realizza l'interfaccia utente: costruisci e sviluppa il touchpoint digitale di un servizio usando il design system .italia." #C
  image: null #I
  canonical: null
  pathname: /risorse-per-progettare/realizzare/ #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: Realizzare #C
    subtitle: "Realizza l'interfaccia utente: costruisci e sviluppa il touchpoint digitale del servizio usando il design system .italia" #C
    tag:
        label: Fase di progettazione  #C
        addonClasses: mt-3 text-uppercase
    pretext:
      icon:
        icon: sprites.svg#it-help-circle
        size: sm
      text: In breve
    text: | #C
      Con la fase di realizzazione **implementi l’interfaccia utente del servizio digitale**, soffermandoti su aspetti di coerenza, contenuti e accessibilità dell'esperienza. I kit di questa fase ti aiutano a realizzare prototipi ad alta fedeltà dell’interfaccia e a sviluppare la parte di front-end tramite indicazioni, componenti e codice già validati.
    img: /images/risorse-per-progettare/icons/realizzare-large.svg #I
    alt: "" #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: [Design system,Interfaccia utente,Sviluppo interfaccia,Esperienza utente]

      # KANGAROO: CHILDREN SHORTCUTS
      dropdown:
        btnId: dropdownKang
        button:
          addonStyle: dropdown-toggle btn-dropdown
          label: Scopri i kit di questa fase #C
          iconRight: true
          icon:
            icon: sprites.svg#it-expand
            size: sm
            color: primary
            addonClasses: icon-expand ms-2
        list:
          listItems: #M
            - url: "costruzione-interfaccia/"
              label: Costruzione interfaccia #C
            - url: "sviluppo-interfaccia/"
              label: Sviluppo interfaccia #C

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


  # ///////////////////
  # HIGHLIGHT WITH CARDS
  # ///////////////////
  highlightCards:
    id: HC1
    title: Esplora e usa i kit di design #C
    text: #C
    col4: false
    noSpace: false

    # CARDS
    cards: # AUTO?

      # CARD CHILDREN
      - title: Costruzione interfaccia #C
        imgRatio: 16x9
        iconImg: /images/risorse-per-progettare/icons/kit_UI.svg #I
        iconImgAlt: "" #C
        text: "Costruisci l’interfaccia di un servizio digitale con uno stile grafico semplice e coerente" #C
        titleSmall: false
        fullHeight: true
        url: "costruzione-interfaccia/" #M
        tag:
          label: Kit di design #C

       # CARD CHILDREN
      - title: Sviluppo interfaccia #C
        imgRatio: 16x9
        iconImg: /images/risorse-per-progettare/icons/kit_webDevelopment.svg #I
        iconImgAlt: "" #C
        text: "Realizza il front-end di un servizio digitale con codice e componenti open source di sviluppo" #C
        titleSmall: false
        fullHeight: true
        url: "sviluppo-interfaccia/" #M
        tag:
          label: Kit di design #C


  # ///////////////////
  # SECTION EDITORIAL
  # ///////////////////
  sectionsEditorial2 :

  #  # —
  #   # 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: "Realizzare l’interfaccia di un sito o un servizio digitale"
      background: null
      menu: false
      centered: true
      # noSpace: true
      text: | #C
        Facilita il design e lo sviluppo di siti e servizi in modo efficace usando le risorse del design system .italia
      components:

        # TXT BLOCK
        - name: TextImageCta
          title: Un'esperienza coerente e inclusiva   #C
          text: | #C
            In questa fase di progettazione, il focus è sulla costruzione del touchpoint digitale attraverso il quale l’utente interagisce con il servizio pubblico. Bisogna letteralmente comporre i blocchi dell’interfaccia utente dal punto di vista grafico, testare e sviluppare il cosiddetto codice ‘front-end’ del servizio. 

            Combinando regole di tipografia, colori, pulsanti, icone e componenti, è possibile realizzare un’interfaccia accessibile e intuitiva, in grado di guidare l’utente a raggiungere il proprio obiettivo. Mantenere uno stile visivo coerente aiuta, inoltre, a fornire alle persone un’esperienza coerente tra le varie pubbliche amministrazioni. Le persone, infatti utilizzano con più efficacia e facilità i percorsi che hanno già imparato a riconoscere.

            Le risorse di questa fase di progettazione, realizzate seguendo le Linee Guida di design per i siti internet e i servizi digitali della Pubblica Amministrazione, forniscono gli strumenti operativi per sviluppare l’interfaccia di un touchpoint digitale. Ci sono a disposizione librerie, template, modelli, componenti e codice open source di sviluppo, che possono poi essere messi a riuso, alimentando le fondamenta del design system .italia.

        # TXT BLOCK
        - name: TextImageCta
          title: Design system .italia   #C
          text: | #C
            Il sito Designers Italia ospita infatti la documentazione del design system del Paese: l'ecosistema di risorse già pronte per il design e lo sviluppo di interfacce semplici e accessibili, a cui fanno riferimento le attività proposte nei kit di questa fase. 

            Design system .italia è il primo design system italiano dedicato al mondo delle pubbliche amministrazioni e dei loro fornitori, la base delle interfacce digitali dei servizi pubblici italiani.
          ctas:
          - label: Vai al design system  #C
            url: "/design-system/" #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