Versions Compared

Key

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

...

  • It must be possible to create applications with the Design Kit.
  • Special requirements for the Design System were deliberately omitted. They are not part of the MVP.
  • All UI elements must be extendible to implement these special requirements. How and when special requirements will be implemented is still to be decided.
  • A look at the design systems "IBM carbon design system", "SAP Fiori Design System" and "Google Material Design" helps us to recognize which features are components of an MVP and which features are extensions.

UI-Elements

​

Toast Notification

Status
colourRed
titleNot f. MVP

  • Icon
  • Title
  • Subtext
  • Link
  • Toolbar
  • Colorcode
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check
Wannes: Since notifications are still functional unclear, do we exclude from MVP?
Templates ID'sAtoms, Molecules and OrganismsStatusMVP RequirementsFeaturesDocumentationToDoComments

ID1 Colors


Status
subtletrue
colourGreen
titledone



https://confluence.germanedge.com/x/XYC-AQ
https://wasp2-dev.myapp.de:444/live-style-guide/theming

  • Documentation
  • Final angular check

ID1 Typeface

Status
colourYellow
titleIn Progress



https://confluence.germanedge.com/x/YoC-AQ
  • Documentation 
  • Final angular check

ID1 Icon

Status
colourYellow
titleIn Progress



https://confluence.germanedge.com/x/_MYdAg
https://wasp2-dev.myapp.de:444/live-style-guide/icons
  1. Definition of Icon-Set for MVP
  2. Design of missing Icons
  3. Icon to Font
  4. Final angular check
  5. Documentation

ID2 Dashboard & basic components

Dashboard

Status
colourYellow
titleIn Progress

  • Header
  • Contentarea

https://confluence.germanedge.com/x/7KMdAg
code is missing
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Header

Status
subtletrue
colourGreen
titledone

  • Burger
  • Date & Datepicker
  • Product-Logo
  • Tool/App/Module Naming
  • Toolbar(Search-, Setting- & Notification Icon)

https://confluence.germanedge.com/x/JqQdAg
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check
Wannes: still struggling with date&datepicker in the header, we can filter but filter result is not shown there and as a user you can't see a filter has been used here. (did the test in dSFM)
→ we need the documentation of this end user tests. And yes, the filter result should be shown. But I think it is already.

Overlay

Status
colourYellow
titleIn Progress

  • Content
    • detailed Design Grid description

https://confluence.germanedge.com/x/76MdAg
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Floating Sidebar

Status
colourYellow
titleIn Progress

  • Action Icon
  • Title
  • Link

https://confluence.germanedge.com/x/IKIdAg
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Panel

Status
colourYellow
titleIn Progress

  • Contentswitch
  • Content
  • Toolbar

https://confluence.germanedge.com/x/LaQdAg
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check
Wannes: Navigation is a must for Menu editor development, must be aligned towards that functional demand. But functional demands of Notifications are still too unclear to be handled, wouldn't be better to get this out of the MVP?

Sandbox

Status
colourRed
titleNot f. MVP

Not MVP - must be discussed

Status
colourRed
titleNot f. MVP


Inline Notification

Status
colourYellow
titleIn Progress

  • Title
  • Subject
  • Link
  • Toolbar
  • Picture
  • Colorcode


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check
Wannes: an error and message handling when system is down, user can't log in ...
ID3 Boardlets & content components

Default Boardlet

Status
subtletrue
colourGreen
titledone

  • boardlet
    • Content Bereich
      • detailed Design Grid description
    • Toolbar
      • Icons
    • Title
    • Datepicker on demand
  • tabs
    • Toolbar bottom with control extension


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check
Wannes: incorporate search and filter?

Dialog

Status
subtletrue
colourGreen
titledone

  • Dialog
    • Form
      • Title
      • Content Bereich
      • Top Toolbar( only without Sidebar)
      • Bottom Toolbar( only without Sidebar)
        detailed Design Grid description 
    • Sidebar on demand
      • Title
      • Content Bereich
      • detailed Design Grid description
      • Top Toolbar 
      • Bottom Toolbar
    • Info Field


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Cards

Status
colourYellow
titleIn Progress

  • Content Card
    • Title
    • Subtitle
    • Toolbar
    • Drilldown
    • Content
  • Info Card*
    • Title
    • Subtitle
    • Content


  1. Design of missing Components
  2. Update Zeplin
  3. Detailed Design Grid description
  4. Documentation
  5. Final angular check
Wannes: we could first focus on menu and dashboard editor for now (content card)?

Overflow Menu

Status
colourYellow
titleIn Progress

  • Content
    • Group
    • Links
    • Button
  • Open Direction
  • Animation*
  • Parent ui-element/extension am button


  1. Design of missing Components
  2. Update Zeplin
  3. Detailed Design Grid description
  4. Documentation
  5. Final angular check


Tooltip

Status
colourYellow
titleIn Progress

  • Rookiemode Tooltip*
    • Content
  • Tooltip
    • Content
    • Whitelist/Blacklist


  1. Basic Design
  2. Present final design in UI/UX Guilde
  3. Zeplin Documentation
  4. Documentation
  5. Final angular check
Wannes: i think tooltip is MVP while rookiemode is not

Tags

Status
colourYellow
titleIn Progress

  • Icon Button
  • Text Link
  • Icon
  • Colorcode




  1. Basic Design
  2. Present final design in UI/UX Guilde
  3. Zeplin Documentation
  4. Documentation
  5. Final angular check


Modal

Status
colourYellow
titleIn Progress

  • Title
  • Subtitle
  • Link
  • Button


  1. Design of missing Components
  2. Update Zeplin
  3. Detailed Design Grid description
  4. Documentation
  5. Final angular check

ID4 Tables components
  1. Table header
  2. Table content
  3. Pagination
  4. controlbar & controlelements

Status
colourYellow
titleIn Progress

  • global search über alle spalten der Tabelle
  • spalten basierte suche/filter
    • Filterkriterien festlegen (gt, lt)
    • Filterkriterium sichtbar und deaktivierbar
  • Process bar
  • Toolbar top
  • Toolbar bottom
  • Paginierung
  • Buttons
  • pagination
  • global search over all columns
  • sorting per column
  • filtering per column
  • define filter property
  • select a row/ multiple rows
  • select all rows
  • show state of row/ rows

  1. Basic Design
  2. Present final design in UI/UX Guilde
  3. Zeplin Documentation
  4. Documentation
  5. Final angular check

Wannes:

  • column picker/chooser (an icon often on top of the table)
  • tree-table
  • error indicator
  • actions/information per record
  • scrollbar right and under
  • paging and pagination
  • simple search (single input)
  • advanced search (multiple inputs)
  • filter on table content

Informational: could be re-used:

  • progress bar in use X-series (don't restyle them, are in use already)
  • process bar in use X-series (don't restyle them, are in use already)
ID5 Buttons & control components
  1. Buttons

Status
colourYellow
titleIn Progress

  • Text
  • Icons
  • Switch
  • Text/Icon
  • Text/Text
  • Icon/Text/Icon
  • Button Style
  • Button Size
  • Button Type


  1. Design of missing Components
  2. Update Zeplin
  3. Detailed Design Grid description
  4. Documentation
  5. Final angular check

ID6 Link components

Link

Status
colourYellow
titleIn Progress

  • Icon Button
  • Text Link
  • Icon

ID6 Links Assets
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Tree

Status
colourYellow
titleIn Progress

  • Expand icon
  • Sub- or Checkbox Icon
  • Text Link
  • More Icon Button


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check

ID7 Input & Dropdown components
  1. Default input
  2. Specal input
  3. Default dropdown
  4. Special dropdown
  5. Dropdown Links
  6. Datepicker/Timepicker

Status
colourYellow
titleIn Progress




  1. Design of missing Components
  2. Update Zeplin
  3. Detailed Design Grid description
  4. Documentation
  5. Final angular check


Radio

Status
colourYellow
titleIn Progress

  • Icon Button
  • Text Link


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Checkbox

Status
colourYellow
titleIn Progress

  • Icon Button
  • Text Link


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Input

Status
colourYellow
titleIn Progress

  • Label field
  • Input field
    • Placeholder 
  • Info Container
    • Icon
    • Info Field
  • Input Style
    • Validation
    • State
    • Size


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Dropdown

Status
colourYellow
titleIn Progress

  • Label field
  • Input field
  • Icon Button
  • Content(Overflow Menu*)
    • Group
    • Button
  • Input Style
    • Validation
    • State
    • Size


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Multiselect

Status
colourYellow
titleIn Progress

  • Label field
  • Input field
  • Icon Button
  • Tag
  • Content(Overflow Menu*)
    • Group
    • Button
  • Input Style
    • Validation
    • State
    • Size


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Datepicker

Status
colourYellow
titleIn Progress

  • Input Field
  • Icon 
  • Toolbar Bottom
  • Contentswitch
  • Content
    • Title
    • Form
    • Sidebar
  • Input Style
    • Validation
    • State (Dropdown/Link)
  • select a date
  • select a time
  • select a date/time range
  • select a commonly used date range
  • manual date input
  • manual time input

  1. Basic Design
  2. Present final design in UI/UX Guilde
  3. Zeplin Documentation
  4. Documentation
  5. Final angular check

Graphics

Karma

Status
subtletrue
colourGreen
titledone

  • SVG Images
    • bad
    • neutral
    • bad


  • Documentation
  • Final angular check
Pictures

Charts
News
Pie Chart

Status
colour

Red

Yellow
title

Not f. MVPNot MVP - must be discussed

Status
colourRed
titleNot f. MVP

In Progress



  • Documentation
  • Final angular check


Bar
ChartsGantt
Chart

Status
colour

Red

Yellow
title

Not f. MVPNot MVP - DevExtreme

Status
colourRed
titleNot f. MVP

In Progress



  • Documentation
  • Final angular check


Doughnut
Pie
Chart

Status
colourYellow
titleIn Progress



  • Documentation
  • Final angular check
Bar


Line Chart

Status
colourYellow
titleIn Progress



  • Documentation
  • Final angular check
Doughnut Chart


General UX-Concepts

Info

List here all ux-concepts which are urgently needed for the MVP


Templates ID'sAtoms, Molecules and OrganismsStatusMVP RequirementsFeaturesDocumentationToDoComments

Spacing








Action Placement








Navigation








Notification








Validation









Not In MVP UI-elements

Templates ID'sAtoms, Molecules and OrganismsStatusMVP RequirementsFeaturesDocumentationToDoComments
ID2 Dashboard & basic components

Sandbox

Status
colourRed
titleNot f. MVP

Not MVP - must be discussed

Status
colourRed
titleNot f. MVP



Toast Notification

Status
colour

Yellow

Red
title

In ProgressThomas King

Not f. MVP

  • Icon
  • Title
  • Subtext
  • Link
  • Toolbar
  • Colorcode


  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check
Line Chart
Wannes: Since notifications are still functional unclear, do we exclude from MVP?
PicturesNews

Status
colour

Yellow

Red
title

In Progress
  • Documentation
  • Final angular check
Filter Bar

Not f. MVP

Not MVP - must be discussed

Status
colourRed
titleNot f. MVP


Filter

Status
colourRed
titleNot f. MVP

  • setup filters specific to user stories to limit big data driven ui-elements
  • user can setup filter to limit big data driven ui-elements

General UX-Concepts

Info

List here all ux-concepts which are urgently needed for the MVP

  • Spacing
  • Action Placement
  • Navigation
  • Notification
  • Validation
  • tbc.

Not In MVP


1) make it possible to store a filter for a user group/all other users

2) make it possible to let other users change this filter

3) filter criteria: provide an auto complete input box

4) filter criteria: provides support for a flag

5) filter criteria: use a filter to filter out data on a dropdown (to decrease the amount of possibilities in the dropdown)

6) make it possible to use ><= in combination with a criteria

7) make it possible to use OR instead of AND

8) make it possible to provide extra filter criteria by extracting the criteria




ChartsGantt Chart

Status
colourRed
titleNot f. MVP

Not MVP - DevExtreme

Status
colourRed
titleNot f. MVP


Barrier-free









Not In MVP - General UX-Concepts

Templates ID'sAtoms, Molecules and OrganismsStatusMVP RequirementsFeaturesDocumentationToDoComments

...