Come si crea un modale con Adobe Xd?

Innanzi tutto cerchiamo di capire che cos è un modale e perché è importante.

Vediamo la definizione di Wikipedia:

Nella progettazione delle interfacce utente, una finestra modale è una finestra “figlia” che richiede all’utente di interagire con essa prima di ritornare ad operare con la finestra “madre“, impedendo la prosecuzione del flusso di lavoro sulla finestra principale dell’applicazione in esecuzione.

Le finestre modali sono spesso chiamate “finestre pesanti” o dialoghi modali perché spesso la finestra è una finestra di dialogo.

Proviamo a spiegarlo con una definizione più pratica.

Il modale è un componente molto utilizzato per la registrazione o l’accesso (login – sign up) ad un sito web o app mobile.

In tutti i modali di login/sign up sono presenti 2 elementi:

Social Login (con Google e Facebook) e il login con email e password.

Un altro elemento fondamentale del modale di Login/Sign up è l’eventuale recupero della password.

Capita molto spesso che non ricordiamo la password di accesso ad un portale.

È un componente onnipresente nei siti di prenotazione voli/viaggi e in tutti gli e-commerce.

In questo tutorial vi spiego come realizzare un modale (o “pop up”) con Adobe Xd attraverso l’azione “sovrapponi”.

Caricheremo un template grazie ad un plugin e creeremo da 0 un modale con le social login e i campi mail e password

Guarda il tutorial

Vuoi imparare a disegnare un sito web da zero?