Navigation between sites and homepage design

[broccolini]

We're continuing to consolidate our documentation websites on anything design systems, under the primer.style domain, in an effort to make finding documentation easier. Currently there isn't an easy way to navigation between one primer.style website and another.

This issue explores a solution for our navigation, and some early ideas for updating our homepage design in and effort to provide a better overview of content on our websites.

Navigation

Taking a cue from Material design, I think categorizing our (current and future) sites under headings like Design, Develop, and Tools make sense. In future we might have Content docs too, and we should keep What's new easily accessible. Something like this:

By grouping design-related documentation under the heading "Design" we need to rename our Design Guidelines website, this could be "Interface Guidelines" or something along those lines.

Also I anticipate we'll want Search, we'll have to figure out a docs specific search vs global, similar to what we had on the style guide.

Orientation

Navigating from one site to another is one part of the problem, knowing where you are is the other. I like the use of the monospace font in the blog design, and thought we might use that to distinguish between the home link to Primer vs the specific docs home such as Components, CSS, Octicons etc.

primer.style subsite

I'm not sure it makes sense to highlight if you are on a "design" website vs a "develop" website like I have above. My concern with that solution is that I'd expect the urls to match, such as primer.style/develop/css rather than primer.style/css. I see this nav as being more of a "jump to" between the sites rather than "Develop" being it's own site with css and component documentation etc.

Primer.style homepage design

I'd like us to improve the Primer homepage with having a better overview of what's included in Primer, make it a bit clearer the purpose of Primer (that it's for implementing GitHub designs but you can use it if you want), and break up the long dark page a bit with blocks of other color.

Bring "what's new" higher up so you quickly know about new releases, and this borrows some elements from the blog UI to break it up a bit:

Do a better job of describing our design content etc, this quick mock borrows a readme illo and breaks the sections up into tabs. Since we have less content right now, we could do a layout that exposes all the content sections for now:

Priorities

Alongside moving more sites under the primer.style domain, making their look and feel more consistent, as well as their update or release workflows, the first priority is to provide navigation that lets us switch between current and soon to be shipped sites. This might need more work, but something like this, with a dropdown and links to sites that are public would be a good first step:

Apologies for the half-baked thoughts here, you can take a look at my messy Figma file here, and I'm happy to discuss further and answer questions.

cc @primer/design-systems

[emplums]

My notes from the meeting yesterday:

• Overview links will link to the section on primer.style that introduces that group of tools
• The currently selected link inside of a dropdown will be white & bold
• The search component will be left aligned, and we won't include a search component on the root primer.style page
• Any items that currently live on the top nav will be moved to the SideNav