GUI Mockups

Fri Dec 13 06:21:56 AEDT 2019

> 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.

That conversation is taking place today at 2:00 pm Central time. I believe our goal is to find a base design that does not look like IBM or Intel. This will allow any company to use the design without change if desired. Bootstrap out of the box will not be polished enough. To utilize custom theming in the existing GUI, we will need to overhaul most of the application to implement Bootstrap correctly.

Here are the mockups that Jandra created that will be discussed in today's meeting as well. 

Server LED: https://ibm.invisionapp.com/share/QANZHJKP74E#/319357713_ServerLED 
Server Overview: https://ibm.invisionapp.com/share/QANZHJKP74E#/319357712_Overview 

----- Original message -----
From: "Pine, Kathryn ElaineX" <kathryn.elainex.pine at intel.com>
Sent by: "openbmc" <openbmc-bounces+derick.montague=ibm.com at lists.ozlabs.org>
To: OpenBMC Maillist <openbmc at lists.ozlabs.org>
Cc:
Subject: [EXTERNAL] GUI Mockups
Date: Thu, Dec 12, 2019 1:08 PM

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:

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.
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:

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
Do we like the order of health, status, refresh, logout?
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
Are IP & system name important to show in header/on all pages?

Suggested as available options easily switch/override in CSS:

Colors for nav., header, page background
Content space – boxes could be with a border or without
Showing content without borders: https://invis.io/YEV8VWDNXPJ
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.