Pohledem designéra: Hravá aplikace pro neslyšící děti

Není to tak dlouho, co Ackee oslavilo 5 let od založení a při téhle příležitosti se rozhodlo věnovat 1 000 000 Kč na vývoj appky pro neziskovou organizaci. Jedinou podmínkou bylo poslat nám video, kde krátce představí svůj projekt a důvod, proč bychom měli stvořit appku právě pro ně :-). Soutěž vyhrála organizace “Centrum pro dětský sluch - TAMTAM”, která podporuje rodiče a děti se sluchovým postižením. A tady přišla na řadu má práce.

Jak to celé pro designéra začíná?

Prvním krokem pro nás bylo pozvání zástupců neziskovky k nám do Ackee, kde jsme je podrobně vyzpovídali. Byla to pro nás nová zkušenost se speciální cílovkou. Od TamTamu jsme se dozvěděli, jaká je jejich představa - vyvinout aplikaci, která by pomohla dětem ve věku 0–8 let naučit se základní sadu slovíček znakového jazyka. Nejlépe i bez pomoci dospělého. 

Seznámili nás s jejich dosavadními vizuály a také s kreslenou postavičkou – medvídkem Čumáčkem, který slouží jako výuková pomůcka jak na papíře, tak jako znakovací hračka. Přeci jenom udržet pozornost dětí si žádá učit je hravou metodou a celé učení gamifikovat. A tohle byl pro mě důležitý bod – hraním naučit. A tak začal vznikat koncept appky.

Character design a potřebný redesign postavičky pro digital age

Neziskovka má jako svého maskota/kamaráda/výukovou pomůcku medvídka Čumáčka. Toho jsme měli k dispozici na tištěných materiálech, ale pro digitální aplikaci jsme potřebovali postavičku upravit a zjednodušit.

Pokud chceme vytvořit medvídka s charakterem, je fajn základní proporce nedělat vyvážené, tj. něco zdůraznit něco potlačit. Stačí si vybavit 3D animáky, kde už při prvním pohledu na postavičku můžeme odhadnout, jaký bude mít charakter – jestli to bude záporák nebo kladný hrdina či velký a silný (né příliš chytrý) ranař. Všechno tohle navrhování postav i předmětů se odvíjí od základních geometrických tvarů. Čím špičatější tvary máme, tím evokujeme větší rychlost, dravost v charakteru i jízlivost. Kulaté tvary jsou většinou přátelské a dobrosrdečné. Jsme tak nastavení už od přírody – jsme na pozoru, když je někde nebezpečně vyhlížející trn a naopak si chceme šáhnout na oblé tvary oblázků v řece. Pokud chceme dosáhnout charakteru, stačí se toho držet. V kombinaci s dynamikou tvaru (něco větší, něco o hodně menší) to jen umocníme.

Proces návrhu

Jsem designér (baví mě navrhovat věci podle nejvhodnějšího řešení), a také ilustrátor (kreslím obrázky). Začala jsem mít nápady, jak to celé uchopit. Hodně mi přitom pomáhá vzít si velký kus papíru, psát a kreslit si vše, co mě napadne. Chci to mít pořád na očích, teprve pak se rozkrývají další a další možnosti a nápady. Potom všechno projde sítem použitelnosti a reálného vytvoření. Od toho mám po ruce vývojáře, kteří si dělají rešerše a analýzy pro iOS i Android. Zjistí si, jaká technologie je pro danou věc nejlepším řešením. Já zase zanalyzuji svoji stranu a společně to pak propojíme. Já vím, co jim mám dodat a v jakém formátu, oni zase ví, co budou programovat. Komunikace je i ve vývoji snad to nejdůležitější.

Prostředí aplikace

Vymysleli jsme koncept edukativní aplikace s adventurními prvky. Na začátku hry se dostaneme do menu, kde si děti mohou zvolit “Hraní si  s medvídkem” nebo “Hledání předmětů”. Appka obsahuje 3 prostředí na hledání předmětů – domácnost, školku a dopravu ve městě. Prvně lze zvolit jen prostředí domácnosti, zbylé 2 jsou prozatím uzamčené a odemknou se postupně podle toho, jak prostředí budeme plnit. Klik a jsme v kuchyni! Medvídek je tu s námi a ihned nám napoví, jaký předmět máme hledat. Prý máme hledat jablíčko – a už ho vidím, kliknu na něj a můžu si přehrát video se znakováním. Možná si to napoprvé nezapamatuju, naštěstí si ho můžu opakovaně pustit, kolikrát chci. Když znak už umím, okýnko zavřu a vyhledaný předmět mi skočí na spodní lištu, kde vidím i obrysy ještě nenalezených předmětů. To mi slouží jako malá nápověda. Mým úkolem je tedy najít všech 20 předmětů. Některé z nich jsou i podpořeny krátkou animací pro lepší pochopení. Když se mi nebude dařit najít další předměty, kliknu na medvídka a ten mi ukáže další nápovědu.

Děkuju, Čumáčku!

Druhá část aplikace slouží spíš zábavě a hraní s medvídkem. Můžeme mu navléct pár oblečků a doplňků, pohladit ho po tváři, učesat, vyčistit mu zoubky. Děti si zkrátka chtějí hrát. A když už máme chuť se něco nového naučit, můžeme se vrátit opět k hledání předmětů s naším hrdinou.

Ilustrace a animace

Při tvorbě ilustrací si vše nejdřív skicuji, pak pomocí pera v Illustratoru všechno převádím do křivek a ploch. Poskládám scénu a pak dávám do vrstev. Pokud se nějaký předmět nebo človíček hýbe, musím připravit další soubor, kde obrázek detailně rozvrstvím podle toho, jaké části z něj jsou statické a jaké se budou hýbat. Takhle připravený soubor Illustratoru si otevřu v AfterEffects, převedu všechny vrstvy… a tady byl trochu problém.

Achjo, ty “Merge Paths” (trochu té odborné části)

Při převodu .ai souboru do vektorových tvarů (Create Shapes from Vector Layers) se mi rozloží soubor do všech tvarů a informací o barvě. Všechny tyto údaje jsou najednou v mnoha složkách. Když si otevřu content každé z nich, objeví se mi další složky a občas se stane, že je tam pár takových, které AfterEffects přejmenuje automaticky na “Merge Paths”. Upozorňuje tak na problém, který pak v animaci dělá “velký špatný”.

Proč to vzniká?

Když se mi tohle podaří vyřešit, naanimuju pohyb, vyrendruju přes plugin “Bodymovin” a vývojáři animaci umístí do scény. Android v tomto byl bez problému, ale Lottie pro iOS bohužel NEPODPORUJE zmiňované “Merge Paths”, takže jsem mnoho z nich musela dodatečně upravovat, čistit soubor Ilustratoru a minimalizovat tak vznik problému (to znamenalo přeanimovat upravené soubory). Uf!

Závěrem

Doufám, že aplikace bude pro děti přínosná, bude je bavit, pomůže jim s učením základních znaků vycházejících z prostředí, v kterém se od malička vyskytují.

Brum!