Before going with this design I want to propose a different approach to the homepage mockup.

Let's analyze this one first:

• Occam's razor

I'd really like to simplify the content of the page, as there are too many elements in my opinion. It's also important to apply a visual hierarchy to the element on the page. As of now the first thing I say is the colored background with the three videos.

• Responsive design

I know this is just a mockup but (always imho) we should adopt a "mobile first" approach. Not just because we're using a css frameworks that works like so, but because mocking up desktop first has the risk that elements gets forgotten or not well deisgned when using mobile screens. Doing the opposite has the advantage that you start designing a simpler visual layout and add elements as the screen goes bigger.

Perhaps we need to mockup the homepage also for smartphones and tablets.

• Typography

I really like the typography of the heading title. Is it possible to share the font used? Speaking of the rest I see some consistency here. Are there just two fonts used, right? Good job however :-)

• Other opinable stuff

This are my personal suggestions:

1. I hate the black navbar. It breaks all the color rythm created in the rest of the page. I would really like to get rid of it. We can adopt a modern approach using a transparent navbar (white in our case). I will eventually show you the results in a mock up.

2. Too many buttons and no white space. We shouldn't be afraid of using white space to reduce the cognitive load. If we want that the user to navigate to the departments then they should be more clear and effective.

3. I think it's not necessary to repeat the logo two times on the same top left position. If we really want to use twice the logo I would adopt a solution like Docker's website (for example) does https://www.docker.com/

4. Following the suggestions came from the CERN sprint I would use two buttons with a sidebar to distinguish global actions from user's ones. This implies to menus with a sidebar

5. I also really like to have the searchbar to the right, because the majority of websites have it on the right so users are more used to adopt it.

6. I'd avoid big radii on border of the elements. I know firefox has it for its tabs, but I still prefer squared elements like the "Make and impact" button

I really like to give a sketch of what I mean with functionality in my mind (even though there are some some elements I need to think on how to design yet)

I will reply inline trying to keep things short :-)

First of all, thanks for the feedback! it is what keeps things moving and improving :-)

• Responsive design I know this is just a mockup but (always imho) we should adopt a "mobile first" approach. Not just because we're using a css frameworks that works like so, but because mocking up desktop first has the risk that elements gets forgotten or not well deisgned when using mobile screens. Doing the opposite has the advantage that you start designing a simpler visual layout and add elements as the screen goes bigger.

While I generally agree that this approach is the winning one, our main target (and by far so) are desktop computers. Mobiles will have their specific app (possibly even two). In my opinion it makes sense, in this particular case, to concentrate on the main formfactor of utilization: desktops, or tablets with a screen > 8in.

• Typography I really like the typography of the heading title. Is it possible to share the font used? Speaking of the rest I see some consistency here. Are there just two fonts used, right? Good job however :-)

DinC, EB Garamond and Source Sans Pro. I am not 100% sure we can use DinC on the web, though. I was also investigating using the Lato/ALEO combination, like Phabricator.

1. I hate the black navbar. It breaks all the color rythm created in the rest of the page. I would really like to get rid of it. We can adopt a modern approach using a transparent navbar (white in our case). I will eventually show you the results in a mock up.

Sure, if black disturbs you, we can change it. I didn't hear any strong opinion in favor of it.

2. Too many buttons and no white space. We shouldn't be afraid of using white space to reduce the cognitive load. If we want that the user to navigate to the departments then they should be more clear and effective.

White space allows the page to breathe. It is very important on a homepage :-) Don't be afraid of it. If there's content missing, however, we should add it.

3. I think it's not necessary to repeat the logo two times on the same top left position. If we really want to use twice the logo I would adopt a solution like Docker's website (for example) does https://www.docker.com/

This was after crisbal was not feeling we had enough identity. What do you like about the docker approach?

4. Following the suggestions came from the CERN sprint I would use to buttons with a sidebar to distinguish global actions from user's ones. This implies to menus with a sidebar

Two sidebars on the homepage?

5. I also really like to have the searchbar to the right, because the majority of websites have it on the right so users are more used to adopt it.

If you check, you will find similarities with the facebook top bar ;-) I think users can adapt to that! ;-)

6. I'd avoid big radii on border of the elements. I know firefox has it for its tabs, but I still prefer squared elements like the "Make and impact" button

It depends on the kind of button. 3px radii is a quite standard for non-too-important actions. "Make an impact" is, on the other hand, a strong item with some focus, and this is represented in its roundedness

I really like to give a sketch of what I mean with functionality in my mind (even though there are some some elements I need to think on how to design yet)

If there's anything I can help with, please shout out. Consider that I'd like to release this homepage during akademy, to address needs of the participation team.