Tirocinio scolastico 2021 in Dreamonkey con S. B.

Le basi del UI/UX design con le parole di una studentessa

[nota del tutor]: S. ha trascorso con noi il suo tirocinio scolastico, durante il quale si è cimentata per la prima volta con le basi della progettazione del software. Abbiamo seguito il suo percorso ogni giorno, stimolando le sue capacità personali di critica e problem solving. In questo articolo le abbiamo dato spazio per raccontare l’esperienza con le sue parole.

Nelle mie tre settimane di tirocinio ho intrapreso nuove esperienze. Ho imparato cose e concetti che non conoscevo, come le sitemaps, i wireframes, user interface, UX design e UI design.

Esercizi propedeutici

Ho passato i primi giorni leggendo libri e articoli, come il Manuale di sopravvivenza per UX designer di Matteo di Pascale e gli articoli del blog di Dreamonkey, che mi hanno introdotto le basi del UI e UX design. Nei giorni successivi mi sono stati proposti vari esercizi per incentivare la mia creatività e la mia logica. Non avendo quasi mai fatto esercizi di questo tipo mi sono trovata un po’ in difficoltà ma è stato davvero molto utile. Ho messo alla prova le mie abilità per capire cosa è realmente utile nel design di un’applicazione e nel capire quali scelte di design possono facilitare la navigazione dell’utente.
Uno di questi esercizi consisteva nel disegnare 7 cerchi, che potevano essere di varie dimensioni, in modo che dessero a chi li guarda la percezione di profondità.

 foto di pagina di quaderno a quadri con esercizio sulla Gestalt

Esercizio propedeutico sulla percezione di profondità.

L’obiettivo dell’esercizio era il saper comunicare con la grandezza e la posizione delle forme.
Durante questi esercizi ho incontrato spesso il concetto della gerarchia, questo è un elemento che viene utilizzato spesso nella progettazione, serve per far risaltare determinati elementi e ne definisce un ordine di importanza.
La comunicazione è molto importante nel design, infatti dobbiamo saper progettare ciò che abbiamo in mente in modo efficace così da facilitare la navigazione dell’utente.
Dobbiamo saper trovare soluzioni ai problemi dell’utente.

Le mie prime produzioni di sitemaps

Nei giorni successivi della prima settimana ho partecipato a varie discussioni tra designer e programmatori da cui ho percepito quanto lavoro c’è dietro un progetto, anche solo dietro una semplice parola o icona.

In seguito ho iniziato a produrre sitemaps su siti e applicazioni già progettate e programmate. Le prime volte ho trovato difficoltà nell’organizzare gli spazi sul foglio di carta, avendo poco spazio, poi però sono migliorata. Dopo aver prodotto le sitemaps su carta ho iniziato a usare Adobe Illustrator per quelle digitali. Digitalmente mi sono trovata meglio, dovevo prestare meno attenzione nell’organizzazione degli spazi potendo modificare le dimensioni della pagina.

 artboard con sitemap info architecture di sito Internet fatta a mano e digitale

Sitemap su carta e digitale dell’applicazione della mia scuola, Classeviva.

Dopo aver scoperto le sitemaps sono entrata in contatto con l’enorme labirinto di informazioni che c’è dietro un’applicazione o un sito.

La mia prima progettazione

Nella seconda settimana come esercizio mi è stato chiesto di provare a progettare un’applicazione che ha come obiettivo il fornire agli utenti uno strumento per organizzare e partecipare ad eventi a tema gastronomico informale che si svolgono in casa o in altri ambienti privati.
Per prima cosa ho scritto l’analisi dei requisiti dell’applicazione, un documento in cui vengono inseriti i dati e gli elementi che devono essere posti all’interno dell’app. Dopo l’analisi ho progettato le sitemaps su carta e quelle digitali, sia dettagliate sia semplici. Questi due livelli di complessità ci aiutano ad avere punti di vista differenti nell’organizzazione dell’app.

 artboard con sitemap info architecture di sito Internet fatta a mano e digitale applicazione Eat Around

Sitemap della mia applicazione Eat Around.
Wireframing su carta e digitali

In seguito ho progettato i wireframes su carta e quelli digitali dell’applicazione.
I wireframes sono una sorta di bozzetti delle interfacce di un’applicazione o di un sito web. Sono riuscita a progettarli mettendo insieme le mie conoscenze e quello che ho imparato durante la prima settimana.
Il wireframing digitale l’ho fatto con Sketch, un editor di grafica vettoriale specificamente pensato per progettare UI digitali di vario tipo.

 foto di wireframe di applicazione mobile disegnati a mano su carta

Wireframes su carta dell’applicazione.
Mockup digitali

Dopo molte revisioni con Niccolò, il mio tutor aziendale, sono passata al mockup definitivo, ovvero al design delle interfacce che vedranno gli utenti, che ho progettato su Sketch. Mi sono divertita un sacco a progettarlo anche se ho avuto varie difficoltà nel realizzare i componenti grafici in modo che sembrassero di un’applicazione moderna e pulita.

Per progettare l’applicazione mi sono ispirata ad alcune già esistenti e ho consultato il sito di Material Design, che mi è stato suggerito ed è spiegato in un articolo del blog di Dreamonkey (hai già letto cos’è Material Design di Google?).

 artboard di presentazione di mockup high fidelity e wireframes di applicazione mobile smartphone Eat Around

Alcuni wireframes e mockup digitali dell’applicazione.

Dopo aver finito i mockup ho iniziato a pensare a un possibile logo e ad un’icona per la mia app. Prima di tutto ho pensato a un nome, “Eat Around”, e ho incominciato a fare dei bozzetti per il logo. Volevo dare un aspetto moderno e allegro all’applicazione. Ho deciso di usare la forma del cerchio per esprimere il concetto del viaggiare per il mondo.
Ho usato vari colori per i cerchi per far emergere il concetto di diverse tradizioni.
Ho riflettuto molto sui colori da utilizzare e alla fine ho optato per alcuni allegri che a parere mio esprimono vitalità e curiosità. Infatti quello che l’app vuole è stimolare la curiosità degli utenti, far loro esplorare nuovi orizzonti e conoscere persone e tradizioni. Al posto della “O” di “Around” ho posto l’uovo che è presente anche nell’icona dell’applicazione.

Riguardo all’icona ho concettualizzato la funzione dell’applicazione, ho unito l’elemento del cibo con l’elemento degli eventi in giro per il mondo. Alla fine ho deciso di applicare l’uovo all’icona della posizione sulla mappa.
I colori che ho utilizzato nell’icona riprendono alcuni colori dell’applicazione, come il bianco, il rosso, il giallo e il verde acqua.

 Logo logotipo e Product icon della applicazione mobile Eat Around

Logo e icona dell’applicazione che ho progettato.

Questa esperienza è stata molto formativa, ho imparato cose nuove che sicuramente mi serviranno in futuro, non solo dal punto di vista lavorativo ma anche nella vita in sé.
Ho conosciuto nuovi strumenti e imparato tecniche che non conoscevo che mi saranno utili per usare programmi come Adobe Illustrator, Photoshop e Sketch. Mi ha aperto gli occhi sul mondo che c’è dietro alle applicazioni e ai siti web e sono entrata a contatto con i meccanismi che regolano la vita aziendale.
Sono molto felice che mi sia stata data questa opportunità per dare uno sguardo a quello che mi aspetterà in futuro.