Common Interactive Style Guide for Designers and Developers Across Projects

Abstract

Advanced user interfaces continue to improve through better design which in turn translates to more effective development and end use. The intent of this work is to provide design guidelines that can be used across all new applications. An interactive prototype toolkit called the User Interface Prototyping Toolkit (UIPT) was developed to allow sponsors, customers, end users, designers, engineers, and software developers to work together in an iterative fashion to achieve a tailored but guided user interface for the application of interest. Modern styles were applied with a consistent and common look and feel while adhering to solid principle of design, workflow, tasks, layout, coloring, size, animation, and user cues. The design required a general repeatable structure for designers and developers with the intent to allow each new project to understand the overall design and incorporate the features and functionality in accordance with style guide principles. UIPT integrates multiple domains within in the same software application with the ability to efficiently transition an end user’s role from one display presentation to another. To date, several projects and user roles have been integrated into the UIPT. In support of this design philosophy an interactive style guide is in continuous development to apply a common reusable design across the multiple projects that utilize the UIPT-based interface. Both the UIPT application and the interactive style guide were built with Unity, a 2D and 3D game engine. Styles for size, color, layout, and other design factors are laid out in the style guide itself which can be run to visualize and examine interactions. This is advantageous for new and experience software developers because the guide itself contains the code and styles necessary to implement the various components of the user interface while supporting design consistency with reusable code for rapid deployment.