search

ualbertalib / DMP_roadmap

DCC/UC3 collaboration for a data management planning tool
MIT License
1 stars 3 forks source link

DMP Assistant 2.0 Portage branding #27

Open weiweishi opened 4 years ago

weiweishi commented 4 years ago

This is to track the work that DCC will be completing to brand DMP Assistant 2.0 with:

  1. Current Portage logo colors: #1f3d7d as primary, and #FB9C26 as secondary.
  2. Current Portage logo

DCC will provide screenshots when these changes.

xsrust commented 4 years ago

Hi @weiweishi @lagoan I've attached a first-pass at applying the above branding to the deployment-portage branch. You can see them here: https://github.com/portagenetwork/roadmap/commit/f4ba552e4ce1f158539a9ef9f1e729fe727e1195 And an additional change (in the app/views/branded/ directory to overwrite the main DMPRoadmap view): https://github.com/portagenetwork/roadmap/commit/56c932d1687ae465f59395cfa6c5ec43bf878679

I ended up pulling a logo from the main Portage Network site as the one on DMP Assistant didn't have a background or border, so the blue blended into the navbar. I've used the existing DMP Asistant favicon. For the colors, I've applied orange as a secondary color where possible, but it's a simple change to swap this secondary color to white and only retain the orange as an accent color in a few places.

I also took some screenshots of the major UI motifs we use so you don't have to boot up the app to have a look. First, the main page with the admin-navigation bar: portage_branding_main Next, the dropdowns on the top navbar: portage_branding_dropdown Next, a Table: Screenshot_20200925_171354 Finally, an accordion menu Screenshot_20200925_171823

Let me know what you think and if you want to make any changes.

lagoan commented 4 years ago

@xsrust Thank you very much for this. This is starting to look great.

My feeling is that using orange for font color makes it difficult to read with a white or blue background. Orange on white makes the letters sort of disappear, while orange on blue has too high contrast.

Could we try blue fonts on white background and use orange for accent colour? This could bring the interface to a similar colour scheme as we have in our current deployment:

dmp-assitant-colours

What are your thoughts @weiweishi

weiweishi commented 4 years ago

@lagoan I agree with your comments here and was going to share the same thoughts. If we continue to use white/navy blue for text/background contrast, and only use orange as accents that would be great. We might only want to quickly run this through an accessibility colour contrasting tool to see if there are any obvious issues we need to address.

xsrust commented 4 years ago

Hi @weiweishi @lagoan I've changed the entire UI to the blue and white color-scheme. I've held off adding any orange-accents as the old UI elements which were orange are gone. I was hoping you could specify which elements/borders/ect you'd like to be in the accent color to prevent some back-and-forth. Some ideas could be borders on the tables/between UI elements, or the accessibility-hover-border that appears when you hover any element of the UI.

As before, I'll attach some screenshots of the different elements of the UI: portage_dashboard_2 portage_navbar_dropdown2 portage_table_2 portage_accordian_2

lagoan commented 4 years ago

Not having a design background makes this problem difficult :smile:

I think we may need to forgo using the bright orange colour #FB9C26 on the page. The current implementation uses it very sparingly and I don't think we should use it just for the sake of using it. I thought maybe it could be used for accessibility highlights but the contrast is very low defeating its purpose.

Also, I think the header with filled background colour works really well for the default theme for roadmap due to its logo but it does not work well for portage using the primary colour #1f3d7d. We should go with a white background as it keeps in line with the current look and feel.

image

xsrust commented 4 years ago

No problem. It'll be simple enough for you to re-introduce the Orange to the page in the future once a designer's had a chance to have a look at the site.

I've updated the background color for the header to white, and changed all the links which appear over that to display in the primary blue. I have retained the other blue buttons throughout the UI as well as in the drop-down menus within the header. https://github.com/portagenetwork/roadmap/commit/234abed6f70700464279af203c0908027a7da085 portage_with_white_header