Introduction to application UI design

By applications user interface, we refer to software thatpresent a set of functions to the user. Typical examples of such systems isRADAR, echo sounder or window wiper systems. Applications are designed using acollection of standard components that can be assembled according to OpenBridgeguidelines.

The application UI design guidelines offer specification ofhow to design applications that is compliant with OpenBridge and can beintegrated seamlessly in OpenBridge compliant bridge systems. However, theapplication design guidelines can be applied both to applications working on anintegrated ship bridge workplace or on standalone systems.

This introduction provides an overview of the main sectionsof the guideline. Follow the links for more detailed description.

 

Application layout and navigation

OpenBridge applications have a strict main structure with afixed topbar on the top with a set of mandatory and optional functions. Theapplication take up a full screen space and can scale responsively to a rangeof screen sizes. Top left corner of the application offer access to navigationwithin the application.

Widget layout and navigation

OpenBridge widgets are components showing a subset ofinformation that can be embedded in other applications. For instance, conningapplications can be assembled by a set of widgets. The widgets have a collapsedmenu on the top right corner. The widgets should be designed to scale to fitdifferent viewing areas…

Size and scaling

OpenBridge applications scales according to screen size anddistance. All applications should be designed using design patterns related toresponsive design allowing applications to adapt to various screen sizes…

User interface components

All interface are constructed using standardized userinterface components. This include basic UI components such as buttons andnested components that are assembled by two or more basic components.

           Typography

OpenBridge provides guidelines for clear and legible textwith a focus on reducing number of text style variants and emphasize meaningfulformatting of text.  

           Shapes

The interface is made up of a series of shapes and statesthat can be used in designing new components.

           Color and palettes

The OpenBridge Design systemorganizes colors into types of colors reflecting the function each color has inan application. This makes it easier to develop and change between in a moreconsistent way.

Icons

OpenBridge offer a basic library of Icons and rules for howto use the icons in applications design.