Design contest submission

[ben-joostens]

Names and Contact Details

Ben Joostens (ben@klaar.io)

Link to mockup/prototype

https://web-php-alktr90q.on-forge.com/releases/8.5/en.php

Rationale (300-600 words)

I think the main issue with the current release page is the lack of clear flow in the most important part of the page, which are the features with their code comparisons. There was centered text, left aligned code, an arrow telling me where to look, counterintuitively so. There was even vertically centered code for some reason!

As a developer myself, when I look at a page with code, I know it has done it's job when I can't wait to stop looking at the page and instead dive into the code. The releases page does not invite in that way, it itself communicates complexity, when the essential take-away of most new features is how to do things in a more rational, logic, or easy way. The goal and the result are clearly dissonant.

So, that was the entire focus of fixing the current design. I was not interested in "glamming it up" too much, I just wanted to breath usability into it so that it could be adopted without too much hassle, and even applied to older releases.

The heavy lifting is done with 2 simple parts, left aligning most text, and a better separation of old vs new PHP version code examples. And also, reversing the order of the code, which makes more logical sense, the old code should be an 'aside', not the main attraction. Ok, that's 3 parts, not 2.

The commit message:

• fix: Lack of spacing after <?php tag in code blocks
• fix: Code block for array_first was missing the var_dump output

Improvements:

• More breathing room for the entire layout by removing the column feel
• Use text-align: left for the brunt of the content, this improves the flow of the page to reduce strain on the user.
• Changed the order for code comparisons between versions, last version is now first
• Improved the separation of visual styles between old and new code
• Restricted the accompanying text for new features so that it resides under the code block of the new PHP version. This
  not only improves readability due to shortened line length, the text is also more logically related to that block. On
  mobile, this also puts the text under the relevant code block, instead of the wrong one.
• Code comments are now better visually separated from the code
• Reduced font-weight for section titles
• Increased contrast for code inside titles and lists
• Added some love to the new and breaking features so that they catch the eye
• No more dropshadow on the navbar

License

• I confirm, and agree.

[ben-joostens]

And I just noticed the code examples in the 'prototype' link are wrapping incorrectly. (It works on my computer ;) )

edit: fixed

[pronskiy]

Thank you for the submission. Results are now published. You are very welcome to join the implementation process #1592. Closing this thread as part of post-contest housekeeping.