I came across the new PHP docs recently and my mind couldn't help but start picking it apart. I thought it would be a good design to show how some subtle changes can smooth out the user experience.

Disclaimer: This, by no means, is an in-depth UX review of the new PHP docs design. I mostly focus on the visual aspects. There's no real commentary as far as Information Architecture and higher-level issues.

At a glance


Flow Through Visual Hierarchy

Untitled
BEFORE: Poor Visual Hierarchy
Untitled
AFTER: Improved Visual Hierarchy

The <h1> should look like a primary heading!
It seems obvious now, but this was missed.

The short description should be more prominent.
This helps you quickly understand if you are at the right page, or need to keep searching.

Secondary descriptors like "string" should be exactly that.
With code, it's not just important to have different colors, but for them to help draw the eye where it needs to be.

Put relevant information in relevant places.
Notice where I tucked the PHP availability text? Right under that primary heading. The lighter type size and color keep it from becoming overbearing though. Where was it before?

Untitled
BEFORE: Somewhere it fit, but didn't really make sense.

Navigation and Type Weight

Weight can help quickly visually differentiate. A heavier weight can make it more clear where you are (like in this case) and a light weight feels clean, modern, and unobtrusive.

Untitled
BEFORE: Where am I?
Untitled
AFTER: Oh, there I am.

You'll notice I also used color to help affect the perceived weight and to differentiate. It makes the nav clear after even the quickest glance.

Note: A potential downside to lighter type, is that it can be harder to read. Make sure to test across devices to see how it reads.


Other type fixes

There were a few other little things I wanted to mention as far as type. No one change is life-changing, but the sum of them is beneficial.

Untitled
Navigation indicator should be hanging.
Untitled
Tighter line height and better contrast between links.
I also heard @RandyApuzzo's voice in my
head telling me to use more color.

Layout and Flow

PHP Layout
Before and after layout adjustments.

The logo should be anchored in the top left.
It feels more intentional and lets some space flow through the center of the header.

When the header is inset and centered, space gets trapped.
Trapped space is a stealthy adversary. It's often the cause of that felt yet not understood "something is off"-feeling.

The line length should be a reasonable length.
This affects readability and can make the content harder to digest.

Whitespace helps the design breathe.
Shortening the line length has a secondary benefit. It opens up some space on the right, to let your eye have a break. Having no whitespace feels like a wall covered top-to-bottom in pictures and decorations.


On the right track

I think the new PHP site is headed in the right direction. In another article I may dive into some other aspects of the site. I'm hoping to actually get involved pushing some code and helping out.

PHP has given the power to do things I never would have imagined doing. I think it's about time I gave back.

Don't forget to follow me for updates and more articles.