Flora: studio responsive landing page per una pasticceria

La landing page che ho realizzato è dedicata a una pasticceria e ha come obiettivo principale guidare l’utente verso il catalogo dei prodotti e facilitare l'acquisto fisico o online. Per la hero section, ho scelto una visualizzazione a F, seguendo un layout che guida lo sguardo dell’utente dalla call to action principale all’immagine, agevolando la navigazione e mettendo subito in evidenza gli elementi più importanti. L'utente viene accompagnato verso le azioni chiave, come esplorare il catalogo o trovare i contatti della pasticceria.

Per la palette colori della landing page ho utilizzato lo strumento Coolors. Ho iniziato cercando un’immagine d'effetto. Successivamente, ho scelto un colore contrastante, sufficiente per garantire una buona leggibilità, con cui ho realizzato i titoli principali e i pulsanti. Ho optato per un viola perché desideravo mantenere un’atmosfera elegante e un po’ fiabesca, sensazione che l’immagine nella hero section mi trasmetteva. Anche la scelta dei font riflette questa intenzione: ho selezionato un carattere Lora Serif che fosse leggibile ed elegante al contempo, in armonia con il tema.

Sono particolarmente fiera della galleria tridimensionale che ho costruito sfruttando le mie competenze in CSS e JavaScript. In particolare, ho utilizzato il CSS per creare un effetto di prospettiva e profondità, che dona un aspetto 3D alle immagini e rende la galleria visivamente coinvolgente. Il JavaScript, invece, gestisce la rotazione automatica della galleria ogni 3 secondi, creando un movimento fluido e continuo, e controlla l’interazione tramite pulsanti che permettono all’utente di navigare manualmente tra le immagini.

Per le versioni smartphone e iPad della landing page mi sono servita di Photoshop per riadattare l’immagine della hero section a diversi schermi. In particolare, ho lavorato per garantire che l’immagine mantenesse un effetto visivo simile nell’area above the fold su dispositivi con dimensioni e proporzioni differenti.