Interface redesign

[tobyzerner]

Since revealing Flarum in the Kickstarter campaign, I've been thinking more about the interface design from three equally important aspects:

• Usability. How simple and intuitive the interface is to use for the average joe.
• Theming. How simple and intuitive the interface is to customise for forum admins — both in terms of basic customisation (changing colours) and advanced customisation (changing CSS).
• Extensions. How easy it is for extensions to add functionality to the interface in a consistent manner.

I don't think I quite hit the sweet spot with Flarum's current design:

• Most importantly, there are instances where the sidebar layout doesn't make complete sense. For example, when the two-pane interface is activated, the discussion scrollbar ends up being separated from the discussion itself, which is really counterintuitive.
• It involves some reasonably complex LESS styling, which wouldn't be ideal for themers.
• Overall, the design doesn't convey the level of simplicity and openness that I want it to.

Thus, I'm working on a redesign. The goals for the redesign are:

• To make complete paradigmic sense in terms of the content (which the sidebar concept didn't quite)
• To be very open, clean, and easy to style in an aesthetic sense
• For the CSS behind it to be simpler for ease of customization

Here are some initial mockups:

• Discussion list
• Discussion
• Discussion with multi-pane (Flarum theme)

Some notes:

• Two colors will be configurable by a color picker: a dark primary color and a light secondary color. By default, both of these will be blue. As an example in the Flarum theme, the primary color is orange and the secondary color is blue.
• The header will be able to be switched between two modes: white and colored. By default, it will be in white mode. As an example in the Flarum theme, it is in the colored mode.
• The forum title will be able to be replaced with an image, as in the Flarum theme.
• The links in the header, just to the right of the forum title, won’t display by default when there is only one (Discussions). Extensions will be able to add links (e.g. Members, Website, FAQ).
• The “Welcome” area on the discussion list will be the primary color if the header is in white mode, or the secondary color if the header is in colored mode.
• The title area on a discussion page changes background color according to the channel the discussion is in.
• Hovering over the “back” button in the far left of the discussion title area will cause the discussion list pane to slide out over the content. If the “pin” button is clicked, the content is pushed over and the pane stays there permanently, as shown in the “discussion with multi-pane" mockup.
• I’ve made an effort to keep all interface elements as simple and consistent as possible. For example, all buttons and inputs will be the same height.

Feedback appreciated!

Todo:

• Mock up elements with fixed positioning
• Mock up the post composer
• Mock up modal box
• Style guide
• Begin implementing this design!

[patricklittle]

I wouldn't worry about the complexity of the LESS files. If you have an organized LESS folder with good documentation and logical variables anyone should be able to make style changes easily.

[davecrow]

This is looking really good.

A few thoughts I had:

• I would avoid hover dependent interactions since they don't work on touch screens. So maybe have a separate button to trigger the discussion list slide-out.
• It would probably be helpful to put together a style guide or pattern library to maintain consistency and be able to see all the UI elements in one place.

Looking forward to seeing this come together!

Looking good, Toby! Is the design going to be responsive?

[tobyzerner]

@patricklittle I was thinking more in terms of compilation — it would be nice to be able to keep themers out of the console. But of course we can just use a PHP compiler, or even JS in the browser. So you're right, it's definitely worth using well-organised LESS over raw CSS!

@davecrow Thanks for the feedback. I'll keep that in mind about hover interactions and touch screens. Style guide is a brilliant idea, I've added it to the todo list.

@nitrammit Yes!

I've been working on more mockups and am really happy with how it's coming along, so I'll begin implementation soon enough.

@tobscure I downloaded and installed Flarum this morning, so I answered my own question. You've done a great job on the design, dude!

Let me know if there's anything I can do to help out. I'd love to lend a hand.

[amerikan]

@tobscure nice color theme 😄 👍

@tobscure Any chance I could grab a PNG of the Flarum logo? I was going to play around with some mockups for my own entertainment.

[tobyzerner]

@nitrammit Thanks! Here's the logo (background color is #E7562E)

@tobscure Perfect. Thanks, man!