GUI Mockups

[Pine, Kathryn ElaineX]

Per our evolving GUI conversation, Jandra and I have both been working on mockups to discuss in an effort to find a collaborative agreement on the style for phosphor-webui.

Below are links to mockups I've prepared.

My intent with these has been to take the existing upstream UI, considering the elements that IBM values that have not been in my past proposed design concepts and those we are using at Intel, and combine them into a modular, modern design that would allow for easy downstream theming for Intel, IBM and others, without looking too much like any one brand. Some of the modifications these concepts represent include the ability to use dark backgrounds, carets in the menu, and options for the data refresh visibility in the header - and the overall intent has been a blended style that we can potentially work from to find agreement in style overall.

The mockups propose the following:

Modularity of Header & Nav: A modular header/nav style that makes it easy for any color background

  *   With both light text/icon & dark text/icon option, any background color can be applied to either
  *   5 variations show how a dark or light concept can be applied independently; these show the same main design, just varying the dark/light background for header/nav/behind logo: intent is these could be options to switch out in CSS easily:
     *   A https://invis.io/EDV8VCJ3JX6
     *   B https://invis.io/X3V8VFI54UC
     *   C https://invis.io/9NV8VFWEQAJ
     *   D https://invis.io/2GV8VG0ZKWD
     *   E https://invis.io/57V8VG7EF6N

Colors: Simplify theming

  *   Intent is for the nav., header, and background colors to easily be specified to match a brand, and the either dark or light text would be used appropriately
  *   Intent would be that CSS would allow two main colors (or two main color themes) that will be applied, with varying degrees of opacity, to all elements, so less colors and subjective need to define color palettes
  *   (further clarification can follow this concept phase to document how this could work)

Responsiveness: Varying states for browsers at different widths or magnifications

  *   Header and navigation have 3 states based on breakpoints and/or toggle
  *   Nav: Full (large window and default) / Narrow (medium window) / Collapsed (small window); when in larger states, user can toggle navigation collapse feature
     *   Nav toggle proposed states outlined here: https://invis.io/QUV8VDFD72R
  *   Header details: Option for toggle to open / Closed (suggested default) / Hover (to address extremely narrow width or as an option on closed state)
     *   Top right proposed options outlined here: https://invis.io/49V8VDX5SCB

-------------------

Notes about mockup fonts/icons/spacing:

  1.  The health and power status icon are suggested in these mockups with specific icons, rather than previously used generic status icons. This would help make the status clearer when in a narrow width (icons only); however, there are not icons in Carbon library that worked well for this concept so new icons are shown here; However, these could be switched out with existing icons or other new-to-be-identified icons in Carbon library or elsewhere.
  2.  Fonts & spacing can be specified when we get to detailed concept phase; these mockups are meant for discussing a consensus on broad concepts first, then details can be addressed as we narrow choices

To be discussed:

Variations to consider:

  1.  Whether top right status/links (health, status, refresh, logout): could be open/closed with collapse feature and/or use a hover over to show detail
     *   Open: https://invis.io/52V8VU6PMHE  / Hover: https://invis.io/7QV8VVP5XBP
  2.  Do we like the order of health, status, refresh, logout?
  3.  Do we like page title in header or on page; what are pros and cons of each?
     *   Page title in content space: https://invis.io/FDV8VVY8XJ5
  4.  Are IP & system name important to show in header/on all pages?

Suggested as available options easily switch/override in CSS:

  1.  Colors for nav., header, page background
  2.  Content space - boxes could be with a border or without
     *   Showing content without borders: https://invis.io/YEV8VWDNXPJ
  3.  Behind logo space to match header or navigation: To allow for the navigation to collapse as proposed, the space behind the logo would need to be part of the navigation. However, as shown in   concepts A, B & E, this space can look like part of the header by matching the header color; this proposes the ability for the "behind logo" space to match either the nav. or header for custom theming.



-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ozlabs.org/pipermail/openbmc/attachments/20191212/44cc027c/attachment-0001.htm>