Jak u nás probíhá změna designu App4Event?

V tomto článku se podíváme na naši eventovou appku z designérského pohledu. Dozvíte se, jak probíhá změna designu pro každý nový event a také to, jaké jsme řešili problémy.

Řekli jsme STOP papírovým programům

App4event je mobilní aplikace pro festivaly a konference, kterou v Ackee interně vyvíjíme už od roku 2012. Obsahuje vše, co aplikace tohoto typu dovolí – seznam interpretů a událostí, časovou osu, notifikace, mapy, přehled míst, novinky, chat, ankety a mnoho dalšího. Její velkou výhodou je možnost aplikace vlastního designu, čímž je unikátní a právě proto ji filmové a hudební festivaly tak často poptávají.

Aplikaci dělíme podle typu událostí na festivalovou App4Fest a konferenční App4Conf. Během roku pustíme do světa okolo 20 samostatných appek, přičemž nejdál jsme se ohřáli až v Austrálii. Věděli jsme, že s přibývajícím počtem bude potřeba připravit univerzální řešení, aby každý festival zabral co nejméně času na design i vývoj.

S čím designeři bojovali?

První návrhy vznikaly ještě ve Photoshopu (Sketch se teprve rozjížděl). Při návrhu každého eventu jsme posílali klientovi manuál, podle kterého nám zaslal barevné schéma a pokud měl, tak i grafické zdroje svého brandu. My jsme v každém PSD aktualizovali barvy, vyměnili grafické podklady a poté exportovali náhledy klientům a podklady vývojářům. S tím souvisely tři hlavní problémy, které nám pomalu ale jistě začaly vývoj komplikovat:

1. Jakékoliv změny znamenaly úpravu všech souborů zvlášť. S tímto problémem se potýkalo více designerů a byl to také jeden z hlavních důvodů, proč se přecházelo na Sketch a jiné alternativy.
2. App4fest jako produkt stále inovujeme. Přibývají nové funkce a staré na základě testování upravujeme.
3. Při změně designu pro nový festival jsme museli postupně upravit vzhled obrazovek, kde se brand projevoval nejvíce. To znamená otevřít všechny zdrojové soubory, nastavit barvy, vyměnit grafiku, exportovat grafické podklady včetně náhledů pro klienta, dále ikony aplikace a grafiku do Storů... nebyl v tom zrovna moc pořádek.

Jakmile jsme měli jen trochu volného prostoru, rozhodli jsme se předělat celou aplikaci do Sketche. Věděli jsme, že tím získáme jeden krásný soubor, který:

• půjde jednoduše změnit pro konkrétní festival
• zrychlí práci na nových featurách
• umožní snadný export náhledů klientům a podkladů pro vývojáře

Sketch, konečně!

Při navrhování nové šablony ve Sketchi jsme museli myslet na to, jak ji udělat co nejuniverzálnější a zároveň pochopitelnou pro kohokoliv, kdo s ní bude v budoucnu pracovat. Struktura je navržena tak, abychom mohli jednoduše změnit vzhled podle aktuálního eventu a současně také vylepšovat jednotlivé obrazovky, popřípadě navrhovat celé nové sekce.

Struktura stránek

• Styles & Symbols: mění barevnost a grafiku napříč aplikací
• Android: seznam všech finálních obrazovek aplikace
• Playground: testování variant obrazovek a nových funkcí
• App Icon: náhledy ikon pro App store a Google Play
• Preview: náhledy obrazovek pro jednotlivé typy eventů (film, hudba, konference) vč. mockupů zařízen

Rozhodli jsme se pracovat jen s platformou pro Android, kvůli minimálním rozdílům. Pro iOS jsme připravili jen ty nejdůležitější obrazovky, které posíláme klientům jako mockupy a které lze využít dále pro marketingové účely.

Struktura symbolů

Struktura symbolů je znázorněna na následujícím screenshotu. Za zmínku stojí skupina symbolů Brand a Preview. Brand obsahuje symboly, jejichž obsah (logo, splash screena, app icon) se pro každý festival mění. Záložka Preview zase náhledy obrazovek pro jednotlivé druhy eventů (filmové, hudební, konference).

Barevnost

Základem každého eventu je jeho barevné schéma. Abychom mohli jednoduše změnit barvy podle brandu, připravili jsme strukturu tak, aby se jedním klikem změnila barva v celé aplikaci.

Pro každý nový event aktualizujeme celkem 8 barev. Brandové barvy, pozadí a barvy textů. Po aktualizaci stylů objektů s barvou změníme barvy textů. Vycházíme z tabulky níže, ve které máme přehled všech textů, které v aplikaci používáme - včetně jejich barvy pro kontrolu.

Globální změny ve Sketchi díky svým stylům a symbolům nejsou v současnosti nic nového, ale je potřeba to mít dobře rozmyšlené. Princip je jednoduchý. Všechny barvy (např. contrast color) používáme napříč designem se 100% výplní.

Pokud je nutné použít barvu s menším krytím, tak vrstvu obalíme složkou, ve které upravujeme transparentnost. Tím můžeme hezky měnit odstíny, aniž by se nám změnil styl objektu. Ani stíny jsme nemohli aplikovat přímo na styl barvy (nepoužíváme je všude), museli jsme vytvořit samostatnou vrstvu se stínem.

Grafika

Po barevných úpravách přichází na řadu změna grafických podkladů. Mezi nejviditelnější patří hlavní motiv festivalu, splash screen a pozadí na timeline. Nejzajímavější je asi právě hlavní motiv umístěný na dashboardu, který se skládá ze 3 vrstev pro dosažení parallaxového efektu při swipu. Výsledný obrázek má poté využití jako Google featured v Google Play storu.

Kvůli velkému počtu zařízení a zobrazení aplikace na landscape musí být obrázek širokoúhlý (3072x795px). Pak už se jen ořezává ze stran v závislosti na rozlišení mobilu. Zároveň ale musí být vždy viditelné logo, které kontrolujeme pomocí jednoduchých guidlines. A nakonec – snažíme se aktualizovat naše zdroje i podle nejnovějších zařízení, takže aktuálně přibyl například notch z iPhone X.

Dalším krokem je změna ikon. Jedná se o ikony aplikace, status bar ikonu a notifikační ikonu. Na poslední dvě jsme bohužel v minulosti často zapomínali. Pro nové Androidy jsme také přidali responsivní ikonu.

Pro ikony aplikace nejdříve připravíme design v rámci symbolu, který pak aplikujeme do hotové struktury pro export pro jednotlivé platformy. Tuto strukturu máme odděleně hlavně kvůli různému počtu velikostí a density u iOS.

Nakonec zkontrolujeme jak vypadají ikony aplikace na obou platformách a tyto obrazovky posíláme na kontrolu i klientům. Není tajemstvím, že pokud můžeme,  využíváme hotové šablony volně přístupné na internetu, které integrujeme do našeho Sketch souboru.

Pro všechny typy eventů (film/hudba/konference) a pro obě platformy máme vytvořené 3 hlavní obrazovky (dashboard, timeline, detail), které jsou převedeny do symbolů. A proč?

Symboly jsou následně vloženy jako zdroj do mockupů mobilních zařízení, která zasíláme klientům. Výhodou tohoto řešení je, že v mockupu můžeme přepsat veškerý obsah symbolů. V této fázi vývoje zpravidla od klienta nemáme seznam interpretů ani názvy filmů či přednášek. Pro každý event máme jen vzorová jména a někdy je nutné obsah přizpůsobit pro daný festival nebo pro oslovení nových klientů.

Nezapomínáme ani na sponzoring, který je pro organizátory velmi důležitý. V aplikaci je několik míst, kde ho je možné promovat. Logo je opět řešené jako symbol, který používáme napříč aplikací.

Exporty

Na začátku jsem zmiňoval, že chceme exportovat vše pomocí 1 kliku. Při návrhu nového eventu máme ve složce pouze Sketch soubor, všechny ostatní složky a soubory se vytvoří automaticky při exportu. Někde máme připravenou strukturu pro export již v názvu artboardu a někde ji řešíme přidáním prefixu. U některých artboardů jsme použili nastavení pevné šířky (např. 720w pro šířku exportovaného artboardu). Jediné k čemu jsme se ještě nedostali je automatické generování barev ze Sketche do textového souboru. Tak třeba v budoucnu :)

Exportovaná struktura:

• App Icon: Ikona aplikace ve všech potřebných formátech pro developery, včetně responsivní ikony pro nové Android verze
• Brand: obsahuje grafické podklady vycházející z brandu daného eventu. Tyto podklady si taktéž převezmou developeři
• PNG: seznam všech obrazovek
• Preview: obrazovky zasílané klientům. Součástí jsou náhledy obrazovek v mockupu a ikony aplikace

Poslední dobou se setkáváme s požadavkem klientů připravit také grafiku pro sociální sítě. Zatím jsme tedy připravili několik obecných mockupů, do kterých vkládáme screenshoty z aplikace.

Pár slov na závěr

Aplikaci se snažíme ve volných chvílích zlepšovat, takže zpětná vazba je pro nás důležitá. Vycházíme jednak z analytických nástrojů, které s každým eventem nasazujeme, druhak z uživatelských recenzí. A v neposlední řadě samozřejmě také z vlastní zkušenosti - jsme totiž aktivními účastníky několika různých filmových i hudebních festivalů, takže práci s aplikací můžeme pozorovat z první ruky. Víme, že je na aplikaci stále co zlepšovat...

V tomto blogu jsem se s vámi chtěl podělit o některé naše postupy a přiblížit, jak u nás probíhá práce na designu festivalů i lidem, kteří nejsou přímo z branže. Jak tomu bývá, některé věci bych nyní řešil jinak (i díky tomu, že se mezitím Sketch posunul o kus cesty dál). Použité postupy nejsou samy o sobě extra výjimečné, ale dohromady tvoří zajímavý systém, který nám při každém novém eventu neskutečně usnadňuje práci.