Harmony — design considerations, and more
-
As release week continues, I thought I would take the time today to talk more about our thought process behind the Harmony theme, including what our aims were, and what we tried to accomplish.
Yesterday, I wrote a retrospective on the Persona theme, outlining the decisions that spurred the creation of a new base theme.
Did we succeed? You should let us know!
As briefly mentioned back our September 2022 Design Preview, the following were the aims of the new base theme:
Classic — we want this theme to retain a lot of the concept that are familiar and common to all forums. Categories (or "forums"), topics, and posts. User profiles, signatures, you get the idea.
Minimalist — we want this theme to become the new base theme for future themes. That means there shouldn't be too many opinionated aspects of the theme. When used, it should display a sensible set of default templates, and leave much room for exposition via third-party themes.
Readable — content is king, and we want the most attention to be paid to the user-generated content that make forums the dynamic and wonderful places they are. Reading the forum should be a joy, not a chore.
What I called "minimalist" back then is more appropriately captured in the term "unopinionated". We wanted a theme that would function like a blank slate, where creating a new theme meant spending more time bringing your vision to life, and less time suppressing some of the assumptions that Persona assumed to be true.
What we realized soon after the theme development was underway was that it was very difficult to remain "unopinionated" without becoming "boring". As time went on, we relaxed our view on this and allowed @vladstudio to experiment more with designs that pushed the envelope in terms of UI.
I like to think of the Harmony theme as a collection of "sensible defaults" that one can build a theme on top of. Harmony has some opinionated elements, but far fewer than Persona did in NodeBB v2.
Stylistic cohesion and element reuse
One convenient by-product of starting with a fresh theme is that all of the templates and styles (barring the few that were migrated as-is from Persona) were created at roughly the same time. We are able to achieve stylistic cohesion purely because of that one fact.
Throughout Harmony, you'll see elements that are re-used between pages. We made more use of button-style filters and sidebars, and buttons themselves follow a more standardized usage.
While we haven't gone as far as to publish a "Harmony style guide" of sorts, we are hoping that what will be released tomorrow with v3 will serve as a solid skeleton for future iterations of functionality: existing pages should inform the design direction of new pages, and common elements should be re-used throughout the theme.
The focus on readability
Unlike other forms of social media, forum software is capable of delivering content of all shapes and sizes, but particularly excels at delivering medium-to-long-form content. Thoughtful discussion and exchanges of opinion are often found on forum communities, and we wanted the Harmony theme to reward the reader with an experience that excels, no matter what device is being used.
Unlike other forums and social media, when NodeBB displays user-generated content, we've taken steps to ensure that it is presented cleanly, optimized for today's high DPI monitors, and with layouts optimized for the varied aspect ratios encountered day-to-day.
This is why in addition to the hundreds of small design tweaks you don't notice, we also made a couple of intentional design changes that are more obvious.
- Post content has had its width constrained. Design cues from many sites have converged on a common refrain: text is easier to consume if the line length is limited.
- The same can also be said of serifs, but there are limits to our madness.
- We've minimized the amount of distractions so the reading experience is prioritized:
- The navigator is no longer fixed to the bottom, but on the side, outside of the flow of text
- The "user card" hover behaviour has been removed because errant mouse positioning can cause text to become unintentionally obscured
- We removed the permanent top bar and floating bottom bar in favour of sidebars on larger resolutions. Out of all of the opinionated thing we did, this one is likely the most opinionated.
I've been staring at various forms of the Harmony theme for months now, and it still delivers me the "wow" when the home page or topic loads. I hope it does for you too.
- Post content has had its width constrained. Design cues from many sites have converged on a common refrain: text is easier to consume if the line length is limited.
