Share
ABC Animals este o aplicație distractivă și interesantă care îi învață pe copii cum să scrie scrisori. Clientul meu, un dezvoltator savvy care a făcut alte aplicații în trecut, a venit la mine cu un concept existent pentru această aplicație. Animalele ABC pentru iPhone au fost deja produse și clientul meu căuta să migreze acest concept pe iPad. Cu o creștere a proprietății vizuale și un interes crescând rapid în dispozitiv, această aplicație este ideală pentru iPad. Acest articol detaliază procesul de creare a proiectului pentru această aplicație.
Proiectat în orientări orizontale și verticale, mai jos este proiectul final al aplicației create în Adobe Illustrator.
În timp ce premisa de bază a acestei aplicații este una de distracție și de învățare, a existat încă un nivel de precizie tehnică care trebuia să fie recunoscut.
Chiar din cauza batului, acest proiect a beneficiat de cunoștințele aprofundate pe care le-a avut clientul meu. Nu este neobișnuit ca clienții să ceară ca lucrurile să fie făcute într-un anumit mod, dar când în realitate, viziunea lor poate să nu fie cea mai bună soluție pentru această problemă. Această situație era diferită. Clientul meu a venit la mine cu o idee generală despre modul în care aplicația a trebuit să funcționeze și o schiță atentă. În plus, deoarece el însuși este un dezvoltator amândoi am știut provocările unice pe care ar trebui să le abordăm pentru a aduce cu succes această cerere.
Aplicația ar trebui să funcționeze atât în orientări orizontale, cât și pe verticală. Având în vedere acest lucru, am făcut o prioritate pentru a ne asigura că zona principală de scris a aplicației a fost creată într-o formă pătrată, astfel încât, indiferent de modul în care a fost orientat iPad-ul, zona de scris ar rămâne consistentă. Acest lucru se reduce atât la design cât și la timpul de dezvoltare.
Zona de scris a fost o componentă unică, deoarece am optat să nu folosim o metaforă a notepad-ului. În acest caz, trebuia să lucrez cu sârguință pentru a infuza o viață în tablă. A notepad-ul are mai mult spațiu pentru execuția creativă (bucle de pe pagină, pete de hârtie etc.), așa că am desenat colțuri întărite și a tăiat marginea tabloului alb pentru a crește interesul pentru această componentă a interfeței. Apoi, am creat fiecare linie pentru a arăta mai organic decât pentru a fi solidă și perfect dreaptă.
În timp ce premisa de bază a acestei aplicații este una de distracție și de învățare, a existat încă un nivel de precizie tehnică care trebuia să fie recunoscut. Clientul mi-a furnizat un font existent de urmărire a literelor pe care l-am folosit la crearea zonei de scris.
De asemenea, știam că aplicația ar necesita o configurare care să permită utilizatorului să acceseze cu ușurință toate opțiunile de scrisoare, fără a interfera prea mult cu proprietatea imobiliară vizuală cu care lucrăm. Pentru a rezolva acest lucru am creat o navigație glisantă care sa lărgit după interacțiune. În timp ce iPad-ul cuprinde elemente generice de UI pentru a realiza acest aspect, mi se pare mai potrivit să proiecteze elemente unice ori de câte ori este posibil să se unească totul.
Următoarele au fost elementele vizuale primare pe care copiii ar trebui să le facă referire. Pentru acest element particular, nu ar fi posibil să-l păstrați identic atunci când iPad-ul era în ambele orientări, deci a fost decis că imaginea principală și litera corespunzătoare să fie împărțite în orientare verticală.
Animalele în sine au fost create pentru versiunea iPhone a aplicației de către un alt designer, așa că le-am inclus pur și simplu în această versiune. Am dat animalelor cota de lei a spațiului pe cărți și le-au urmat cu literele în sine. Apoi am adăugat un pic de varianță și interes pentru cărți prin stivuirea lor și pescuitul ușor. Am adăugat gradienți subțiri și umbre pentru a contribui la aducerea cărților la viață. Chiar m-am dus atât de departe încât să adaug un gradient prea mic în scrisorile în sine!
Apple a explicat în mod indirect că aplicațiile cu elemente pseudorealiste sunt reci. Indiferent ce aplicație Apple iPad te uiți la tine vei observa că toate elementele par să fie artizanale. Știind acest lucru, era evident că această aplicație nu și-a putut permite o excepție!
Pentru a aduce un nivel de realism la aplicație, am ilustrat markerii și radiografia într-un mod mai realist. Odată ce forma de bază a elementelor a fost în loc, a fost pur și simplu o chestiune de a adăuga umbre convingătoare și evidențiază pentru a completa aspectul.
Am ilustrat mai întâi o varietate de culori și obiecte, apoi le-am elaborat pentru a proiecta după cum este necesar. Acest lucru mi-a oferit abilitatea de a apuca rapid un element și de ao plasa în aspect pentru a ajuta la satisfacerea designului, deoarece am lucrat pentru a completa aspectul general al aplicației.
Când vine vorba de design eu sunt destul de meticulos. Îmi place să plasez elemente cu pixel-perfecțiune. Am plasat obiecte și le-am mutat în jurul lor, mi-am întors orientarea și le-am poziționat până când sunt complet mulțumit.
Având în vedere acest lucru, am învățat să păstrez o copie de rezervă a elementelor mele în partea laterală a paginii fără nici o transformare făcută pentru ei. Acest lucru face convenabil să se întoarcă rapid la un element și să-l folosească fără să vă faceți griji că un unghi al unui obiect ar fi putut fi rotit atunci când am fi dorit ca elementul să fie complet drept.
Nu știți niciodată când va trebui să vă întoarceți la un element și să îl folosiți pentru altceva - marcatorii de mai jos reprezintă un prim exemplu. I-am ținut pe aceștia în lateral și fără rotire.
De-a lungul numeroaselor tutoriale pe care le-am scris, am spus mereu că detaliile mici merg departe. Veți fi fericit să știți că îmi iau propriile sfaturi!
Pentru a adăuga un element de capriciu la design, am crezut că ar fi distractiv să arătăm diferite urme de animale în fundal. Am ilustrat mai multe amprente, dar am folosit câteva amprente similare pentru mai multe animale - în situații în care cineva nu ar fi putut detecta altfel.
I-am explicat clientului meu că amprentele ar anima pe ecran (în fundal) din fiecare secțiune.
Pentru a termina aplicația, am creat un fundal textura liniștitor, cu un gradient blând. Am creat un efect general de halo prin combinarea fundalului gradient cu o vinetă care acoperă întreaga interfață.
Toate articolele vin împreună pentru a crea un produs finit atractiv și convingător care va aduce ore de distracție și învățare pentru copiii mai mici! Această aplicație a fost o explozie de creat. Nu numai din cauza faptului că subiectul este distractiv, dar și datorită ușurinței de a lucra cu clientul și a cunoștințelor noastre comune despre modul în care funcționează fiecare element al procesului de creare a unei aplicații.
Pentru solicitări de proiecte sau pentru mai multe informații, vizitați-mă la jonathanpatterson.com. Urmați-mă pe Twitter la @ jon_patterson. Animalele ABC sunt copyright 2010-2011 Matter critic, Inc. criticalmatter.com.
Accentsconagua