Share
ABC Animals er en morsom og engasjerende applikasjon som lærer barna hvordan man skriver bokstaver. Min klient, en kunnskapsrik utvikler som hadde gjort andre programmer tidligere, kom til meg med et eksisterende konsept for denne applikasjonen. ABC Animals for iPhone hadde allerede blitt produsert, og klienten min var ute etter å migrere dette konseptet over til iPad. Med økt visuell eiendomsmegling og en raskt økende interesse for enheten, er denne applikasjonen ideell for iPad. Denne artikkelen beskriver prosessen med å lage design for dette programmet.
Designet i både horisontale og vertikale retninger, nedenfor er den endelige utformingen av applikasjonen som er opprettet i Adobe Illustrator.
Mens den grunnleggende forutsetningen for denne applikasjonen er en morsom og læring, var det fortsatt et nivå av teknisk nøyaktighet som trengte å bli gjenkjent.
Rett utenfor flaggermuset fikk dette prosjektet nytte av den grundige kunnskapen min klient hadde. Det er ikke uvanlig for kundene å be om ting som skal gjøres på en bestemt måte, men når deres virkelighet faktisk ikke er den beste løsningen for problemet. Denne situasjonen var annerledes. Min klient kom til meg med en helhetlig ide om hvordan appen trengte å fungere og et gjennomtenkt utkast. I tillegg, siden han selv er en utvikler, visste vi begge de unike utfordringene som vi måtte ta for å lykkes for å få denne applikasjonen til å bli oppfylt.
Programmet må fungere både horisontalt og vertikalt. Med dette i tankene gjorde vi det til en prioritet for å sikre at hovedområdet for søknaden ble opprettet i en firkantet form slik at skriveområdet ikke ville være konsistent, uansett hvordan iPad ble orientert. Dette reduserer både design og utviklingstid.
Skriveområdet var en unik komponent som vi valgte ikke å bruke en notisblokk metafor. Da dette var tilfelle, trengte jeg å jobbe flittig for å infisere noe liv i tavlen. Et notisblokk innately har mer plass til kreativ utførelse (sidekrøller, papirflett osv.), Så jeg trakk forsterkede hjørner og skråstilt kanten av whiteboarden for å øke interessen for denne komponenten av grensesnittet. Deretter opprettet jeg hver linje for å se mer organisk i stedet for å være solid og perfekt rett.
Mens den grunnleggende forutsetningen for denne applikasjonen er en morsom og læring, var det fortsatt et nivå av teknisk nøyaktighet som trengte å bli gjenkjent. Klienten forsynte meg med en eksisterende brevsporingstype som jeg brukte da jeg opprettet skriveområdet.
Vi visste også at programmet ville kreve et oppsett som ville tillate brukeren å få tilgang til alle brevetalternativer uten å forstyrre den visuelle eiendommen vi jobbet med. For å løse dette ville vi opprette en glidende navigasjon som forstørret ved samhandling. Selv om iPaden omfatter generiske brukergrensesnittelementer for å oppnå dette utseendet, synes jeg det er mer hensiktsmessig å designe unike elementer når det er mulig å forene alt.
Neste var de primære visuelle elementene som barna måtte referere til. For dette bestemte elementet ville det ikke være mulig å holde det identisk da iPad var i enten orientering, så det ble bestemt at hovedbildet og det tilsvarende brevet skulle skilles i vertikal retning.
Dyrene selv ble laget for iPhone-versjonen av appen av en annen designer, så jeg bare inkluderte dem i denne versjonen. Jeg ga dyrene lejonene deler av plassen på kortene og fulgte deres fremtredende med bokstavene selv. Deretter la jeg litt variasjon og interesse for kortene ved å stable dem og fiske dem litt. Jeg la subtielle gradienter og slippe skygger for å få kortene til liv. Jeg gikk selv så langt som å legge til en tynn gradient i bokstavene selv!
Apple har indirekte gjort det klart at apps med pseudo-realistiske elementer er kule. Uansett hvilken Apple iPad-applikasjon du ser på, vil du legge merke til at alle elementene ser ut til å være omhyggelig utformet. Å vite dette var åpenbart at denne applikasjonen ikke hadde råd til å være et unntak!
For å bringe et nivå av realisme til appen, illustrert jeg markørene og viskelæren på en mer realistisk måte. Når grunnelementet på elementene var på plass, var det ganske enkelt et spørsmål om å legge til overbevisende skygger og høydepunkter for å fullføre utseendet.
Jeg illustrerte først en rekke farger og objekter, og arbeidet dem inn for å designe etter behov. Det ga meg muligheten til å raskt ta tak i et element og plassere det i oppsettet for å bidra til å tilfredsstille designet, da jeg jobbet for å fullføre det generelle utseendet på appen.
Når det gjelder design er jeg ganske nøye. Jeg liker å plassere elementer med piksel-perfeksjon. Jeg plasserer objekter og beveger dem rundt, snu deres orientering og plasser dem til jeg er helt fornøyd.
Med dette i tankene har jeg lært å beholde en sikkerhetskopi av elementene mine til siden av siden uten å gjøre noe forvandlet til dem. Dette gjør det enkelt å raskt gå tilbake til et element og bruke det uten å bekymre seg om at vinkelen på et objekt kan ha blitt rotert når jeg kanskje har ønsket at varen skal være helt rett.
Du vet aldri når du må komme tilbake til et element og bruke det til noe annet - markørene nedenfor er et godt eksempel. Jeg holdt dem av til siden og uten rotasjon.
Gjennom de mange opplæringene jeg har skrevet har jeg alltid sagt at små detaljer går langt. Du vil gjerne vite at jeg tar mitt eget råd!
For å legge til et element av whimsy til designet, syntes jeg det ville være morsomt å vise forskjellige dyrefotograf i bakgrunnen. Jeg illustrert flere fotavtrykk, men brukte noen lignende fotspor for flere dyr - i tilfeller der man ikke kunne oppdage ellers.
Jeg forklarte til klienten at fotsporene ville animere på tvers av skjermen (i bakgrunnen) til hver seksjon.
For å fullføre søknaden opprettet jeg en beroligende teksturerte bakgrunn med en mild gradient. Jeg har skapt en helhetlig haloeffekt ved å kombinere gradientbakgrunnen med en vignett som overlegger hele grensesnittet.
Alle elementene kommer sammen for å skape et attraktivt og overbevisende ferdig produkt som vil gi timer med moro og lære å kanskje barn! Denne applikasjonen var et skudd for å skape. Ikke bare på grunn av at emnet er morsomt, men også på grunn av det enkle å jobbe med klienten og vår felles kunnskap om hvordan hvert element i prosessen med å lage en app fungerer.
For prosjektforespørsler eller for mer informasjon vennligst besøk meg på jonathanpatterson.com. Følg meg på Twitter på @jon_patterson. ABC Animals er copyright 2010-2011 Critical Matter, Inc. criticalmatter.com.
Accentsconagua