ONSdigital / design-system

ONS Design System
https://service-manual.ons.gov.uk/design-system
MIT License
32 stars 21 forks source link

Allow more than one masthead logo to be set #2829

Closed rmccar closed 7 months ago

rmccar commented 1 year ago

In some surveys in eQ we need to be able to use two masthead logos next to eachother. Screenshot 2023-10-09 at 11 48 36

We currently do this by concatenating the two svgs together and passing them into the mastheadLogo param on the header component. This works fine as it is but we now need to use the ONS logo as one of the logos which would be good if we were able to use the ONS logo from the Icon macro but this is complicated within eQ because we concatenate and pass them within python which is then passed to the component.

It would be good if we were able to set more than one masthead logo and we could use logos from the Icons macros if needed or a mixture of passed in SVG and ones from the Icons macro and if we were able to set the order of these logos too.

yatesn commented 1 year ago

Spike - investigate whether more than one logo is a good way forward

Majsol commented 1 year ago

The reason why there is a need for more than one logo is that ONS are doing a specific survey for more than one department and they potentially both have the same importance. Richard is investigating the need for 2-3 logos in the header a bit more, but it is a requirement from the business.

At the moment eq are making the logo's into one SVG file but that will be an issue if we use the ONS logo in that same way as it wont automatically be updated if there are any changes to the logo.

I will set up meeting with the Graphic designers to investigate if there is any issues from a brand perspective.

Majsol commented 1 year ago

there has not been any UR on this - is it needed?

Majsol commented 1 year ago

After a chat with Donna Palmer i got this:

Ons surveys only display the ons logo in the header. (until now...) However we provide surveys for other department where we display their logo in the header and them move our logo to the footer. For UKIS there were a need for 2 logo's to be displayed because we provided that survey for 2 different department (North Ireland being one of them) and then at some point one of those two department split so an additional departments logo had to be added to the header. So now we would display 3 logo's in the header(happened 4 months ago). It is however only for external surveys so we don't have much say in it.

For the covid survey the ONS logo is now being used together with another departments logo... this is the first case the ons logo is being used together with another department. And this is probably why this ticket has been created....

We potentially need to do some UR on the use of so many logos in the header.

Maybe speak to: Gavin Scott, Kathryn Littleboy, Jenny Price & Joe Nation

Majsol commented 1 year ago

@JNATION85, Donna mentioned that you might have done some work for EQ where you helped adding 2 logos to an svg file for them? - Were there potentially any research done at that time? Does it work on mobile ect. ?

Majsol commented 1 year ago

From a brand perspective (I talked to Andu Budd) there are no rules at the moment around placing several logoes next to each other. As long as there is a good balance and it is accessible, then they are happy for more logos to be displayed next to each other.

Majsol commented 1 year ago

After a chat with Alan Howshall I found that: "IDS only ever displays 1 logo in the header but does then add both UK Gov and 'In partnership with Office of National Statistics' logos in the footer. See https://integrateddataservice.gov.uk/ " Could this potentially be used as inspiration - or does it clash with the costumers wants? (the external departments?)

JNATION85 commented 1 year ago

I don't remember there being any UR done and I'm not sure I was part of that design process. Seems to me like we'd need to mock it up and see how it looks especially on mobile. From a branding point of view I would be happy to take Andy's advice there.

We could use the IDS as a reference point but would still need to see 3 logos across the top.

rmccar commented 1 year ago

If you want to see how it looks, this is how it currently looks in eQ with the 3 logos. And below is when it starts wrapping when the width goes below 528px. It could definitely be improved on.

Screenshot 2023-10-27 at 14 53 52 Screenshot 2023-10-27 at 14 59 57
Majsol commented 1 year ago

@JNATION85 Donna also mentioned no UR was done, I was more thinking if any accessibility research were done or if it any mockups were done at the time. I do appreciate it might be a long time ago.

Majsol commented 1 year ago

@rmccar uhh that does hurt my eyes too see... I think we might to set up some rules... even if it is assessable. that doesn't look good

JNATION85 commented 1 year ago

Yeah that looks awful. May need to redesign the header col width at mobile size to span the full width but again this will push everything down. I don't think there will be any accessibility issues, just a really bloated header.

I'm still not sure If I've ever seen any mockups in this case

Majsol commented 1 year ago

There is a need for more logos placed next to each other, so we do need to allow for more than one masthead logo to be set. However the maximum logos should be defined (I suggest 3 as the maximum) and we need to make sure that when there is no space for both the logos and the menu, that the menu is pushed to a new line instead of one of the logos as it is now.