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:
![screenshot 2019-02-25 22 49 17](https://user-images.githubusercontent.com/334891/53386315-b138cc80-394f-11e9-8e04-6d9b161d3939.png)
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
![nav](https://user-images.githubusercontent.com/334891/53387452-e398f880-3954-11e9-97f4-9403a0a72946.png)
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:
![screenshot 2019-02-25 22 51 39](https://user-images.githubusercontent.com/334891/53387433-cd8b3800-3954-11e9-940b-a7ec35fd237f.png)
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:
![screenshot 2019-02-25 22 52 09](https://user-images.githubusercontent.com/334891/53387432-cd8b3800-3954-11e9-8da8-22bac1bb137d.png)
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:
![nav2](https://user-images.githubusercontent.com/334891/53387482-03302100-3955-11e9-8089-5555cf5f9134.png)
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