A community template emphasizing place and intent

I want to share a layout I’ve been doing for a community project. I’ve been working on abstracting some of it’s ideas and would hope it gives some general inspiration for non-profit, open-source, chapter-based or otherwise distributed community setups.

The design has two main goals:

  • always suggesting place and common intent around conversations
  • framing conversations within a wider context of featured content and work areas

The conceptual landing view:

Navigating to specific areas will change the contextual cues. Apart from this the navigation stays consistent:

Navigating to a working area will add collaboration tools to the navigation:

The implementation on our project looks like this:

On each space we suggest a distinct context and intent through visuals and intro text:

On working areas the navigation menu provides sub-navigation and access to tags:

19 Likes

Looks similar to webcore’s discourse instance. Very nice

4 Likes

You make some amazing-looking Discourse designs. Great work!

Setting aside whether you will do so, how much of this could be shared as a normal Discourse Theme? How much is Theme Component or other more in-depth customization?

6 Likes

Wow! What an amazing template! :scream:

How did you create it?

3 Likes

Looks amazing. We need more of these custom themes.

4 Likes

Thanks everyone for the nice words :hugs:

About how it’s done: the conceptual template is just a mockup, I do these with Figma. It’s not specific to Discourse.

For the Couchers.org community I implemented it on Discourse bundling styles in a theme and using theme components (Header Search, Category Banners, Custom Nav Links, Featured Cards, Category Showcase, Modern Category Boxes, Easy Footer). I added some custom code to get distinct banners on the Homepage and the Latest route.

The final layout and working of the community then depends on adjusting settings: site-wide, on the components, on categories, for tags. So you couldn’t implement the template by only sharing a bundled theme and components.

Conceptually I don’t see this as a theme but rather a template, layout or model. Not sure about the best term yet. It’s objective is not so much to just change looks, but to change the workings and ux in order to support a specific use case or community model. I’m also working on other templates and wonder what would be the best way to share them. You’d need a way to export and import all overridden settings. Right now the only way I know is using a backup, but it would be great to find a way that just targets settings and not site content.

6 Likes

You can export/import site settings already:

It might take a bit of work to document each one, but a simple way might be to post a new topic here in Meta (suitably tagged etc) outlining all of the customisations using a structure like this:

  1. Design concept & demonstration site (if available)
  2. Theme as an exported file
  3. Theme Components as a list with a brief overview of changed settings
  4. Plugins with brief notes on the configuration of each
  5. Settings that have been changed from default as a .yml file
7 Likes

These are great suggestions! Thanks for sharing @nathankershaw

5 Likes

You looking for more freelance work?

5 Likes