Design process of web application

Cilj rada je u teorijskom dijelu objasniti i opisati cjelokupan proces dizajniranja aplikacije; od početnog idejnog rješenja, mockup skica do front-end programiranja, implementacije ideja i rješenja dizajnera u strukturu aplikacije. Smjernice dobrog dizajna su isto tako bitan čimbenik dizajniranja i kreiranja korisničkog sučelja, stoga će biti predstavljene u ovome radu. Bit će objašnjeno kako napraviti okvirnu skicu izgleda aplikacije, te opis i sadržaj najvažnijih alata u programu Balsamiq Mockups, zatim opis i suvremeni način shematskog prikaza web stranice, odnosno wireframeova. U nastavku će se opisivati kakva je to troslojna arhitektura aplikacije (Models, Views, Controllers), te najbitnija sastavnica MVC strukture potrebna za izradu ovoga rada; Views ili „pogledi“. U metodologiji rada će biti obrađeni koraci u dizajniranju web aplikacije, koji alati i programi se koriste pri dizajniranju, primjerice program Balsamiq Mockup za izradu wireframeova i skica aplikacije, program Adobe Photoshop za obradu grafičkih elemenata, te naposljetku program za samu izradu web aplikacije, kreiranje MVC arhitekture i izrada pogleda u HTML-u i CSS-u; Microsoft Visual Studio. U praktičnom dijelu rada, tj. kao rezultat istraživanja bit će izrađena i predstavljena u radu jednostavna aplikacija za evidenciju polaznika radionice, koja će služiti kao upis korisnika na neku unaprijed kreiranu radionicu, sa svim važ- nim informacijama, kao što su vrijeme, mjesto i kratak opis teme radionice. Za potrebe te aplikacije implementirati će se moderan i jednostavan dizajn, prema uputama i smjernicama iz teorijskog dijela. Nakon predstavljanja praktičnog dijela rada, slijedi analiza korisničkog iskustva na temelju izrađene aplikacije. Na kraju, komentari i prijedlozi autora biti će obrađeni u raspravi.The aim of the paper is to explain and describe in the theoretical part the whole process of designing the application; from the initial conceptual solution, mockup sketches to front-end programming, implementation of ideas and design solutions to the application structure. Good design guidelines are also an essential component of designing and creating a user interface, so they will be presented in this paper. It will be explained how to make a sketch of the layout of the application, as well as the description and content of the most important tools in Balsamiq Mockups, then a description and a modern way of schematic presentation of the website or wireframes. Below, it will be described what is the three-dimensional application architecture (Models, Views, Controllers), and the most important component of the MVC structure required for this work; Views. The methodology of the work will consider the steps in designing a web application, which tools and programs are used in designing, such as the Balsamiq Mockup program for wireframes and sketches, the Adobe Photoshop program for processing graphic elements, and ultimately the web application development program, creating MVC architecture and creating views in HTML and CSS; Microsoft Visual Studio. In the practical part of the work, as a result of the research, a simple application for the registration of workshop participants will be created and presented in the work, which will serve as a simple user entry to a pre-created workshop with all important information such as time, place and short description of workshop theme. For the purpose of this application, a modern and simple design will be implemented according to the instructions and guidelines of the theoretical part. After presenting a practical part of the work, it follows a user experience analysis based on the created application. Finally, the comments and suggestions of the author will be discussed in the discussion