Primer.style site refresh

[ashygee]

What is this

We've added a lot of great new features of Primer (Blueprints, Presentations, updates to Components and CSS, etc.) and we need to update Primer.style to reflect each new facet.

Concerns

Several things to keep in mind with the refresh:

• pairing with the updated styling of the rest of GitHub (e.g. GitHub blog)
• upholding the Primer branding
• focus on each new facet as well as possible callouts for news and adding to the team
• rethinking of news page Proposal: News page reorganization  #121
• new homepage redesign

---

Update Feb 27th, 2020

Proposed release stages of homepage design: 2, 3, 4

[ashygee]

Mockup: First draft

This first draft focuses heavily on having each piece of primer contained in its own tile. I've chosen to use our orange color as an accent as seen in previous mocks done by @broccolini. The goal of this layout is to keep things simple and give equal weight to all parts of Primer without having to do too much digging. As we continue to add more parts to primer we can continue to add more tiles which allows for scalability.

cc @broccolini @emilybrick @simurai @emplums

[emplums]

Hey @ashygee! I think this looks great so far! Just have a few comments:
(going to refer to each Primer site as a "property" FYI)

• The flow between the heading & all our different Primer properties feels a bit sudden. Maybe we could add some more copy between the two to explain how the Primer ecosystem is set up? The current flow feels more like a list of links than a landing page that holistically describes Primer as a system if that makes sense!

• Do we want more space to visually/textually show off what each Primer property is all about? Will the illustration + paragraph be enough room to give people a good idea of what each property is?

• Should we include links to GitHub repos as well as docs sites? It might be helpful to have both available as some people might want to go straight to the code.

[emilybrick]

@ashygee this work is looking solid 🥇

We chatted yesterday in the DS review, but I do think there's value in showcasing all of the Primer projects the way you have in the mockup above. It gives whoever is viewing it an overview of what we do, as well as a quick way to navigate to any one of those projects.

A couple of things mentioned yesterday:

• Maybe we include a deep dive underneath the grid that goes into more detail, and explains more of the story behind Primer and how all these things connect
• Agree with you that the grid is feeling a bit like a footer or a bit static. I think it might be worth playing around with different ways to lay out the 'projects' grid. ADG does this by showcasing each project a little differently; they're not all squares, some have photos (not suggesting we do this, just saying it works for their context).

[ashygee]

👋 Hi team! Below I are two concepts that I've been working on. Apologies on taking a while to push these up.

Concept One	Concept Two

* Note: Concept one has more space below the footer to make the screen equal in height to Concept two. In reality it wouldn't be this long

Updated mocks file for the refresh are available on Figma.

Things to note in these mocks:

• Exploring new color schemes.
• Prioritizing news/updates
• I haven't made changes to the grid from the original mock but am still exploring different options as suggested by @emilybrick

Questions

• Echoing what @emplums asked earlier, do we want to include links to both the repos and their respective docs sites? Or should this just be a jumping off point to go to the docs and folks can get to the repos from there?
• As far as content goes, is this all the content we'd like to include (What is Primer/Who is this for, news updates, Primer's properties)? I'd like to put together a content doc as suggested by @broccolini in the last show & tell but I've felt a little shaky on how to organize. @simurai also suggested this and I'd like to tackle this.

cc @emilybrick @emplums @broccolini

[emplums]

I like the Everything in One System section better in Concept One, and the truncated version of What's New from Concept Two best. I also think the Everything in One System section feels better as the first section and then What New at the bottom. I'd rather see an overview of the system first if I'm coming to this site to get a general understanding of what Primer is. It might be confusing to see our news and stuff there.

[ashygee]

I like the Everything in One System section better in Concept One, and the truncated version of What's New from Concept Two best. I also think the Everything in One System section feels better as the first section and then What New at the bottom. I'd rather see an overview of the system first if I'm coming to this site to get a general understanding of what Primer is. It might be confusing to see our news and stuff there.

Concept 3

[emilybrick]

This looks great. The light blue feels so refreshing! Layout + flow-wise, I prefer the news appearing underneath the docs grid.

My only 2¢ would be that the two blips of heading information information at the top for a bit redundant. It makes sense when I think about it, the top is the 'what' and the second bit is the 'why', however it feels a bit choppy.

That being said, I think when viewing the page at scale this wouldn't be a problem.

Nice work 🎉

[broccolini]

Hi @ashygee thanks for all the work on this so far. I like a lot of the updates here, the hierarchy feels right and I like the introduction of lighter blues. I'd love to introduce a bit more color at some point but I think sticking with the blacks and blues works for now.

I do think the visuals are a bit too busy in places though, and I want to help lock in content, so here's the some feedback and direction for next steps...

General feedback on visual styles:

My only 2¢ would be that the two blips of heading information information at the top for a bit redundant. It makes sense when I think about it, the top is the 'what' and the second bit is the 'why', however it feels a bit choppy.

• I agree with this and it also feels too busy/distracting to me, I'm not sure where to look or what to read

• Re the new paintbrush in a circle image, I don't really understand the use of the circle and it doesn't connect with other illustration styles. I think the current illustration is great and we should stick with that for now. If we update the illustration style more widely, then we should do what we discussed a few months back and work towards incorporating the new creative teams style. I don't think that is a priority at the moment but happy to discuss incrementally working on that.

• The illustrations used for the "docs showcase" are inconsistent, and one has code in. For now let's use the social images we have for these sites (and update them to the lighter blue style when we have time). If we do an illustration refresh in future we can update these further then.

• I'd suggest loosing the dots in the background on the showcase section, they feel cramped and add to the visual complexity.

• Learn more links are redundant, we can just link the titles.

Release plan / next steps

To speed this project along I've wireframed out what I want to ship in priority order, and I've worked on the real content I think we should use so that it's a true representation of what we have right now. This is a bit prescriptive but we don't have much time to spend on this at the moment and the current site is very outdated. We can keep iterating on the homepage and I expect it to keep evolving, so this is not forever!

Overview

• Include the "made by" statement in the Header. "Hubbers" is an internal word, so use "GitHub" instead.
• Update Header links to About, Open source, and Community (remove "components" as it has currently because we shouldn't special case one docs site over another)
• Present the featured documentation sections as a "docs showscase" similar to Material.io. Added strapline to qualify it better. The things we present in this section should link to docs sites we have currently. Figma components is an exception here but I think we should make it easier to find design kits and we have good coverage here.
• I've made headings that I think reflect what people are looking for, and removed "Primer" since that was repeated 6 times. And removed "read more" since we can have the titles link.
• Removed Job opening since that often goes out of date and we don't regularly have a job opening. We can figure out a way to bring that back if needed. For now I want us to highlight releases and posts.
• I'd like us to have a better Open source section, I want to encourage folks to contribute and showcase that lots of folks already do. Happy if you want to iterate on the design more but I was taking cues from innersource section here if that helps. We need to find actual pull requests from outside of the team for this section, I want to link to real contributions.
• The new footer is great, I'd like us to have that consistently across sites, cc @emplums & @colebemis re boilerplate.

👉 See Figma file here

FYI the dimensions and font-sizes are probably pretty off, we can work those out designing in the browser I reckon.

Releases

Release 1	Release 2	Release 3	Release 4

Release 1

• Update main nav to say "about" instead of team
• Redirect team to About page (anchored to point in page)
• Update header content to include "made by GitHub" para
• Add new Docs Showcase section using current social thumbnails. This reflects the order and content I think we should use in the first ship.

Release 2

• Add new What's New section, highlighting the releases, follow the site design styles
• Automate this so that we don't have trouble keeping this up-to-date
• Consider updating News page to have "What's new" and "Releases" categories

Release 3

• Add new footer
• Remove current "mini footer"

Release 4

• Add new Open Source section

Future releases

• Update the docs show case when we have these sites moved over or documentation added
• Create a documentation index page so that we can add a "view all docs" link

Side note: I'm proposing we call the current "marketing icons", Pictograms since that word is technically accurate and gives us a one word npm package & url, and a memorable name. Will follow up with a discussion for this.

---

I will add issues for the releases and individual tasks. We'll have to prioritize amongst other work and figure out who is able to work on these. I think later releases could be iterated on during First Responder.

[ashygee]

@emilybrick @broccolini all of this makes sense and I appreciate your input!

Moving forward I will make the incremental updates to each Release issue.