<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
text-decoration:underline;}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
{mso-style-priority:34;
margin-top:0in;
margin-right:0in;
margin-bottom:0in;
margin-left:.5in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri",sans-serif;
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-family:"Calibri",sans-serif;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
/* List Definitions */
@list l0
{mso-list-id:648636111;
mso-list-type:hybrid;
mso-list-template-ids:-201009046 67698705 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;}
@list l0:level1
{mso-level-text:"%1\)";
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level2
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level3
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l0:level4
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level5
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level6
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l0:level7
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level8
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l0:level9
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l1
{mso-list-id:788354764;
mso-list-type:hybrid;
mso-list-template-ids:568387730 67698705 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;}
@list l1:level1
{mso-level-text:"%1\)";
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l1:level2
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l1:level3
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l1:level4
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l1:level5
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l1:level6
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l1:level7
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l1:level8
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l1:level9
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l2
{mso-list-id:1547178147;
mso-list-type:hybrid;
mso-list-template-ids:87059912 67698705 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;}
@list l2:level1
{mso-level-text:"%1\)";
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l2:level2
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l2:level3
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l2:level4
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l2:level5
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l2:level6
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l2:level7
{mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l2:level8
{mso-level-number-format:alpha-lower;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;}
@list l2:level9
{mso-level-number-format:roman-lower;
mso-level-tab-stop:none;
mso-level-number-position:right;
text-indent:-9.0pt;}
@list l3
{mso-list-id:2082166913;
mso-list-type:hybrid;
mso-list-template-ids:1705686714 1706453106 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;}
@list l3:level1
{mso-level-start-at:0;
mso-level-number-format:bullet;
mso-level-text:-;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:20.25pt;
text-indent:-.25in;
font-family:"Calibri",sans-serif;
mso-fareast-font-family:Calibri;}
@list l3:level2
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:56.25pt;
text-indent:-.25in;
font-family:"Courier New";}
@list l3:level3
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:92.25pt;
text-indent:-.25in;
font-family:Wingdings;}
@list l3:level4
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:128.25pt;
text-indent:-.25in;
font-family:Symbol;}
@list l3:level5
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:164.25pt;
text-indent:-.25in;
font-family:"Courier New";}
@list l3:level6
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:200.25pt;
text-indent:-.25in;
font-family:Wingdings;}
@list l3:level7
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:236.25pt;
text-indent:-.25in;
font-family:Symbol;}
@list l3:level8
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:272.25pt;
text-indent:-.25in;
font-family:"Courier New";}
@list l3:level9
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:308.25pt;
text-indent:-.25in;
font-family:Wingdings;}
ol
{margin-bottom:0in;}
ul
{margin-bottom:0in;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang="EN-US" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p class="MsoNormal">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.
<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Below are links to mockups I’ve prepared.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">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.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">The mockups propose the following:<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><b>Modularity of Header & Nav:</b> A modular header/nav style that makes it easy for any color background<o:p></o:p></p>
<ul style="margin-top:0in" type="disc">
<li class="MsoListParagraph" style="margin-left:-15.75pt;mso-list:l3 level1 lfo1">
With both light text/icon & dark text/icon option, any background color can be applied to either<o:p></o:p></li><li class="MsoListParagraph" style="margin-left:-15.75pt;mso-list:l3 level1 lfo1">
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:<o:p></o:p>
<ul style="margin-top:0in" type="circle">
<li class="MsoListParagraph" style="margin-left:-15.75pt;mso-list:l3 level2 lfo1">
A <a href="https://invis.io/EDV8VCJ3JX6">https://invis.io/EDV8VCJ3JX6</a> <o:p></o:p></li><li class="MsoListParagraph" style="margin-left:-15.75pt;mso-list:l3 level2 lfo1">
B <a href="https://invis.io/X3V8VFI54UC">https://invis.io/X3V8VFI54UC</a><o:p></o:p></li><li class="MsoListParagraph" style="margin-left:-15.75pt;mso-list:l3 level2 lfo1">
C <a href="https://invis.io/9NV8VFWEQAJ">https://invis.io/9NV8VFWEQAJ</a> <o:p></o:p></li><li class="MsoListParagraph" style="margin-left:-15.75pt;mso-list:l3 level2 lfo1">
D <a href="https://invis.io/2GV8VG0ZKWD">https://invis.io/2GV8VG0ZKWD</a> <o:p></o:p></li><li class="MsoListParagraph" style="margin-left:-15.75pt;mso-list:l3 level2 lfo1">
E <a href="https://invis.io/57V8VG7EF6N">https://invis.io/57V8VG7EF6N</a><o:p></o:p></li></ul>
</li></ul>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><b>Colors:</b> Simplify theming<o:p></o:p></p>
<ul style="margin-top:0in" type="disc">
<li class="MsoListParagraph" style="margin-left:-15.75pt;mso-list:l3 level1 lfo1">
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<o:p></o:p></li><li class="MsoListParagraph" style="margin-left:-15.75pt;mso-list:l3 level1 lfo1">
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<o:p></o:p></li><li class="MsoListParagraph" style="margin-left:-15.75pt;mso-list:l3 level1 lfo1">
(further clarification can follow this concept phase to document how this could work)<o:p></o:p></li></ul>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><b>Responsiveness:</b> Varying states for browsers at different widths or magnifications<o:p></o:p></p>
<ul style="margin-top:0in" type="disc">
<li class="MsoListParagraph" style="margin-left:-15.75pt;mso-list:l3 level1 lfo1">
Header and navigation have 3 states based on breakpoints and/or toggle<o:p></o:p></li><li class="MsoListParagraph" style="margin-left:-15.75pt;mso-list:l3 level1 lfo1">
Nav: Full (large window and default) / Narrow (medium window) / Collapsed (small window); when in larger states, user can toggle navigation collapse feature<o:p></o:p>
<ul style="margin-top:0in" type="circle">
<li class="MsoListParagraph" style="margin-left:-15.75pt;mso-list:l3 level2 lfo1">
Nav toggle proposed states outlined here: <a href="https://invis.io/QUV8VDFD72R">
https://invis.io/QUV8VDFD72R</a> <o:p></o:p></li></ul>
</li><li class="MsoListParagraph" style="margin-left:-15.75pt;mso-list:l3 level1 lfo1">
Header details: Option for toggle to open / Closed (suggested default) / Hover (to address extremely narrow width or as an option on closed state)<o:p></o:p>
<ul style="margin-top:0in" type="circle">
<li class="MsoListParagraph" style="margin-left:-15.75pt;mso-list:l3 level2 lfo1">
Top right proposed options outlined here: <a href="https://invis.io/49V8VDX5SCB">
https://invis.io/49V8VDX5SCB</a> <o:p></o:p></li></ul>
</li></ul>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">-------------------<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Notes about mockup fonts/icons/spacing:<o:p></o:p></p>
<ol style="margin-top:0in" start="1" type="1">
<li class="MsoListParagraph" style="margin-left:0in;mso-list:l0 level1 lfo2">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. <o:p></o:p></li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l0 level1 lfo2">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<o:p></o:p></li></ol>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><b>To be discussed:<o:p></o:p></b></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Variations to consider:<o:p></o:p></p>
<ol style="margin-top:0in" start="1" type="1">
<li class="MsoListParagraph" style="margin-left:0in;mso-list:l1 level1 lfo3">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<o:p></o:p>
<ol style="margin-top:0in" start="1" type="a">
<li class="MsoListParagraph" style="margin-left:0in;mso-list:l1 level2 lfo3">Open:
<a href="https://invis.io/52V8VU6PMHE">https://invis.io/52V8VU6PMHE</a> / Hover:
<a href="https://invis.io/7QV8VVP5XBP">https://invis.io/7QV8VVP5XBP</a> <o:p></o:p></li></ol>
</li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l1 level1 lfo3">Do we like the order of health, status, refresh, logout?<o:p></o:p></li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l1 level1 lfo3">Do we like page title in header or on page; what are pros and cons of each?<o:p></o:p>
<ol style="margin-top:0in" start="1" type="a">
<li class="MsoListParagraph" style="margin-left:0in;mso-list:l1 level2 lfo3">Page title in content space:
<a href="https://invis.io/FDV8VVY8XJ5">https://invis.io/FDV8VVY8XJ5</a> <o:p></o:p></li></ol>
</li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l1 level1 lfo3">Are IP & system name important to show in header/on all pages?<o:p></o:p></li></ol>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">Suggested as available options easily switch/override in CSS:<o:p></o:p></p>
<ol style="margin-top:0in" start="1" type="1">
<li class="MsoListParagraph" style="margin-left:0in;mso-list:l2 level1 lfo4">Colors for nav., header, page background<o:p></o:p></li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l2 level1 lfo4">Content space – boxes could be with a border or without<o:p></o:p>
<ol style="margin-top:0in" start="1" type="a">
<li class="MsoListParagraph" style="margin-left:0in;mso-list:l2 level2 lfo4">Showing content without borders:
<a href="https://invis.io/YEV8VWDNXPJ">https://invis.io/YEV8VWDNXPJ</a> <o:p></o:p></li></ol>
</li><li class="MsoListParagraph" style="margin-left:0in;mso-list:l2 level1 lfo4">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.<o:p></o:p></li></ol>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
</body>
</html>