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

The post Creare l’effetto hover con Adobe Xd first appeared on Webdesignerd.

Il componente è un elemento fondamentale per la progettazione e l’interazione di elementi all’interno della tavola.

Gli stati ci permettono di creare interazioni al click o all’Hover sugli elementi.

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

The post Creare Hover e Click con Adobe Xd first appeared on Webdesignerd.