Fabrice, reversed looks better.

The category tags have all different sizes. What about one box to frame all tags. It would look less scattered.

Also the header of the page would probably look better if the elements were not just isolated. A box like the blue one above helps that things look more aligned.

Here the colour of the post area is not white. It has a "pinch" of yellow. Therefore it harmonizes well with the area left and right of it. Some people found it more relaxing/comfortable for the eyes than plain white. Perhaps it works also with the new colour. It just has to be made very cautiously as it is less bright then yellow.

ファブリス Wrote:@kerosan41
Do you mean the index page with the Recent topics? Or do you find the sidebar to the right less familiar? I'm not set on the column order. I have to admit I like the sidebar first.. however I felt like the topic list was off center.. I'm sure people can get used to it, but maybe it would be better to have Categories first to the left, on desktop.

Guess I'll need more opinions on this.. either way we can change this easily. I have gotten used to it but I do feel like it's less obvious that the categories are there. Come to think of it you could argue it is more "usable" to have the sidebar and its links before the main content...

I actually meant how the users icons were all the way on the right and the thread topics were on the left. But after seeing your mockup with the categories on the left, I like it better.

I think you should consider swapping the categories to the left. It feels more natural to me with the left sidebar rather than the right sidebar. Things on the right hand side just seem so far away.

[ファブリス]

Re: the preview forum 's design.

wareya Wrote:http://i.imgur.com/3LfCqJB.png

Have: left (14px)
Want: right (13px) or even one pixel further smaller (12px)

The lines of text are too long in the screenshots. I don't have an issue with the smaller font size, but I'll have to leave this to preferences since from typography/design perspective this long text lines is potentially more difficult to read.

This is the kind of tweaks you can make fairly easily with an extension like Stylish.

Heck I'm tempted to increase the line-height as well because Open Sans is quite light and the text feels dense even at 14px.

@Matthias
I like the Category "tag" design. The "reason" they are this way is because of contrast. The previous design basically had no separation and everything was floating. So next I put a background texture, and "boxed" in the content (also called "layered" design). Boxes add edges to the content that guide the eye, and it feels more comfortable. However at that point, I had two boxes with list of links : topics, and forums. They looked too similar, particularly with the same background and link color, and some distinction needed to be made (here is an earlier design). Also you have further boxes down the sidebar for the sponsor, and the search links which need to be differentiated. It's all about contrast, I had to make the categories stand out. Also I think the different sizes help to navigate the list. That said, I will try different alignments if I move the sidebar to the left side. Also if you see other cool designs that could work I'd love to get some ideas.

I'm not sure what you mean by "isolated", could you expand? I have to limit the content in the headerbar (and add links to the sidebar instead), in order to scale down to 480px.

Colours : The new forum could use warmers colours, however it is not white All the light background and even the dark text colour is very slightly off white (cf. Design Tip: Never Use Black). To be honest I'd love to have a more saturated version with a nice cream background colour, but it is very hard to work in colour so I'll probably keep it that way unless someone provides a mockup with colours that work really well, then I may consider it.

Use this colour or a variant closer to the yellow of the current forum instead of the whitish/grey one:

Fabrice, one of the reasons why the reversed one looks better, is that the box on the right gives an end to the categories area.

1. I agree that the different tag size stands out but it is nothing I would use. But apart from the personal preferences I am surprised that in the "earlier design" you linked with much more text (all categories with explanatory lines and Remembering the Kanji instead of RtK) the categories do not come out less. If the size of both screenshots is identical than this is really surprising. Obviously the colour contributes, but also the explanatory lines somehow underline the category name. Then there is also a structure by grouping the categories (5 Japanese, 2 RtK, 1 Off topic).

I did not miss the explanatory lines but seeing them made me think that they are useful. Also having written once "Remembering the Kanji" before using RtK might be helpful

2. I perceived it as "isolated" as they are not aligned to what is below and they are somehow left alone on the background which does not allow them to fulfill the header function. That is why I recommended a box like above.

If you do not opt for a box then you might consider the alignments.

The "earlier design" has the add aligned to the right with the box below. I think that is good and it works of course also for the "reversed columns".

On the left side the kanji logo seems to be not aligned to anything. Neither the logo frame nor the kanji itself are aligned to the the text below nor to the boxes below. I would try logo frame and below box left aligned.

3. Understand, it is not white. And it is probably better to be on the hardly noticeable side than to be on the too much colour side.

[ファブリス]

Some simplification goes along with the design.

Imho, RTK Vol1 , RTK Vol 2 & 3 should be merged into "Remembering the Kanji". Much simpler. The second forum is barely used anyway.

Likewise, between "General Discussion" and "Learning Resources", "The Japanese Language" is kind of vague. After all the whole forum is about the japanese language, therefore I think we can also merge one category there.

My goal is also to simplify the forum. I routinely move threads anyway, so I think reducing the number of categories would be a good thing. Therefore, separating forums in sub-groups is unnecessary.

I want to discuss that with everyone before merging those, so that will happen after the forum moved over.

ファブリス Wrote:All the light background and even the dark text colour is very slightly off white (cf. Design Tip: Never Use Black).

As an aside, I find it very hard to read the text in that blog due to that brown-gray font he uses. Light gray text should be used for things you don't want to pay attention to, not for the main content.

[ファブリス]

I tend to dislike sites that are too "designy" as well that said a lot of people don't configure their monitor properly and have overbright or overdark colours. It's the font on the blog though.. the original web fonts are ugly but they tend to be more readable. Still.. I wanted to use Open Sans on the forum, it is built in Android I think.

edit: I guess he knows he talks to a designer audience, hence the "design first" approach.. which would probably not go down well on newspaper websites (though I find some sites using really annoying serif fonts that are worse than Georgia). The fonts tend to be more readable on OS X as well , especially now I imagine with Retina screens... which is the OS a lot of designers use. Basically, the fg / bg color is affected a lot by the font smoothing and font weight, often times they have to change if switching from black on white to the opposite.

ps: not much done today, tired. New Reply > Post Preview and Thread Review (further down), font cascade has changed (body has font-size: 100%), Sponsor sidebar has changed, categories alignment, main layout reversed.

I like it and think it's much improved.

On desktop, the only thing that seems off to me are the categories. Having them rag left looks inelegant to me. How about making them the same width and/or centering the text?

On mobile, the only thing I might change is the size of the post title. It takes up too much real estate and breaks even short lines.

[ファブリス]

Re: the preview forum 's design.

Thanks yogert, glad you like it!

I agree about the Categories. Just can't make something that I like atm. I could try variations of "vertical tabs". So I might leave it there for now.

Could you expand the post title, on which pages? There is a problem on mobile where the title wraps because of the hanging "New Topic" button floating on the right. That needs to be improved so the title expands under the button.

Still a lot of work. I need to make the following page somewhat usable on mobile:
- User Profile / Settings page
- Advanced Search page

These are riddled with TABLE code... Good times.

By the way the 800px breakpoint for the "horizontal layout" of the posts works great. On my iPad 3rd Gen I have the horizontal layout in portrait, and the desktop layout (author bubbles to the side) in landscape. Pretty neat!

[ファブリス]

Re: the preview forum 's design.

I think the new forum is mostly done.

However I should probably make the User Control Panel responsive (which also includes PMs, subscribed threads, etc.) (you'll need to sign in there to see that page)

Do you have any suggestions how best to tackle that? Should I make the sidebar slide in? Can I just drop it at the bottom of the page? What kind of UI is best for 480 to 800 px here?

update I've made a basic responsive layout for the user account panel, seems to work fine!

[ファブリス]

I *may* be able to upgrade the forum tomorrow.

It would help a lot if you can sign in just once at http://foam.koohii.com and let me know if there are any issues!

Don't waste time on the profile though, everything will be overwritten again. AND nearly everything will be responsive down to 480 px wide, I just didn't upload the latest changes.

PS: therefore, this forum will also be unavailable, and then read-only potentially all afternoon and evening CET if I encounter problems.

[ファブリス]

Hi folks,

Deploying / installing the new forum was a massive PITA ... 

Too tired to organize new threads. Please post any issues regarding the forum in here for now.

Hello.

Latest post search is gone ? 23h 48h 1week ?

Thanks.

[ファブリス]

Hi hhanna

The Index page now shows all latest updated topics. Or did you mean a specific search feature that was on PunBB?

There should be a better "unread post" tracking as well, after some time. (right now you all probably get a bunch of new posts, click "mark forum as read", after that it'll work better). That is, if you are a member, you should no longer lose unread posts, regardless of cookies (in theory at least).

The new index page is kinda like Hackernews/Reddit , except for now (open for discussion), I just made the Off topic and Chinese forums absent from the index page. That way people who only want to see Japanese language discussions can do so, and everybody else can see from the Categories in the sidebar (left side) if there are new posts there.

[ファブリス]

Thread is closed. Please collect feedback / issues about the forum upgrade in the "NEW FORUM" topics I just made, so as not to flood the Recent topics and that'll help me keep track of your feedback as well.