A community template emphasizing place and intent

community
1

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:

Landing Space
Landing Space1500×2100 145 KB

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

Conversation Space
Conversation Space1500×2100 118 KB

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

Collaboration Space
Collaboration Space1500×2100 120 KB

The implementation on our project looks like this:

Couchers Landing
Couchers Landing1383×2835 157 KB

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

Couchers Conversation Header
Couchers Conversation Header1371×561 67.7 KB

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

Couchers Collaboration Header
Couchers Collaboration Header1372×570 63.5 KB

22 Likes
2

Looks similar to webcore’s discourse instance. Very nice

4 Likes
3

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?

7 Likes
4

Wow! What an amazing template! :scream:

How did you create it?

4 Likes
5

Looks amazing. We need more of these custom themes.

5 Likes
6

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.

9 Likes
7

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
8

These are great suggestions! Thanks for sharing @nathank

5 Likes
9

You looking for more freelance work?

5 Likes