search

centrica-engineering / nucleus-docs

Documentation for the Nucleus Design System
https://nucleus.design
1 stars 10 forks source link

Convert docs images to work for dark mode #636

Open RobTobias123 opened 1 month ago

RobTobias123 commented 1 month ago

Outcome

Content guidance images on all docs to use transparent webps that work well on both white and dark mode backgrounds. Replacing the extra white that currently appears in the areas the pink labels reside. Enabling a better experience once dark mode is released.

Scope

andij commented 1 month ago

Here's a guide on creating screenshots for the Docs if it helps: https://github.com/centrica-engineering/nucleus-docs/wiki/guide-screenshot

RobTobias123 commented 1 week ago

Proof of concept PR for review please: https://github.com/centrica-engineering/nucleus-docs/pull/664

RobTobias123 commented 1 week ago

Having tried 8 different techniques to create the optimal balance between image quality and file-size, the following process appears to have the best results:

  1. Create a Playground with the component within a ns-panel. Preview in a browser.
  2. Go to Inspector, set the witdh to 1280px.
  3. Mouseover the ns-panel in the code, right click and 'Capture Node Screenshot' to get just the panel and contents.
  4. Drag the downloaded file onto the Figma Docs images file.
  5. Set the Frame to 1080px and allow 10px top and bottom before a label.
  6. Set the Frame background to transparent.
  7. Apply the pink labels as required (relatable to key).
  8. Export as x1 PNG.
  9. Open PNG in Photoshop, Save As Webp 'Lossless' ensuring transparency is present so it will work on dark mode. Observe naming convention.
  10. Copy file to the Docs repo at Src/Assets/Components/ns-xyz/guidance.webp
  11. Check local
  12. Commit and PR.

Note that this method does not include optimising through TinyPNG or similar due to it appearing to over-compress the image and increase interpolation of pixels, resulting in a poorer quality image. Photoshop does a pretty god job of optimising the file anyway and the file-size, (if slightly larger than if Tiny'd) is still much smaller than a PNG or JPG whilst retaining a decent clarity and transparency.

This is the best overall balance for these guidance images, but may be adjusted on different image content such as if there are large gradients or photography.

It is the most accurate representation as screenshot is direct from coded version and uses only the node area for consistent white margins at a consistent size screenshot keeping everything in scale.

RobTobias123 commented 1 week ago

POC - PR with latest image created using the method above. https://github.com/centrica-engineering/nucleus-docs/pull/664

RobTobias123 commented 1 week ago

Epic PR created containing the following;

Form:

NSX:

RobTobias123 commented 1 week ago

Question about the use of the placeholder image we use for Video. As Docs is a public facing website, do we have permission to use this image? Could be subject to © copyright laws. Recommend that we replace with a British Gas image or ensure that it is considered 'in the public domain' /commons licenced to avoid the ricks - I mean risk.

RobTobias123 commented 2 days ago

Following conversation and initial review of these were looking Drew provided some good information on how we might improve with angled leaders etc. So here's what I've experimented with as a Figma component that allows reshaping/resizing without distortion of the label and includes 4 orientation points each with a pair of opposite curves. I've also included the brackets too. These can then be reused across any docs image. They now have 'lines' rather than shapes looking as lines so that they don't distort when modifying and the round end stays round etc. The colour and thickness of the line is the same as that around the existing label (2px #666666) which give a neutral colour than can be seen on both white and dark backgrounds. There's. small explanation on the component page.

As a proof of concept, I've applied the changes to 2 images - the ns-accordion and the ns-alert (which has a bottom oriented instance). hey can be seen in the relative PRs above. Let me know if you have any feedback...

Variants created: Image

Choose/switch type from list: Image

How it looks including simulated dark mode... Image Image

Image Image

RobTobias123 commented 2 days ago

I also tightened up the vertical spacing so less overlap onto the transparency which was making leader look overly long on light mode.