Site Design

[Cthulhu]

I've updated WP, but I'll need someone with access to http://www.themeforest.net/ to download the latest version of Fraction.

I for one don't like the scrolling, but then, not up to me, I rarely visit the front page.

Re: Google ads, Google offers both fixed size ads and responsive ads these days - the latter of which will change to match the available space. I've set those up on the forums right now actually, the top banner will take up the full width if you're one of the rare people still seeing ads. Besides that, there's fixed-size ads of 700x90 (leaderboard), 336x280 (rectangle), 320x100 (mobile banner), 300x600 (skyscraper) and 300x250 (another rectangle). But, I think we should just go with responsive ads, so that we can determine how much screen real estate is dedicated to ads.

On that note, Google now also offers Matched Content ad units; not sure exactly if they bring in revenue, but might be worth looking into: https://adsense.googleblog.com/2016/05/matched-content-best-practices.html

 

[Flintlock]

I guess that's Claymore?

 

[Lex]

3. I quite like the light theme/ going for a light theme. The true answer is I don't mind, but I'm fine if we want to change. The forums will remain dark anyway.

4. I've actually been testing articles in that other theme Claymore made (testing them a long time ago I mean). As long as we don't lose lots of width we should be alright? Having it be slightly narrower makes it more attractive to read IMO.

5. Don't care. I don't mind smooth scrolling, but I'm sure there's a technical reason it's bad for the theme to force it.

6. Space for a banner ad (not huge) under the header/menu on the front page and a spot for an ad in the sidebar sitewide, IMO.

7. I think we need a menu bar, but it needs a complete overhaul (re: options) and redesign. I think we should focus on the front page layout first and foremost to bring attention to the content we care about, then design the menu to point to everything else after that. We don't need a "community" drop down menu for example. We should definitely have just a "forum" button up there somewhere.[/QUOTE]

 

[Claymore]

Sorry been watching the thread but been relaxing quite a bit with No Man's Sky.

Can download the latest Fraction, no probs.

 

[Flintlock]

Awesome.

Now, I know that real web design happens in text editors, in CSS and HTML, but I like to have an image in mind that I can work towards, so I made a mockup in GIMP.

1920x1080 PNG, 2.05 MB (best quality, open in full screen if you have a 1080p monitor)
1280x720 JPG, 265 KB (if you have a slow/metered internet connection)

Changelist:

• The banner is now seamlessly integrated with the background.
  Spoiler: Edit

  (@Fangu and others who might be wondering, I just tested this out with Chrome's resource inspector (bg, banner) and amazingly, it works out of the box!)
  I don't have Pixel's latest source file for the banner so I had to recreate the text. I'm sure he can do a better job of it, but you get the idea. Parts of the existing background have been reused. I'd stick them to the bottom of the page by using multiple backgrounds in CSS.
• The menu is shrunk down and rearranged. Aeris looks better on the right side where there isn't so much visual activity competing for attention.
• Three headline articles have been reduced to two. Of all the changes, this will probably be the most difficult one to implement. It might not be possible. But the reason for making the change would be to keep the images at a consistent size: in my mockup, they're all 16:9, the same as most monitors, Youtube videos, screenshots, etc. That prevents situations like this, "The Lif Pod", and should make our editing work easier in the future.
• Related to the above point: The #1 story is now pretty massive - not unusually so, compared to other gaming websites, but some images might look a bit jarring at that size against the stark white background. To compensate, I also mocked up a design with a darker area at the top (PNG, JPG). It would need to utilise CSS opacity, but we've finally - thankfully - reached a point where all modern browsers support it. IE8 users could just see a solid black background instead. I'm think I prefer the all-white design, but I thought I'd present both options.
• The colours have been harmonised.

I haven't (yet) precisely lined up every pixel, so there may be a couple of minor oddities.

Thoughts?

 

[Obsidian Fire]

Nice start. And images are really helpful to quickly rough out layouts. They're way easier to use then text descriptions of a site.

Design commentary (yes, i know it's a rough)...

I have to say I'm not a fan of the current trend of white backgrounds for websites. I really like the version with the black padding/borders and think it would be good to see what it looks like with no opacity; the black borders blend in more with the images the white headlines are on top of and make the headlines stand out more.

As much as I like the Midgard background image, it's really distracting, especially when compared to the site title. The top center of the screen is the brightest point of that image and it's fighting the light behind "The Lifestream" for what is the most important part of the page. On the version of the site with white borders, it feels like my eyes are ping-ponging between "The Lifestream" title and the center of the screen and then are searching around for what white object to look at next. On the version of the site with black borders, my eyes still ping-pong, but then go down to the next large bit of white which just so happens to be the headline of the most recent article.

Another thing to consider is that on my 1080x1920 screen, the headline of the most recent article is over halfway down the page. It takes a long time for a reader's eyes to get that far. If there was a way, I'd try to move the headline up to right under the man menu. The other reason why it might feel like this is because the header is so huge. The menu buttons start below where the menu buttons on the current site end and that pushes all the content down further. So I'd move "The Lifestream" title up and the menu buttons up which might help.

The big thing that feels off is how far my eyes have to move to get all the relevant information about the site (site name, menu buttons, main headline). Our current site layout has a much more efficient flow in this regard. My eyes also seem to not be directed by the layout anywhere specific and tend to "drift" over the layout until they get to something that looks important.

Other stuff...

Agree that we should go over how articles are categorized in the menu. We've got a lot of non-FFVII stuff that is really hard to easily browse as it doesn't fit into the current article categories. Examples of new categories could be "The Seven", "Non-FFVII Editorials", etc.

Like the idea of having a menu button lead straight to the forums with no mouseovers involved.

 

[Pixel]

When you scroll down, what does the bg image do? Does the bottom bit scroll down?

Menu bar colour is infinitely better than before

 

[Claymore]

I have uploaded the latest version of the theme, but for some reason, the Child Theme refuses to acknowledge this. It won't get rid of the update message.

 

[Flintlock]

Nice start. And images are really helpful to quickly rough out layouts. They're way easier to use then text descriptions of a site.

Design commentary (yes, i know it's a rough)...

I have to say I'm not a fan of the current trend of white backgrounds for websites. I really like the version with the black padding/borders and think it would be good to see what it looks like with no opacity; the black borders blend in more with the images the white headlines are on top of and make the headlines stand out more.

No transparency: PNG. Kinda reminds me of a Macbook.

As much as I like the Midgard background image, it's really distracting, especially when compared to the site title. The top center of the screen is the brightest point of that image and it's fighting the light behind "The Lifestream" for what is the most important part of the page. On the version of the site with white borders, it feels like my eyes are ping-ponging between "The Lifestream" title and the center of the screen and then are searching around for what white object to look at next. On the version of the site with black borders, my eyes still ping-pong, but then go down to the next large bit of white which just so happens to be the headline of the most recent article.

Fair comment. Besides the black borders, what else do you think might help?

Another thing to consider is that on my 1080x1920 screen, the headline of the most recent article is over halfway down the page. It takes a long time for a reader's eyes to get that far. If there was a way, I'd try to move the headline up to right under the man menu. The other reason why it might feel like this is because the header is so huge. The menu buttons start below where the menu buttons on the current site end and that pushes all the content down further. So I'd move "The Lifestream" title up and the menu buttons up which might help.

The headline on my mockup is actually slightly higher than it is on the current test site. It's a feature of the Fraction theme. But you're right, it would be nice to get it higher. I'll see what I can come up with.

Thanks for the feedback.

When you scroll down, what does the bg image do? Does the bottom bit scroll down?

It would stay in place, if that's what you mean. Code would be something like:

background: url('blah.png') no-repeat fixed bottom

I have uploaded the latest version of the theme, but for some reason, the Child Theme refuses to acknowledge this. It won't get rid of the update message.

I think that's intended behaviour. Our child theme's style.css contains a "Version" line. I just updated it to 1.2.4 and the message disappeared.

 

[Flare]

No transparency: PNG. Kinda reminds me of a Macbook.

Just out of curiosity, can you make all the white borders black?

Spoiler: Like this?

(I painted over this on my art program)

If so, does anyone think this looks better? I'm not extremely fond of the white borders but I think it looks more strange when its black on top and white on bottom. I might prefer all black, since the background is already on a darker color scheme.

And I do feel it might be a bit busy still, but that's not a major grip for me. It looks more updated than what we have now, which I think is a good thing.

 

[Flintlock]

The headline on my mockup is actually slightly higher than it is on the current test site. It's a feature of the Fraction theme. But you're right, it would be nice to get it higher. I'll see what I can come up with.

PNG. Saved a bit of space by moving the menu right underneath the banner, but then had to make it white so it stood out. The green just wasn't cutting it against the background.

Just out of curiosity, can you make all the white borders black?

Spoiler: Like this?

(I painted over this on my art program)

I don't think I need to do it when you already have.

 

[Flintlock]

Managed to squeeze in a bit more space by making the menu as small as possible: PNG.

That's it for tonight. There are lots of iterations to consider: 1 2 3 4 5 & Flare. More work tomorrow.

I think I like 3 most at the moment but I'll probably change my mind in a minute.

 

[Pixel]

Just a little mockup
https://drive.google.com/file/d/0Bw4Tk7aQlnO5bFhWNXRDWXdHUEE/view?usp=sharing

 

[Tetsujin]

I kinda like the transparent border in the second one but I'm not a fan of the white border.

 

[Flintlock]

Just a little mockup
https://drive.google.com/file/d/0Bw4Tk7aQlnO5bFhWNXRDWXdHUEE/view?usp=sharing

I like the black background, maybe more than the green I originally went with. But I like having as much of Midgar visible as possible. So I made one more mockup (PNG - yes, I lied earlier), incorporating the condensed layout and menu. I think it does the best job of all my attempts so far at drawing visitors' eyes to the main headline.

Note that everything can be mixed and matched (CSS gods permitting) - backgrounds, menu styles, colours, whether the text appears at the top or bottom of the headline images, etc.

 

[Lex]

I like the dark border at the top Flint, or Flare's mockup. I mean, all of these mockups look pretty great IMO, but I visually prefer the darker border. It's not quite so tiring on the eyes in its overall brightness.

 

[Pixel]

Just remember, most people won't see what's at the sides, so what's in the visible space of the banner is most important. Having Midgar's lights in that space makes it instantly recognisable, as well as tying into the light motif. I can try to composite in more midgar buildings further down.

https://drive.google.com/file/d/0Bw4Tk7aQlnO5cFlhMmhfV3NEc0U/view?usp=sharing

IMO having the lights in there will look better and more interesting than having the logo against a dark piece of scenery

 

[Flintlock]

Since most people seem to like the darker options, how about sticking with our established colour scheme? (PNG) I had to go back to the green background because it would have been too dark otherwise. The only thing I don't like is the menu colour, which doesn't stand out enough. Neither does black, and white stands out too much. Our colour scheme is quite limiting in that regard. If we wanted to be a bit bolder, we could incorporate a complementary colour, like a deep red. (PNG) The eagle-eyed among you may notice that it's the same colour as the "news" swatch on the top story in all these mockups: #481519.

Edit: ninja'd.

Personal preference. I consider the Shinra building more iconic than the lights myself but I'm happy to go with the consensus. And while I'm definitely not trying to ignore smaller-screen users, 1080p is the most common resolution of visitors to our site per Google Analytics.

 

[Cthulhu]

I dig it

 

[Tetsujin]

Same

 

[Pixel]

Personal preference. I consider the Shinra building more iconic than the lights myself but I'm happy to go with the consensus. And while I'm definitely not trying to ignore smaller-screen users, 1080p is the most common resolution of visitors to our site per Google Analytics.

That would be fine, but the building is completely obscured there, and only recognisable by the pipes. The bigger problem is the darkness behind the logo. Without a point of light behind it, it tends to look pretty plain.

 

[Carlie]

Since most people seem to like the darker options, how about sticking with our established colour scheme? (PNG) I had to go back to the green background because it would have been too dark otherwise. The only thing I don't like is the menu colour, which doesn't stand out enough. Neither does black, and white stands out too much. Our colour scheme is quite limiting in that regard. If we wanted to be a bit bolder, we could incorporate a complementary colour, like a deep red. (PNG) The eagle-eyed among you may notice that it's the same colour as the "news" swatch on the top story in all these mockups: #481519.

I like the red for the menu a lot more than the one it had before but it doesn't really fit that well with the background on top. What about a blue?

 

[Flintlock]

I dig it

Same

What exactly do you dig? We've got lots of options here.

That would be fine, but the building is completely obscured there, and only recognisable by the pipes. The bigger problem is the darkness behind the logo. Without a point of light behind it, it tends to look pretty plain.

I was going to say we should see what other people think but then I noticed you'd added Cloud to your most recent mockup. That looks really good. Something similar for the other side and I'd be totally on board. I would suggest making the text a bit bigger though.

I like the red for the menu a lot more than the one it had before but it doesn't really fit that well with the background on top. What about a blue?

Here you go. I prefer the red myself.

 

[Tetsujin]

I dig it

Same

What exactly do you dig? We've got lots of options here.

The one with the red

 

[Pixel]

I need to get the original high res cloud pic from lex, then I'll work on a proper version, and figure out what to put on the other side.