Share
ABC Animals is een leuke en boeiende applicatie die kinderen leert brieven te schrijven. Mijn klant, een slimme ontwikkelaar die in het verleden andere apps had gedaan, kwam bij mij met een bestaand concept voor deze toepassing. ABC Animals voor de iPhone was al geproduceerd en mijn klant wilde dit concept naar de iPad migreren. Met verhoogd visueel vastgoed en een snel toenemende interesse in het apparaat, is deze applicatie bij uitstek geschikt voor de iPad. Dit artikel beschrijft het proces van het maken van het ontwerp voor deze toepassing.
Ontworpen in zowel horizontale als verticale richtingen, hieronder is het definitieve ontwerp van de toepassing gemaakt in Adobe Illustrator.
Hoewel het uitgangspunt van deze applicatie er een is van plezier en leren, was er nog steeds een niveau van technische nauwkeurigheid dat moest worden erkend.
Dit project profiteerde meteen van de grondige kennis die mijn klant bezat. Het is niet ongebruikelijk dat klanten vragen om dingen op een bepaalde manier te doen, maar in werkelijkheid is hun visie misschien niet de beste oplossing voor het probleem. Deze situatie was anders. Mijn klant kwam naar me toe met een algemeen idee van hoe de app moest functioneren en een doordachte diepgang. Bovendien, aangezien hij zelf een ontwikkelaar is, kenden we allebei de unieke uitdagingen die we zouden moeten aanpakken om deze applicatie tot een goed einde te brengen.
De toepassing moet zowel in horizontale als verticale richting werken. Met dit in gedachten hebben we er een prioriteit van gemaakt om ervoor te zorgen dat het hoofdschrijfgedeelte van de applicatie in een vierkante vorm is gemaakt, zodat het schrijfgebied consistent blijft, ongeacht hoe de iPad is georiënteerd. Dit bezuinigt zowel op ontwerp- als ontwikkelingstijd.
Het schrijfgebied was een uniek onderdeel omdat we ervoor kozen om geen notepad-metafoor te gebruiken. Toen dit het geval was, moest ik ijverig werken om wat leven in het whiteboard te blazen. Een kladblok heeft van nature meer ruimte voor creatieve uitvoering (paginakrullen, papiervlekken enz.), Dus ik tekende versterkte hoeken en schuinde langs de rand van het whiteboard om de interesse in dit onderdeel van de interface te vergroten. Vervolgens heb ik elke regel gemaakt om er organischer uit te zien in plaats van solide en volkomen rechtlijnig.
Hoewel het uitgangspunt van deze applicatie er een is van plezier en leren, was er nog steeds een niveau van technische nauwkeurigheid dat moest worden erkend. De klant heeft me een bestaand lettervolg lettertype gegeven dat ik gebruikte toen ik het schrijfgebied aan het maken was.
We wisten ook dat de toepassing een setup zou vereisen die de gebruiker in staat stelt gemakkelijk toegang te krijgen tot alle letteropties zonder zich te veel te bemoeien met het visuele vastgoed waarmee we werkten. Om dit op te lossen zouden we een glijdende navigatie creëren die vergroot wordt na interactie. Hoewel de iPad generieke UI-elementen bevat om deze look te bereiken, vind ik het meer geschikt om unieke elementen te ontwerpen waar mogelijk om alles te verenigen.
Vervolgens waren de primaire visuele elementen waar de kinderen naar moesten verwijzen. Voor dit specifieke element zou het niet mogelijk zijn om het identiek te houden wanneer de iPad in een van beide richtingen was, dus werd besloten dat de hoofdafbeelding en de corresponderende letter in verticale richting uit elkaar werden gesplitst.
De dieren zelf zijn door een andere ontwerper gemaakt voor de iPhone-versie van de app, dus ik heb ze eenvoudig in deze versie opgenomen. Ik gaf de dieren de leeuwen een deel van de ruimte op de kaarten en volgde hun bekendheid met de letters zelf. Vervolgens heb ik een beetje variatie en interesse aan de kaarten toegevoegd door ze stapelen en enigszins te hengelen. Ik voegde subtiele gradiënten toe en liet schaduwen vallen om de kaarten tot leven te brengen. Ik ging zelfs zo ver dat ik een vaag verloop in de letters zelf toevoegde!
Apple heeft indirect duidelijk gemaakt dat apps met pseudo-realistische elementen cool zijn. Ongeacht welke iPad-applicatie van Apple je bekijkt, je zult merken dat alle elementen er zorgvuldig uitzien. Dit wetende, was het duidelijk dat deze applicatie het zich niet kon veroorloven een uitzondering te zijn!
Om de app een niveau van realisme te geven, heb ik de markeringen en gum op een meer realistische manier geïllustreerd. Zodra de basisvorm van de elementen op hun plaats was, was het gewoon een kwestie van overtuigende schaduwen en hoogtepunten toevoegen om het uiterlijk te voltooien.
Ik heb eerst verschillende kleuren en objecten geïllustreerd en vervolgens bewerkt om ze zo nodig te ontwerpen. Dat gaf me de mogelijkheid om snel een element te pakken en het in de lay-out te plaatsen om te helpen het ontwerp tevreden te stellen, terwijl ik eraan werkte om het algehele uiterlijk van de app te voltooien..
Als het gaat om ontwerp ben ik behoorlijk zorgvuldig. Ik vind het leuk om elementen met pixel-perfectie te plaatsen. Ik plaats voorwerpen en verplaats ze, draai hun richting en positioneer ze totdat ik helemaal tevreden ben.
Met dit in mijn achterhoofd heb ik geleerd om een back-up van mijn elementen aan de zijkant van de pagina te houden zonder dat er een transformatie naar hen is gedaan. Dit maakt het handig om snel terug te gaan naar een element en het te gebruiken zonder je zorgen te hoeven maken dat de hoek van een object mogelijk is geroteerd toen ik wilde dat het item helemaal recht was.
Je weet nooit wanneer je terug moet naar een element en het voor iets anders moet gebruiken - de onderstaande markeringen zijn een goed voorbeeld. Ik hield die opzij en zonder rotatie.
In de vele tutorials die ik heb geschreven, heb ik altijd gezegd dat kleine details een lange weg gaan. Je zult blij zijn te weten dat ik mijn eigen advies neem!
Om een element van eigenzinnigheid aan het ontwerp toe te voegen, dacht ik dat het leuk zou zijn om verschillende dierlijke voetafdrukken op de achtergrond te laten zien. Ik heb verschillende voetafdrukken geïllustreerd, maar ik heb een aantal vergelijkbare voetafdrukken gebruikt voor meerdere dieren - in gevallen waarin je anders niet zou kunnen ontdekken.
Ik legde mijn cliënt uit dat de voetafdrukken zouden animeren over het scherm (op de achtergrond) van elke sectie.
Om de applicatie af te maken heb ik een kalmerende gestructureerde achtergrond met een zachte gradiënt gemaakt. Ik heb een algeheel halo-effect gecreëerd door de verloopachtergrond te combineren met een vignet dat de volledige interface overlapt.
Alle items komen samen om een aantrekkelijk en overtuigend eindproduct te maken dat uren plezier en leren voor kinderen zal brengen! Deze applicatie was geweldig om te maken. Niet alleen vanwege het feit dat het onderwerp leuk is, maar ook vanwege het gemak van het werken met de klant en onze gezamenlijke kennis van hoe elk element van het proces van het maken van een app werkt.
Voor projectvragen of voor meer informatie, bezoek me op jonathanpatterson.com. Volg mij op Twitter op @jon_patterson. ABC Animals is copyright 2010-2011 Critical Matter, Inc. criticalmatter.com.
Accentsconagua