The new site from a designer's point of view

  • The FTB Forum is now read-only, and is here as an archive. To participate in our community discussions, please join our Discord! https://ftb.team/discord
Status
Not open for further replies.

blek

New Member
Jul 29, 2019
39
0
0
Hello again, FTB staff. The new main page is cool and all, but some things are quite off, and I'd like to point it out to see if you guys agree with me, and if such is the case we can work on fixes and stuff.

First, the header and footer are quite weird and out of place. The body of the page is contained within this 960px div, but the footer and header aren't. Also, the header's even worse, as it's the only thing in the entire page that is not centered. The footer is symmetric considering the Creeperhost logo in the left and the copyright text in the right, but the content is still not contained in the wrapper. Also, the texture looks and feels weird, as the whole page uses this paper-looking noisy texture but header and footer use this checkered gray texture with a gradient, which as far as I know was taken directly from the old website and added to the new one.

Then, entering the body, there are mainly two things that caught my attention: the way the alternation between dark and light articles works and the wacky workaround with spacers that was used to make these articles fit each in a 1080p screen without anything else. The first makes absolutely no sense, and that's the point I'll try to convey in the following paragraph.

Let me refer to an example, which will be the template used originally for the new site and its demo, in all three flavors (contrasting, dark and light). In the latter two, it is shown that the template works great without alternating between dark and light, and that was and still is an option. Instead, you chose to go with something like the original, contrasting design, but instead of alternating constantly or using a pattern that made dark and light sections have any meaning in these colors, you changed between them completely randomly. The first section of the main website looks great, with dark, light and another dark section as can be seen from my 1080p screen, but then you start to wonder why all the following sections are dark. And then, suddenly, white is used again for a small section for tweets (that, in my opinion, should be bigger, because the way it is now it looks quite weird and doesn't catch people's attention from its content, but actually because of the contrasting colors) that has a dark rounded rectangle inside, something that looks as weird as it gets. Then black is used again, until the news section, where another small contrasting segment is seen with basically no meaning.

Also, the spacers. Why choose a single-page website if you're not going to encourage scrolling, and instead add huge spacers to make the website look like a common multi-page for smaller screens, but still looking weird for anyone who tries to scroll or has a screen larger than 1080p? That completely defeats the purpose of the single-page website with multiple sections. Even though it's smooth and all, the idea behind the single-page design is exactly being able to scroll between multiple sections with ease. If you go back to the examples I have in the previous paragraph, you can clearly see that's how it was shown in the demo. You don't actually have to follow the way it was built to be, but that opens up flaws in the design of the website that I have pointed out.

Also, still comparing it to the demo, the new website is extremely weird to smaller screens, as opposed to the original concept, that is completely compatible and looks fantastic.
Demonstration
FTB Implementation

There are two main issues with scaling. First, the spacers. They have fixed height, and so on smaller screens it makes it even harder to scroll down. But you can still use the navigation menu, right? Wrong. It's missing, because the port from the previous website didn't adapt to the awesome scaling from the original navigation panel.

This is all I have to say for now. Please post your comments and opinions so we can discuss the new page.
~Blek
 

Rob

New Member
Jul 29, 2019
108
0
0
I'm going to let Captainana answer every question in this post cause I ask most of them to him before.
 

Captainnana

New Member
Jul 29, 2019
596
0
0
1. First, the header and footer are quite weird and out of place. The body of the page is contained within this 960px div, but the footer and header aren't. Also, the header's even worse, as it's the only thing in the entire page that is not centered. The footer is symmetric considering the Creeperhost logo in the left and the copyright text in the right, but the content is still not contained in the wrapper. Also, the texture looks and feels weird, as the whole page uses this paper-looking noisy texture but header and footer use this checkered gray texture with a gradient, which as far as I know was taken directly from the old website and added to the new one.

Then, entering the body, there are mainly two things that caught my attention: the way the alternation between dark and light articles works and the wacky workaround with spacers that was used to make these articles fit each in a 1080p screen without anything else.

Also, the spacers. Why choose a single-page website if you're not going to encourage scrolling, and instead add huge spacers to make the website look like a common multi-page for smaller screens, but still looking weird for anyone who tries to scroll or has a screen larger than 1080p? That completely defeats the purpose of the single-page website with multiple sections. Even though it's smooth and all, the idea behind the single-page design is exactly being able to scroll between multiple sections with ease. If you go back to the examples I have in the previous paragraph, you can clearly see that's how it was shown in the demo. You don't actually have to follow the way it was built to be, but that opens up flaws in the design of the website that I have pointed out.

Also, still comparing it to the demo, the new website is extremely weird to smaller screens, as opposed to the original concept, that is completely compatible and looks fantastic.
Demonstration
FTB Implementation

There are two main issues with scaling. First, the spacers. They have fixed height, and so on smaller screens it makes it even harder to scroll down. But you can still use the navigation menu, right? Wrong. It's missing, because the port from the previous website didn't adapt to the awesome scaling from the original navigation panel.

This is all I have to say for now. Please post your comments and opinions so we can discuss the new page.
~Blek

1. Header and footer are pending redesign, the style has to stay the same because we want to be consistent with the launcher/site it however the new header will be in the 960 area and will work on mobiles, I just havnt added that to the main site yet. In relation to the texture I might change the texture to one with a bit of noise.

2. I'm all for just a dark site I didnt add the light parts but I would be happy to remove them :3
2a. It used to all be together then we had requests from numerous members of the FTB team to add the gaps so there they are. In relation to the scrolling I find it kinda easy on my screen (1360x768) but that might just be me, i'll add some more size options to make it so as you scale they get smaller or if its more popular just remove the gaps as it was before

3. I think you mean the nav bar right? Its getting redone soon anyways, for the smaller screens I will make the gap heights variable so they match your screen size to you dont have to scroll as far
 

DraigoDragon

New Member
Jul 29, 2019
66
0
1
The last one that had a dark blue background, I had a really hard time reading the post's with how dark It was but this forums Is easy to read
 
Status
Not open for further replies.