Il motion design è una delle componenti che ha acquistato sempre più importanza nelle interfacce utenti (UI) e nell’esperienza utente (UX) in qualsiasi prodotto digitale. L’integrazione di elementi animati in prodotti come applicazioni o siti web, infatti, non serve solo dal punto di vista estetico, ma anche e soprattutto per guidare l’interazione dell’utente, per coinvolgerlo e per comunicare feedback.
Dalle animazioni che accompagnano le transizioni tra schermate o quelle che compaiono col caricamento di una pagina, il motion design fluido e coerente può anche rappresentare un punto di forza di un’app o di un sito, facendolo risaltare rispetto ai concorrenti. Vediamo dunque nel dettaglio che cos’è il motion design e perché lo si usa nello UX e UI design.
Che cos’è il motion design
Il motion design (anche noto come motion graphic design) consiste nel dare movimento agli elementi grafici che compaiono in un prodotto digitale, trasformandoli da statici a sequenze in movimento. Il motion design può essere applicato a qualunque elemento, dai testi alle immagini, dalle icone, ai loghi, ai simboli.
Le radici del motion design affondano nel mondo del cinema e della televisione, e in particolare nella Disney. Frank Thomas e Ollie Johnston, due degli animatori più apprezzati della casa cinematografica che hanno contribuito in modo importante a film come Pinocchio, Bambi e Fantasia, i quali svilupparono i 12 principi fondamentali dell’animazione che descrivono il movimento fisico da riprodurre nelle animazioni.
Questi principi ancora oggi influenzano non solo il cinema, ma anche i prodotti digitali. I designer contemporanei, infatti, hanno rielaborato i principi dell’animazione per applicarli alle interfacce e ai design.
A cosa serve e perché usare il motion design
Le animazioni nel contesto dello UX e UI design svolgono diverse funzioni. Il motion design guida l’utente attraverso la navigazione del prodotto, segnalandogli ad esempio dove cliccare o orientandolo tra le diverse sezioni di un sito o app.
Le microinterazioni – come il feedback visivo quando si clicca un pulsante o un’animazione che segnala il caricamento di una pagina – comunicano all’utente cosa succede o è successo dopo l’azione e ne rendono l’esperienza più gratificante e naturale per l’utente. E a proposito del caricamento, un’animazione accattivante e fluida può aiutare a mascherare eventuali rallentamenti e rende l’attesa meno pesante e più piacevole.
Alcuni esempi di motion design
Ecco alcuni degli esempi più comuni di motion design nei siti web e applicazioni:
- Micro-animazioni: sono quei movimenti quasi impercettibili applicati a pulsanti, immagini, loghi per fornire feedback immediato all’utente, come ad esempio l’hover effect del passaggio col mouse per segnalare che il pulsante è cliccabile
- Transizioni animate: ad esempio il passaggio tra una pagina e l’altra animato come il girare una pagina di libro, così la navigazione diventa più coinvolgente ed aiuta l’utente ad orientarsi
- Caricamento: una delle animazioni maggiormente usata, consiste in effetti o sequenze animate che intrattengono l’utente durante i tempi di attesa rendendola più piacevole
- Navigazione: possono consistere nella chiusura ed apertura fluida dei menu, indicatori di avanzamento ecc.
- Transizioni di contenuto: ad esempio quando si clicca su un’immagine o un video e da miniatura passa a schermo intero senza caricare o aprire un’altra pagina.
Per approfondire
Il motion design non avrà più segreti per grazie al percorso in Digital Graphic Designer per laureati e diplomati di Digital School!
Cosa aspetti? Compila il form, scrivici a digitalschool@uniecampus.it, oppure chiamaci al +39 02 2556 1160! Seguici su Facebook, Instagram e LinkedIn per rimanere sempre aggiornato sull’offerta formativa e su tutti gli eventi!
