Litera

Zadání

Maturitní seznam četby je pro spoustu lidí ta nejnepříjemnější část zkoušky. Dvacet knih ve čtyřech okruzích, každá s autorem, dobou, směrem a rozborem — a žádný nástroj, který by to držel pohromadě. Kdo si vede zápisy, vede si je v sešitě. Kdo ne, čte den před zkouškou obsahy.

Zadání jsem si postavil takhle: rozsekat přípravu na dávky, které se dají odbýt za pět minut, a dát jí strukturu, kterou lidi z her a jazykových aplikací znají — postup, denní série, questy, odměny. Duolingo pro maturitní četbu.

Tahle čtveřice je kostra celé aplikace. Kniha bez okruhu neexistuje — okruh určuje, kam se v seznamu zařadí, jak se počítá plán četby a jaký štítek dostane v audiu i na mapě.

Jméno

Pracovní název byl Litlingo. Inspirace Duolingem byla ale až moc doslovná a část „lingo“ k češtině neseděla — držel jsem ho jen jako placeholder, dokud nepřijde něco lepšího.

Litera je jedno slovo, které nese celý obor, čte se stejně česky i anglicky a začíná písmenem, ze kterého se dá postavit značka. To rozhodlo.

Značka

Značka je verzálkové L, kterému spodní rameno vybíhá do záložky do knihy. Jeden tvar, dvě čtení: písmeno i předmět. Postavené na čtvercové mřížce, aby fungovalo jako ikona aplikace ve stejné kvalitě jako v logotypu.

Konstrukce — z hranatého L přes zaoblení k výřezu záložky

Barevná verze značku rozvrství: tmavší navy tvoří „desky“, světlejší modrá stránku, která se z nich vysouvá. Ta hloubka je jediné, co se v logu za celý proces měnilo.

Cesta k finálnímu rozvrstvení

Barvy

Modrá záměrně, ne z rozpaků: aplikace se používá večer a před zkouškou, kdy je poslední, co člověk potřebuje, křiklavá barva. Navy nese plochy a hlavičky, světlejší modrá akcenty a stavy. Zlatá je vyhrazená mincím a odměnám, zelená splněnému okruhu — nic jiného je nesmí použít.

Hodnoty jsou odečtené přímo z vektoru loga, aby digitál a tisk seděly na stejný odstín.

Logotyp a podznačky

Aplikace není jedna obrazovka, ale rozcestník na tři menší — audio, mapu a literární teorii. Každá si zaslouží vlastní identitu, ale žádná nesmí odejít od mateřské značky. Řešením je jeden logotyp s vyměnitelným podpisem: značka a slovo Litera zůstávají, mění se jen slovo pod nimi.

Tři podaplikace, jeden logotyp — mění se jen podpis Celý proces na jedné ploše — od skic po finální exporty

Rozhraní

Devět obrazovek nad společnou datovou vrstvou. Knihy i autoři žijí v jednom JSON, na který se napojují všechny části aplikace — takže když se do seznamu přidá kniha, objeví se zároveň v přehledu, v audiu i mezi otázkami. Autoři a díla jsou provázaní oboustranně: z knihy se dá prokliknout na autora a od něj zpátky na jeho ostatní díla.

Výběr knih — plán četby ukazuje, kolik do splnění okruhu zbývá

Plán četby je jediná věc, kterou uživatel uvidí, i když aplikaci otevře jen na minutu. Čtyři pruhy, čtyři čísla — a hned je jasné, který okruh zaostává a co si vzít jako další knihu.

Obě detailní stránky sdílí stejnou kostru: tmavá hlavička s ilustrací, pod ní čtyři akce ve stejném pořadí a pak už jen obsah v kartách. Kdo se naučí jednu, umí i druhou.

Literární teorie — směry, znaky a autoři, kteří do nich patří

Mapa vznikla jako druhá hra: otázka na místo — kde autor žil, kam spisovatel zasadil děj — a mapa světa, do které se kliká. Má životy, nápovědy, úrovně a násobič skóre; obtížnost i otázky se nastavují v JSONu, takže přidat level znamená napsat pár řádků dat, ne kód.

Ilustrace autorů

Portrét autora v učebnici je černobílá fotka z devatenáctého století. To je přesně ten tón, kvůli kterému si k literatuře nikdo nesedne dobrovolně. Každý autor v aplikaci proto dostal vlastní vektorovou ilustraci — plochý, přátelský styl bez obrysů, blízko tomu, co dělá Duolingo.

Hotové portréty — jeden styl, různé siluety

Postup je u všech stejný: dobové fotografie nebo portréty jako reference, pak stavba tvarů odspodu nahoru — hlava, vlasy, oči, nos, ústa, oblečení. Každá část je vlastní objekt, takže se dá kdykoli vyměnit, aniž bych sahal na zbytek.

John Steinbeck — první autor, a proto nejvíc variant

Každý autor dostal jeden atribut, po kterém se pozná dřív než po tváři — Exupéry leteckou helmu, Molière paruku a dvorský kabát, Havlíček uniformu. Ilustrace pak funguje i v miniatuře v seznamu, kde je vysoká čtyřicet pixelů.

Molière — z dobových portrétů do plochého vektoru

Nejvíc práce mi u autorů ušetřila funkce kreslení uvnitř vrstev — brýle na Exupéryho letecké helmě by se jinak dělaly násobně dýl.

Avatar uživatele

Autoři jsou pevně dané postavy. Svou vlastní si ale skládá uživatel — a pro ni vznikl samostatný modulární soubor. Hlava, oči, vlasy a ústa jsou vlastní skupiny, každá s několika styly a odstíny, které se zapínají a vypínají. Kombinací vznikne postavička, kterou pak člověk vidí ve svém profilu a v pravém rohu navigace.

Kreslený je ve stejném plochém stylu jako autoři, aby avatar a portréty v seznamu držely pohromadě. Rozdíl je v zadání: u autora musí sedět jedna konkrétní tvář, u avatara musí vypadat dobře každá kombinace.

Modulární soubor avatara — styly vlasů, očí a úst jako přepínatelné vrstvy

Tiskoviny a merch

Značka musela obstát i mimo obrazovku. Nosným prvkem je šipka odvozená z výřezu záložky — v tiskovinách se z ní stává pruh, který drží kompozici pohromadě. Na malých plochách jde do hry samotná značka, na velkých plný logotyp.

Co si z toho beru

Projekt měl původně dva lidi — mě na grafiku a kamaráda na kód. Po třech týdnech se cesty rozešly a zbyl jsem na to sám. To znamenalo škrtnout půlku plánu, začít u datové struktury a teprve nad ni stavět vzhled. Zpětně to byl ten správný pořádek: první verze aplikace vznikla rychle a vypadala mizerně, druhá vznikla nad hotovými daty a mohla se soustředit na to, jak se ovládá.

Kód jsem psal s pomocí jazykových modelů a průběžně si zapisoval, který se k čemu hodí. To srovnání se nakonec stalo samostatnou částí maturitní práce — a naučilo mě zadávat práci líp než většina návodů.

Největší lekce je ale z ilustrací. Autory jsem zpočátku kreslil každého úplně od nuly a teprve v průběhu se ustálil postup — reference, stavba po částech odspodu, jeden poznávací atribut. U avatara jsem díky tomu rovnou stavěl modulární soubor s přepínatelnými vrstvami a nezkoušel deset variant vedle sebe. Systém se vyplatí postavit dřív, než začne být potřeba.

Momentální verze V2.4 — třetí verze se stále vývíjí.

Zpět na projekty →