< Zpět na články

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.

app4event

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).

Struktura symbolů, App4Event
Struktura symbolů

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.

Hlavní barvy festivalu, App4Event
Hlavní barvy reprezentující každý festival

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.

Ukázka rozdílných barevností , App4Event
Ukázka rozdílných barevností našich festivalů

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í.

Pro každý festival měníme 8 barev, App4Event
Pro každý festival měníme 8 barev (nahoře) a aktualizujeme styl. Poté aktualizujeme barevnost textů.

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.

Ukázka struktury vrstev, App4Event
Ukázka struktury vrstev. Vrstva second_color obsahuje barvu se 100% výplní a je obalena složkou s krytím 80%

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.

Složení motivu, App4Event
Složení motivu pro parallaxový efekt

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.

grafika motivu eventu, App4Event
Grafika motivu eventu s guidlines

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.

Ikona aplikace Lfš, App4Event
Ikona aplikace pro Letní filmovou školu

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.

Připravená struktura pro export iOS a Android ikonPřipravená struktura pro export iOS a Android ikon, App4Event
Připravená struktura pro export iOS a Android ikon

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.

Mockupy obrazovek, App4Event
Mockupy obrazovek z plochy a storů s ikonou aplikace

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č?

Varianty 3 hlavních obrazovek pro Android i iOS , App4Event
Varianty 3 hlavních obrazovek pro Android i iOS pro každý typ festivalů

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ů.

Přepsání symbolů napříč celou obrazovkou

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í.

Ukázka sponzoringu, App4Event
Ukázka sponzoringu pro Innogy, který je partnerem několika našich festivalů

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 :)

Název artboardu, App4Event
Název artboardu jako symbol nám automaticky vytváří strukturu ve Sketchi i v exportovaných souborech

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.

Mockupy, App4Event
Mockupy pro marketingové účely

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.

Jan Patka
Jan Patka

Máte zájem o spolupráci? Pojďme to probrat osobně!