Figure out navigation about styled-components-website HOT 52 CLOSED

@morajabi to combine all points (but ignoring the gradient for now):

• The navbar should be using our violetred colour (rgb(219, 112, 147))
• It should use the compact version of our logo (the one that's already present today for mobile)
• It should not break up the text (This is up for debate, but I'd say we should keep it simple for now)
• It should avoid (i.e. not use) dropdowns (for the sake of mobile devices)
• It should incorporate the sidemenu, which has a light grey-ish colour, nicely
• The navbar should not contain links to the docs' pages but have the same links globally
• On mobile devices the navbar should contain a fold-button to open and close the sidemenu (See gif)
• The navbar needs to contain a search field (for future functionality) and maybe some links to Spectrum, Github, etc

Unanswered questions:

• Where do the navbar content go on mobile? Should the sidebar double for the docs links and the navbar links on mobile?

I think that covers it right now? cc @mxstbr

from styled-components-website.

@philpl I will give it a hand if everyone is OK. Let me know.

from styled-components-website.

@mxstbr @philpl Good news! It's finally done. I'm making the PR now so you can try it!

from styled-components-website.

That tells me that the top nav could be responsible to jump between the big sections ("Basics", "Advanced",...), but what I'm fearing is that we're going to run out of space as we add more and more content. (like just yesterday the new "Tooling" section, we might add "Guides", "Examples", "Integrations", etc. in the future)

So imo it makes more sense for the sidebar to be responsible for jumping within the documentation, while the top bar is responsible for search and navigating to the docs in the first place? (I think search will be huge and widely used)

from styled-components-website.

Ah yeah, that's true. Good point let's make it sticky!

from styled-components-website.

@morajabi sorry, that was a bit unclear:

It should not break up the text

... of the "styled-components" wording on the left

Edit: Just had a look and I think we should roll with it 🎉, although I'd like to see whether we can make due with the change above, even though it takes up more space. I don't necessarily want to perpetuate the "styled components" (no dash) name even more.

Really amazing work on mobile! I think that should work perfectly

I think we need to redesign the Home page, too. With some extra elements (i.e tweets, who's using, use cases with image or GIF, etc). A richer page just like Jest, Flow, Babel and others. what do you think?

We have some other issues open for separate pages for tweets, etc. Right now the content is already a bit much and I think we need a visual space for the badges, but overall I think we should incrementally change it, and not change everything we can right now all at once.

from styled-components-website.

Since nobody has commented in the negative yet, let's implement this? 😊

from styled-components-website.

Progress Report: Going for the mobile navbar view.

from styled-components-website.

Let's continue here so everybody can chime in, this is better suited for the design discussion!

from styled-components-website.

Oh, btw, regarding the navbar + sidebar. I’d really love to reconcile this effort with @morajabi’s work. We’ll also need to think of the collapsed sidebar for mobile devices / smaller screens. In those cases it’s probably impossible to get around scrolling, but we have to design and think about it beforehand. For instance, a DropDown is good on desktop but horrible on touch devices, and scrolling will be necessary still on smaller screens and phones

Edit: Including @morajabi's design to speed things up a little

from styled-components-website.

What about showing all sections in the sidebar but collapse them except for the one you're on. So in your case you're on Basics, so it'd show Basics + all the subpages, and then beneath that it'd show "Advanced", "API Reference" and "FAQ" but without their subpages listed?

@mxstbr I like this idea and it's more common in latest libs' docs.

from styled-components-website.

@morajabi

What do you mean by scrolling? Where?

That navigation sidemenu might collapse on small screens. But since the screen is not only not wide enough, but also not long enough, you'll need to be able to scroll the content. So we might get rid of scrolling on desktop, but not on mobile. Which is ok! We just need to remember this.

Btw; Here's instead of the screenshots a gif. @morajabi feel free to remove the images; I think this illustrates what we'd like a bit better :)

from styled-components-website.

The gradient is actually a big question on my end here.

It's works super well on the homepage, but it feels forced and weird on the navbar to me. The navbar is a utility, it shouldn't be the first thing you look at when you look at the page?

I like where these designs are going, I can see the dropdowns in the nav working too!

from styled-components-website.

The navbar is a utility, it shouldn't be the first thing you look at when you look at the page

Agreed! When you put it like that I think that @morajabi is right and we should outline the priority/hierarchy of the pages so we know where the focus is. Because it the above is true then I think we can really reduce the design and make the content on the pages themselves the focus.

from styled-components-website.

I think the content should be the focus.

People don't come to styled-components.com because they want eye candy, they come either because they want to try it (that's why the getting started is on the homepage) or because have an issue and are trying to fix it asap before their boss comes and screams in their faces. 😉

from styled-components-website.

Yes please!

from styled-components-website.

@philpl That was just a quick placeholder! I have Sketch actually but I used Figma because it has better collaboration support.

from styled-components-website.

@morajabi That looks perfect! Just have to make sure to export the wording of the logo as an image when we actually build this as we're not using Fira Sans anywhere else on the site :)

from styled-components-website.

I love it, getting there for sure!

from styled-components-website.

Great! I'm busy now, Is it OK I start doing this tomorrow?

from styled-components-website.

Yeah, implement it on a branch and submit a PR!

Is home page going to be like this?

I think we'll have to do some special treatment to the navbar on the homepage (no background?!) but let's figure that out once we have a first version (i.e. a WIP PR) and can quickly iterate?

from styled-components-website.

@morajabi I will do that tonight 🎉

from styled-components-website.

Should we continue about nav and other stuff here or on the Spectrum?

from styled-components-website.

How about the inner pages being dropdown when you click the main page ?

from styled-components-website.

I really like the top nav with conditional side nav option! I think that could work really well making the top nav the gradient background and then the side nav being a lighter gray to differentiate it from the main content.

I think the logo could then be broken into the icon on the left and styled components text beside it. Then on mobile the text can be removed and only the icon is there.

Mockup here:

from styled-components-website.

I quite like the two navigations! Two quick ideas:

• What about showing all sections in the sidebar but collapse them except for the one you're on. So in your case you're on Basics, so it'd show Basics + all the subpages, and then beneath that it'd show "Advanced", "API Reference" and "FAQ" but without their subpages listed?
• That frees us up on the top bar to do more things there. Since we're adding a bunch more broad sections like "Tooling" that'd get filled up pretty quick. We'll also add stuff like a search input (ref #85) etc. What do you think about just making it list "Home" and "Docs", and then having a search input?

from styled-components-website.

I really like it as well :) two things however: I think the gradient is a bit off but don’t worry, since it’s already present in the code; second thing is the content container size. The one we have fits the content really well and the one in the design is too wide, so I’d probably preserve the current one.

Apart from that this looks really awesome! Maybe I should try to work on a first version? I actually do have time today. That is, if no one else is more stoked and motivated than i am ;)

from styled-components-website.

Do it!

I'm not sure I like the gradient at the top (too much imo, the one on the homepage is enough; I'm not a fan of our current sidebar one either) and the android-like treatment if the selected states but I think this would be a great prototype to get out 😊

from styled-components-website.

What about my design on nav? It seems you’re going with this one.

from styled-components-website.

@mxstbr

I'm not sure I like the gradient at the top (too much imo, the one on the homepage is enough; I'm not a fan of our current sidebar one either)

Wut! 😆 That's A1 branding right here

@morajabi Can you post your design here so we can combine the two? I really like the dropdown behaviour of yours, while this one has a good alternative for the sidebar.

from styled-components-website.

@philpl

second thing is the content container size. The one we have fits the content really well and the one in the design is too wide, so I’d probably preserve the current one.

I think I just have a larger screen! It was not my intention to redesign the content haha

I think the plan with the main nav being more universal links is better! Was not aware of the expansion of the site!

Also, I agree! part of the brand to me is the gradient now, but I think that it could just be the palevioletred as well and get the job done. 💯

from styled-components-website.

@wking-io no worries! Just a note on my end regarding the sizing

The gradient is actually a big question on my end here. I wasn’t aware that you’re more in favour of a more simple design, @mxstbr. Maybe we need some more feedback on some variations? It’d be simple to tweet out a plain flat-colour navigation bar vs the gradient one. I’m definitely in favour of only having the gradient on the navbar and not the sidebar. It makes it less attention grabbing.

The gradient in general was an attempt to transition the branding from a brutalist approach to a minimalistic one. And overall people have reacted supportive of it, including @geelen. The navbar is certainly another question, but it does carry over some “fun” aspects and sets it apart from other sites.

Happy to hear everyone’s thoughts on this 😬

from styled-components-website.

I think putting documentation headings in the sidebar makes more sense and it's easy to navigate. You should let the nav bar handle other things like what Babel, Webpack, Jest, React and others did and use a sidebar for content navigation. Anyway, it's my opinion :)

I think what Redux did for navigation on mobile with a ||| (rotate 90deg) icon is great for mobile users.

P.S: If have any opinions or you want to combine the best of two designs, I'd be happy to make a new design based what we need.

from styled-components-website.

For instance, a DropDown is good on desktop but horrible on touch devices, and scrolling will be necessary still on smaller screens and phones

What do you mean by scrolling? Where?

from styled-components-website.

Of course, GIF is better, Thanks for that :) @philpl

What's your opinion on having Basic, Advanced and FAQ parts in the sidebar? (Read my earlier messages)

from styled-components-website.

I think we should start to sum up what we expect from a nav, shouldn't we?

from styled-components-website.

@mxstbr As I said that before, I agree so much.

from styled-components-website.

@mxstbr I agree with the navbar not containing pages of the docs. It can pretty much be the same across all pages, be it the docs or the homepage.

I also agree that the gradient feels attention-grabbing and forced right now. It’s force though in the sense of it being there for branding. And I think that’s alright. We should make it identifiable. That doesn’t hinder usability if we fix the attention grabbing part.

I’d say we should try out two designs: Navbar with the gradient and navbar with the pale violet red-like colour. Then we can see what both look like and let our users decide what they like the best

from styled-components-website.

@philpl If you can, I think it'd be great to write what you like about two design so I can make a new design. (Maybe edit your message above!)

from styled-components-website.

@philpl What do you mean by this?

It should not break up the text

from styled-components-website.

@mxstbr @philpl I've redesigned the parts and added some artboards and notes for each state. I copied the nav and changed the colour to see if it's what we like. (Don't forget to enable comment-mode from top left menu to see some comments). Also, the links I've put in the nav have no purpose and they're just placeholders as I didn't know which links are we going to put there.

I'd appreciate your comments on that. And we can edit the parts which are not your preference.
https://www.figma.com/file/ZZHoPeTYKNtNqcLYnRsQSVxR/Styled-Components

BTW, I think we need to redesign the Home page, too. With some extra elements (i.e tweets, who's using, use cases with image or GIF, etc). A richer page just like Jest, Flow, Babel and others. what do you think?

from styled-components-website.

@philpl I'm glad you liked it!

I'd like to see whether we can make due with the change above, even though it takes up more space. I don't necessarily want to perpetuate the "styled components" (no dash) name even more.

I see, What font & styling should I use for the styled components?

from styled-components-website.

@morajabi So there's a couple of options here:

• Use the typography as is in the logo (with the line break which doesn't contain the dash, but seems to fit in the navbar nicely)
• Use the body font (that's probably not a good idea, since we can just export a png)
• Use the styled-components on a single line with the appropriate font

I actually realised that your design almost matches the logo but changed the styled part of it to appear in bold. That's what confused me initially, and we can't change details like these unfortunately. I think it'd be best just to export the typography with the logo to the right side.

You can find the resources here: https://github.com/styled-components/brand

In case you don't have Sketch, I can export it in the format you need later today

from styled-components-website.

What do you think now? @philpl

from styled-components-website.

@philpl That's OK but if we're going to import other fonts from Google, we can import just the letters s,t,y,l,e,d,c,o,m,p,n from Fira Sans like this:
https://fonts.googleapis.com/css?family=Fira+Sans:500&text=styledcompn
as discussed here. Just a suggestion if we're going to have style component logotype anywhere else, otherwise we'll use an SVG.

from styled-components-website.

Wow! I really appreciate that @mxstbr

from styled-components-website.

Sounds great to me!

from styled-components-website.

One question, should I implement it on a branch of the current website? Is home page going to be like this? I think it's not going to match the navbar, so we should slightly redesign the first section of home page.

from styled-components-website.

Should navbar be sticky?

from styled-components-website.

I don't think so, just because it takes away a lot of screen estate on mobile and doesn't really improve the experience, right?

from styled-components-website.

I think it should be sticky on mobile because it's the only handler to unfold the side nav. If it doesn't stick, you need to scroll all the way up to open side nav!

from styled-components-website.

@SaraVieira Can you take look? I'd be glad to know what you think, too!

from styled-components-website.