<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=utf-8">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@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.MsoPlainText, li.MsoPlainText, div.MsoPlainText
{mso-style-priority:99;
mso-style-link:"Plain Text Char";
margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
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;}
p.msonormal0, li.msonormal0, div.msonormal0
{mso-style-name:msonormal;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
p.gmail-m-8112396240008348344msoplaintext, li.gmail-m-8112396240008348344msoplaintext, div.gmail-m-8112396240008348344msoplaintext
{mso-style-name:gmail-m_-8112396240008348344msoplaintext;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
span.EmailStyle19
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:windowtext;}
span.EmailStyle20
{mso-style-type:personal-compose;
font-family:"Calibri",sans-serif;
color:windowtext;}
span.PlainTextChar
{mso-style-name:"Plain Text Char";
mso-style-priority:99;
mso-style-link:"Plain Text";
font-family:"Calibri",sans-serif;}
.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;}
--></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" style="margin-left:.5in">>Can you specify the big picture items we want to agree on?
<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">In terms of a big picture, working towards a mockup that aims to address the page design, header, navigation, layout & overall look in a more comprehensive way could look like this: I can imagine that we could choose a page and each create
a mockup/mockups to consider for that page, with the aim being to take some pieces of the existing and proposed design style. This process could potentially address ways to apply different color palettes downstream with ease. We could each share our concept(s),
as it’s usually easier to come to an agreement without feeling like the choice is either black or white – multiple concepts often allow room to compare, contrast and merge ideas together.
<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">We’re not too far away from that kind of process, already, in that we are already working on updated navigation and moving towards updating the header next, and with the way that you & I coordinated on the sensors page. I feel like by taking
a step back and each working on mockups, it would allow us all to feel like we had some ownership of a new style and could better come to an agreement on what a modern and polished UI could look like for this project.<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><a name="_____replyseparator"></a><b>From:</b> Jandra A <jandraara@gmail.com>
<br>
<b>Sent:</b> Tuesday, December 3, 2019 9:31 AM<br>
<b>To:</b> Pine, Kathryn ElaineX <kathryn.elainex.pine@intel.com><br>
<b>Cc:</b> Derick Montague <Derick.Montague@ibm.com>; openbmc@lists.ozlabs.org<br>
<b>Subject:</b> Re: GUI Component Library<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<div>
<div>
<blockquote style="border:none;border-left:solid #CCCCCC 1.0pt;padding:0in 0in 0in 6.0pt;margin-left:4.8pt;margin-right:0in">
<div>
<div>
<p class="gmail-m-8112396240008348344msoplaintext">My proposal is that we work towards a vision with concepts for the overall site prior to getting into the details, as a method for consensus building. Our work will be the best if we agree on a look that encompasses
a shared vision for the entire UI, not just individual elements.<o:p></o:p></p>
<p class="gmail-m-8112396240008348344msoplaintext">If we can agree on the big picture, creating a style guide or choosing a design library will be much easier as we’ll have consensus reflecting that shared vision.<o:p></o:p></p>
</div>
</div>
</blockquote>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal">Can you specify the big picture items we want to agree on? I think at a high level, we all want a modern and polished UI. The realities of how that is implemented and brought to life is were the conversation breaks into subjective opinions
and where we've had difficulties before.<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal">Like Derick, I suggest taking the existing style guide as a starting point, since that is what is currently implemented and what has tested positively with numerous customers. After reviewing it, we can start by discussing overarching design
principles that are implemented (such as color, typography, icons, and corner type) and apply those to all components. This way, we ensure that the UI is updated across the board to maintain cohesiveness and reflects a single design language. If needed, individual
components can be revisited once we have agreed on the big principles. <o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal"><o:p> </o:p></p>
</div>
<div>
<p class="MsoNormal">Regards,<o:p></o:p></p>
</div>
<div>
<p class="MsoNormal">Jandra Aranguren<o:p></o:p></p>
</div>
</div>
</div>
</div>
</body>
</html>