0

I'm building a website where the index page acts like a "landing" page, with several sections of interest and call to actions throughout, the website also has 2 to 3 other pages.

Now I'm wondering, because I haven't seen any examples of this, if it is clear to the user if those two navigations are combined?

This is what I came up with, where the home page has nav items that have slightly less opacity, referencing to the anchor tags (scrollTo) on the page, and a secondary navigation to the right for the other pages.

enter image description here Logo is hidden for privacy reasons

Would this be considered a good practice? Or is it confusing to the user? This would also mean that the navigation with "referenties" and "team", is hidden on the other pages, since those anchor tags won't exist there.

Edit, from my research

I've seen that a lot of designers that work in a similar style just don't have the one-page navigation for the homepage. I'm not sure if it's good to assume that the user will scroll instead of navigating away from the landing/home page straight away, but I find very few examples of this double-navigation case.

1
  • 1
    This is a different issue, but for those of us with older eyes, the text is a lot more difficult to focus on than it would be in a non-blue colour. Jun 15, 2023 at 12:54

3 Answers 3

2

I dont think this is good practice. You pointed out yourself that the anchor links would not exist on the other pages which definitely is confusing. The distinction with different color does not help either. It looks more like the anchor links are inactive.

The hierarchy should be represented in the navigation. You try to achieve the opposite. You bring all information blocks into the same navigation level although this does not correspond to the actual hierarchy at all. So first I would reconsider the hierarchy. Why is «references» and «team» not an separate page like «process» or «careers»?

If you come to the conclusion that it is right to have them on home I would visually separate the anchor links from the site navigation. There are several ways to achieve this depending on your page design.

  • have the anchor links in a second line, make it clear that they are a submenu of «Home»
  • if you use a stage image, show the anchor links below that stage image, if it is fullscreen maybe even as part of the stage

Either way the goal is, to visualize that the anchor links belong to the page rather then to the navigation.

4
  • Thanks @BrunoH, what do you mean with a "Stage image"? Jun 16, 2023 at 4:34
  • Depending on the design a page often starts with a large image (whether this is a good thing is a separate issue). Here is a random example: fsco-production.netlify.app
    – BrunoH
    Jun 16, 2023 at 7:27
  • If you created that website, lovely work! Love the style. Jun 16, 2023 at 11:57
  • I didn't it is someone elses work... :(
    – BrunoH
    Jun 16, 2023 at 14:25
1

I agree with the other comments, the hierarchy isn't clear here and you're going to run into issues if your navigation options grow over time.

Try creating a navbar with the product logo, page navigation (Home, Cases, One process) and any global actions (Talk to an expert, Sign in, Search etc). Check out some examples on Tailwind UI for inspiration.

Then, you could use another navigation patter for the page navigation (Referenties, Team etc). This could be a sidebar (if you anticipate lots of items) or a horizontal layout below the Page title or main navbar. Again, check out Tailwind UI for some ideas on how this could work.

Play around with colour and contrast to help reinforce the hierarchy. For example, the navbar could use the purple in your example and the scondary nav could be more integrated with the page layout, e.g. using a subtle dividing line.

I hope that helps!

0

I agree with what Bruno said, specially:

I dont think this is good practice.

You bring all information blocks into the same navigation level although this does not correspond to the actual hierarchy at all.

Now, I think you could still have them both as methods of navigation in the same page, but you should clearly separate their hierarchy levels.

One way to do this would be to have a floating menu, either on the left or at the bottom to clearly give them a lower hierarchy and getting them closer to the content which will it have an effect on. You can also make it so these items appear as active (more brightness and/or saturation) when going through specific breakpoints to showcase which area of the page you are currently viewing.

I'd even go as far as to say that if you do this properly and you clearly define the interactions, you can reuse the same anchor component.

2
  • Thanks @Angel, do you have an example of what a floating menu could look like? This feels like a good idea. Jun 16, 2023 at 5:11
  • Hi Miguel. I’m away from my computer, but look at awwwards.com bottom floating menu. Even if not the same case, look at google docs approach with the headings menu on the left. It should behave similarly. Otherwise ping me and I can help you draft something over the weekend.
    – Angel
    Jun 16, 2023 at 22:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.