Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[1.0] Discuss next steps on gatsbyjs.org design #1173

Closed
KyleAMathews opened this issue Jun 15, 2017 · 18 comments
Closed

[1.0] Discuss next steps on gatsbyjs.org design #1173

KyleAMathews opened this issue Jun 15, 2017 · 18 comments

Comments

@KyleAMathews
Copy link
Contributor

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:

screen shot 2017-06-14 at 22 38 20

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
Copy link
Contributor Author

This is how the colors came together for links + code
screen shot 2017-06-14 at 10 18 18 pm

@SachaG
Copy link
Contributor

SachaG commented Jun 15, 2017

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
Copy link
Contributor

0x80 commented Jun 15, 2017

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
Copy link
Contributor

fabien0102 commented Jun 15, 2017

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
Copy link
Contributor Author

KyleAMathews commented Jun 16, 2017

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
Copy link

@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
Copy link

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

@SachaG
Copy link
Contributor

SachaG commented Jun 19, 2017

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

@akadop
Copy link
Contributor

akadop commented Jun 19, 2017

stripe style , nice

@KyleAMathews
Copy link
Contributor Author

@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
Copy link
Contributor

fk commented Jun 26, 2017

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 ;-)):

image

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
Copy link
Contributor

fk commented Jun 26, 2017

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

image

@ArchieHicklin
Copy link

@fk Beautiful!

@fk
Copy link
Contributor

fk commented Jun 28, 2017

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

image

@erutan
Copy link

erutan commented Jul 3, 2017

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
Copy link

erutan commented Jul 3, 2017

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
Copy link
Contributor Author

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
Copy link
Contributor Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants