Design change suggestions

UW-Madison-DataScience / ML-X-Nexus

Nexus is the ML+X community’s centralized hub for sharing machine learning (ML) resources.

https://uw-madison-datascience.github.io/ML-X-Nexus/

5 stars 6 forks source link

Design change suggestions #19

Closed navin2uw closed 3 months ago

navin2uw commented 4 months ago

Per Chris' request, I am including my design suggestions to better align with the brand guidelines.

Please use this logo (.svg) (.png) instead.
Also, try and use colors from the color palette. So perhaps:
Left column has background #DADFE1 or #BBD7D8 with text color #282728. Highlighted and active menu links in #9B0000.
In the content area, normal white #ffffff is good, otherwise #f7f7f7. Text color #282728.
Text fonts should be Montserrat for headings and Atkinson Hyperlegible for body.

qualiaMachine commented 3 months ago

Thanks, @navin2uw! Would anyone from @UW-Madison-DataScience/nexus-developers be willing to tackle these changes? I'm trying to get Nexus ready for launch by the ML Marathon kickoff date (7/25). The earlier the better!

sverchkov commented 3 months ago

@navin2uw what about the dark mode color scheme?

sverchkov commented 3 months ago

For the logo, are we sure we want to lose the tagline? What we're using right now is a transparent version of the secondary with the tagline.

sverchkov commented 3 months ago

Indeed, the look of the primary logo on a red background looks a bit clunky with the light sidebar theming:

I can think of 3 alternatives:

Make the sidebar background red. In that case we will need to think about a contrasting color choice for the sidebar elements and active links in the sidebar.
Use the secondary logo and make the sidebar background white.
Use a transparent version of the secondary logo (this is currently missing from our brand files)

qualiaMachine commented 3 months ago

Thanks for tinkering with this, @sverchkov. I agree that version looks clunky. I think option 3 might be best. The concern with the tagline was that it doesn't contrast well when viewed in the dark theme, and it's a little small to read in general. @navin2uw when you have a sec, could you upload the illustrator/indesign file you used for the logo to Google drive? I can export the transparent version from there.

We might want to explore adjusting the color for the dark theme just slightly so it contrasts better with the logo red.

navin2uw commented 3 months ago

Ohhh I must have overlooked making transparent versions for those. So, @qualiaMachine, I designed the logo in Canva; if you follow the instructions under the Badges section in my offboarding document, you can also access all the versions. You might have to activate the free trial. Otherwise, I would just run the current version in our files through a transparency maker online, or in Illustrator, if that's easier.