Uploaded image for project: 'camunda BPM'
  1. camunda BPM
  2. CAM-13090

Visual Design improvements

    XMLWordPrintable

Details

    Description

      There are some places in the webapps (cockpit / tasklist) where we could improve the visual design in a simple way so that usage of color is more consistent with other Camunda applications (e.g. Optimize)

      Examples:

      • In Cockpit, primary buttons are red:
        • This is a signal color (ie. danger)
        • The same type of button is blue in Optimize
      • The header has currently a top red border:
        • We have moved away from this in other application (Optimize)
      • In Cockpit: menu hover state currently uses a vertical bar for hovers
        • this is inconsistent with other applications
        • (Note: at the same time this is currently consistent within the webapps for communicating "highlight" and "hover")

      Is there a simple approach to address the above topics? If true this could be a pragmatic step to create further alignment between applications. One way of approching it would be to set a timebox within which we want to address some of the above.

       

      Design Suggestions

      Header
      Basic improvements:

      • Remove red top boarder
      • Smaller icon, smaller title text
      • User/Home menu styling (Background and option states)

      Nice to have's:
      •Link css update and divider lines
      •Discuss breadcrumb style, Position of 'Dashboard' option

      Buttons
      • Primary button style – no size changes
      • Icon combo button style

      Card
      • App page padding
      • Card background
      • Card title size and title caps
      • App background colour update
      Nice to have;
      • Add cards to no card pages (see example) 

      Selections
      • in table and list
      • Blue highlight, not red.

       

      Icons
      Switch out check, error and arrow (menu and open/close panel)
      Icons attached. 

      UI Components design -> https://zpl.io/2EQlR0M 
      Page Examples -> https://zpl.io/bPEpx0M 

       

       

      mgm-controller-panel

        This is the controller panel for Smart Panels app

        Attachments

          1. Arrow.svg
            0.3 kB
          2. Check.svg
            0.2 kB
          3. Close.svg
            0.2 kB

          Activity

            People

              Unassigned Unassigned
              meyer Daniel Meyer
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Salesforce