SFML community forums

General => SFML website => Topic started by: teapotrick on July 22, 2016, 06:14:58 am

Title: Change flow of community and index pages
Post by: teapotrick on July 22, 2016, 06:14:58 am
It's very nitpicky, but I've always found the flow of the community and index pages to be quite unattractive and counter-intuitive.
Suggested fix: Swap the columns for the wiki row as seen here: http://imgur.com/a/49oHK


:D

Edit: I made a PR.

Reasoning:
Because of the lack of binding (ie. borders or better aligned title underlines) between the elements, my first feeling when looking at the page is that the big book graphic belongs to the 'Forum' block. Probably somewhat because the forum graphic doesn't have much contrast, and isn't stylistically similar to the other two graphics. Also, the zigzagging makes the pages look more cluttered than they are.
Title: Re: Change flow of community and index pages
Post by: Hiura on July 22, 2016, 11:43:40 am
I personally like this "zigzag", it makes sections more apparent.  :)
Title: Re: Change flow of community and index pages
Post by: Hapax on July 22, 2016, 04:39:02 pm
The book does look like it belongs to the forum section. I do like your aligned version; it's much neater. However, for interesting aesthetics, the zig-zag wins.
A solution (if one is needed), could be to simply add a slightler darker block background to the Wiki row.
(click to show/hide)
Title: Re: Change flow of community and index pages
Post by: eXpl0it3r on July 22, 2016, 07:07:16 pm
The current version is in my opinion a lot more dynamic, which on the other hand might be seen as clutter for some. Then again I believe everyone in the SFML Team 8and others) is slightly bias since we've gotten used (https://www.youtube.com/watch?v=cebFWOlx848) to the current layout and since we've seen it so often we're now also liking it more than other things.

I think the main problem is however that the huge book with it's contrast is so much attention grabbing. So when you first open the site all you see in the first few milliseconds is that book icon, then you might start reading what's at the top left and suddenly the brain makes connections where there aren't any.

I wonder if this image (http://i.imgur.com/iNwj4W8.png) (click to view) makes a difference for some. Made it brighter and smaller.

(http://i.imgur.com/iNwj4W8.png)

Quote from: Hapax on July 22, 2016, 04:39:02 pm
A solution (if one is needed), could be to simply add a slightler darker block background to the Wiki row.
This looks quite bad IMHO since it doesn't fit in at all.
Title: Re: Change flow of community and index pages
Post by: Hapax on July 22, 2016, 07:25:55 pm
I don't think the problem is what you see first, rather how things can look like they're grouped into columns.
The background block idea was just a possibility if something is needed. An obvious horizontal line between each section would also fix it.

Here's an image visualising the columns and how they can seem to group:
(http://i.imgur.com/FwBcE23.png)

Another possible solution would be to create a more obvious zigzag by overlapping the horizontal range of the texts:
(http://i.imgur.com/nAhDr0D.png)
Title: Re: Change flow of community and index pages
Post by: Laurent on July 22, 2016, 09:12:00 pm
Quote
I think the main problem is however that the huge book with it's contrast is so much attention grabbing.
The "problem" is probably more general, ie. images are not very consistent in style and size on this page.

Quote
Another possible solution would be to create a more obvious zigzag by overlapping the horizontal range of the texts
This could work as well.
Title: Re: Change flow of community and index pages
Post by: teapotrick on July 23, 2016, 01:30:43 pm
Quote from: Hapax on July 22, 2016, 04:39:02 pm
The book does look like it belongs to the forum section. I do like your aligned version; it's much neater. However, for interesting aesthetics, the zig-zag wins.
A solution (if one is needed), could be to simply add a slightler darker block background to the Wiki row.
(click to show/hide)

Hapax, fighting the good fight. :D
A new compromise: https://imgur.com/a/CX0Hm (https://imgur.com/a/CX0Hm)
Title: Re: Change flow of community and index pages
Post by: Hapax on March 02, 2017, 09:39:36 pm
Has this been reverted? I could have sworn that the "more obvious zigzag" solution was implemented. ???

It currently looks like the book is for the forum section again :'(
Title: Re: Change flow of community and index pages
Post by: eXpl0it3r on March 02, 2017, 11:06:53 pm
We never changed it. I think the "more obvious zigzag" version looks quite good, if you remember what you adjusted, feel free to send a PR! :)
Title: Re: Change flow of community and index pages
Post by: Hapax on March 03, 2017, 12:25:32 am
My example was just an image manipulation ;D

I'll have a look at the website repository later... :)
Title: Re: Change flow of community and index pages
Post by: Hapax on March 04, 2017, 05:57:33 pm
https://github.com/SFML/SFML-Website/pull/82

Note that I have no way of actually testing the result :P
Title: Re: Change flow of community and index pages
Post by: Hapax on March 13, 2017, 01:54:46 pm
Just noticed that the SFML website's homepage (http://www.sfml-dev.org/index.php) has the same "flow" issue. It's less noticable because the images are less obviously incorrect when associating with the wrong header ("multi-media" with multiple platform icons and "multi-platform" with multiple languages, for example)
Title: Re: Change flow of community and index pages
Post by: eXpl0it3r on March 13, 2017, 07:52:17 pm
This is what the changes look like.
If others like, I could merge it. :)

(http://i.imgur.com/jQq1WN7.png) (http://i.imgur.com/jQq1WN7.png)

And I think, it might work similarly well on the home page.
Title: Re: Change flow of community and index pages
Post by: Hapax on March 13, 2017, 09:33:19 pm
Worked out well considering I just guessed the ratios ;D

The stagger/overlap amount can be adjusted by changing just two numbers (in the .less file), which would affect consistently the home page and the community page.
Title: Re: Change flow of community and index pages
Post by: eXpl0it3r on March 13, 2017, 09:46:25 pm
Here's the home page:

(http://i.imgur.com/naaEH8R.png) (http://i.imgur.com/naaEH8R.png)
Title: Re: Change flow of community and index pages
Post by: teapotrick on March 20, 2017, 03:20:58 am
Welp, I think this new solution looks messy, but at least it's clear as to what belongs to what.
Title: Re: Change flow of community and index pages
Post by: eXpl0it3r on March 22, 2017, 01:00:12 am
Can we get some more feedback on this, especially from the Team members? :)