Nový vzhled Profotek jsme prototypovali za pomoci nástroje Figma. Design jsme vytvořili na základě nových druhů obsahu, které by měl prezentovat. Protože jsme Profotky rozšířili o články a kompilace fotografií, bylo jasné, že starý systém zobrazení nebude fungovat. Ve Figmě jsme nejdříve vytvořili prototypy společných prvků - navigace, zápatí a podobně. Dále jsme přepracovali zobrazení fotografií a UI pro jejich stažení. Nakonec jsme vytvořili návrh zobrazení nových druhů obsahu.

Obsahové změny

Jak je zmíněno výše, nové Profotky nabízí také nový obsah. Z klasické fotobanky jsme aplikaci přepracovali na osobní web o focení.

Profotky jsou aktuálně rozšířeny o články o focení a osobních zkušenostech našeho týmu. Také plánujeme návody a recenze.

Další druh nového obsahu jsme pojmenovali Kompilace fotografií. Jak název napovídá, jedná se výběr, kompilaci, tematicky příbuzných fotografií. Kompilace budou doplněny o zajímavé informace týkající se objektů zachycených na fotografiích nebo zajímavosti z jejich pořizování.

Také uvažujeme o rozšíření o video obsah nebo zvukové stopy.

Nyní se soustředíme na úpravy informací u již zveřejněných fotek. Především rozšíření popisků.

Další drobnou obsahovou změnou je zobrazení informací o autorech obsahu.

Technologické změny

U nové aplikace jsme přešli k frameworku React na straně front-endu. Aplikace je rychlejší a dynamičtější. Obsah načítáme pomocí volaní nové API.

API je naprogramována v PHP 8. Využili jsme Infinity MVC (https://www.bluenet.cz/infinity-mvc), který pohání server side. Data stále ukládáme do MySQL databáze.

Aplikace je samozřejmě plně responzivní. Tentokrát jsme ovšem nevyvíjeli metodou mobile-first, ale nejdříve jsme vytvořili design pro PC a zařízení s velkou obrazovkou. Poté jsme aplikaci škálovali na menší zařízení.

Nová aplikace i nadále splňuje požadavky Progresive Web Apps (PWA) a je instalovatelná na Android zařízení i PC za použití prohlížeče Google Chrome.

Pro PWA jsme navrhli novou offline část aplikace, která lépe prezentuje aktuální stav připojení k internetu a zároveň je designově shodná s online verzí.

Na obrázcích níže je srovnána hlavní strana aplikace. Levý obrázek zachycuje původní systém. Vpravo je nová aplikace. Protože původní Profotky byly koncipovány jako fotobanka, primárně jsme se zaměřovali na prezentaci fotek. Nyní je pro nás důležité uživatelům nabídnou jak fotografie, tak i nový obsah (články, kompilace).

Profotky - nová aplikace v Reactu
Profotky - nová aplikace v Reactu