Come si crea l’effetto Hover con Adobe Xd?
In questo video tutorial realizzeremo 3 bottoni con 3 differenti animazioni all’hover.
Faremo un design molto semplice ma efficace e trasformeremo i nostri bottoni in componenti.
Prenderemo ispirazione da Codepen che è una risorsa molto importante per i webdesigner.
A proposito..sai quali sono le risorse che ogni webdesigner dovrebbe conoscere? No? dai un’occhiata a questo video. Ti svelerò quali sono quelle indispensabili (e gratuite).
Ma torniamo al nostro tutorial.
Che cosa è l’hover?
Come saprete l’Hover è un interazione che avviene solo su ambienti desktop ed è lo stato di un componente al passaggio del mouse.
Quando il cursore del mouse passa sopra un link, un immagine o un pulsante che dovrà fare qualcosa (per esempio un cambio di pagina o l’aggiunta di un prodotto nel carrello), quest’ultimo cambierà stato proprio per comunicarci che sta per succedere qualcosa.
Fa tutto parte dell’interaction design ed è fondamentale che un interfaccia web o mobile “parli” con noi nel momento in cui ci aspettiamo qualcosa.
Se vogliamo che il nostro progetto abbia una buona UX è fondamentale occuparsi di questi dettagli, non dobbiamo limitarci unicamente al design statico.
Molto spesso capita che i pulsanti cambino lievemente la tonalità di colore rendendosi più o meno luminosi o brillanti rispetto al colore di partenza.
Efficace ma poco accattivante.
Nel video vi farò vedere come creare un’animazione all’interno del bottone e per farlo impiegherai solamente 5 minuti.
Creeremo 3 effetti chiamati “close“, “fill-up” e “slide“
Ma come si creano con Adobe Xd?
Guarda il video tutorial ed iscriviti al canale di Webdesignerd se vuoi imparare ad utilizzare Adobe Xd in modo professionale.
Vuoi imparare a disegnare un sito web da zero?
Guarda il video corso gratuito che ho realizzato per te! -> Video corso di Web Design con Adobe Xd
Comments