Help us test Horizon, our newest theme

We’re excited to introduce our newest theme — Horizon! We’ve been testing Horizon internally for some time and are now ready to test here on Meta so we can get your feedback on how to continue improving this theme.

In this topic, we’ll share the goals behind Horizon and provide guidance for how to test and share your feedback with us.

:sunrise: Getting to know Horizon

Horizon is a simple, beautiful theme that aspires to become the new out-of-the-box experience for Discourse sites.

:warning: Please note that Horizon is still considered an experimental theme! As such, before installing it on your community or providing feedback, please read the rest of this topic so you’ll understand what to expect from this theme and how to best provide feedback to us.

Horizon Theme

:mirror: Who is Horizon for?

While we hope that Horizon is a great fit for many communities, we created Horizon with specific users in mind — non-technical admins and everyday members.

  • Non-technical admins are community admins who have limited technical expertise and no access to design or development resources. They don’t have the resources or know-how to customize Discourse’s appearance to work best for their community, but still believe that Discourse is a great fit for their community.

  • Everyday members fall somewhere in between the one-time visitor and the elite power user. They regularly read and post in the community, and are more likely to visit Discourse primarily (if not exclusively) from their phones.

We are proud that Discourse is so flexible and customizable, we want to make sure Discourse remains a great option for all communities, regardless of technical expertise or resources. We created Horizon for admins that don’t have access to design or developer resources, but still want a great looking community that your members will love.

:magic_wand: What’s different about Horizon?

While our Default theme is a relatively blank slate, Horizon is an opinionated theme. That means we have made certain choices about how Discourse looks and operates while using this theme in order to provide a great overall user experience for our target users (described above). Here are some changes you might notice:

  • Topic cards are less information dense. The most noticeable feature of Horizon is the topic card. We have pruned out as much information as we can to keep the topic list looking clean and approachable. Certain information, like a more robust list of topic participants and topic tags, are not visible on the topic card.

  • Horizon is not intended to support additional customizations. Because we’re targeting an audience that isn’t able or interested in customizing Discourse’s appearance or behavior, Horizon is not guaranteed to work well with all theme components or customizations.

    That said, we’ve tested Horizon against the most popular theme components and the incompatibilities we’ve found so far are minor. We’ll work to address those over time. For now, we do not recommend activating theme components with Horizon or adding your own customizations.

  • Horizon includes new color palettes that admins can enable to give members greater control over their community experience. Once enabled through the admin Color Palette settings, members can select from one of six theme-specific color palettes for a custom look and feel.

  • Larger text in the reading area. You’ll notice that Horizon’s reading area (i.e. topics) has slightly larger text than the rest of the interface text. We’re experimenting with this differentiated text size with the hope that it makes topics easier to read, while keeping less important text — like sidebar links — more minimal and less distracting.

:mega: Testing and sharing your feedback

You can check out Horizon on Meta using the theme switcher in the bottom of your sidebar:

As you test here on Meta or in your own community, you may run into issues with the visual design or incompatibilities with certain theme components or customizations. When that happens, please let us know. Your feedback will help us improve Horizon so that we can begin making it available more broadly.

Please note that we may not address all feedback that we receive at this time. That doesn’t mean your feedback is invalid or invaluable — it just means we want to continue to test a certain idea or design decision to better understand how it serves the needs of our target users.

:wrench: Known issues / work in progress areas

Here are a few areas where we’re actively working:

  • Improving the topic timeline design. Right now it’s a little wide, we’d like to make it more subtle so it takes up less visual space and demands less attention.

  • Identifying areas where layouts and styles aren’t applying correctly. The invite screens are one area where there are minor visual discrepancies. We’ve made a lot of these fixes already, but please keep letting us know as you find areas where things don’t look quite right.

  • Touching up color palettes to ensure accessibility. Horizon has a more streamlined color system (and has inspired some new color palettes, e.g. Lily, Clover, Royal, Marigold, etc.). We’re working on making sure Horizon is accessible and has the proper contrast in light and dark modes.

24 Likes

1 Like

I’ve been using Discourse for years, but I’ve never heard the term “topic card” before. It seems like you’re referring to the list rows on the Topics page?

In the standard theme, the Topics page is a table, with the following columns:

  • Topic: Title + Category + tags
  • A list of avatars posting in the topic
  • Replies: Number of replies
  • Views: Number of views
  • Activity: Timestamp, e.g. 10m, 4h, etc.

In Horizon, there’s no table. Each row has:

  • Title
  • One avatar, the most recent poster
  • That poster’s username, “replied” or “posted” and the activity timestamp, e.g. “lindsey posted 9 mins ago” “tobiaseigen replied 11 mins ago”
  • A count of likes. (What is that? “Topic” likes? Is that the number of likes that anyone has ever given to anyone in the entire topic…? That seems like a really strange number, and an especially strange number to highlight so prominently.)
  • A count of replies, next to a little reply arrow
  • Category, now on the far right

My thoughts:

  1. IMO, the topic’s category is much much more important than the identity of whoever just happened to reply most recently. I would put that back on the left, and put “lindsey posted 9 mins ago” on the far right, where the activity timestamp used to be.
  2. I agree with removing “Views.” In hindsight, that seems like a strange number to display so prominently.
  3. I’m not sure about dropping the other avatars. Maybe it’ll grow on me.
  4. I don’t like the prominent “Welcome back, username!” message. Header space is precious.
  5. Only now are the rows of the topic list “cards,” with rounded corners and a visible gap between each “card.” I don’t care for it, though it might grow on me. I prefer topics to be separated by a simple separator line.
  6. The topic tags are gone completely from the topic cards. That seems bad to me; it means that you can only see topic tags on the topic page itself.
4 Likes

There’s a little bit of prior art here through a theme component — Topic Cards — which has a similar design.

You’re correct that there’s a very different design between topic listings in Default and Horizon — this is by design. I appreciate your fast feedback here, and I’d would be interested to hear whether any of your initial opinions change (or not!) in a day or two. Hope you’ll come back and let us know!

1 Like

Thanks for reporting this, will let our team know.

(For the record, this is a transparency issue with the category / tag filters at the top of the /categories page on mobile.)

2 Likes

I’m really excited about this approach as I manage a forum for non-technical professionals.

The “Welcome” image has some weird artifacts above the search:

I would also prefer if I was referred to by name, rather than my nickname.

1 Like

Could you share a few details about your device / browser? I don’t see this at the moment but we’ve been touching up some issues like these in different areas, so getting specific details would be super helpful!

This can be accomplished through editing site texts — this is a feature that we recently added to Discourse core, which you can read about here: Bringing popular features to Discourse: Header search, welcome banner, and category icons / emoji

2 Likes

DiscourseHub and mobile:

Forcing to use the sidebar to start new topic wouldn’t be the smartest move, if the target is not the most skilful users (specially when a mobile is used)

3 Likes

I’m using the latest version of Safari 18.3.1 (20620.2.4.11.6) on a 14-inch MacBook Pro with the latest version of macOS 15.3.2.

1 Like

I’ve thought about this as well.. even on desktop you can make the sidebar go away while reading, so having another easy way to be guided into a new topic seems to make sense. Not sure where it could be.. do you have a suggestion? Google just “minimizes” the sidebar without getting rid of it altogether, so you never lose the new email compose button.

On the other hand, in discourse how essential is the new topic button for people who don’t already know their way around? We want new members in a community to spend time getting to know the community by reading and replying to existing discussions, after all.

2 Likes

This likely depends on the community. In our small private community, we encourage new users to posts topics as a way of sharing resources they have created/are using, or to seek help.

I would prefer to have the “new topic” button to stay visible somehow.

Edit: the category notification settings are also important to us – we use them as ad hoc membership to interest groups (represented by different categories). The current design de-emphasizes them. I would prefer having more them more obvious and clearly attached to the current category. As it stands, it’s unclear what they refer to:

They could refer to the “Documentation” category.

Maybe they could be placed at the top left or right of the banner itself?

2 Likes

What’s wrong with this we already have? Why to try invent a wheel again :smirking_face:

(I didn’t bothered to change language, you know this setup)

If the purpose of a forum is just to offer something to read, then it isn’t essential at all. But quite many forums are build to serve somekind Q/A and then new topic button is really essential.

And I would like to think that showing the very basics of functionalities are at the most essential thing to do.

It is not only matter of reading. I don’t use here the sidebar at all, because it doesn’t give anything useful for me. It is just another component without any purposes, distraction filling empty space on big screens.

But on mobiles it is always hidden. Meaning that mobile users must do now extra touch to start a topic. Shall we count how many topics and post we can find where desktop users are counting clicks before they are getting what they want and after that things have been streamlined to offer minimum amount of clicks :smirking_face:

1 Like

I’m landing on the same place with this. By all means remove interface elements and use the topic cards to create visual separation, but OTOH relocating things like the ‘new topic’ button also makes it more difficult for non technical users to get to grips with other discourse themes.

2 Likes

Finally! It looks great at first glance! :chefs_kiss:
I stumbled on an earlier version on Github and was curious about the final version. It comes out nicely!

Here is some random immediate feedback:

  • I like the unified background around the main outlet – It’s elegant and helps focus the content. On a large screen, however, not having a defined boundary for the content tires my eyes fast. It forces the eyes to focus on a large area. The Meta Branded theme is a good example of alleviating this: providing a clear boundary and background makes it feel balanced.

  • The new topic button placement makes sense; you can’t miss it. It took me a few seconds to figure out where it disappeared on mobile. I’m not too much a mobile user on meta; I would have expected to see a button here:

  • On the topic list, the row looks fantastic. It’s simple: focus on the essential. I can see two things that bother me:

    • The hot status position is kind of confusing because it is too close to the previous row.
    • I’m not a fan of the full border. Individually, this looks super nice, but stacked together, it takes more effort to read the actual title, especially when you scroll. It might be a bit too distracting. Maybe more spacing and/or a subtle border could help. (I also need to get used to it; I should probably wait and revise my feedback later.
      EDIT: To be fair, I think that’s more the avatar below the title than the border, which makes the reading less straightforward. The mobile view emphasizes this issue even more with the category above and the avatar below the title)
  • The palette color is wonderful.

  • (unrelated) The composer peek mode looks quite nice on this theme.

I’m looking forward to future improvements!

3 Likes

Nice theme! It takes a bit of time to get used to visually (or at least for me)

One thing I thought might be nice is to make the /categories page look a bit like in Air Theme because everything seems to be in a box in this horizon theme having a default looking category page looks weird imo.

1 Like

Ah okay, I can repro on that version of Safari but not on the latest version (18.4). Could you please update and let me know if the issue persists?

This theme looks really modern, sleek, and fantastic! I really love the rounded buttons, the topic list, amongst other things.

I did find 4 small problems, though. Note that all of these happened on mobile, using Discourse on Chrome.

  1. Topics are shown as ‘new’ with the blue dot even when they are unread.

  2. The machine traslate button grows very large when the composer is open.

  3. The post preview has white corners, and the area with the post buttons are not joined (see screenshot).

  4. The vote counter and button is not aligned with the topic title.

2 Likes