In questo tutorial disegneremo una homepage con Figma*.
Nella fattispecie ci focalizzeremo sulla realizzazione di un carousel automatico.
Che cosa è un carousel e come si realizza con Figma?
Il “carousel” è un componente che ci mostra delle immagini che si alternano con delle interazioni al click o dopo un delay.
Mi spiego meglio.
Vogliamo mostrare 3 immagini nella homepage del nostro sito per comunicare qualcosa.
Ipotizziamo di essere una palestra e vogliamo che i nostri utenti intuiscano dalle immagini che vedono nella homepage, che nella nostra palestra è possibile fare sollevamento pesi, cross fit e calisthenics.
Come faccio a tradurre tutto questo attraverso delle immagini ma senza creare troppa confusione?
Posso mostrare un’immagine alla volta che cambia dopo una certa quantità di tempo che vado a determinare.
Quella quantità di tempo si chiama “delay” ed è una tecnica utilizzata anche nella produzione dei video, nel motion graphic ed ovviamente nel prototyping quando realizziamo siti web e app mobile.
Prima di iniziare il tutorial scarica gli assets a questo link https://www.dropbox.com/sh/unf9x64oid…
Oppure utilizza delle immagini royalty free su Unsplash.com
Realizzeremo insieme il carousel di sfondo, ovvero le immagini che scorrono in automatico.
Questo è il risultato finale ed una volta realizzato creeremo un secondo mockup andando ad aggiungere una forma tra il testo e il carousel di sfondo.
Successivamente andremo a completare il design con l’aggiunta degli altri elementi che la compongono ovvero: la navbar, il tagline, il sottotitolo e la call to action.
Iscriviti al mio canale e impara ad utilizzare Figma e Adobe Xd come un PRO.
*pssss..a proposito di homepage..hai visto il mio articolo dove spiego come puoi realizzare hero section infinite grazie a questo metodo? dai subito un’occhiata! clicca qui –>