This is a description of the minimum viable product (MVP) of the Inspire Design Kit.
The MVP will only exist in one theme (Astronaut).
The Tokyo at night theme will initially be used for marketing purposes only and will be implemented after completion of the Astronaut.
The MVP will be finalized by 31.12.2020.

Definition of MVP

How do we determine the minimum requirements for the Inspire Design Kit?

→ All features which comes with DevExtreme ui-elements.
→ All features that have been identified by UX/UI research as urgently needed across companies.

UI-Elements

​

Templates ID'sAtoms, Molecules and OrganismsStatusMVP RequirementsDocumentationToDo

ID1 Colors



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

  • Documentation
  • Final angular check
ID1 Typeface


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


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

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

Header

  • 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

Overlay

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

Floating Sidebar

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

Panel

  • Contentswitch
  • Content
  • Toolbar
https://confluence.germanedge.com/x/LaQdAg
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check

Sandbox

Not MVP - must be discussed


Toast Notification

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

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

Inline Notification

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

  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check
ID3 Boardlets & content components

Default Boardlet

  • 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

Dialog

  • 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

  • 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

Overflow Menu

  • 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

  • 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

Tags

  • 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

  • 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

  • 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

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

  • 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

  • Icon Button
  • Text Link
  • Icon

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

Tree

  • 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. Specal dropdown
  5. Dropdown Links
  6. Datepicker/Timepicker



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

Radio

  • Icon Button
  • Text Link

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

Checkbox

  • Icon Button
  • Text Link

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

Input

  • 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

  • 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

  • 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

  • Input Field
  • Icon 
  • Toolbar Bottom
  • Contentswitch
  • Content
    • Title
    • Form
    • Sidebar
  • Input Style
    • Validation
    • State (Dropdown/Link)

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

Graphics

Karma

  • SVG Images
    • bad
    • neutral
    • bad

  • Documentation
  • Final angular check
PicturesNews

Not MVP - must be discussed

ChartsGantt Chart

Not MVP - DevExtreme


Pie Chart

Thomas King


  • Documentation
  • Final angular check

Bar Chart

Thomas King


  • Documentation
  • Final angular check

Doughnut Chart

Thomas King


  • Documentation
  • Final angular check

Line Chart

Thomas King


  • Documentation
  • Final angular check


UX-Concepts

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