GUI Component Library

[Pine, Kathryn ElaineX]

>> In terms of a design library that matches the style of the web UI we’ve been working on, Bootstrap would be a great choice: https://bootstrap-vue.js.org

> We agree to use Bootstrap-Vue for the Vue framework rewrite. Bootstrap-Vue does not have an icon library and refers to third-party sources. Since we are already using the Carbon Design System icons, can we agree to continue to use them?

Yes, I’m ok continuing to use the Carbon Design System icons. I agree, also, that if an icon does not exist in the library, we can use the library’s icons to make new icons that match that style.

>> However, I wonder if we could find a happy medium between the two styles? I’ve been looking for websites that have elements of both style preferences -- that include the more modern look (larger elements, rounded corners, light colors), with the more stable look (dark colors, square elements) – and found these great examples:
>>
>>- Invision App’s website https://www.invisionapp.com/
>>- Visual Studio Code website https://code.visualstudio.com/
>>- GitHub website https://github.com/

>Thank you for sending the site examples. They are great examples of well-designed user interfaces. Although the proposed Intel UI updates provide some pattern improvements, the overall layout and design changes don't feel as polished as the examples you shared. We believe more collaboration is needed to improve the design and implementation of the proposed changes to meet both Intel's and IBM's needs.

Yes, agreed that with additional collaboration we can continue to polish the design – in all cases, both the existing UI and my proposed designs can continue to look cleaner with more time and collaboration. As I’ve gone through each page downstream, I’ve done a basic update focusing on style & UX, making incremental improvements with the goal of moving things to an even more polished state with additional investment of time and resources. I wanted to share our work once we’d gotten initial working designs, and did not feel it was important to invest further time in them before beginning the stylistic conversation we’ve been having, since as we collaborate, it’s efficient to address details in the process and after some of the bigger issues are agreed upon.

I believe the process that Jandra and I have begun, reviewing the design proposals page-by-page, is a great example of how we can continue to collaborate and work towards the best result and get a polished look with some agreed upon elements representing both a stable and modern style.

>A little over a year ago, we developed an OpenBMC style guide to make it easier for designers and developers to contribute to the project. We built a living style guide prototype, but Ed's concern about who would develop and maintain the guide kept it from moving forward. The inconsistency and lack of code reuse throughout the application is the result of not having this documentation.

>OpenBMC Style Guide:
https://ibm.invisionapp.com/share/EBNYECMH3Y2#/318986393_Grid
<https://ibm.invisionapp.com/share/EBNYECMH3Y2#/318986393_Grid>
>OpenBMC Style Guide Prototype:
https://derick-montague.github.io/openbmc-styleguide-proposal/

>As we rewrite the application in Vue, we have an opportunity to create this documentation and assure that the OpenBMC UI is clean, maintainable, and adheres to an agreed-upon set of values. Since joining the project, you have been working alone on both design and development. We hope that we can work as a team to collaborate and lean on each other's strengths.

Indeed – I agree that all of the design work we do can be better through this collaboration.

>I feel the next step is to schedule a meeting to review the existing style guide. We can then determine what needs to be updated to meet both Intel's and IBM's needs. We can use the updated style guide to create the theme changes required for the Bootstrap-Vue out of box experience to adhere to the updated style guide.

>This effort will require a stronger focus on the framework update and style guide development. When we start working on the framework update, the only updates to the AngularJS UI will be critical bug fixes. Our goal is to have the framework update complete no later than the end of Q2 2020.

>What are your thoughts on this plan?

I do have concerns about the dynamic nature of the site’s development and the potential static nature of a design guide. I wonder if it might be best to continue working towards consensus with our concept process, and then revisit the style guide once we get a little further towards that consensus. It might require us all to revisit how we can find a stylistic compromise, and perhaps we look to those sites I shared, or others as well, as possible stylistic directions that would work. I also believe that with some CSS consolidation – which is something I’ve been working on downstream - many elements would be easily standardized and consistent. We could revisit the design library, which I do think is a good potential option if we can agree on one, or we could make a concerted effort to clean up CSS, to make it more of a sitewide style guideline in and of itself, during this collaboration as well.



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