You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 10 Next »

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 RequirementsDocumentationToDoComments

ID1 Colors


DONE


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

  • Documentation
  • Final angular check

ID1 Typeface

IN PROGRESS


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

ID1 Icon

IN 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

IN PROGRESS

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


Header

DONE

  • 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

IN 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

IN PROGRESS

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


Panel

IN PROGRESS

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


Sandbox

NOT F. MVP

Not MVP - must be discussed

NOT F. MVP



Toast Notification

NOT F. MVP

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

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


Inline Notification

IN PROGRESS

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

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

ID3 Boardlets & content components

Default Boardlet

DONE

  • 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

DONE

  • 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

IN 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


Overflow Menu

IN 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

IN 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


Tags

IN 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

IN 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

IN 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

  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

IN 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

IN PROGRESS

  • Icon Button
  • Text Link
  • Icon
ID6 Link
  1. Detailed Design Grid description
  2. Documentation
  3. Final angular check


Tree

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

IN PROGRESS



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


Radio

IN PROGRESS

  • Icon Button
  • Text Link

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


Checkbox

IN PROGRESS

  • Icon Button
  • Text Link

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


Input

IN 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

IN 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

IN 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

IN PROGRESS

  • 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

DONE

  • SVG Images
    • bad
    • neutral
    • bad

  • Documentation
  • Final angular check

PicturesNews

NOT F. MVP

Not MVP - must be discussed

NOT F. MVP


ChartsGantt Chart

NOT F. MVP

Not MVP - DevExtreme

NOT F. MVP



Pie Chart

IN PROGRESS

Thomas King


  • Documentation
  • Final angular check


Bar Chart

IN PROGRESS

Thomas King


  • Documentation
  • Final angular check


Doughnut Chart

IN PROGRESS

Thomas King


  • Documentation
  • Final angular check


Line Chart

IN PROGRESS

Thomas King


  • Documentation
  • Final angular check

UX-Concepts

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

  • Action Placement
  • Navigation
  • Notification
  • Validation
  • tbc.
  • No labels