Did you know we were working on a new theme to live alongside Persona? If not, I wrote a blog post all about it (among other things)
Pursuant to that blog post, I want to give you all a glimpse of where we are at design-wise. Our wonderful designer, @vladstudio (who we will give a belated introduction to later, I promise!), has been working closely with us these past few weeks to turn our sometimes meandering brainstorms into something beautiful.
When coming up with a theme design, we wanted to focus on a couple key concepts. These concepts heavily influence many of the design decisions, and hopefully offer a good balance between tradition and evolution. There are many UX aspects of community forum software that have settled on patterns that just work, and we definitely don't want to mess with those. At the same time, we want to explore some new design decisions that really push the envelope of what a modern forum software can do.
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.
There were additional criteria, but I will spare you the verbosity
Without further ado, here is our designer's Figma mockup of a single page, the topic page:
The preview is semi-interactive. Some buttons work to show components. For example, some of the icons on the right are clickable, and the left-hand sidebar can be minimized.
The following instructions are also included here for your benefit:
- On the first screen, click the toggle button to collapse the sidebar. All other interactions are possible when the sidebar is collapsed:
- Click the toggle again to expand sidebar;
- Click icons on top-right (user, search, notifications, chats) to open their popups;
- On the search popup, click the input field to imitate typing;
- On the progress bar, click Down to scroll to the last post, then click Up to scroll back up. (It is not really possible to make progressbar work properly in Figma, unfortunately);
- hover over icons and progressbar to see tooltips;
- Click the big blue Reply button to open Composer;
- In Composer, click Hide, Discard or Submit.