PHP 8.5 Release Page Design Content Submission - kattogat & everlasted #1533
Description
Names and Contact Details
Link to mockup/prototype
Rationale (300-600 words)
Hello 👋
The goal for this design was to create a page that feels fresh, modern, and simple, while staying true to the PHP 💜 brand. The design focuses on making the information about the new release the star of the show, ensuring it's easy to understand and simple to update for future releases.
We are attaching the Figma link for the mockups, and we are also in the process of implementing the design with HTML and CSS (though we're not quite ready yet).
1. Keep things simple
The mockup is designed to be built using only HTML5 and CSS. The layout is straightforward, with clear sections that can be easily written and rearranged without the need for any frameworks or JavaScript. This approach makes sure the webpage will be lightweight and should perform well, even on slower networks and by usage of semantic HTML, website will be accessible by default.
2. Mobile-first & fast
The layout is clean and uses a single-column design, which we find is the easiest to read on small screens. On larger screens, it would adapt, with elements like the feature cards shifting into a multi-column layout.
We used the Inter font because it's easy to read and a common system font. Almost all visual elements are made with CSS, with only one exception: the header image with the text "PHP 8.5" was taken from the current release page.
3. Localizable
All text in this mockup is presented as a placeholder, demonstrating how the final text would appear on the page. The website uses semantic HTML, which makes locating text for translations straightforward.
A language switcher is also available in the navbar, which follows the user while scrolling. We included this because the navbar is not too compact; it doesn't take up much valuable space but makes switching languages easy at any point while reading.
4. Content-first
The design was created around the new features of this release. The "Before and after" section keeps the original idea of code comparison, which shows the practical benefits of upgrading to the newest version. In this design, the content drives the layout, not the other way around.
5. On-brand
The design uses the familiar PHP purple in a fresh and clean way. It visually connects to php.net without being a direct copy. It looks updated but is still instantly recognizable as part of the PHP family.
6. Mantainable
The mockup uses a consistent structure: cards are reusable, buttons have only a few variants, and comparison blocks are functionally timeless. This visual consistency should make it easy for someone else to pick it up and update it for future releases, simply by following the established patterns. This makes the design sustainable and maintainable for years to come.
🫡 Marcel & Maria
P.S. For presentation purposes and to demonstrate how the page could work with future releases, some of the example texts were generated by ChatGPT. However, none of this generated content is necessary for the design itself to function or be effective.
License
- I confirm, and agree.