Versions Compared

Old Version 16

changes.mady.by.user Ron Oemus

Saved on

compared with

New Version Current

changes.mady.by.user Ron Oemus

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Basics

The

basic framework of the

dashboard always consists of two organism, a header and the content area.

Within the content area are the boardlets. All content is based on the 24 Colum-Grid

The content area can be designed freely, all content must adhere to the 24-column grid. The content may not be positioned freely within the column grid. An overlay must be used for this. All content, in the best case boardlets, start at the top left. They must be placed next to and below each other within the column grid. The header organism always consists of a navigation molecule, logo atom and toolbar molecule.


More details you will find here.

Table of Contents
maxLevel5
minLevel2
outlinetrue
indent0
class<div>
printablefalse
separatorpipe

Info
iconfalse
titleZeplin Documentation

here you will find the handover and the Styleguide of this componente:
zpl.io/2ZNyJZE

Info
iconfalse
titleDownload Adobe XD UI-Kit

coming soon


Image Added
Basic Components of the Dashboard

The dashboard column-grid

The 24 Colum-Grid

The foundation of the design system is the modified bootstrap

frontend

column-grid.

this

This column-grid has 24 columns within the dashboard and 12 columns within the boardlets.

The dashboard is divided into two parts, header and content area. The 24 Columns Grid only applies within the content area. The grid has no column space, all distances are solved via the margin.

All different breakpoints have a 24 column-grid.

Image Added
24 Column-grid of the Dashboard



The dashboard spacing

Image Removed
Basic Components of the Dashboard

Dashboard Spacing


Base

web_max
(px)

web_max (rem)

web_min
(px)

web_min
(rem)

tablet_landscape
(px)

tablet_landscape
(rem)

tablet_portrait
(px)

tablet_portrait
(rem)

mobile_portrait
(px)

mobile_portrait
(rem)

kiosk
(px)		kiosk
(rem)
Breakpoint≥1800px-≥1200px-≥960px-≥576px-<576px-WiPWiP
Width192012012808010246476848375*23,438*WiPWiP
Height------102464--WiPWiP
Content Area











Column Width784.875523.25422.625311.93815*0,938*WiPWiP
Gutter261.62516180,580.5--WiPWiP
Content-Area Margin241,516180,580.560,375WiPWiP
Header Area











Header-Area241,5241,500483483483WiPWiP
Icon max241,5241,500483483483WiPWiP
Icon min181,125181,125483483483WiPWiP
Scrollableyes
yes
yes
yes
yes
WiPWiP
Navi and Toolbar











Height----644644644WiPWiP

*Iphone 6 / WiP = Work in Progress

Dashboard Breakpoints



The dashboard breakpoints

All dashboards are divided into different breakpoints. The breakpoints define the visual division and

spacing

distance of

dashboards and boardlets

organisms, molecules and atoms from each other in all possible digital formats. This UI design kit considers the Web_Max breakpoint as

the

default, all other breakpoints are located in the category subcategories.




Image Added



Web_Max
ID2 - Web Max Dashboard



Image AddedImage Removed
Web_Max/Dashboard


Info
iconfalse
titleDocumentation & Download


Astronaut
https://zpl.io/2ZNyJZE

Tokyo
https://zpl.io/2pGEvMQ

Adobe XD UI-Kit
coming soon






Web_Min
ID2 - Web Min Dashboard




Web_Min/Dashboard






Tablet
ID2 - Tablet Dashboard



Tablet_Landscape/Dashboard


Tablet_Portrait/Dashboard





Mobile
ID2 - Mobile Dashboard




Mobile_Portrait/Dashboard






Kiosk

Image Removed
Kiosk/Dashboard

EdgeOne Dashboard Example

The EdgeOne Dashboard always consists of a header and the content area. The content area can be freely designed, all content must adhere to the 24 grid column. In the header, burgers, datepicker, logo and setting are obligatory. More information about the header can be found here: ID2 - Header

Image Removed1920/Dashboard_EdgeOne_Astronaut

Info
iconfalse
titleZeplin Documentation

here you will find the handover and the Styleguide of this componente:
zpl.io/bzZlmM7

Image Removed1920/Dashboard_EdgeOne_Tokyo-at-Night

ID2 - Kiosk Dashboard



Image Added
Kiosk/Dashboard

Info
iconfalse
titleZeplin Documentation

here you will find the handover and the Styleguide of this componente:
zpl.io/bzZlmM7

X-Series Dashboard Example

The X-Series dashboard always consists of a header and the content area. The content area can be designed freely, all content must adhere to the 24 grid column. In the header are burger, datepicker, logo and setting obligatory. More information about the header can be found here: ID2 - Header

Image Removed
1920/Dashboard_X-Series_Astronaut

Image Removed
1920/Dashboard_X-Series_Tokyo-at-Night