UI / UX Design

Maturikon – vizuální identita & webová aplikace

která pomáhá studentům připravujícím se na maturitu z češtiny s procvičováním veškeré látky a testových úloh.

Rok :

2019

Kategorie :

Vzdělávání

Klient :

Kurzor

Délka trvání :

2 měsíce

Nový design platformy Maturikon. Vizuál obsahuje finální logo a studenty (cílovou skupinu).
Nový design platformy Maturikon. Vizuál obsahuje finální logo a studenty (cílovou skupinu).
Nový design platformy Maturikon. Vizuál obsahuje finální logo a studenty (cílovou skupinu).

Zadání :

Pro vzdělávací aplikaci Maturikon jsem měla navrhnout logo a vizuální styl značky, který by sjednocoval UI/UX design i bannerovou komunikaci. Cílem bylo oslovit studenty připravující se na maturitu z češtiny a zaujmout je moderním, ale srozumitelným vizuálním jazykem. V úvodní fázi jsem připravila tři skici kreativních směrů, které ukazovaly různé možnosti, jak značku uchopit.

Směr 1 – Pan iKA
Maskot s nadsázkou, který „nedoporučuje“ fiktivní krémy s názvy jako Oddalovač, Vymlouvač nebo Ignorovač. Humor a ironie v tomto konceptu mají za cíl studenty pobavit a zároveň jim připomenout, že výmluvy při přípravě na maturitu nepomůžou.

Směr 2 – Mozkové buňky
Koncept založený na myšlence „nakrm, vytrénuj a probuď“ své mozkové buňky. Vizuál i textová linka pracují s motivací a lehkou ironií – připomínají studentům, že u maturitní komise se s nimi nikdo párat nebude. Moodboard doplňuje slogan „Sorry, we are not your mother“, který zdůrazňuje samostatnost a zodpovědnost při přípravě.
Výzva: co ti zbývá? Zmobilizuj všechny své mozkové buňky a vyzkoušej Maturikon.

Směr 3 – Češtinu máš v malíčku!
V tomto směru jsem se rozhodla pro práci s dobře známým slovním spojením. Vycházela jsem z premisy, že cílem každého studenta je osvojit si látku tak dokonale, že po testu v aplikaci Maturikon získá naprostou jistotu. Tento text je přímým a sebevědomým sdělením.

Z mého pohledu je to jasná a skvělá volba pro klienta.

Prezentace tří koncepčních směrů pro vizuální identitu Maturikon.
Prezentace tří koncepčních směrů pro vizuální identitu Maturikon.
Prezentace tří koncepčních směrů pro vizuální identitu Maturikon.

Proces :

Mým cílem bylo transformovat roztříštěnou vizuální identitu Maturikonu v konzistentní digitální produkt. Nejprve jsem definovala ucelenou vizuální strategii a následně navrhla škálovatelný UI systém. Ten zahrnoval tvorbu knihovny UI komponent a definici variables, což zajistilo konzistenci napříč celou platformou. Finální design jsem vytvořila v Sketchi a pro bezproblémové předání vývojářům jsem použila Zeplin.

Ukázka UI dashboardu Maturikonu. Design hlavních sekcí s výsledky a datovými okny.
Ukázka UI dashboardu Maturikonu. Design hlavních sekcí s výsledky a datovými okny.
Ukázka UI dashboardu Maturikonu. Design hlavních sekcí s výsledky a datovými okny.
Mini manuál loga Maturikon (pravidla použití a varianty) a design UI oken pro login a registraci.
Mini manuál loga Maturikon (pravidla použití a varianty) a design UI oken pro login a registraci.
Mini manuál loga Maturikon (pravidla použití a varianty) a design UI oken pro login a registraci.

Výzva :

Naší hlavní výzvou bylo vytvořit digitální produkt, který by efektivně motivoval studenty k pravidelné přípravě na maturitní zkoušku. Bylo nezbytné navrhnout takové uživatelské rozhraní, které by nepůsobilo zastarale či příliš školsky, a zároveň muselo zůstat přehledné a intuitivní.

Klíčové bylo najít rovnováhu mezi energetickým, moderním vizuálem a jasným, informativním obsahem, aby aplikace uživatele neodradila ani ho nepřetížila. Zároveň bylo nutné zajistit, aby byl návrh UI škálovatelný a konzistentní napříč různými mobilními zařízeními a jejich rozlišeními.

Navíc bylo nutné přemýšlet do budoucna tak, aby byl design snadno adaptovatelný pro další předměty – například, aby Maturita z matematiky mohla v budoucnu využívat podklad kostkované mřížky, zatímco český jazyk zůstal u tečkované.

Výsledek :

Vznikla jednotná a soudržná vizuální identita, která úspěšně propojuje symboliku české maturity s moderním, hravým digitálním zpracováním. K vizualizaci identity jsem využila také 3D prvky vytvořené v Adobe Dimension, které pracovaly s barevností české vlajky. Díky svěžímu designu a intuitivnímu UI/UX aplikace působí přístupně, motivující a dokáže efektivně oslovit studenty v klíčové fázi přípravy.

👉 Poznámka: Současná webová stránka www.maturikon.cz už není z mé dílny, ale aplikace je stále k dispozici.

Návrh bannerové komunikace pro Maturikon: Vizuál obsahuje českou vlajku vytvořenou z 3D objektů u laptopu.
Návrh bannerové komunikace pro Maturikon: Vizuál obsahuje českou vlajku vytvořenou z 3D objektů u laptopu.
Návrh bannerové komunikace pro Maturikon: Vizuál obsahuje českou vlajku vytvořenou z 3D objektů u laptopu.
Kreativní návrh Error 404 stránky Maturikon. Vizuální metafora rozbitého obsahu (kelímek, jídlo, plechovka) u laptopu.
Kreativní návrh Error 404 stránky Maturikon. Vizuální metafora rozbitého obsahu (kelímek, jídlo, plechovka) u laptopu.
Kreativní návrh Error 404 stránky Maturikon. Vizuální metafora rozbitého obsahu (kelímek, jídlo, plechovka) u laptopu.

další projekty

UI / UX Design

Maturikon – vizuální identita & webová aplikace

která pomáhá studentům připravujícím se na maturitu z češtiny s procvičováním veškeré látky a testových úloh.

Rok :

2019

Kategorie :

Vzdělávání

Klient :

Kurzor

Délka trvání :

2 měsíce

Nový design platformy Maturikon. Vizuál obsahuje finální logo a studenty (cílovou skupinu).
Nový design platformy Maturikon. Vizuál obsahuje finální logo a studenty (cílovou skupinu).
Nový design platformy Maturikon. Vizuál obsahuje finální logo a studenty (cílovou skupinu).

Zadání :

Pro vzdělávací aplikaci Maturikon jsem měla navrhnout logo a vizuální styl značky, který by sjednocoval UI/UX design i bannerovou komunikaci. Cílem bylo oslovit studenty připravující se na maturitu z češtiny a zaujmout je moderním, ale srozumitelným vizuálním jazykem. V úvodní fázi jsem připravila tři skici kreativních směrů, které ukazovaly různé možnosti, jak značku uchopit.

Směr 1 – Pan iKA
Maskot s nadsázkou, který „nedoporučuje“ fiktivní krémy s názvy jako Oddalovač, Vymlouvač nebo Ignorovač. Humor a ironie v tomto konceptu mají za cíl studenty pobavit a zároveň jim připomenout, že výmluvy při přípravě na maturitu nepomůžou.

Směr 2 – Mozkové buňky
Koncept založený na myšlence „nakrm, vytrénuj a probuď“ své mozkové buňky. Vizuál i textová linka pracují s motivací a lehkou ironií – připomínají studentům, že u maturitní komise se s nimi nikdo párat nebude. Moodboard doplňuje slogan „Sorry, we are not your mother“, který zdůrazňuje samostatnost a zodpovědnost při přípravě.
Výzva: co ti zbývá? Zmobilizuj všechny své mozkové buňky a vyzkoušej Maturikon.

Směr 3 – Češtinu máš v malíčku!
V tomto směru jsem se rozhodla pro práci s dobře známým slovním spojením. Vycházela jsem z premisy, že cílem každého studenta je osvojit si látku tak dokonale, že po testu v aplikaci Maturikon získá naprostou jistotu. Tento text je přímým a sebevědomým sdělením.

Z mého pohledu je to jasná a skvělá volba pro klienta.

Prezentace tří koncepčních směrů pro vizuální identitu Maturikon.
Prezentace tří koncepčních směrů pro vizuální identitu Maturikon.
Prezentace tří koncepčních směrů pro vizuální identitu Maturikon.

Proces :

Mým cílem bylo transformovat roztříštěnou vizuální identitu Maturikonu v konzistentní digitální produkt. Nejprve jsem definovala ucelenou vizuální strategii a následně navrhla škálovatelný UI systém. Ten zahrnoval tvorbu knihovny UI komponent a definici variables, což zajistilo konzistenci napříč celou platformou. Finální design jsem vytvořila v Sketchi a pro bezproblémové předání vývojářům jsem použila Zeplin.

Ukázka UI dashboardu Maturikonu. Design hlavních sekcí s výsledky a datovými okny.
Ukázka UI dashboardu Maturikonu. Design hlavních sekcí s výsledky a datovými okny.
Ukázka UI dashboardu Maturikonu. Design hlavních sekcí s výsledky a datovými okny.
Mini manuál loga Maturikon (pravidla použití a varianty) a design UI oken pro login a registraci.
Mini manuál loga Maturikon (pravidla použití a varianty) a design UI oken pro login a registraci.
Mini manuál loga Maturikon (pravidla použití a varianty) a design UI oken pro login a registraci.

Výzva :

Naší hlavní výzvou bylo vytvořit digitální produkt, který by efektivně motivoval studenty k pravidelné přípravě na maturitní zkoušku. Bylo nezbytné navrhnout takové uživatelské rozhraní, které by nepůsobilo zastarale či příliš školsky, a zároveň muselo zůstat přehledné a intuitivní.

Klíčové bylo najít rovnováhu mezi energetickým, moderním vizuálem a jasným, informativním obsahem, aby aplikace uživatele neodradila ani ho nepřetížila. Zároveň bylo nutné zajistit, aby byl návrh UI škálovatelný a konzistentní napříč různými mobilními zařízeními a jejich rozlišeními.

Navíc bylo nutné přemýšlet do budoucna tak, aby byl design snadno adaptovatelný pro další předměty – například, aby Maturita z matematiky mohla v budoucnu využívat podklad kostkované mřížky, zatímco český jazyk zůstal u tečkované.

Výsledek :

Vznikla jednotná a soudržná vizuální identita, která úspěšně propojuje symboliku české maturity s moderním, hravým digitálním zpracováním. K vizualizaci identity jsem využila také 3D prvky vytvořené v Adobe Dimension, které pracovaly s barevností české vlajky. Díky svěžímu designu a intuitivnímu UI/UX aplikace působí přístupně, motivující a dokáže efektivně oslovit studenty v klíčové fázi přípravy.

👉 Poznámka: Současná webová stránka www.maturikon.cz už není z mé dílny, ale aplikace je stále k dispozici.

Návrh bannerové komunikace pro Maturikon: Vizuál obsahuje českou vlajku vytvořenou z 3D objektů u laptopu.
Návrh bannerové komunikace pro Maturikon: Vizuál obsahuje českou vlajku vytvořenou z 3D objektů u laptopu.
Návrh bannerové komunikace pro Maturikon: Vizuál obsahuje českou vlajku vytvořenou z 3D objektů u laptopu.
Kreativní návrh Error 404 stránky Maturikon. Vizuální metafora rozbitého obsahu (kelímek, jídlo, plechovka) u laptopu.
Kreativní návrh Error 404 stránky Maturikon. Vizuální metafora rozbitého obsahu (kelímek, jídlo, plechovka) u laptopu.
Kreativní návrh Error 404 stránky Maturikon. Vizuální metafora rozbitého obsahu (kelímek, jídlo, plechovka) u laptopu.

další projekty

UI / UX Design

Maturikon – vizuální identita & webová aplikace

která pomáhá studentům připravujícím se na maturitu z češtiny s procvičováním veškeré látky a testových úloh.

Rok :

2019

Kategorie :

Vzdělávání

Klient :

Kurzor

Délka trvání :

2 měsíce

Nový design platformy Maturikon. Vizuál obsahuje finální logo a studenty (cílovou skupinu).
Nový design platformy Maturikon. Vizuál obsahuje finální logo a studenty (cílovou skupinu).
Nový design platformy Maturikon. Vizuál obsahuje finální logo a studenty (cílovou skupinu).

Zadání :

Pro vzdělávací aplikaci Maturikon jsem měla navrhnout logo a vizuální styl značky, který by sjednocoval UI/UX design i bannerovou komunikaci. Cílem bylo oslovit studenty připravující se na maturitu z češtiny a zaujmout je moderním, ale srozumitelným vizuálním jazykem. V úvodní fázi jsem připravila tři skici kreativních směrů, které ukazovaly různé možnosti, jak značku uchopit.

Směr 1 – Pan iKA
Maskot s nadsázkou, který „nedoporučuje“ fiktivní krémy s názvy jako Oddalovač, Vymlouvač nebo Ignorovač. Humor a ironie v tomto konceptu mají za cíl studenty pobavit a zároveň jim připomenout, že výmluvy při přípravě na maturitu nepomůžou.

Směr 2 – Mozkové buňky
Koncept založený na myšlence „nakrm, vytrénuj a probuď“ své mozkové buňky. Vizuál i textová linka pracují s motivací a lehkou ironií – připomínají studentům, že u maturitní komise se s nimi nikdo párat nebude. Moodboard doplňuje slogan „Sorry, we are not your mother“, který zdůrazňuje samostatnost a zodpovědnost při přípravě.
Výzva: co ti zbývá? Zmobilizuj všechny své mozkové buňky a vyzkoušej Maturikon.

Směr 3 – Češtinu máš v malíčku!
V tomto směru jsem se rozhodla pro práci s dobře známým slovním spojením. Vycházela jsem z premisy, že cílem každého studenta je osvojit si látku tak dokonale, že po testu v aplikaci Maturikon získá naprostou jistotu. Tento text je přímým a sebevědomým sdělením.

Z mého pohledu je to jasná a skvělá volba pro klienta.

Prezentace tří koncepčních směrů pro vizuální identitu Maturikon.
Prezentace tří koncepčních směrů pro vizuální identitu Maturikon.
Prezentace tří koncepčních směrů pro vizuální identitu Maturikon.

Proces :

Mým cílem bylo transformovat roztříštěnou vizuální identitu Maturikonu v konzistentní digitální produkt. Nejprve jsem definovala ucelenou vizuální strategii a následně navrhla škálovatelný UI systém. Ten zahrnoval tvorbu knihovny UI komponent a definici variables, což zajistilo konzistenci napříč celou platformou. Finální design jsem vytvořila v Sketchi a pro bezproblémové předání vývojářům jsem použila Zeplin.

Ukázka UI dashboardu Maturikonu. Design hlavních sekcí s výsledky a datovými okny.
Ukázka UI dashboardu Maturikonu. Design hlavních sekcí s výsledky a datovými okny.
Ukázka UI dashboardu Maturikonu. Design hlavních sekcí s výsledky a datovými okny.
Mini manuál loga Maturikon (pravidla použití a varianty) a design UI oken pro login a registraci.
Mini manuál loga Maturikon (pravidla použití a varianty) a design UI oken pro login a registraci.
Mini manuál loga Maturikon (pravidla použití a varianty) a design UI oken pro login a registraci.

Výzva :

Naší hlavní výzvou bylo vytvořit digitální produkt, který by efektivně motivoval studenty k pravidelné přípravě na maturitní zkoušku. Bylo nezbytné navrhnout takové uživatelské rozhraní, které by nepůsobilo zastarale či příliš školsky, a zároveň muselo zůstat přehledné a intuitivní.

Klíčové bylo najít rovnováhu mezi energetickým, moderním vizuálem a jasným, informativním obsahem, aby aplikace uživatele neodradila ani ho nepřetížila. Zároveň bylo nutné zajistit, aby byl návrh UI škálovatelný a konzistentní napříč různými mobilními zařízeními a jejich rozlišeními.

Navíc bylo nutné přemýšlet do budoucna tak, aby byl design snadno adaptovatelný pro další předměty – například, aby Maturita z matematiky mohla v budoucnu využívat podklad kostkované mřížky, zatímco český jazyk zůstal u tečkované.

Výsledek :

Vznikla jednotná a soudržná vizuální identita, která úspěšně propojuje symboliku české maturity s moderním, hravým digitálním zpracováním. K vizualizaci identity jsem využila také 3D prvky vytvořené v Adobe Dimension, které pracovaly s barevností české vlajky. Díky svěžímu designu a intuitivnímu UI/UX aplikace působí přístupně, motivující a dokáže efektivně oslovit studenty v klíčové fázi přípravy.

👉 Poznámka: Současná webová stránka www.maturikon.cz už není z mé dílny, ale aplikace je stále k dispozici.

Návrh bannerové komunikace pro Maturikon: Vizuál obsahuje českou vlajku vytvořenou z 3D objektů u laptopu.
Návrh bannerové komunikace pro Maturikon: Vizuál obsahuje českou vlajku vytvořenou z 3D objektů u laptopu.
Návrh bannerové komunikace pro Maturikon: Vizuál obsahuje českou vlajku vytvořenou z 3D objektů u laptopu.
Kreativní návrh Error 404 stránky Maturikon. Vizuální metafora rozbitého obsahu (kelímek, jídlo, plechovka) u laptopu.
Kreativní návrh Error 404 stránky Maturikon. Vizuální metafora rozbitého obsahu (kelímek, jídlo, plechovka) u laptopu.
Kreativní návrh Error 404 stránky Maturikon. Vizuální metafora rozbitého obsahu (kelímek, jídlo, plechovka) u laptopu.

další projekty