SBK Ādaži — design e sviluppo del sito web di un club di basket femminile

Il sito web di SBK Ādaži è il sito di un club di basket femminile, progettato e sviluppato da CREATING.LV. Il club aveva bisogno di un sito che presentasse la squadra e le giocatrici, mostrasse la vita del club attraverso le fotografie e aiutasse le interessate a candidarsi per la squadra o a mettersi in contatto per una collaborazione.

Il sito si rivolge a due gruppi principali: ragazze e donne che vogliono giocare a basket e chi desidera collaborare con il club. Entrambi i gruppi hanno bisogno di un percorso breve dalla prima impressione al contatto. Per questo il sito di questo club di basket non si limita a mostrare la squadra, ma offre anche un modulo di candidatura e un pulsante WhatsApp sempre disponibile.

CREATING.LV ha realizzato il design del sito e lo ha sviluppato: struttura e sezioni, presentazione delle giocatrici, galleria, animazioni, modulo di candidatura con elaborazione lato server e basi della SEO tecnica. Il progetto ha compreso sia il concept visivo sia la programmazione — si tratta di uno sviluppo di sito web completo, fino a un sito che invia le candidature via e-mail.

Il sito web ha cinque sezioni e una pagina 404 dedicata:

• Home — vista iniziale con una cestista e lo slogan “Mūsu laukums. Mūsu spēle.” (“Il nostro campo. Il nostro gioco.”) e la galleria scorrevole delle giocatrici;
• Squadra — le giocatrici una alla volta, con foto, nome e numero;
• Allenamenti e partite — una pagina predisposta per le informazioni su allenamenti e partite;
• Eventi e galleria — fotografie della vita del club;
• Contatti — modalità di contatto, link a WhatsApp, Instagram e Facebook.

La struttura è volutamente breve: dal menu il visitatore arriva subito alla squadra, alle fotografie o ai contatti. La pagina 404 dedicata compare se il visitatore apre un indirizzo inesistente, ad esempio un link digitato male: resta sul sito del club invece di vedere il messaggio di errore standard del server.

Le giocatrici sono presentate sul sito in due modi. Nella home page c’è una galleria orizzontale delle giocatrici che si può scorrere, e ogni scheda si ferma nella propria posizione (scroll-snap). Nella pagina della squadra le giocatrici sono mostrate una alla volta — con foto, nome, numero e un contatore che indica quale giocatrice della squadra è visibile in quel momento.

Entrambe le pagine utilizzano un’unica fonte comune di dati sulle giocatrici. Se la rosa cambia, i dati vanno corretti in un solo punto e le modifiche compaiono sia nella home page sia nella pagina della squadra. In questo modo le due parti del sito non possono mostrare rose diverse.

La sezione “Eventi e galleria” raccoglie fotografie della vita del club tratte da partite e allenamenti. Immagini di proporzioni diverse compongono una griglia varia, e ogni fotografia può essere aperta in una vista ingrandita (lightbox) con una didascalia che spiega che cosa mostra l’immagine.

La sezione “Vuoi giocare a basket? Unisciti a noi!” invita le interessate a entrare nel club. La candidatura avviene in un’unica finestra di dialogo con due modalità — “entrare in squadra” e “proporre una collaborazione”. Così basta un solo modulo per entrambi gli obiettivi, e dalla modalità scelta si capisce di che cosa tratta la candidatura.

Le candidature sono elaborate da uno script PHP sul server, che:

• verifica i campi compilati;
• protegge dallo spam con un campo nascosto (honeypot);
• limita le richieste troppo frequenti;
• invia la candidatura via e-mail tramite SMTP.

La ricezione delle e-mail è stata verificata per entrambe le modalità. Il modulo è completato dalle domande frequenti, da un pulsante WhatsApp fluttuante e dai link agli account Instagram e Facebook del club. Così l’interessata può scegliere il percorso più comodo: compilare il modulo, scrivere un messaggio o leggere prima le risposte alle domande più frequenti.

L’honeypot è un campo del modulo che il visitatore non vede, ma che i programmi automatici di spam di solito compilano; grazie a questo campo lo script può distinguere gli invii automatici da quelli compilati da persone. Il limite di frequenza impedisce di inviare troppe richieste in poco tempo. Entrambe le tecniche servono a evitare che nella casella e-mail arrivino messaggi generati automaticamente e che le candidature vere si perdano tra di essi.

Il design si ispira al campo da basket: le linee del campo, la traiettoria della palla e le zampe di gatto come accento del marchio del club. Toni viola e scuri, accenti arancioni e i font Archivo e Manrope creano un linguaggio visivo unitario che collega nello stesso stile tutte le pagine del sito del club di basket, mentre le fotografie e i numeri delle giocatrici portano questa atmosfera nella presentazione della squadra.

Il tiro della palla è animato con GSAP e l’animazione rispetta l’impostazione di riduzione del movimento che l’utente può attivare sul proprio dispositivo. Questa impostazione viene di solito attivata da persone a cui gli elementi in movimento sullo schermo rendono difficile la lettura o causano disagio, quindi rispettarla fa parte dell’accessibilità del sito. Sullo smartphone il menu si apre con il pulsante del menu, l’header resta visibile anche durante lo scorrimento e il layout si adatta allo schermo stretto.

Il sito web di SBK Ādaži è realizzato con Astro 4 e TypeScript ed è generato staticamente: le pagine vengono preparate in anticipo come file HTML, quindi per mostrare i contenuti non serve un database. Le transizioni tra le pagine sono gestite da Astro View Transitions, per le animazioni si usa GSAP e le candidature sono elaborate da uno script PHP sul server. View Transitions permette di mostrare il passaggio da una pagina all’altra come un’animazione fluida, anche se ogni pagina resta un file HTML separato.

Le basi SEO sono già integrate nel codice:

• ogni pagina ha il proprio titolo, descrizione, indirizzo canonico e dati Open Graph;
• dati strutturati — WebSite, BreadcrumbList, SportsTeam e FAQPage, che descrivono ai motori di ricerca in forma leggibile dalle macchine il sito, la posizione della pagina nella struttura del sito, la squadra sportiva e le domande frequenti con le risposte;
• sitemap, robots.txt e llms.txt — quest’ultimo è una breve descrizione del sito in un file di testo, pensata per gli strumenti di intelligenza artificiale.

Un sito statico non ha un pannello di amministrazione né un database da aggiornare regolarmente, quindi i componenti da mantenere sono meno. L’unica parte dinamica è l’elaborazione delle candidature sul server, protetta dalla verifica dei campi, dall’honeypot e dal limite di frequenza delle richieste. Le modifiche ai contenuti, ad esempio l’aggiunta di una nuova giocatrice, si effettuano nei dati del progetto e poi il sito viene rigenerato; per questo, quando si pianifica un sito di questo tipo, occorre concordare fin dall’inizio chi aggiornerà i contenuti.

Un sito di questo tipo per un club sportivo è adatto a club, squadre e associazioni che devono mostrare la propria rosa e la vita del club e ricevere candidature da nuovi membri o partner. Un sito statico con un unico modulo di candidatura è adatto se i contenuti non devono essere aggiornati ogni giorno. Se il club pubblica spesso notizie in autonomia, si può scegliere anche una soluzione con un sistema di gestione dei contenuti, ad esempio WordPress.

Un sito simile per un club sportivo può servire anche a una squadra di calcio, pallavolo o hockey: dati delle giocatrici e dei giocatori, galleria e modulo di candidatura sono universali, ma il design va creato per ogni club a partire dal suo marchio. Per saperne di più sulla parte visiva e sull’usabilità — web design e UX/UI.

• Sviluppo di siti web
• Web design e UX/UI

Il portfolio riflette la soluzione sviluppata al momento della consegna del progetto. Il sito attuale potrebbe essere cambiato.