Proposal: Update the Dev Blog theme design to be consistent with the Developer Resources redesign

[ndiego]

The Developer Resources section of WordPress.org is in the process of being redesigned (Figma). As part of this redesign, the Developer Blog will be better integrated with the official developer documentation. There will be a latest posts feed on the homepage and a direct link to the blog will be present in the local navigation. You can see the homepage redesign here.

The design of the Developer Blog itself was originally based on the News site. With the redesign of Developer Resources, we should update the Developer Blog to provide a consistent aesthetic.

The following mockup (i2) is an initial draft. You can view the complete design in Figma along with additional design notes. Feel free to leave comments directly in Figma or here on this issue.

Homepage	Mobile

[jasmussen]

Looks good, vast improvement.

Not a single blocker from my end, but a couple of thoughts for future improvements to consider:

• The blueberry in "What's new for developers" is a bit strong compared to the monochrome of the rest. This isn't a problem per se, but it could also be light gray and work well also.
• Can we increase the spacing between posts in the main loop? Maybe one half larger?
• The column setup between "What's new" and the main post list is a little imbalanced, with the first one being 50/50 width, the next being 30/70ish.

There's an alternative sketch in that same Figma which handles this by simply not using columns for the main featured post:

Perhaps the heading is a bit big in that one, but in principle, that featured post could be "What's new for developers" instead of the Welcome post, potentially?

Finally, the "Latest Dev Notes" and "Educational resources", they have the same column issue as the first row. I know this is a pattern from the News section, but it works better there because there's a grid of 4 squares each being a heading and a paragraph, whereas this is a list. I wonder if instead of those two columns, we could continue the 30/70 column setup there, perhaps? This is also present in one of the other sketches:

Nice work! Ship this and we can circle back to followups, this is such a improvement.

[askdesign]

The design is clean and lovely. Really terrific work! I like the blueberry background color at the top in the "What's New" section.

Overall, everything is quite gray and needs some contrast. Have you tried using a bold weight for the main heads (Latest Posts) and Blog titles?

[abhansnuk]

Thanks for signposting this update in the dev blog channel and all the work on it. I like the cleanness of it in terms of fitting in with the rest of the developer resources design. I think the color contrast with white on blue and the thickness / weight of the font as it displays on my screens is a little difficult for readability. But it may be because they are images of it and the contrast may be sufficient on the live site.

If the blog is no longer going to be main branded on news as in the discussion at the last meeting, than the new design works as a resource hub similar to its parents Developer Resources. I would suggest a look at dev blogs in some of the softwares like Microsoft, where it has a more news and color feel to it. For example: https://devblogs.microsoft.com/ https://developer.mozilla.org/en-US/blog/ Both of these have very different design visions than WP developer resources, but an ability to have some blogs that can be pulled out as featured in a box may help get people into different topics more easily. The ones picked may not necessarily be the latest blogs. Being able to add a call out in one of the sub boxes would be great too, eg call for writers, call for blog post ideas around a particular topic. I don't know if we have this functionality already with the blog. Thanks.

[ndiego]

• The blueberry in "What's new for developers" is a bit strong compared to the monochrome of the rest. This isn't a problem per se, but it could also be light gray and work well also.
• Can we increase the spacing between posts in the main loop? Maybe one half larger?

Thanks @jasmussen. I changed the header to light grey and increased the spacing between the posts in the main loop and on the archive pages.

The column setup between "What's new" and the main post list is a little imbalanced, with the first one being 50/50 width, the next being 30/70ish.

Yeah I agree. I tried a few other versions. The first is loosely based on the "card" design we have the Developer Resources homepage, and the other is with the modified banner.

Current iteration	Two column - card design	Modified banner design

I think I am partial to the current version with the color/spacing updates, but would love your thoughts. Either way, iterating towards this design you did for Learn would be interesting if we establish a better methodology for featured images on the Dev Blog in the future.

Finally, the "Latest Dev Notes" and "Educational resources", they have the same column issue as the first row. I know this is a pattern from the News section, but it works better there because there's a grid of 4 squares each being a heading and a paragraph, whereas this is a list. I wonder if instead of those two columns, we could continue the 30/70 column setup there, perhaps?

I purposefully deemphasized the Dev Notes in this design. They are important but are not actually posted on the Blog, so I wanted them to remain separate. To me, applying the 30/70 design to this section makes it feel like the Dev Notes are part of the Blog.

Overall, everything is quite gray and needs some contrast. Have you tried using a bold weight for the main heads (Latest Posts) and Blog titles?

Thanks for the feedback @askdesign. I agree and will update the heading weights. This was actually an oversight on my part as the new Developer Resources section also uses bolder weights than in my mockup.

I would suggest a look at dev blogs in some of the softwares like Microsoft, where it has a more news and color feel to it.

Great feedback and I agree @abhansnuk. I do think we need to come up with a better solution for featured images on the blog. Once we do, we can easily iterate on this design to showcase the featured images as well. This would add a bit of color and make the homepage feel more lively.

[jasmussen]

I'm more partial to your "Modified" version there, though I'd omit the pin icon. The fact that it's at the top with a gray background feels pinned enough to me. But it's not a strong opinion.

[ndiego]

Following the feedback above, here is the latest design. You can view the complete design file, which includes designs for archive templates, in Figma.

To keep this process moving forward, I would like to wrap up any preliminary feedback by tomorrow so development can begin on this next iteration of the WordPress Developer Blog. So please share your thoughts here. Thanks!