First iteration root page design

[noracato]

Hi,

I started implementing the design of the front page as disucssed on Basecamp. But I found it quite hard to keep the design tied in with the rest of the website. So I came up with using the images from the games as backgrounds. I also moved the large top text to be smaller texts under the game titles (atm just one sentence placeholders)

Top:

Bottom:

Still, something doesn't feel right. Do you maybe have any tips or feedback for me @antw?

[antw]

Still, something doesn't feel right.

I agree, though it's hard to put my finger on what it is. A few comments:

• It feels inconsistent that the first game has a white background, while the second game has a detailed background. I think I would look for a way to create a plain header, with the site logo and language selection, and then have a detailed background for the first game. Or if not, maybe something closer to the original Basecamp mock-up, with a smaller "boxed" image, rather than one which spans the width of the whole page?
• The semi-transparent boxes for the second game's text and high-scores is a bit too transparent. The text is hard to read.
• I would try moving the "Play" buttons to be immediately below the description texts so that there isn't a large blank space above them. A visitor's eye will hopefully land first on the game title, then the description, then we'd want them to see the "Play" button straight away.
• I'm not so keen on how the top of the house is cut off; it looks like it's been cropped too closely, and makes it feel a bit claustrophobic.

Although the big green backgrounds of the mock-up on Basecamp were overkill, I did like how they really helped split the page into distinct sections.

[noracato]

Thanks for the tips @antw ! I played around some more, and think this is an improvement.

Sorry the screenshot got cut off.

• I swapped the header for sky-blue and took one of the smaller illustrations to add to the first games bar. I chose the car but we can also choose another one, like the pipeline or one of the buildings.

• The whole background is sky blue which hopefully makes the games more distinct in their own (white) bars

• The text under the game titles is longer, leaving no huge gaps between the title and buttons.

• The roof of the house is now showing, and I cut the image off at the sides. The floating white rectangles have less transparancy.

[antw]

I'm not sure about this. It fits the brief and is an improvement over the first version, but it still feels a bit unfinished and unpolished to me. However, I'm struggling to come up with suggestions for improving it.

I don't really like that the "Game 1" section is just a white box with an image of the car at the bottom, nor that it's so different from the style for the "Game 2" section.

There are a couple of nitpicks:

• When the user does not have an active scenario, there's excess white space below the green button, occupied by the empty div.start-over.

  

• The shadow around the boxes is cut off. Adding some padding to #main will fix this.

• The boxes for "Game 2" aren't aligned with those of "Game 1". The left edge of the "Game 2" box is aligned with that of "Game 1", but the right edge for "High scores" isn't aligned with the right edge of "Game 1" (it's aligned with the "Game 1 high scores" box). I don't think there's a way to resolve this, and it stems from the two sections being inconsistent.

  

I appreciate your work on this, and that you need to move onto other tasks quickly, but I'm not a huge fan of the way this is working out, but I can't come up with a better idea myself. I wonder if we might be better served by keeping the old page, but getting rid of the high scores and replacing them with the "Test your knowledge in the quiz" section from the new version?

[MartLubben]

I really like the new design!

Overall it is a sleek website and I think it suits the target group "high school students". It is simple and clear. I do not have the same hawk eyes as you @antw. ;-) What are the minimal changes that are needed for you to accept it?

@ChaelKruip what do you think?

[ChaelKruip]

@ChaelKruip what do you think?

I think it could use a bit of polishing but I think we should push forward rather than falling back on the old design. Perhaps we can have a short session looking at the current page together and coming up with improvements to get this up to standard?

[antw]

I do not have the same hawk eyes as you @antw.

I don't consider myself an authority, and mine is certainly not the only opinion that matters. If the consensus is to move forward with the new design, I'm fine with that and won't put up a fight. 😅

[MartLubben]

I don't consider myself an authority

I consider you to be one ;-)

[github-actions[bot]]

This pull request has had no activity for 60 days and will be closed in 7 days. Removing the "Stale" label or posting a comment will prevent it from being closed automatically. You can also add the "Pinned" label to ensure it isn't marked as stale in the future.