L'uso di illustrazioni in un prodotto digitale è una tendenza che sembra crescere ogni anno, e per una buona ragione. L'uso di illustrazioni nella vostra app, sito web, e-book ecc. potrebbe renderla più facile da capire, più affidabile, coinvolgente e semplicemente rendere l'esperienza complessivamente piacevole, ma c'è un problema. Una cattiva esecuzione o la mancata conoscenza delle tecniche da utilizzare e di quelle da evitare potrebbero avere un effetto negativo anziché positivo. Vi parlerò dei problemi che abbiamo incontrato e di come li abbiamo affrontati in passato.
Racconto adatto all'obiettivo
Cosa vogliamo ottenere dall'implementazione dell'illustrazione? È facile aggiungere illustrazioni che abbiamo cercato online e usarle perché sembrano divertenti. Perché le aggiungiamo davvero? Le illustrazioni servono a riempire uno spazio vuoto? Ad esempio, uno "stato vuoto" in un'app che potrebbe aiutare l'utente a impegnarsi, spiegandogli cosa sta succedendo e cosa può fare. Vengono utilizzate in un on-boarding che spiega le caratteristiche del prodotto che l'utente sta per utilizzare? Le illustrazioni vengono aggiunte per abbinare il prodotto al pubblico di riferimento? È possibile inserire un'illustrazione o è sufficiente una fotografia? Queste sono alcune domande che dovremmo porci prima ancora di pensare di utilizzare le illustrazioni.
Dopo che l'obiettivo è chiaro per voi e per il team con cui lavorate, è il momento di pensare alla vostra storia. Ogni azienda ha una storia straordinaria che vuole condividere, un prodotto che potrebbe davvero aiutare l'utente. Come possiamo raccontare queste storie e spiegare agli utenti che questo è ciò di cui hanno bisogno? Dopo aver pensato a ciò che volete che l'utente sappia, potete iniziare a pensare a come raccontarlo con le illustrazioni. La creazione di brevi storie sotto forma di storyboard è un ottimo modo per spiegare una storia in un paio di passaggi.
Schizzi iconici
La domanda che mi pongo spesso è: "Fino a che punto possiamo tirarlo indietro". Quando ci si concentra sul minimo indispensabile, è più facile aggiungere qualcosa senza rovinare il nucleo centrale. Prima di sedersi dietro al computer e disegnare la prima linea, è importante sapere cosa si sta disegnando. Il brainstorming è un ottimo modo per essere veloci nel pensare e registrare tutto ciò che vi viene in mente mentre lo fate. Scrivendo tutto ciò che vi passa per la testa, avrete presto un mucchio di idee. Queste idee possono essere trasformate in illustrazioni minime o icone. La creazione di icone è l'inizio di un'illustrazione chiara e facile da capire, che è l'obiettivo principale quando si cerca di spiegare qualcosa con un disegno.
La quantità è superiore alla qualità: non è una cosa che si sente dire spesso, ma il vostro schizzo non deve essere per forza bello. Se puntate alla qualità in uno schizzo, vi rallenterete e vi mancheranno i picchi creativi di cui avete disperatamente bisogno in questo momento. Puntate invece sulla quantità, cercando di riempire il foglio con il maggior numero di modi diversi per esprimere i vostri pensieri. In questo modo sarete in grado di cambiare direzione quando qualcosa non funziona come volevate.
Ispirazione
Guardate a ciò che è già stato fatto. Non prendete qualcosa da Internet e fatelo. Piuttosto, lasciatevi ispirare dagli stili, cercate come altri illustrano quell'oggetto che non riuscite a immaginare nella vostra testa. Non è nemmeno necessario che si tratti di un'illustrazione di un altro prodotto, potete ispirarvi guardando oggetti a caso. Probabilmente state illustrando qualcosa che esiste, in questo caso potete usare quell'oggetto specifico come aiuto visivo. Ricordate, andate veloci, non disegnate ancora i dettagli. Lasciate che sia la vostra immaginazione a creare i dettagli in seguito. Se avete problemi a non rubare qualcosa che avete visto, smettete di raccogliere l'ispirazione e dimenticatevi dove l'avete trovata. Smettete di raccogliere l'ispirazione e dimenticate dove l'avete vista. Lasciate che tutto ribolla nella vostra testa e inventate qualcosa una settimana dopo aver cercato l'ispirazione. In questo modo avrete dimenticato i dettagli e sperate di realizzare qualcosa che non assomigli alle illustrazioni che avete usato come ispirazione.
Angolo
Siate coerenti con le angolazioni che utilizzate, oppure spezzatele con uno scopo. Limitare le illustrazioni a un'unica angolazione aiuta a mantenere la chiarezza e la facilità di comprensione. Usare un'angolazione diversa per ogni illustrazione rompe la coerenza e fa sì che l'utente impieghi più tempo per capire cosa sta succedendo. Lasciare che gli utenti guardino meglio la vostra illustrazione non è necessariamente una cosa negativa. Potreste anche romperla di proposito per approfittare del tempo in più che l'utente dedica all'illustrazione. Abbiamo utilizzato questa tecnica per le illustrazioni della nostra app Scheduled. Tutte le illustrazioni di Scheduled sono piatte e dirette, e guardano letteralmente l'utente. Abbiamo fatto qualcosa di diverso per l'illustrazione che mostra qualcuno che riceve il messaggio. L'illustrazione è angolata, per dare l'idea di inconsapevolezza e alludere al fatto che qualcun altro ha ricevuto il messaggio e non stava guardando il proprio schermo.
Le prime tre illustrazioni che sono state utilizzate per spiegare il concetto di Scheduled
Situazione
Le illustrazioni di solito servono a spiegare una situazione, un modo per spiegare cosa sta succedendo. Gli stati vuoti dicono che al momento non c'è nulla, le pagine 404 dicono che la pagina non esiste affatto e così via. Illustrare questi momenti situazionali in modo efficace, divertente e riconoscibile è un'operazione che Dropbox svolge in modo eccellente. L'uso di oggetti noti come computer portatili, cartelle di documenti e carta normale con un mix di espressioni e illustrazioni iconiche, che supportano il messaggio che viene dato con esso, dice tutto quello che c'è da sapere. Un foglio di carta con una faccia triste vi dirà che qualcosa non va. Un foglio di carta con più persone sopra vi dirà che ha a che fare con più persone, con la condivisione, la menzione e così via. Tenere un pezzo di carta contro un computer portatile con una freccia in mezzo vi dirà che potete o addirittura dovete aggiungere un documento a Dropbox. L'uso di queste illustrazioni situazionali può rendere il messaggio più efficiente e riconoscibile, poiché si utilizzano molte delle stesse illustrazioni con un'aggiunta.
Alcune delle illustrazioni di Dropbox utilizzate nel loro prodotto
Consistenza
Rendetelo facilmente comprensibile attenendovi allo stesso stile, agli stessi colori e alle stesse misure. Mantenete le illustrazioni nello stesso stile del prodotto per il quale sono state realizzate, in modo da contribuire all'uniformità generale che desiderate ottenere quando lavorate sul marchio. Abbiamo notato che avevamo bisogno di illustrazioni aggiuntive quasi a ogni release dell'app, Scheduled. Creare illustrazioni aggiuntive è stato facile perché abbiamo pensato ai vincoli e abbiamo potuto utilizzare molto di ciò che era già stato realizzato. I personaggi avevano espressioni diverse che potevamo utilizzare in qualsiasi situazione, in questo modo potevamo creare nuove illustrazioni anche raccogliendo diversi elementi dalle illustrazioni esistenti per crearne una completamente nuova. È importante annotare i principi delle illustrazioni per quando voi o qualcun altro vorrete lavorarci sopra mesi dopo la creazione.
Mascotte
L'uso di una mascotte fittizia è una strategia di marketing nota per personificare il marchio e aumentare il coinvolgimento degli utenti. Queste mascotte possono essere utili quando si cerca di comunicare a livello personale e di ammorbidire il modo in cui vengono venduti i prodotti. È importante illustrare queste mascotte in modo che siano uniche, emozionino le persone e siano attraenti per il pubblico di riferimento. Le persone ricorderanno meglio il marchio perché queste mascotte sono il volto del prodotto che amano. Non devono sempre rispecchiare il marchio, ma possono anche calarsi nei panni di un utente, mostrando la mascotte mentre percorre le fasi del prodotto è un ottimo modo per spiegarlo in modo divertente e semplice. Intercom fa apparire il proprio prodotto molto più interessante utilizzando animali buffi e dall'aspetto goffo per spiegare come il prodotto può essere utilizzato in determinate situazioni.
<
Illustrazioni della soluzione Intercom
Conoscere gli strumenti
Quando si è alle prime armi con le illustrazioni, è meglio usare qualcosa con cui si ha familiarità; si possono sempre imparare gli strumenti che si "dovrebbero" usare quando si è pronti. Ho usato Photoshop praticamente per tutto. Manipolazioni di foto, loghi, web design, illustrazioni e persino alcune relazioni scolastiche. Non mi importava di usare lo strumento corretto perché era solo un'altra scusa che mi impediva di fare ciò che volevo. Ancora oggi, uso Sketch il più possibile perché mi mette più a mio agio quando provo qualcosa di nuovo. Naturalmente c'è un limite a tutto questo e naturalmente dovreste imparare a usare un'applicazione per l'illustrazione se avete intenzione di farlo seriamente. Provate ad andare in bicicletta prima di pilotare un razzo.
Animazione
Animare ogni singolo livello della vostra illustrazione è molto divertente, lo so. Arriverà il momento in cui dovrete rinunciare alle animazioni più fantasiose e concentrarvi su quelle che supportano la storia, mettendo l'accento su una parte importante della storia che state cercando di raccontare. Il movimento incuriosisce, anche se è quasi impercettibile. Muovendo piccole parti di un'illustrazione, ad esempio l'oggetto principale o un'espressione sul volto della mascotte, si può influenzare il punto in cui le persone guardano. L'uso di queste sottili interazioni renderà l'intero lavoro molto meno statico e più vivo.
Spero che la lettura sia stata utile e divertente. Mi piacerebbe parlare con voi se avete domande o suggerimenti. Ogni feedback è molto apprezzato.
Per altre illustrazioni e altri lavori di design, consultate il mio dribbble e quello del team.
