Come ho decostruito un semplice progetto di visual design per un corso in Rise 360

Qualche giorno fa ho creato alcune immagini per una pagina di menu di un corso sviluppato con Rise 360. Per questo progetto, ho passato un po’ di tempo a giocare con idee di visual design diverse, e oggi le condividerò assieme alle considerazioni e alle motivazioni che hanno portato a determinate modifiche sul mio progetto.

Inizierò affermando che la maggior parte di queste considerazioni sono soggettive, quindi non c'è una cosa giusta o sbagliata.

Con questo particolare menu, avevo bisogno di un'immagine con proporzioni 10:3. In questo caso, le immagini sono 1280x384. Il l’

è una buona risorsa se è necessario determinare la proporzione di un video o la risoluzione delle immagini.

La proporzione corta ma ampia crea un vincolo impegnativo su ciò che puoi mostrare. Ed è per questo che ho giocato con idee diverse.

A causa dei vincoli dimensionali, ho iniziato con il solo testo. Ma inserendo solo il testo, il contenuto sembra vuoto e poco interessante. Visto che queste immagini facevano parte di uno scenario interattivo, volevo aggiungere un po’ più di personalità.

Ho aggiunto un personaggio al testo. Questo crea una connessione visuale con lo scenario. Volevo inserire anche degli spazi bianchi, per rendere più semplice all’utente scansionare con gli occhi lo schermo. In linea generale il risultato è gradevole e lo spazio bianco è bello in quanto il corso Rise è responsive per la visualizzazione sui dispositivi mobili.

Non ero entusiasta del personaggio inserito in una dimensione così ridotta, ma come notato prima, l'altezza dell'immagine creava alcuni vincoli. Così ho giocato con il personaggio facendolo più grande. Questo significa che l’ho posizionato parzialmente fuori dallo schermo.

Inoltre, ho pensato che l'immagine più grande sarebbe stata troppo “ingombrante” se fosse rimasta a colori. Quindi mi sono sbarazzato del colore e ho schiarito un po’ l'immagine.

Mi piaceva l'immagine grigia e la sovrapposizione del testo. Ma non era gradevole, specialmente nella visualizzazione da mobile con la parte superiore delle testa tagliata.

Il secondo progetto è OK, ma sembra un po’ squilibrato. Il lato destro del menu ha un testo e un forte elemento visivo con il pulsante. È come aver riempito il lato destro, lasciando il lato sinistro un po’ spoglio e strano.

Lasciando il personaggio in scala di grigi, ho giocato con le dimensioni per riempire quel lato del menu. Aggiunge un po’ di peso, ma non mi piaceva il modo in cui i volti erano tagliati.

Mi piace nella visualizzazione da mobile perché riempie la colonna e l'immagine più chiara con i pulsanti più scuri funziona.

In un , ho condiviso un suggerimento di visual design semplice che chiamo la “tecnica di eco trasparente” (in inglese “the transparent echo technique”). L'idea è di aggiungere la stessa immagine due volte. Uno è disattivato e funge da sfondo e l'altro è un hotspot.

L'immagine sopra era il mio primo tentativo. Ma il risultato sembrava un po’ pieno e gli occhi erano troppo grandi… ed era anche un po’ inquietante.

Così ho sovrapposto un colore scelto in precedente per il pulsante. Ho anche spostato l'immagine e ho usato la sua maglietta e non la faccia. Mi piace la texture che crea l'eco. Puoi vedere parte della maglietta in modo che ci sia un leggero contesto visivo e la texture aggiunge una profondità che mi piace di più di un semplice colore. Inoltre, l'eco non distrae.

Ora ho un visual design che mi piace però sembra stilisticamente troppo pesante. Infatti il mio obiettivo originale era avere uno spazio bianco.

Per guadagnare spazio bianco ho deciso di inserire la forma a ellisse dei pulsanti. Ciò gli conferisce una certa coesione visiva legando l'intestazione con il pulsante.

Estendendo le teste al di fuori della forma si crea ulteriore spazio bianco. E gli angoli arrotondati con i personaggi che spuntano fuori dalla forma sembrano un po’ più organici e informali, il che si presta bene a un corso con scenario interattivo.

Ho anche schiarito i pulsanti in modo che fossero un po’ più sommessi e meno pesanti.

Definire un visual design è una questione soggettiva, ma ho pensato di darti un'idea del mio processo di pensiero mentre creavo la grafica e facevo delle prove. Mentre alcune scelte sono soggettive, ci sono alcuni principi fondamentali da considerare quando si creano le immagini per i propri corsi.

• Usa lo spazio bianco per dare una pausa agli occhi. Lo spazio bianco aiuta anche a distinguere quali contenuti ci sono sullo schermo e in che modo sono correlati fra di loro.
• Consistenza visiva tra elementi di design. Mi piace l'immagine finale e di come richiama i pulsanti ellittici. I colori servono anche a legare insieme gli oggetti.
• Gioca con i colori. Rimuovi i colori dalle immagini per neutralizzarli. Quindi aggiungi alcuni toni di accento o un singolo colore per attirare l'attenzione.

Nel prossimo articolo, mostrerò come ho utilizzato PowerPoint per creare rapidamente tutte queste immagini e apportare modifiche in pochi secondi.

Quale disegno ti piace di più? C'è qualcosa che avresti fatto diversamente?

Ti è piaciuto l'articolo di Tom?

Allora incontra al Digital Learning Tour!

Tom sarà in Italia per la prima volta dal vivo!

Traduzione autorizzata tratta dal post originale di Tom Kuhlmann sul “Rapid E-Learning Blog”.Il post originale è disponibile qui.Ti è piaciuto questo articolo? Segnalalo ai tuoi colleghi!