Advanced Interactive Style Guide for Design Consistency

Abstract

A design initiative for advanced user interfaces began several years ago with the intent to provide design guidelines for new applications in the form of an interactive prototype toolkit called the User Interface Prototyping Toolkit (UIPT). The concept was to develop a tool that would allow sponsors, customers, end users, designers, engineers and software developers to work together in an iterative fashion to achieve a tailored user interface for the application of interest. An advanced or modern style was applied to the interface to provide a more current and modern look and feel to the user while still adhering to solid principle of design, workflow, tasks, layout, coloring, size, animated actions and user cues or alerts. An overarching goal was to design with a general repeatable structure. This allows each new project to understand what elements are used for and how the work within the user interface. This concept was further exploited by integrating multiple domains within in the same software application and leveraging the use of an end user’s role to smoothly transition from the display from one user role to that of another. UIPT has been successfully integrated with over four projects and a series of user roles and the user interfaces associate with those roles. To maintain this design philosophy an interactive style guide began to be developed to apply design consistency across the multiple projects that utilize UIPT. This interactive style guide just happens to be built with Unity, a 2D and 3D game engine. This is the same tool used to prototype these user interfaces. As such the styles for size, color, layout and other design factors are laid out in an application which can be run to view and work with user interface element illustrated in the common design guide for the projects. Software developers obtain an advantage of having access to the code of the interactive style guide which contains not only how the code is to be implemented but contains the style specification already built into the code. This is advantageous as a means maintain design consistency, not having to repeat design and software development for a majority of the user interface. Additionally, new software developers and designers are provided with a solid template which helps in bring them up to speed at an accelerated rate.