Icone animate e micro-animazioni dell'interfaccia

Un set di icone guadagna il suo valore quando si può vedere che una mano lo ha disegnato. Quindi inizio non con le immagini ma con l'interfaccia stessa: la griglia su cui si trova, il peso del carattere, quanto sono affilati o morbidi gli angoli, quali dimensioni delle icone si trovano effettivamente sui tuoi schermi. Da questo nasce un breve foglio di regole — peso della linea, raggio degli angoli, dimensioni ottiche, ritmo delle pennellate — e da quel momento in poi si mantiene in tutto il set. La ventesima icona, disegnata tre mesi dopo, sta accanto alla prima e non sembra un visitatore.

Il movimento che aggiungo è breve e ha un significato. Una rotazione indica che lo schermo è attivo, un segno di spunta indica che il tocco è andato a buon fine, un campo rifiutato indica che non è accettato. Ogni movimento risponde a una domanda che l'utente ha appena posto invece di intrattenerlo mentre aspetta. Lavoro attraverso i tre stati che portano il maggior peso nell'uso reale: caricamento, successo e fallimento. Su di essi ci sono interruttori, caselle di controllo e pulsanti con le loro transizioni premute, attive e disabilitate. Il set è disegnato in entrambi i temi fin dall'inizio, perché una linea che si legge bene su bianco spesso scompare su un pannello scuro.

Consegnare il lavoro a uno sviluppatore è parte del lavoro, non un'appendice. Ricevi le fonti e l'esportazione nei formati adatti alla piattaforma: animazione vettoriale leggera per il web, sprite o movimento guidato dal codice per mobile dove costa meno in peso e batteria. I numeri viaggiano con i file: durata di ogni movimento, curva di easing, ritardo, l'ordine in cui le parti dell'icona prendono vita. Prima della consegna eseguo il set su un dispositivo debole, perché ciò che è fluido su una macchina da lavoro può tremolare su un telefono di tre anni, e un'icona che trema viene letta come un bug.

Cosa include il lavoro:

— uno sguardo all'interfaccia attuale e un foglio di regole: peso della linea, raggi, griglia, dimensioni ottiche;
— un set di icone in uno stile, tema chiaro e tema scuro;
— caricamento, successo e errore come tre movimenti diversi e riconoscibili;
— interruttori, caselle di controllo e pulsanti con transizioni premute, attive e disabilitate;
— fonti e esportazione in formati leggeri per il web e per mobile;
— una specifica per lo sviluppatore: durata, curva, ritardo e ordine di movimento per ogni animazione;
— un test su un dispositivo debole, con i frame persi nominati e corretti;
— l'animazione non sostituisce un suggerimento testuale: lo stato è etichettato anche con una parola, altrimenti il significato del movimento è indovinato;
— effetti lunghi ostacolano un'interfaccia funzionante, quindi la durata rimane entro decimi di secondo;
— niente lampeggiamenti e nessun lampo a contrasto forte.