Responzivní uživatelské rozhraní v kontextu moderního webového designu

Bc. Martin Peška

Diplomová práce

Responsive user interface in modern web design

Anotace:

Teoretická část této diplomové práce stručně shrnuje moderní designové trendy pro tvorbu webových stránek a poté se zaměřuje na jeden z klíčových designových trendů a to responzivní design. Tato práce obsahuje poměrně obsáhlou analýzu principů responzivního designu, přehled současných metod a nástrojů pro tvorbu responzivního designu. Dále obsahuje hlubší analýzu existujících nástrojů – převážně aplikačních rámců, a jejich srovnání. Na základě této analýzy tato práce popisuje základní metodiku práce se zvoleným nástrojem. Zároveň zvolený nástroj je použit pro implementaci praktické části práce. Práce obsahuje také popis obecných metodik pro návrh a tvorbu responzivní webové stránky. Praktická část práce se týká návrhu vlastní front-end aplikace pro internetové bankovnictví. Pro implementaci byly zvoleny technologie HTML 5, CSS 3, JavaScript a aplikační rámec AngularJS. Požadavky na funkcionalitu výsledné aplikace byly konzultovány s vývojáři společnosti Unicorn Systems a.s. a shrnuty v textové části týkající se návrhu webové aplikace. Textová část tedy obsahuje ještě stručný popis návrhu webové aplikace, její architekturu a popis implementačně zajímavých částí webové aplikace. Hlavním cílem práce je poskytnout společnosti Unicorn Systems a.s. metodiky pro tvorbu responzivních uživatelských rozhraní, které by v budoucnu mohly být využity na jejich projektech.

Abstract:

The theoretical part of the master thesis summarizes modern design trends for website development and then focuses on one of the key design trends – responsive design. This thesis contains relatively comprehensive analysis of principles of the responsive design, overview of current methods and tools for creating responsive design. The thesis also contains deeper analysis of existing tools – predominantly frameworks and their comparison. Based on this analysis one of the tools is selected and described methodology of work with selected tool. Selected tool is also used in in the practical part of the thesis. The practical part designs front-end part of web application used for internet banking. There were chosen following technologies for the implementation: HTML 5, CSS3, JavaScript and Angular framework. Functionality requirements were consulted with developers of Unicorn Systems and summarized in the text including design description. The text part of the thesis therefore contains design description, description of used architectures and description of selected interesting parts of the implementation. The aim of this thesis is to provide methodology to design responsive user interfaces which will be used by Unicorn Systems on their projects.

Klíčová slova

Responzivní design, trendy moderního webového designu, fluidní mřížka, dotazy na médium, adaptivní obrázky, responzivní rozložení, front-end, internetové bankovnictví

Jazyk práce: čeština

Datum vytvoření / odevzdání či podání práce: 3. 1. 2017

Obhajoba závěrečné práce

• Obhajoba proběhla 9. 2. 2017
• Vedoucí: doc. RNDr. Barbora Kozlíková, Ph.D.
• Oponent: RNDr. Igor Chalás

Masarykova univerzita

Fakulta informatiky

Magisterský studijní program / obor:
Informatika / Počítačová grafika