Tato bakalářská práce je zaměřena na vylepšení uživatelského rozhraní webové aplikace
MCUXpresso Web SDK Builder firmy NXP Semiconductors. V teoretické části je vysvětlen
designový nástroj Figma a práce s ním v porovnání s jinými konkurenčními grafickými ná-
stroji. Poté je čtenář seznámen s webovou aplikací MCUXpresso Web SDK Builder. Vy-
světlena je i problematika spojená s UX/UI designem, jeho zásadami a testováním.
V praktické části bakalářské práce byly detailně analyzovány vybrané části webové aplikace
MCUXpresso Web SDK Builder. Byla vytvořena tři rozdílná rozhraní webové stránky s od-
lišnými návrhy pro jednotlivé analyzované části implementující řešení nedostatků vyplýva-
jících z provedené analýzy. Tyto návrhy byly otestovány vhodnou testovací metodou. Dle
výsledků provedeného testování bylo vybráno navržené rozhraní a implementováno do
UX/UI designu dané webové aplikace.
Anotace v angličtině
This bachelor thesis is focused on improving the user interface of the web application
MCUXpresso Web SDK Builder from NXP Semiconductors. The theoretical part explains
the design tool Figma and its comparison with other competing graphic tools. Then the
reader is introduced to the interface of the web application MCUXpresso Web SDK Builder.
The UX / UI design issues, principles and testing are also explained.
In the practical part of the bachelor thesis, selected parts of the MCUXpresso Web SDK
Builder web application were analyzed in detail. Three different website interfaces were
created with different designs for the analyzed individual parts, implementing the solution
of the shortcomings resulting from the performed analysis. These designs were tested by the
appropriate test method. According to the results of the performed testing, a suitable de-
signed interface was selected and implemented into the UX / UI design of the given web
application.
Klíčová slova
UX/UI, MCUXpresso Web SDK Builder, Figma, Web Design
Klíčová slova v angličtině
UX/UI, MCUXpresso Web SDK Builder, Figma, Web Design
Rozsah průvodní práce
77 s. (99 500 znaků)
Jazyk
CZ
Anotace
Tato bakalářská práce je zaměřena na vylepšení uživatelského rozhraní webové aplikace
MCUXpresso Web SDK Builder firmy NXP Semiconductors. V teoretické části je vysvětlen
designový nástroj Figma a práce s ním v porovnání s jinými konkurenčními grafickými ná-
stroji. Poté je čtenář seznámen s webovou aplikací MCUXpresso Web SDK Builder. Vy-
světlena je i problematika spojená s UX/UI designem, jeho zásadami a testováním.
V praktické části bakalářské práce byly detailně analyzovány vybrané části webové aplikace
MCUXpresso Web SDK Builder. Byla vytvořena tři rozdílná rozhraní webové stránky s od-
lišnými návrhy pro jednotlivé analyzované části implementující řešení nedostatků vyplýva-
jících z provedené analýzy. Tyto návrhy byly otestovány vhodnou testovací metodou. Dle
výsledků provedeného testování bylo vybráno navržené rozhraní a implementováno do
UX/UI designu dané webové aplikace.
Anotace v angličtině
This bachelor thesis is focused on improving the user interface of the web application
MCUXpresso Web SDK Builder from NXP Semiconductors. The theoretical part explains
the design tool Figma and its comparison with other competing graphic tools. Then the
reader is introduced to the interface of the web application MCUXpresso Web SDK Builder.
The UX / UI design issues, principles and testing are also explained.
In the practical part of the bachelor thesis, selected parts of the MCUXpresso Web SDK
Builder web application were analyzed in detail. Three different website interfaces were
created with different designs for the analyzed individual parts, implementing the solution
of the shortcomings resulting from the performed analysis. These designs were tested by the
appropriate test method. According to the results of the performed testing, a suitable de-
signed interface was selected and implemented into the UX / UI design of the given web
application.
Klíčová slova
UX/UI, MCUXpresso Web SDK Builder, Figma, Web Design
Klíčová slova v angličtině
UX/UI, MCUXpresso Web SDK Builder, Figma, Web Design
Zásady pro vypracování
Seznamte se s nástrojem pro tvorbu designu Figma.
Prostudujte webovou aplikaci MCUXpresso Web SDK Builder.
Nastudujte problematiku UI/UX.
Navrhněte a implementujte vylepšení UI/UX pro rozhraní aplikace MCUXpresso Web SDK Builder.
Implementujte a otestujte různá rozhraní.
Všechny výsledky vhodně vyhodnoťte.
Zásady pro vypracování
Seznamte se s nástrojem pro tvorbu designu Figma.
Prostudujte webovou aplikaci MCUXpresso Web SDK Builder.
Nastudujte problematiku UI/UX.
Navrhněte a implementujte vylepšení UI/UX pro rozhraní aplikace MCUXpresso Web SDK Builder.
Implementujte a otestujte různá rozhraní.
Všechny výsledky vhodně vyhodnoťte.
Seznam doporučené literatury
ŘEZÁČ, Jan. Web ostrý jako břitva: návrh fungujícího webu pro webdesignery a zadavatele projektů. 1st ed. Jihlava: Baroque Partners, 2014. 211 s. ISBN 9788087923016.
KRUG, Steve. Don't make me think, revisited: a common sense approach to Web usability. Third edition. [Berkeley, California]: New Riders, [2014], xi, 200 s. ISBN 9780321965516.
STANÍČEK, Petr. Dobrý designér to všechno ví!. I. vydání. Kamenné Žehrovice: vydáno vlastním nákladem autora, 2016, 306 s. ISBN 9788026094272.
MICHÁLEK, Martin. Vzhůru do (responzivního) webdesignu. Verze 1.1. Praha: vlastním nákladem autora, 2017, 268 s. ISBN 9788088253006. Dostupné také z: https://www.vzhurudolu.cz/ebook-responzivni
Learn Design with Figma. Figma [online]. San Francisco: Figma, 2016 [cit. 2021-11-30]. Dostupné z: https://www.figma.com/resources/learn-design/
Learn design. 99 Designs: by Vista [online]. Melbourne, Australia: 99Designs, 2008 [cit. 2021-12-01]. Dostupné z: https://99designs.com/blog/channel/learn-design/
Seznam doporučené literatury
ŘEZÁČ, Jan. Web ostrý jako břitva: návrh fungujícího webu pro webdesignery a zadavatele projektů. 1st ed. Jihlava: Baroque Partners, 2014. 211 s. ISBN 9788087923016.
KRUG, Steve. Don't make me think, revisited: a common sense approach to Web usability. Third edition. [Berkeley, California]: New Riders, [2014], xi, 200 s. ISBN 9780321965516.
STANÍČEK, Petr. Dobrý designér to všechno ví!. I. vydání. Kamenné Žehrovice: vydáno vlastním nákladem autora, 2016, 306 s. ISBN 9788026094272.
MICHÁLEK, Martin. Vzhůru do (responzivního) webdesignu. Verze 1.1. Praha: vlastním nákladem autora, 2017, 268 s. ISBN 9788088253006. Dostupné také z: https://www.vzhurudolu.cz/ebook-responzivni
Learn Design with Figma. Figma [online]. San Francisco: Figma, 2016 [cit. 2021-11-30]. Dostupné z: https://www.figma.com/resources/learn-design/
Learn design. 99 Designs: by Vista [online]. Melbourne, Australia: 99Designs, 2008 [cit. 2021-12-01]. Dostupné z: https://99designs.com/blog/channel/learn-design/
Přílohy volně vložené
-
Přílohy vázané v práci
-
Převzato z knihovny
Ne
Plný text práce
Přílohy
Posudek(y) oponenta
Hodnocení vedoucího
Záznam průběhu obhajoby
Student odprezentoval před komisí hlavní cíle a výsledky své bakalářské práce. Prezentace působila velmi dobrým dojmem, student vystihl hlavní body práce. Následně byl student seznámen s posudky vedoucího a oponenta bakalářské práce. Student postupně odpověděl na otázky oponenta práce.
Komise vznesla k obhajobě následující dotazy:
1) Doc. Sysel: Ve Vašem ocenění odhadu člověkohodin chybí zpracování technické dokumentace.
2) Dr. Dulík: Je ve Vaší práci odkaz na webové SDK?
3) Dr. Dulík: Vaše práce se zabývala modernizací existujícího SW?
4) Doc. Sysel: Rozdělení 7 lidí do 3 skupin není staticky významný vzorek.