Guarda la tavola completa
Tre schermate: home desktop, home mobile e menu mobile. Ingrandiscine una alla volta e segui le frecce rosse e verdi.
Apri in Excalidraw ↗2ª CFP informatica · 9 ottobre 2026Dal desktop
Dal desktop
al mobile.
La vostra homepage del ristorante esiste già. Oggi la ripensiamo per il telefono e aggiungiamo una pagina menu.
Prima di aprire l’esempio
Salva il tuo ristorante come file .excalidraw. Poi copia il link dell’esempio e incollalo in una finestra in incognito: evita di aprirlo nella scheda dove stai lavorando, perché potresti sostituire la tua tavola.
Salva il tuo ristorante come file .excalidraw. Poi copia il link dell’esempio e incollalo in una finestra in incognito: evita di aprirlo nella scheda dove stai lavorando, perché potresti sostituire la tua tavola.
Esempio del docente: “Il Ponte — Pizzeria e cucina”.
Stessi contenuti, nuove priorità.
Progettare mobile significa scegliere.
Il progetto da esplorare
Apri una copia modificabile
Scarica il file .excalidraw. In Excalidraw usa ☰ → Apri / Open e selezionalo. Testi, illustrazioni e pulsanti sono modificabili.
Download .excalidraw ↓Proteggi il tuo lavoro: salva prima il tuo file .excalidraw. Per consultare il progetto del docente, copia il link e aprilo in una finestra in incognito. Usa l’incognito anche per provare il file scaricato: il caricamento può sostituire la tavola aperta. Le modifiche alla tua copia non aggiornano il link dell’esempio.
Un’anteprima delle due pagine mobile
Il lavoro di oggi, in quattro passi
Riparti dal tuo ristorante
Conserva nome, colori e stile della homepage desktop che hai già progettato. Crea accanto una schermata stretta e lunga, larga circa 390–430 px. Lascia spazio tra le schermate.
Progetta la home mobile
Metti in alto logo compatto, menu, titolo e pulsante “Guarda il menu”. Riduci il testo e impila i contenuti in una colonna. Usa pulsanti ampi. Disegna una linea tratteggiata dopo il primo schermo e scrivi fuori “Da qui si scorre”.
Aggiungi la pagina menu
Crea una seconda schermata mobile con titolo, categorie e piatti. Ogni piatto deve avere nome, ingredienti e prezzo. Allinea i prezzi e inserisci un collegamento “Torna alla home”.
Collega e controlla
Traccia una freccia dal pulsante “Guarda il menu” alla pagina menu e una per tornare alla home. Falle passare fuori dai contenuti. Controlla leggibilità, spazi e coerenza.
Prima di consegnare
- Ho una home mobile e una pagina menu.
- Il titolo e l’azione principale si vedono subito.
- Ho cambiato disposizione, non solo dimensione.
- Testi, prezzi e pulsanti non si sovrappongono.
- Le due frecce spiegano come andare e tornare.
- Ho salvato il file modificabile con un nome chiaro.
Cosa osservare nell’esempio
Gerarchia: il titolo è più evidente dei dettagli.
Azione: i pulsanti dicono cosa succede.
Coerenza: colori e stile restano gli stessi.
Mobile: le colonne si trasformano.
Contenuti: prezzi e orari aiutano a decidere.
Idee facoltative
Aggiungi un’illustrazione, un’etichetta “Vegetariana” o una piccola mappa. Una pagina chiara vale più di una pagina piena.
Aggiungi un’illustrazione, un’etichetta “Vegetariana” o una piccola mappa. Una pagina chiara vale più di una pagina piena.
Salva e consegna
Salva come Cognome_Ristorante_Mobile.excalidraw. Per mostrarlo anche senza editor, puoi esportare un’immagine da ☰ → Esporta immagine / Export image.