Versions Compared

Old Version 13

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

stylecircle

outlinetrue
indent0
class<div>
printablefalse
separatorpipe


Image Added
Basic Components of the Dashboard

The

24 Colum

dashboard column-

Grid

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


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 Removed
Basic Components of the Dashboard

Image Removed
Web_Max/Dashboard_Spacing

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_
Min
Max

Image Removed
Web_Min/Dashboard_Spacing

Tablet

Image RemovedTablet_Landscape/Dashboard_Spacing

Image Removed
Tablet_Portrait/Dashboard_Spacing

Mobile

Image Removed
Mobile_Portrait/Dashboard_Spacing

Kiosk

Image Removed
Kiosk/Dashboard_Spacing

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

ID2 - Web Max Dashboard



Image Added
Web_Max/Dashboard

Image Removed1920/Dashboard_EdgeOne_Astronaut


Info
iconfalse
title
Zeplin
Documentation
here you will find the handover and the Styleguide of this componente:
& Download


Astronaut
https://zpl.io/

bzZlmM7

Image Removed1920/Dashboard_EdgeOne_Tokyo-at-Night

Info
iconfalse
titleZeplin Documentation
here you will find the handover and the Styleguide of this componente:

2ZNyJZE

Tokyo
https://zpl.io/

bzZlmM7

2pGEvMQ

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


Adobe XD UI-Kit
coming soon






Web_Min
ID2 - Web Min Dashboard



Image Added
Web_Min/Dashboard






Tablet
ID2 - Tablet Dashboard



Image AddedTablet_Landscape/Dashboard

Image Added
Tablet_Portrait/Dashboard





Mobile
ID2 - Mobile Dashboard



Image Added
Mobile_Portrait/Dashboard






Kiosk
ID2 - Kiosk Dashboard



Image Added
Kiosk/Dashboard

Image Removed
1920/Dashboard_X-Series_Astronaut

Image Removed
1920/Dashboard_X-Series_Tokyo-at-Night