Layouts

Common types of layouts#

Maps#

Wave is running on a lot of products that are relying on maps. Find the best principles of the map layouts below.

Half map layout#

Half map layouts are used when the user's attention has to be divided between the map and the content in the main container.

The following layout fits well in the context of a list of events or points on the map and the content in the main container.

One-page form
1
Left navigation
2
Main container
3
Map

Full map layout#

Full map layouts are suitable in a context when full user's attention has to be attached to the map. Work well for the map monitoring products.

One-page form
1
Left navigation
2
Map

Forms#

One-page form#

One-page form layouts are great if you need to collect a short amount of data from the user(s).

For example, user registration forms, comment sections, or creation of tickets.

Align the high-emphasis button to the left side in one-page form layouts.
One-page form
1
Top navigation header
2
The heading of the form
3
The body of the form
4
The footer of the form

Form in a stepper#

If the content in the form is divided into several sections or stages, the "Form in a stepper" layout should be used.

For example, reporting of incidents or creation of complex entities.

One-page form
1
Steps of the stepper
2
The heading of the form
3
The body of the form
4
The footer of the form

Forms in modals#

Forms can also be used in modal windows.

For example, when naming entities or describing reasons for certain actions.

One-page form
1
Header of the modal window
2
The body of the form
3
The footer of the form

Tables#

Stay tuned. More content coming soon.

Settings pages#

Stay tuned. More content coming soon.