Quantum Website

[simoneb]

Let's create a website for Quantum. The storybook website doesn't look like a real website at the moment, so I would propose that either we build a real one, or we change the storybook one enough to make it looks like one.

Existing examples of websites for design systems are:

• GitHub's https://primer.style/
• Porsche's https://designsystem.porsche.com/

I don't have strong opinions about the tech, ideally I would not want to throw away Storybook, but I'm not sure if it is flexible enough to tweak it to look like a real website. On the other hand, if we use a tool like Docusaurus, which is more suitable for building websites, I'm not sure whether it's possible to integrate storybook or reproduce its features.

Earlier work we've done on this is:

• https://optic.nearform.com/
• https://initium.nearform.com/

[marceloFerreira90]

Linked to : #274

[marceloFerreira90]

Depends on new branding.

[nickzafiropulos]

Design update -

I have created some designs for the documentation site, based on previous work we have done, implementing Docusaurus (Optic and Initium websites).

Homepage - https://www.figma.com/file/vIqNb3g23SIGRiYUUDf5yE/Quantum-Documentation-site?type=design&node-id=1-49&mode=design

Note - Component illustrations to be completed. Colour will update with brand changes (issue to be completed)

Content pages - https://www.figma.com/file/vIqNb3g23SIGRiYUUDf5yE/Quantum-Documentation-site?type=design&node-id=4-1311&mode=design

• Get started: This would contain developer focused content on how to set up Quantum to use on your projects
• Component, Button: This is an example of a component page - the format is based around two main tabs; Overview (content written by designers) and React (Embedded component and dev focused detail)

Component pages include a sub nav (right) which allows us to jump to headings within the content. This allows us to be flexible with the type of content on each component. Sometimes there will be more, sometimes less, depending on the component. It also allows us to add content incrementally depending on our resource available.

The structure is closely aligned with GitHub's Primer documentation site. It fits well with our DS.

Adding documentation content for all the components will be an ongoing thing, probably taking a fair bit of time for a designer to work on, and we will need to get through the component backlog first, as the documentation site itself uses Quantum components.