Converting layered images into user interfaces: an attempt to provide a design-to-markup framework

Abstract

The process of creating a user interface for any platform involves creating a visual design first and then implementing it using the desired user interface framework. This process can be complicated and lengthy – the code has to written individually when targeting multiple platforms, developer’s time is not efficiently used on writing repetitive boilerplate code and debugging common mistakes and pitfalls when using various user interface frameworks.

This thesis attempts to solve the abovementioned problems by introducing an intermediate markup language and a tool prototype that automates the process of converting mock-up layered images of the user interface to actual user interface code for a target platform. This approach helps to improve the time of creating a working user interface by automating markup generation, thus reducing the amount of hand-written code and common bugs made by developers. In addition, one user interface mock-up can be converted to real user interfaces on multiple platforms by using the extensible architecture of the prototype thus eliminating the need to write individual code for every targeted platform.

This thesis focuses heavily on Adobe Photoshop as the image editing tool and HTML and WPF/XAML as the target user interface frameworks.

Asiasanat:user interface, layered image, user interface implementation, multi-platform user interfaces, automatisation