Theme Directory Redesign: Cover header dimensions and responsive behaviour

[beafialho]

The theme directory redesign is following the existing styles outlined and even previewed in explorations in the past, so the expressive jazz cover is part of a higher level concept thinking for all the pages of the site.

Based on feedback on this post, I'd like to ask @ellenbauer and @carolinan to expand on their concerns around the title dimensions and ask @joen @panchovm @marko-srb what they think as well.

[carolinan]

I find the text difficult to read because the letters are cut off. The S is not as bad, since that character does not resemble any other characters, but the T looks too close to other straight characters. Ihemes

It is also extremely large, if you compare it for example to the news headline here: https://wordpress.org/news/
Documentation here: https://wordpress.org/documentation/

I think the main focus point on the pages should be the themes not the heading.

[ellenbauer]

💯 to all Carolina said.

First and foremost, let's have the theme preview images be the highlight of the page. It's what it's all about. So if we can save space at the top of the page, we should, in order for visitors to see more theme previews.

Second, I must also confirm that while I see the design choice of going with the Jazz cover style, especially on this page, I don't see an advantage for users. It's all about exploring and finding themes, so the name themes, while it should be at the top, does not serve any purpose in being so oversized. If we consider the 'form follows function' principle, I feel a smaller title will serve the purpose of the page (finding themes) better.

In addition, I want to add my vote to Carolina's concern, that the cut-off letters are a readability concern that I feel is again not a design choice that for this particular page is not adding any value for visitors.

[jasmussen]

I love this design. I think it's bold and expressive and something WordPress.org hasn't seen yet. And it dovetails perfectly into the /news redesign, which brough jazz covers to the site.

I think there are a couple of concerns voiced that are likely going to be recontextualized once we see how this design behaves in a responsive and actually scrollable context. Around how tall the cover is, how it scales, and how it affects the fold. That's also my plea to folks subscribed to this issue, I'd love to see this expressive design tried out for a bit beyond a static Figma image as has been shared so far. It is so trivially easy to pull back from an ambitious design, but it's so very very rare to reach for the clouds like this, that it would be a real shame to not even see how it feels in practice. I have a feeling that as soon as you see it on the site, it'll have a wonderful effect, and then you scroll and whatever concerns about the focus on content are assuaged.

Additionally, there are numerous things that can be explored beyond that, including collapsing the header on subpages or archive pages.

[ellenbauer]

I totally understand why one would love the expressiveness of the design. But especially on the main theme directory page, I feel design choices should always follow a purpose.

I'm very open to be convinced, but so far I have not heard any argument that supports the choice of this large full screen title font. How does this design choice help visitors to find the most suitable theme for their website?

[jasmussen]

Oh it's definitely part of a purpose. Switching themes itself is about expressing yourself, and IMO the fact that WordPress itself expresses itself can feel inspiring to the context, IMO. But beyond that I find it hard to dismiss it having only seen static screenshots. I really think it will be an entirely different feeling once the scrollwheel is in-hand.

[kellychoffman]

Just passing by to say that I love seeing the original jazz-inspired design direction being implemented on more pages throughout WP.org. Themes are perhaps the most tangible ways someone can express themselves, their brand, etc on WP and this opinionated header design really drives that point home. ❤️

[ellenbauer]

Ok, ok, l'll go with that for a bit. If we can get more visible filter options and especially more promotion for block themes into this redesign, I actually totally don't mind the large full screen font size. So I will try to concentrate on the changes that would really matter to me.

But I still wonder, will the plugins directory then get this large font too, in order to be consistent in the design, and how would that work?

[beafialho]

But I still wonder, will the plugins directory then get this large font too, in order to be consistent in the design, and how would that work?

Yes, I think 'Plugins' and 'Patterns' covers would be approached a similar way to Themes, News and Showcase. The idea would be to create specific expressive covers for certain pages of the site, while others would be generic (like Documentation) for example.

[fcoveram]

I love the expressiveness of this design, and it captures the jazzy feeling that started on News.

In that vein, I do not have significant concerns with the big header. Scrolling down is a natural interaction to explore what the content is about. The info displayed below is very straightforward, and the nav elements (search, filter, and sort) do not compete with the themes gallery.

If this layout intends to be reused for Patterns and Plugins, then reducing the letter spacing value might be a good option for keeping size consistency between headers. Especially when jumping among them and seeing a font size shift.

But echoing Joen's words, I would like to see the online version to get a clearer glance at how it feels.

[sereedmedia]

I fully agree with @carolinan and @ellenbauer about the size of the header. I appreciate the jazziness of the design, but I personally think the size it is distracting. It takes a minute to take in the word "Themes", even when you know what you are looking at.

However, my main feedback is that there is extremely minimal content or and no context explaining what a theme is, what the theme directory is, or how to use it.

How can we incorporate more information into this design? The @WordPress/marketing and/or @WordPress/documentation team can certainly help to craft, revise or compile content, but perhaps some filler content could be used at this point in the process. Adding text, even just links to more information, will affect the design, especially in terms of screen real estate.

[justintadlock]

The large header is certainly beautiful, but is it functional? This is my primary gripe with the news blog. It's just a large header area where I cannot see any useful content without scrolling down. Again, it's nice to look at, but it doesn't really help me as a visitor get to what I'm actually after. After I've admired it the first time, it just kind of gets in the way.

I love the experimentation, but I'd favor getting content/info to readers as efficiently as possible. A header that takes up most or all of the "above the fold" space doesn't really accomplish that.

If going with a large header, I'd like to scale the title back and provide additional copy about what the theme directory is and links to learn more.