Share
ABC Animals è un'applicazione divertente e coinvolgente che insegna ai bambini come scrivere lettere. Il mio cliente, uno sviluppatore esperto che aveva fatto altre app in passato, è venuto da me con un concetto esistente per questa applicazione. ABC Animals per iPhone era già stato prodotto e il mio cliente stava cercando di migrare questo concetto sull'iPad. Con una maggiore visibilità visiva e un crescente interesse per il dispositivo, questa applicazione è ideale per l'iPad. Questo articolo descrive in dettaglio il processo di creazione del design per questa applicazione.
Progettato in entrambi gli orientamenti orizzontali e verticali, di seguito è il disegno finale dell'applicazione creata in Adobe Illustrator.
Mentre la premessa di base di questa applicazione è di divertimento e apprendimento, c'era ancora un livello di accuratezza tecnica che doveva essere riconosciuto.
Sin dall'inizio, questo progetto ha beneficiato della profonda conoscenza del mio cliente. Non è raro che i clienti chiedano che le cose vengano fatte in un certo modo, ma quando in realtà la loro visione potrebbe non essere la soluzione migliore per il problema. Questa situazione era diversa. Il mio cliente è venuto da me con un'idea generale di come doveva funzionare l'app e di una bozza ponderata. Inoltre, dal momento che lui stesso è uno sviluppatore, entrambi abbiamo conosciuto le sfide uniche che avremmo dovuto affrontare per portare a termine con successo questa applicazione.
L'applicazione dovrebbe funzionare in entrambi gli orientamenti orizzontali e verticali. Con questo in mente, abbiamo considerato prioritario assicurare che l'area di scrittura principale dell'applicazione fosse creata in una forma quadrata in modo che, indipendentemente da come fosse orientato l'iPad, l'area di scrittura rimanesse coerente. Questo ha ridotto sia il design che i tempi di sviluppo.
L'area di scrittura era un componente unico in quanto abbiamo deciso di non utilizzare una metafora del blocco note. In questo caso, avevo bisogno di lavorare diligentemente per infondere un po 'di vita nella lavagna. Un blocco note ha più spazio per l'esecuzione creativa (riccioli di pagina, macchie di carta, ecc.), Quindi ho disegnato gli angoli rinforzati e ho smussato il bordo della lavagna per aumentare l'interesse per questo componente dell'interfaccia. Successivamente, ho creato ogni linea per apparire più organica invece di essere solida e perfettamente diritta.
Mentre la premessa di base di questa applicazione è di divertimento e apprendimento, c'era ancora un livello di accuratezza tecnica che doveva essere riconosciuto. Il client mi ha fornito un font di tracciamento della lettera esistente che ho usato durante la creazione dell'area di scrittura.
Sapevamo anche che l'applicazione avrebbe richiesto una configurazione che consentisse all'utente di accedere facilmente a tutte le opzioni delle lettere senza interferire troppo con le proprietà visive che stavamo lavorando. Per risolvere ciò creeremmo una navigazione scorrevole che si allargava all'interazione. Mentre l'iPad comprende elementi generici dell'interfaccia utente per realizzare questo aspetto, trovo più adatto a progettare elementi unici quando possibile per unificare tutto.
Poi c'erano gli elementi visivi primari di cui i bambini avrebbero bisogno di fare riferimento. Per questo particolare elemento non sarebbe possibile tenerlo identico quando l'iPad era in entrambi gli orientamenti, quindi è stato deciso di dividere l'immagine principale e la lettera corrispondente nell'orientamento verticale.
Gli stessi animali sono stati creati per la versione iPhone dell'applicazione da un altro designer, quindi li ho semplicemente inclusi in questa versione. Ho dato agli animali la parte dei leoni dello spazio sulle carte e ho seguito il loro risalto con le lettere stesse. Successivamente ho aggiunto un po 'di varianza e interesse alle carte impilandole e inclinandole leggermente. Ho aggiunto sfumature sottili e ombre esterne per dare vita alle carte. Sono persino arrivato al punto di aggiungere un gradiente tenue alle lettere stesse!
Apple ha indirettamente reso chiaro che le app con elementi pseudo-realistici sono interessanti. Indipendentemente dall'applicazione Apple iPad che stai vedendo, noterai che tutti gli elementi sembrano essere elaborati con cura. Sapendo questo, era ovvio che questa applicazione non poteva permettersi di essere un'eccezione!
Per portare un livello di realismo nell'app ho illustrato i pennarelli e la gomma in modo più realistico. Una volta che la forma di base degli elementi era a posto, si trattava semplicemente di aggiungere ombre e luci convincenti per completare il look.
Ho illustrato per la prima volta una varietà di colori e oggetti, quindi li ho elaborati per la progettazione in base alle esigenze. Questo mi ha permesso di prendere rapidamente un elemento e inserirlo nel layout per aiutare a soddisfare il design, mentre lavoravo per completare l'aspetto generale dell'app.
Quando si tratta di design sono abbastanza meticoloso. Mi piace posizionare elementi con la perfezione dei pixel. Metto oggetti e li muovo in giro, capovolgo il loro orientamento e li posiziono finché non sono completamente soddisfatto.
Con questo in mente ho imparato a tenere una copia di backup dei miei elementi sul lato della pagina senza alcuna trasformazione fatta a loro. Questo rende conveniente tornare rapidamente a un elemento e usarlo senza preoccuparsi che l'angolo di un oggetto possa essere stato ruotato quando avrei voluto che l'oggetto fosse completamente dritto.
Non si sa mai quando sarà necessario tornare a un elemento e usarlo per qualcos'altro - i marcatori di seguito sono un ottimo esempio. Li ho tenuti da parte e senza rotazione.
In tutti i numerosi tutorial che ho scritto ho sempre detto che i piccoli dettagli fanno molto. Sarai felice di sapere che prendo il mio consiglio!
Per aggiungere un elemento di fantasia al design ho pensato che sarebbe stato divertente mostrare diverse impronte di animali sullo sfondo. Ho illustrato diverse impronte, ma ho usato impronte simili per più animali - nei casi in cui non si sarebbe in grado di rilevare altrimenti.
Ho spiegato al mio cliente che le impronte si sarebbero animate sullo schermo (sullo sfondo) di ciascuna sezione.
Per completare l'applicazione, ho creato uno sfondo strutturato lenitivo con un gradiente delicato. Ho creato un effetto alone generale combinando lo sfondo sfumato con una vignettatura che si sovrappone all'intera interfaccia.
Tutti gli elementi si uniscono per creare un prodotto finito attraente e convincente che porterà ore di divertimento e apprendimento per i bambini! Questa applicazione è stata fantastica da creare. Non solo per il fatto che l'argomento è divertente, ma anche per la facilità di lavorare con il cliente e la nostra conoscenza comune di come ogni elemento del processo di creazione di un'app funzioni.
Per richieste di informazioni sul progetto o per ulteriori informazioni, visitare me su jonathanpatterson.com. Seguimi su Twitter all'indirizzo @jon_patterson. ABC Animals è copyright 2010-2011 Critical Matter, Inc. criticalmatter.com.
Accentsconagua