Design guideline

The aim of this guideline is to make OpenBridge easily accessible for anyone wishing to implement OpenBridge user interfaces. This website is directed towards UI and UX designers, though we strive to make it accessible for anyone who works with developing user interfaces for the maritime industry.

Updates

Update
March 20, 2024

New article on the AR components in OpenBridge

We have published a new article on the AR components of OpenBridge. Click the link to read.

New feature
February 22, 2024

New open source OpenBridge Implementation

We're excited to share that we are making a new open source repository for our OpenBridge implementation! This project is built with webcomponents/lit, and we've also prepared wrappers for Vue and React to ensure a smooth integration for different development environments.

Update
November 24, 2023

OpenRemote will expand OpenBridge with ROC components

The OpenRemote project is set to extend OpenBridge with support for remote and autonomous maritime operations.

Update
July 28, 2023

IAS case update

We have expanded the case example for automation systems.

Update
June 6, 2023

OpenBridge 5.0 has been released

We are excited to introduce OpenBridge 5.0, the latest edition of the world's only open-source maritime design system.

New feature
November 16, 2022

Info pop-over

We have added new info popover components. The component can have multiple lines of info and are designed in three sizes.

New feature
November 3, 2022

New icons

Added a set of new icons for various info purposes.

New feature
November 3, 2022

Audio control

Added design components for audio control.

New feature
November 3, 2022

New calendar components

We have added a set of new calendar components in various formats.

Update
September 28, 2022

OpenBridge 4.0

We have updated the library to 4.0. The website have also been updated. Since there is a lot of content, there might be missing text or files, so please notify us if you find issues with the site.

Update
September 1, 2022

We are moving files and images

We are moving files and images to a new system which might result in down time, crashes and lack of content. All our images and documentation can still be seen in our Figma library.

Update
September 1, 2022

The Guideline is being upgraded to 4.0

We are starting to upgrade the website to OpenBridge 4.0. This process will take some time since the OpenBridge guideline is very large. In the process you can find clean libraries for all our versions in the Figma section of the web.

Update
August 24, 2022

OpenBridge web update

We are upgrading the website to include a proper user account system. Because of this you may experience problems with the site the following days. Also, you will have to create a new free account in order to access the entire website. We apologize for any inconvenience.

Update
June 22, 2022

OpenBridge 4.0 beta are here

The OpenBridge 4.0 beta can be accessed in the link below. This is a major release where we have tried to improve on the current version based on feedback and trials. We welcome comments and criticism so feel free to comment right into the Figma document. We depend on your help to be able to improve the system.

Update
June 14, 2022

OpenBridge expands to remote operations

We have just been awarded a new research grant for expanding OpenBridge to remote and autonomous control centres. The project has 21 partners from industry, academia, regulation, and government. We already have several case studies in work and looking forward to expanding OpenBridge further.

Update
April 1, 2022

Nor-Shipping

Meet us at hall T at Nor-shipping. You can also participate in an OpenBridge seminar Tuesday from 12.30-13.30.

Update
December 2, 2021

OpenBridge Membership Survey

OpenBridge has been driven as a research project with 27 consortium members. We are now considering transforming OpenBridge into an open industry and research community. Throughout this transformation process we want to better understand the industry interest in participating in OpenBridge. We kindly ask you to participate in an anonymous survey to help us learning how we can organize OpenBridge going forward. https://lnkd.in/dsPzi7b5

New feature
November 3, 2021

Floating application

We have added a new display formats for applications in the figma file. The floating application allows a program to be opened over a full screen application in a smaller window.

New feature
November 2, 2021

Integration system design templates

Added a new section to the Figma library supporting integration system design. This include screen management, remote screen control, short cut footer and floating application templates.

New feature
November 2, 2021

Physical interaction update

We have added physical interaction examples. The examples correspond to basic GUI components. The examples can be found in the Figma library.

Update
October 4, 2021

New example cases

The design cases has been updated to 3.0 components. We have added ACDIS, RADAR and Conning. The examples can be found under cases.

Update
September 29, 2021

Updated web components

Most web components have been updated to 3.0. Updates also made to the CSS components.

Update
September 24, 2021

Ship color

Ship color is slightly changed to better harmonise with interfaces. This change affects all components using the ship such as copass.

Update
September 24, 2021

Cards update

Cards are updated with smaller footprint to save space and better support its use as dividers in interfaces.

New feature
September 22, 2021

New bars and graphs section

We have expanded the collection of straight and radial bars, trends and graphs.

New feature
September 22, 2021

Automation components

We have added a new library of automation components.

Update
September 21, 2021

New guideline website structure

The guideline website have just been updated to a new structure that better reflect the new content in OpenBridge 3.0. We are updating and adding new content over the next few weeks.

Update
September 17, 2021

OpenBridge 3.0 update in progress

We are updating the guideline to 3.0 in the coming weeks. During the process there will be gradual changes made to the entire website.

New feature
August 30, 2021

OpenBridge 3.0 beta Figma files

We have released a preview of OpenBridge 3.0. It is found in the Figma page. The release include updates to most OpenBridge components. We have also added new automation, trend and bar sections.

Update
April 29, 2021

OpenBridge 2.0

OpenBridge 2.0 has been released.

Update
April 23, 2021

OpenBridge 2.0 Update in progress

We are upgrading the website to OpenBridge 2.0.The content of the website will change over the next week.

New feature
March 12, 2021

BETA figma libraries

We have added access to work in progress in the beta Figma files. These are in development and might change. The library now take advantage of the new variants feature in Figma for most components. We welcome comments in the Figma files. Also there is a long range of smaller changes.

New feature
March 3, 2021

New icons

We have added a lot of icons. The OpenBridge icon library now cover well over 100 icons for maritime user interfaces.

New feature
October 7, 2020

New web tools and implementation of maritime components

We have added new sections on Gitlab with new implementations of our maritime components and a tool supporting export of svg from our Figma files.

New feature
October 7, 2020

Alerts design pattern

We have added a design pattern for showing alerts in the top bar.

New feature
September 27, 2020

UI components

We have added new UI components and updated all the old ones.

Update
September 27, 2020

Navigation components

We have updated all the navigation components.

New feature
September 27, 2020

Maritime components

We have updated all the maritime components and added new ones on the website.

New feature
September 26, 2020

New design cases for Radar, ECDIS, Search Light and Conning

We have added four new design examples showing how OpenBridge can be used to develop applications such as ECDIS, Radar, Conning and Search Light. The cases include Figma design files.

New feature
September 24, 2020

The palette section has been updated

We have upgraded the OpenBridge palettes and the palette section.

New feature
September 24, 2020

New OpenBrige Figma files released

All Figma libraries has been updated to the new OpenBridge version. We are now updating the rest of the web to correspond to the changes.

Update
September 22, 2020

OpenBridge upgrades

In the following weeks we will do some major upgrades to the design guideline and the web site. Because of this there will be some temporary inconsistencies in the content.

New feature
May 20, 2020

Maritime components available on Figma

New responsive maritime components are now available in Figma.

Update
May 15, 2020

Updated palettes

We have expanded the GitLab library with all palettes.

Update
May 11, 2020

Figma palette files

All four palettes - Bright, Day, Dusk and Night - are now available on Figma. Go to the downloads section to see more.

Update
May 6, 2020

Icons added in icon area

We have added new alert icons to the icon menu.

Update
May 4, 2020

New alert section

The alert section and Figma document have been updated with icons following regulation.

New feature
April 23, 2020

Gitlab component library

We have added links to a Gitlab component library. For now it include CSS files for two palettes and a single button. We will add to this library and it is also possible for people to contribute to its development.

New feature
April 3, 2020

Figma library for OpenBridge

We have added a Figma library that make is possible to draw new OpenBridge interfaces using the popular Figma tool. This will help streamlinge development of OpenBridge applications.

New feature
April 3, 2020

Component request form

You can now submit requests for new components from the design guideline page.

Update
March 15, 2020

Ecdis case study

We have added a case study of an application as an example of how to use the design system.

New feature
March 14, 2020

Vendor area

We have added a new section describing the vendor area.

New feature
March 13, 2020

Registration page

We have added a new registration page.

New feature
March 2, 2020

Icons section

We have introduced a new Icon section. Many of the Icons we use in OpenBridge is coming from Google Material Design Library. The icon section lists the icons we use in OpenBridge and how we use them. We will expand the icon list as the project proceed.

Update
February 21, 2020

Various illustrations

We have added a lot of new graphics all over the guideline in order to make it easier to understand. We also added a video jingle, just because it looks nice.

New feature
February 21, 2020

Widget guideline

Added description of how to design OpenBridge widgets.

New feature
February 21, 2020

Settings guideline

Introduced settings design guideline that lay out how to design application settings.

Update
January 9, 2020

Updates color values

Changed the color values for ui-element colors, and the raised style.

New feature
January 9, 2020

Added App buttons to guideline

Added a new App button to the guideline. Check it out under UI Components.