[1.0] Discuss next steps on gatsbyjs.org design

[KyleAMathews]

Today I did a redesign of gatsbyjs.org. Highlights, we're purple now! Thanks to @ArchieHicklin for pushing me this direction.

Things are still pretty rough though.

This is the front page as of now:

Things to discuss / do:

• @SachaG has an awesome diagonal design mocked up https://www.figma.com/file/J6IYJEtdRmwJQOrcZ2DfvxDD/Gatsby What are people's thoughts? I really like it — very fresh and cool design plus we could make the triangles slide out as you scroll which would be fun. Anyone want to claim implementing this? @SachaG you think you'll have time? If you're relatively busy I'd rather someone else so you could spend whatever time you have on Gatsby Explanatory Diagram #1172. I need to jump on some client work for the next little while so would appreciate help here.
• On Gatsby Explanatory Diagram #1172 — please join in that conversation as well.
• Marketing — thoughts on the copy I added to the front page? Big / small things you think I'm missing?
• new user onboarding. Main flow I'm thinking is people land on front page, click on "Get started" which tells them to install the gatsby cli, install starters and start playing. Sound reasonable?
• Colors — I used this color tool to generate the color scheme. Not really a color person but I really like what it comes up with. This is the config I used http://davidjohnstone.net/pages/cubehelix-gradient-picker#23,16,1.11,1.12,1,0.1,0.97 (you also have to change the number of swatches to 48 and click on something else to make it update). If you go to https://www.gatsbyjs.org/colors/ you can see the colors live. All colors on the site are derived from this as I just pick out colors from the different columns. See [1.0] New design + new home page 🎉 #1170 for the gory details. Anyways, like/dislike the colors? If you want to play with the cubehelix tool, feel free to move things around and copy/paste different colors in the colors.js module and see what results. Also open to someone picking colors a more traditional way. I do really like the idea though of having multiple color spectrums that you can pick colors off. Makes it easy to vary colors while still ensuring things harmonize with each other.
• Metadata — gatsbyjs needs title/descriptions added via react-helmet to all the pages.

[KyleAMathews]

This is how the colors came together for links + code

[SachaG]

I don't have a ton of time myself either so it'd be great to collaborate with somebody else who could take care of implementing the new design + the diagram. For now I think the priority is settling on the content though, once that's done I can finalize my mockup and we can start thinking about the implementation (same with the diagram).

[0x80]

I really like the new design and color scheme!

❤️ the diagonal design by @SachaG. Clean and fresh. I can see the potential with transitions. I don't have much spare time myself nowadays either, so for now it's just some minor feedback. I am interested in figuring out page transitions somewhere in the coming weeks, so possibly I can help in that direction.

IMO the new design and copy is really fine for now. Proposed onboarding makes perfect sense.

I have my doubts about the diagram, but will write that in the discussion there.

[fabien0102]

I don't have the time to do the website style, but this is my little contribution (because it's was fun to make ^^):

// @SachaG background for home
const homeBackground = {
  backgroundImage: `
    linear-gradient(-45deg, #744c9e 35%, transparent 35%),
    linear-gradient(-45deg, #9d7cbf 50%, transparent 50%),
    linear-gradient(45deg, #f5f3f7 50%, white 50%)`,
};

[KyleAMathews]

We also should add testimonials. There's been lots of tweets we could use + there's been some good stuff said about Gatsby on HN, in person, etc. that we could gather.

[ArchieHicklin]

@KyleAMathews fantastic work! so pleased you went in this direction 🎉 Sacha's mockup looks superb - especially the 'used by' logos above the fold.

I'm completely swamped atm but I'm going to have free time to put toward this in July regarding implementing the design - don't know if that's too late.

Wonderful stuff.

[ArchieHicklin]

The only thing I really want to propose is a bolder color palette (quick mock)!

[SachaG]

Looks nice! I like the bolder colors as well, and I love the cut-off logos in the info boxes!

[akadop]

stripe style , nice

[KyleAMathews]

@ArchieHicklin nice! I really like the bolder colors and the info boxes

I'm going to have free time to put toward this in July regarding implementing the design - don't know if that's too late.

Gatsby v1 will launch before then so we'll want to have the frontpage fairly polished before then. But that being said, I'm sure sure there'd be plenty of things you could do to help improve the website still.

Also in the meantime, would love any quick reviews you could give of designs / implementations we make.

[fk]

Hi everyone! Over the weekend I set out to recolor the "cute Gatsby guy" @ArchieHicklin did last year, trying to bring it in line with the current design direction/color palette.

I think including him "as part of little helpful callouts" like @KyleAMathews suggested would add a nice touch in support of the already friendly, welcoming tone of the documentation and tutorial.

I struggled a bit with my initial intention and ended up drawing my own version (inspired quite a bit by the Pringles character and "Rich Uncle Pennybags" aka the Monopoly man I guess ;-)):

Apart from some quick fixes to the hair, this pretty much is the first draft – I don't like the body part much (although it kinda works for the use case shown, which is not a callout, but a button :-/) and would like to try a simple fly instead of the tie …

What do you guys think?

[fk]

Here's a version at 100% (screenshots from a HiDPI display, so things might be a little blurry on "regular" screens):

[ArchieHicklin]

@fk Beautiful!

[fk]

@ArchieHicklin Thank you Archie! 😘
Here's another progress shot; still not happy … ;) :P

[erutan]

I like the reduced jacket and tie in the PRO TIP example over the bow-tie, though the collar of the shirt is a bit overpowering.

[erutan]

This came off as a bit odd to me:

Gatsby.js builds the fastest possible website. Instead of slow geography-bound servers, your site is lifted into a global cloud of servers ready to be delivered instantly to your users wherever they are.

You're talking about it being easy to deploy to Netlify etc, but there are plenty of non-fast sites on global cloud infrastructure. It's also untrue if someone just drops the static build on shared hosting or a VPS slice or something. Maybe something like:

Gatsby.js builds the fastest possible website. You get an already quick static website with page loads delivered nearly instantly due to React. Due to it's streamlined architecture it's straightforward to have it lifted into a global cloud of servers ready to be delivered directly to your users wherever they are. No more slow geography bound servers!

[KyleAMathews]

I'm going to work to incorporate #1172 + @SachaG's header mockup into the frontpage today. Working on tying up a few last loose ends before pushing out the 1.0.0 release tomorrow :-D

1.0.0 doesn't mean the frontpage is done by any means though so not closing this issue. @ArchieHicklin I really like your colors but I'm not competent enough at colors to incorporate those into the site. Would love you to take a run at the site later this month when you have some time!

[KyleAMathews]

The website design is humming along. Thanks for everyone who's been helping!