Open for discussion: design updates #602
Conversation
In this change, I have updated the hero and navigation with a design experiment done earlier. The changes in this commit are not final and should not be deployed yet as the following should still be done / checked: - Responsiveness of the design - Checking of all pages in the website for possible inadvertent changes - Updating of the design on all other pages to match changes - Update the news and conferences section to be readable in a light background It can be considered to add support for dark mode (this is a media query after all); though it is out of scope for the current effort.
|
Ehhhh, I need to join the webmaster mailing list but, my gut doesn't really like the orangy/purple blur thing. |
|
Thanks for your effort. I think the nav changes in particular are nice. The current nav looks outdated (little spacing, old looking shadow line, text shadow, square search field, bad contrast, etc. The background choice seems somewhat arbitrary, That section also just recently received an makeover, so I'm not sure we should touch it again so shortly after. If we keep that one as is, I'm not sure the dark nav bar and introduction section will have enough contrast for visual separation. Maybe with go with a more modern blue and your other nav changes. WDYT? |
|
The darker navigation is intended to provide more contract with the rest of the page; as I believe a lighter theme will give it a more contemporary look. Here is my current WIP for that:
As for the image, that used to be less abstract in a previous version but I changed that after feedback that the image made it look too much like a conference site, see this Figma design for the visual design:
At the moment I am browsing through a few images and doodling to see if a good replacement for the image can be made An image, or visual, will add to the contemporary nature of such a design as a blank background will leave the whole feeling empty |
Let me see if I can do something with that; blue is a bit of an interesting color, if you pick the wrong one people tend to think they are primary buttons :D |
|
How about something more like this as image? (still looking in the mean time)
|
|
Maybe I was unclear: What I meant was to flip the colors of the nav, so keep the background a somewhat lighter, and keep the links dark. This way it would still work with the current info-section. The current info section was literally added days ago. cfcf303 I feel like it would be unfair to the original author to just change it completely after such a short amount of time. Improvements can always be discussed of course. |
|
No disrespect intended, I had not noticed that it was added so recently. For what it's worth; it is a solid improvement as I had to make minor modifications to get the hero this way. The blurb text was most invasive as I wanted that below the container :) I would love @lhsazevedo his input as well and let me see if I can make a design variant that stays closer to his work. Kudos |
Of course, I didn't mean to infer that either 🙂 Let's see what @lhsazevedo has to say about it. |
|
A variant that sticks closer to @lhsazevedo his work could be:
My focal points are mainly to address the navigation and to give the page design itself a cleaner look; for the hero there are many options possible :) |
|
That looks very nice IMO. I like the slight tint in the background, the current gray looks very bland. I haven't checked out the code myself, how does this look for wide displays? I think the gray background in the main section should be removed entirely, and the content just centered. Also, obviously the search needs to be incorporated in the nav somehow 🙂 As for the other changes in the hero section, it's up to @lhsazevedo to decide if he's ok with the changes. Pages like https://www.php.net/releases/8.1/en.php should probably also be checked (as the header section is made to "bleed" into the nav). Also, other pages like https://www.php.net/downloads might look a little bland with just white content. |
|
The code does not reflect the previous screenshot; that is a design from Figma :) As for the gray; give me a bit more time to get that in. The gray backgrounds in the main section are cards and will provide visual separation between articles. A difference you cannot see here is that the gray does not run from top to bottom, but is with each individual article |
|
Here are my thoughts/opinions:
Some other points, unrelated to your changes, but something that might be a good idea to change also:
|
|
I also missed the blue border, IMO the two colors don't mix well. |
We can ask Fernando for permission; this is a photo from his blog on PHP Barcelona (https://www.fparedes.com/blog/php-barcelona-2019/) and if that wouldn't work out for whatever reason we could create an original work that uses the same vibrancy.
Just not included in the designs, please keep in mind that most of the screenshots in this thread (aside from the opening post) are designs and not actual screenshots :)
The version number is the focal point when you are skimming the contents; I wouldn't make them the same as the rest of the content as that decreases the effectiveness on the page. Same goes for the whitespace, this helps to guide the eyes to the content, provides resting points in the page and helps to declutter the page. If you believe that if should become more unobtrusive; is the issue perhaps that you believe that element to be unnecessary or in need of a different representation?
You're not going to miss those 12 pixels ;) But without jesting, making the bar thicker allows for more breathing room and, again, resting places for the eyes. It is also what enables the search bar to be a little higher, and this declutters.
I recommend adding a dark mode instead. I am not familiar with a trend that sites are going darker, I have just done a quick check but most contemporary design trends still favour light sites, a bit more colorful at the moment. As for php.net had it good; most content is set against a light grey; only the background was black. |
|
Of course, at the cost of complexity, we could shrink the header when scrolling down, or just make it smaller on mobile to begin with. |
This is kinda non-sense, not having pure white I agree but having a "light" background is not a strain on eyes. There is no conclusive research and the bit there is has mostly been that a dark text on light background is better. So I agree that making a dark-mode available for those who want it (and that browsers can automatically select via user preference) is good, moreover I in general prefer light modes over dark modes, And I find the some what recent change of having a very dark background annoying. |
|
Current status:
For the people who followed the thread; I have not yet changed the header yet as I would like @lhsazevedo to be able to weigh in first. In the mean time, I have been focussing on a style update for the main content and conferences listing. The conferences listing has been restyled to be more recognizable. I had hoped to use the event's image there but that information is not present at this time. I have also redone the whitespace for the news articles as these were unbalanced. |
|
Hi, thanks for including me in the discussion. But I'm afraid that perhaps this discussion should go beyond our design opinions as there is a big difference in scope between my recent contribution and this one. The design style of a brand is what allows it to connect with the public and be recognized. Changes in these aspects are not small tweaks, but big and drastic shifts that have impacts in the entire ecosystem, especially when it's a traditional brand. And that's not necessarily a bad thing, sometimes it's even necessary. Every now and then we see a big brand update their logo, colors and overall style. There may be room for evolution in the brand design, but I understand that it would require a lot of valuable attention from the members in the short and long term to be done responsibly. For this reason I made sure to follow the current PHP branding style when I proposed and implemented the new hero on the homepage.
See #459 I think it would be interesting to hear from @morrisonlevi, who (AFAIK) was responsible for the current design and logo. This week he also made design adjustments to the homepage: #591 Another complementary suggestion would be to do the same as our friends from Jetbrains (led by @pronskiy) did when proposing the new PHP 8 release page: Send an email to the #internals list and advance the discussion there: https://externals.io/message/112026 That said, these are the improvements that I really liked in the version without background image (#602 (comment)) and I think they can be added to our current design without friction:
As for the changes to colors, lines, and style in general, I really think it would be wise to hear Levi's opinion and wait for the discussion at #internals before moving forward with the implementation. Edit: Ideally, we would have a group of people responsible for brand design, and processes for evaluating, perhaps voting, and driving major visual proposals. I gave the suggestions above because we don't have the group or processes, for now at least. |
|
Although secretly I had gotten quite enthusiastic about the changes I proposed; I know they cannot be incorporated as easily as it might seem. Levi's comments in the internals thread are quite applicable, that the number of pages if just too great. I do think the project could benefit from a vision to work towards to keep coherency. From a design standpoint, the website could do with even just a little attention to whitespace and consistency in the visual language. As for posting on internals, if it is not necessary I prefer not to. I have seen some constructive posts, but it is clear to me that some of the posters are back-end developers who have no interest, or even detest, things like brand or product placement. I prefer to talk in a collaborative setting.
The background color of the navbar is a bit tricky here as that specific blue has a bit in the middle in terms of contract. This means that whether you go darker or lighter; you can only have that much contrast. It's why you see sites generally use a dark or light menu, or something highly saturated. What you can do, is to remove the text-shadows as they can cause create a sort of anti-aliasing effect blurring the edges of the text with the background, and to make the text pure white instead of the current gray. Old: New: (and yes, the text above is pure white, the bleed from the menu bar color is what makes it look like a blueish tint :) )
As for a slighter shift, there are few sites -at least that I know- that have a similar thing going on with a dark background and a light 'inset' where the content is. One of the few I know is CSS Tricks (https://css-tricks.com/single-element-loaders-going-3d/), so it may help to look at their site for inspiration. This may reduce any large changes, though I get the feeling that how MDN works and looks like (https://developer.mozilla.org/en-US/) may be beneficial to the project. Especially since the site is mostly focuses as a reference manual and not for new people to get acquainted with the project.
I do not know if there is anyone who concerns themselves and can make decisions regarding promotional / brand activities. Even before thinking about brand design, there needs to be consensus on the goal of the website. For example, if looking up reference information is the main goal (like MDN) then a big search bar in the hero makes sense; if onboarding new developers and showing that PHP is relevant in this day age is what we want to express: then having a good landing page and onboarding materials would be more prevalent. Is there anyone who knows / decides on these things? |
|
this is a great design thumbs up @mvriel hopefully, the change will be considered and people who think PHP is dead change their mindset |
I agree. When I saw the design on Twitter I thought: Yes, good idea! The main reason for me is that you want to attract new developers as well. The PHP website, at least the non-documentation pages, is basically your marketing tool. It's not weird to look at other popular languages/frameworks and see how their websites look & feel. I personally love the Laravel & React websites, but also Ruby on Rails, NextJS and some aspects of the Python website are pretty nice. Not saying the PHP website is horrible, but moving forward (I mean PHP as language took a big step forward as well) the ecosystem deserves a beautiful website as well. And the only way to accomplish this is with a bigger make-over and not some small changes. I'm saying this within a 'commercial industry context', having done countless website rebuilds/redesigns at my previous employer. Besides the design changes, I would also update the homepage regarding content. It now solely focuses on releases, but IMHO it needs to tailor you to different sections of the website. In my current job, I teach PHP (among other subjects) to students at the university. I can assure you, a little more modern look & feel will help excite them even more. Just my two cents, but I hope to eventually see some nice upgrades to the php.net website! PS: let's be clear I much respect the current maintainers who evolved the website design till today, that's absolutely not the point! |
|
Upvoting new design! Since the language got some awesome features in past 3 major releases - i do think that its time to make UI look modern! |
|
Levi and myself re-done the design (php,html,CSS) last time we modernized, bringing it up to the current version. Levi did the PHD (XML) work all by himself (thankfully), which I'm really grateful for, personally. I'm happy to re integrate things again, it will be much easier this time around Happy to pair with Levi and any fresh blood we have these days, it's been a long time coming. Thanks Mike for initiating things again. I'd like to take a step back and decide on what we want our site to be structured like and the contents, then we can slap a new design on top. @morrisonlevi do you suggest we go back to the mailing list now and move to content/structure chat, and then come back here to focus on design ? |
|
I love the first image, it has much more energy than designs without an image. I love the mix of colors there and especially introducing orange. |
@brzuchal I think it may be helpful to take a similar route as MDN has done; there you can select between Light and Dark Mode or let your OS settings decide (websites can determine whether your browser/os is in dark mode). Especially when it comes to devs, there are people in both camps and trying to appease both will, IMO, result in neither dark nor light mode but more of a gray mode ;) |
|
@mvriel sure, I agree. The dark mode is something I currently had to emulate using the "User CSS" plugin for chrome and a set of CSS rules so the php.net won't make me blind. |
|
Thrilled to see an effort to refresh the web site. Nice effort so far @mvriel, though the masthead feels a bit bigger than it needs to be. I’d also move to a fresher look by changing the body font to Helvetica Now Micro or similar. Coincidentally, I tweeted this a few days back - https://twitter.com/alokdhir/status/1545129716922859521 |
|
Oempf, @lhsazevedo. Thanks for that contribution to the discussion, what I like about your suggestion is how it better incorporates the current branding. I still believe the search bar needs to be in the hero as well as it emphasizes how people use the site. The "oempf" is because I really needed to take a step back as I had gotten invested in the latest iteration I had done; though I do see a lot of merit in being a bit more conservative while applying modern practices. Gimme a moment to let me see if I can mix and match a bit more with the pieces I enjoy most and come back with another variant that incorporates both elements. |
|
A quick, and somewhat rough, version could be this.
I did keep a bit of the playfulness (the skewed background behind the logo and the elephant) in the hero as -I think- it adds interesting elements and puts a bit more emphasis on these things. The article background is now pure white and the page background a 98% lightness blue tint -similar to your own version-. I do believe the search bar needs to be fully rounded to be consistent with the CTA buttons; and for the 'light' version I chose to keep the sidebar with a light background to make it a bit more modern and with the intent that the darkmode would feature darker sides again. The three releases buttons are still separated from the hero to make the content of the hero more focused, and to make these elements stand more out for those who want it. Ideally, I would love a "Getting Started" CTA in the hero; but I am not sure there is pre-existing content to link to. @lhsazevedo what do you think? |
|
Addendum: I forgot to mention that one of the reasons to avoid the dark background together with light articles (sort of blended light and dark mode) is because it might be advantageous to have more content on the frontpage -at a later stage- aside from release information and having a separate light and dark mode makes that easier to design. As I see it, the current blended mode will make it harder to introduce different types of components above the articles and nav. As an example of what I mean we could look at the Kotlin Lang site:
This element harder to use when horizontally there are two completely different colors |
|
FWIW, I find @lhsazevedo take way cleaner and more intuitive. The hero block and menu bar look really nice. @mvriel Having the search on the hero block does not make sense to me because there is always one on top anyway. I think it adds visual noise to the page. No major programming language has it: I believe Go, Kotlin, and Swift invested some time in the design analysis. Seems like the main page's purpose is more about presenting the language, not documentation search. The light background of the main content indeed makes things easier. @mvriel, @lhsazevedo, how do you feel about combining these two?
|
I used Android (https://developer.android.com/) and MDN (https://developer.mozilla.org/en-US/) as examples where this was used. One of my main reasons for this is that the PHP homepage does not have any other function than being a launchpad into the docs or showing release information. I'll do a bit more experimentation later on (now at work) but I do believe that it would be nice to consider having more branding related content on the homepage; yet I am not picking up that scope at this point to limit the impact |
Well, there is https://www.php.net/manual/en/getting-started.php, but I wouldn't link to it. |
Yeah, this was considered back in #459 but we decided to wait for improvements in the Get Started section before actively promoting it.
Looks awesome to me. It manages to apply the design improvements that @mvriel brought (taller navbar with higher contrast, cleaner body content) while staying clean and improving upon the current design. If we all agree to proceed with the combination suggested by @pronskiy, I believe the next steps would be:
@mvriel I would love to collaborate with you here, count me in! I also believe this is a good opportunity to update our CSS foundations. We still use Bootstrap 2 and its float based column system. I would be happy to work on this task if we agree that it is a good time for it (upgrade to a flexbox based column system, CSS variables, spacing utility classes, etc). I'm looking forward to contribute and work with you guys to give PHP website the modern look it deserves. |
|
Hey @lhsazevedo, @mvriel mentioned you on our sync chat today. Thanks for helping with the design parts (and figma). I'm waiting for the nudge from Mike, that you've settled on the design guide, and page mockups, and then I kickstart the implementation phase, in terms of strategy. As for your points about CSS foundations, let's postpone implementation chats, for now. I will sit down at the time and take a good assessment of options on the table, and then collectively we will lock in a strategy for what's forward. Mike and I will sync with you again in the near future, about implementation stuff, when the time is right. Any questions for me, specifically, just have Mike ping me :) Keep going! Speak soon |
|
change the new interface for the front page is very interesting. but most people prefer to find the function/class used in php. we hope you can design the search box can help us find more accurate and interesting keywords such as google search box or bootstrap |
|
The @lhsazevedo suggestion is my favourite so far, and 💯 for the dark mode!
|
Just for public record, I have reached out to you through e-mail with a link to the Figma board. I am working on a new iteration that combines some of the elements of my earlier iteration and @pronskiy's as I think there is something to gain in the header by separating the release information from the rest. And I really would like to introduce an elephpant somewhere to increase brand recognition there.
As mentioned by @dragoonis, let's focus on getting the Figma design and designs for the various pages proper so that he can implement it and make sure it gets carried across all php.net properties. |
|
👋 I did much of the last redesign 10 years ago (wow). I want to share my advice. As with any non-trivial project, there should be goals. What's the purpose of the redesign? It's been a while so I don't remember all the goals I had, but getting rid of the boxes in boxes in boxes look without many visual cues, and overall too small fonts with too little padding and margin, etc, were done to help improve the readability, scanning, and navigation experiences of the the site users. Aesthetics took a back seat, but admittedly I let aesthetics influence my decisions too much! Don't repeat my mistake. This is the biggest thing: why do the redesign? What are the goals? There are a few things I'd like to see in any redesign:
Addendum: a lot of things can be done incrementally without redoing the whole site. Making improvements that help now and that also pave the way towards a better future is a better way forward when compared to shipping an entirely new design across the entire site network. |
|
@morrisonlevi thank you for that feedback and advice, it is much appreciated! At current, @dragoonis and I have been discussing back and forth and he will be doing the implementation and I am helping the UX/UI part of the equation. Thus even though I am well-versed in how to approach this technically; I am unable to comment on implementation details. As for the design goals that I have in mind, I can elaborate:
Aside from the broad goals above, when designing
Although all screenshots so far use the homepage as an example, this is done to gain a bit of consensus so that I can then make a design for the other parts of php.net. From my perspective, the documentation is the most important part of the site to give a lift; the homepage is a vehicle to setup an initial design system.
What I explicitly do not include as a goal:
As a closing note, my initial (re)design work was an experiment and I never dreamt it would catch on. From that point onward I have set out not to redesign the PHP website as much as providing a design update. I hope that as a next step, we will be able to build consensus on which elements would enrich the homepage or what site structure would benefit the ecosystem. |
|
And after that whole wall of text, the latest iteration is
Even though there might be details that we can discuss, I am moving forward now to expanding the number of designs to include mobile/tablet sizes and the other parts of the website. Any tweaks discussed here can be carried across these designs |
|
@mvriel You probably saw me asking around about this on Twitter last week, and @dragoonis and I are planning to talk this week about it, but just to put it formally: My team (@tighten) has availability to help out with this project but doesn't want to step on any toes. Things we can do if helpful:
I'm so excited to see this:
This is 100% what motivates me to contribute time from my team on this; PHP branding is great, and all, but improved docs is worth any cost. Again, I want to make this super clear: we will not attempt to compete with any work you're doing here, but if we can collaborate and that's something interesting to you and @dragoonis, I'd love it. Final note, because some folks on Twitter have made assumptions: Yes, we're a Laravel firm, but no, none of my ops/templating plans involve making this a Laravel site. It's clear that the parent PHP org wants to avoid any ties to any particular frameworks, and I wouldn't at all want to suggest changing that. |
Here are a few things I noticed:
Of course, I'm asking for more work if we want to make it a reality, but I think these things are important ^_^ |
Just checked it using the webaim contract checker and it at least passes the WCAG AA standard for regular text; it is were semi-bold or bold it even passes the stricter WCAG AAA test.
As for all other points, due to a death in the family, 2 holidays and some chats between other people I will wait with responding |
|
any updates on this one? |
|
No feedback was provided. The issue is being suspended because we assume that you are no longer experiencing the problem. If this is not the case and you are able to provide the information that was requested earlier, please do so. Thank you. |
|
Re-open this, or I can open a new one. I met with Mike van Reil, we had calls together, and he wishes to hand over things to me to take forward. Although I try not to take on more workload/pressure, I was happy to accept Mike's request. I have since had calls with many php team members (Levi ..etc), and community members and a lot of upfront planning and analysis work is already done. I anticipate to reach out to php team members and others, in the upcoming weeks as it's the holiday season and I will have the time and capacity to properly kick things off in a coordinated approach, rather than it being all on my shoulders. Thanks for everyone's patience, and speak soon. 💙 |
|
As a side note, this is so wrong: 
Between adding |
|
I know it has been silent from my side; to clarify: my life got quite a bit busier unexpectedly -a lot busier- and it meant I could no longer help out here. I hope that at least some of what I contributed has helped |
|
Don't worry @mvriel I'm still sitting on all your work, and the session we had together. I will revive it soon, once we wrap up "business life" for christmas, approx 22nd December |
|
If anyone is wondering about status update on website redesign - we're on the cusp of its kickoff right now. Just before christmas time, I got asked to join the PHPUK conference team, to really grind on things there I agreed to do that as it's super important for the PHP community the conference is in 3 days time (15th and 16th Feb) so my point is once the conference is over, then it's onto redesign grind mode 💪 I hope to meet with php (foundation) team members and such at PHPUK conf, to communicate next steps, and expectations I've cross-posted this update onto our #php-website discord channel too, so everyone knows. Looking forward to publishing the update next week or so, after PHPUK conference. Cheers 💪 |
|
@dragoonis Any updates? |
As a design experiment, I have made a re-imagining of the PHP website's visual design. After posting that on Twitter (https://twitter.com/mvriel/status/1542898919142789123) I received thus much support that I opened a topic on the mailing list to see if the webmaster team is interested as well (https://news-web.php.net/php.webmaster/30216).
However, I was having fun with the design and wondered how much effort it would be to apply the changes to the website. This Pull Request can be considered a basis for discussion, to demonstrate what is needed and to include screenshots for the team to see what it looks like.
As a side note: I am well aware that the conclusion of this adventure may be that the presented work will not be included. This is fine. I am more than happy to have the conversation and it would be a shame to let this merely rot on my harddisk :)
At the time of writing, the changes have been applied to the homepage alone and look like this,
Desktop
Mobile