Site Design

[Flintlock]

I realised my hope of making all the front page images 16:9 might not be possible. I did it for the top three pics in my drafts but I forgot about the next row. I'm popping out now but I'll have a play around with it later to see if it's feasible or not.

 

[Flintlock]

Okay, it's fine, the images just have to shrink down a bit, but that's no bad thing, as it brings the associated headlines better into view. I tried that out alongside a different menu concept. Don't know how easy it would be to make this work from within Fraction. PNG, JPG. Excuse the rough-and-ready Cloud cutout, which I spent all of five seconds on.

 

[Lex]

I feel like I had a larger version of this somewhere but hey ho.

(right click open image in new tab)

I made that composite from the very first trailer. It's absolutely terribly done and I still don't know why everyone uses it XD.

 

[Flintlock]

It doesn't look terrible to me.

Two top stories: PNG, JPG. I prefer having one story bigger than the others but I prefer the size when there are two.

Edit: On second thought, this isn't such a great option. My eyes don't know where to look.

It's been a couple of days since I started posting mockups, and while there are still people I'd like to hear from, I think I need to stop making more and start narrowing down our choices. So if you want to make your voice heard, now's the time.

Mockups: Flint1 Flint2 Flint3 Flint6 Flint7 Flint9 Flint11 Flare Pixel1 Pixel2

N.B. Flint4, Flint5, Flint8 and Flint10 have been removed from consideration.

As I said before, you don't have to just pick your favourite; you can mention your preferred banner, background, colour scheme, menu size, menu location, and so on.

 

[vaderSW1]

Flint I quite like what Pixel is doing on the Pixel1 mockup. I wonder what it might look like if we could move that menu to the top of the page though?

I also quite like Flint 10. I'm not much of a graphic designer but I wonder if it might be possible to add in the Aerith element from Pixel's mockup in your design here?

 

[Octo]

I think they're all pretty good, but I prefer Flint 2. I like the transparency around the ...er...top bit (getting technical!)

 

[Ite]

I didn't really see a difference between the first four? I like all of them, that's not super helpful. Flint 1 and Flare 1 are my faves.

 

[Cthulhu]

I dig it

Same

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

...Yes

 

[Obsidian Fire]

A general rule of thumb with Western Layouts is that they are read from left to right and from top down. So nine times out of ten, the most important thing on the page is put in the upper left-hand corner. For websites, this is usually the site logo which often doubles as a link to the homepage. Putting the menu at the top of the page in Flint9 and Flint10 makes it look like the site logo comes secondary to the navigation menu. The first thing I read is the "Latest News/Final Fantasy VII" set, then the "Compendium/Remake" set and so on. It's not until after I read the "Search/Before Crisis" set that my eyes make it to "The Lifestream" logo. After that they read the latest headline in Flint9 as that's what right underneath the logo. Flint10 makes it look like the two images are fighting for prominence and as the headlines are at the bottom of the image, it takes my eyes longer to find them.

The thing that grabs the most attention on Flint9 and Flint10 are the four lights in the header when it should be text and other images that grab it. The other distracting thing is that the background image isn't symmetrical on the sides. Cloud's silhouette gives the background image more tension which causes the eyes to have no "neutral" place to rest in the layout.

You can see the differences the best if you compare Flint7/8 with Flint9. Flint7/8 cause a person's eyes to be drawn more to the menu/headline/main image and "rest" there while Flint9 causes the eyes to ping-pong between the mostly white header and all the other bold white text (menu, headlines etc.).

As far as image/text layout goes, I like Flint7/8 the best. It's the layout the requires my eyes to move the least to get to the menu/main headline. Sticking the article Headlines at the top of the image seems to help with directing my eyes around the layout. The one thing I'd like to see it with is the background from Pixel1 as that might work better. However, having all the main text aligned with itself makes it easier to ignore what's going on in the heading as all my attention is on the headlines/articles images, so the background is okay as it is.

 

[Pixel]

I'll finish the bg/banner in the morning after work, possibly with sephiroth on the right. Haven't figured it out yet. Then we can see what works best in the body of the site. I'm not a big fan of everything listed at the top above the banner.

 

[Fangu]

I haven't had the time to check out the mockups, just looking at some of the images, but I'd like to put in the 2 cents of keeping Mobile in mind. Fractions is structured the way it is (logo, menu, content) because that's the order that makes it easier to make 1 markup/ CSS that works with all 3 major surfaces (desktop, pads, mobile). The more you mess with that order, the more customization/ programming/ front end hacking you need.

 

[Ghost X]

Flint1 is my preference. Nice and defining uniform white borders, I prefer the writing at the bottom of an image too, as it gets in the way of the visual otherwise. I'm not reading a book. Ultimately it is taste though. Some people might like text, but I'm driven by visuals.

 

[Mayo Master]

I prefer Flint2, I find that using the transparent borders helps blending the aesthetic of the text boxes with that of the background.

 

[Flare]

My top three are Flint7, Flare, and Pixel 1.

Flint7 and Flare because they got the dark borders with the lighter green in the background and the Midgar image behind is visible but not too bright. They're quite easy on the eyes, the menu/bar is noticeable without being too much, and I feel that they're pretty balanced.

Pixel1 has a good visibility too because of the white borders and black background on most the page. It also shows the Midgar lights. The con about this one for me is that it's harsher on my eyes than the other two because of the sharp white and black contrast (both in the borders and the background and then the Midgar lights at the top).

So yeah, my three cents.

 

[Flintlock]

A general rule of thumb with Western Layouts is that they are read from left to right and from top down. So nine times out of ten, the most important thing on the page is put in the upper left-hand corner. For websites, this is usually the site logo which often doubles as a link to the homepage. Putting the menu at the top of the page in Flint9 and Flint10 makes it look like the site logo comes secondary to the navigation menu. The first thing I read is the "Latest News/Final Fantasy VII" set, then the "Compendium/Remake" set and so on. It's not until after I read the "Search/Before Crisis" set that my eyes make it to "The Lifestream" logo. After that they read the latest headline in Flint9 as that's what right underneath the logo. Flint10 makes it look like the two images are fighting for prominence and as the headlines are at the bottom of the image, it takes my eyes longer to find them.

I think it's becoming more common to have a menu bar at the top of the page. I've seen it on a number of websites and I haven't found it off-putting. But looking at them now, most of them tend to have at least the name of the website or a smaller version of their logo at the LHS of the menu bar. Gaming Union is an example. And regarding Flint10's two images, I agree; I said as much just after I posted it. (Edit: I'm taking it out of consideration - see my next post.)

The thing that grabs the most attention on Flint9 and Flint10 are the four lights in the header when it should be text and other images that grab it. The other distracting thing is that the background image isn't symmetrical on the sides. Cloud's silhouette gives the background image more tension which causes the eyes to have no "neutral" place to rest in the layout.

There would only be three lights in the header when it's finished if we go with Pixel's suggestion. But he's done some work on that image of Midgar that I wasn't going to spend time replicating for the sake of a mockup. And I already suggested having something on the RHS, which he's looking into.

I haven't had the time to check out the mockups, just looking at some of the images, but I'd like to put in the 2 cents of keeping Mobile in mind. Fractions is structured the way it is (logo, menu, content) because that's the order that makes it easier to make 1 markup/ CSS that works with all 3 major surfaces (desktop, pads, mobile). The more you mess with that order, the more customization/ programming/ front end hacking you need.

I get what you're saying (and a number of times I've said "I don't know if this can work"), but the Fraction preview has the logo and menu on the same line, so that logo-menu-content order you mentioned definitely isn't set in stone.

Thanks for all the feedback so far. It seems lots of the options have their share of supporters.

 

[Channy]

I like and don't like a lot of them. >_<

I like... ohcrap I have so many tabs open... I like how this one fades down to black

Not a fan of the white space at all though, tbh. I think the transparency of this one makes it look neat but you should extend it to the second portion too. Remove all white space. Also, the use of teal in the above task/button bar makes it look uniform, in comparison to the others.

Also, love the little Aerith. <3

 

[Ghost X]

I changed my mind. I was looking at them on my phone before, etc, squinty, missed details, etc.

Now I prefer Pixel2. Logo stands out at the top, has all the stuff I liked about Flint1, except the writing at the bottom (I forgot to mention it is nice and minimalist too, some of the other designs are noisy), and the menu bar is visually subordinated from other stuff. With other sites, I don't need a standout menu bar, it is something I might look at once in a blue moon, as with this one. Too distracting/noisy to have it look all fancy. I know Lex asked for Cloud, but if I were to be nitpicky, that's my only hang-up about Pixel2 . It means there's a gaping hole on the right side. Needs something to balance it out. Either have two or zero big gaping holes .

Otherwise you may disregard everything . I'm bored.

 

[Flintlock]

I like how this one fades down to black

Not a fan of the white space at all though, tbh.

I've been resisting having a black background with a dark central column because I thought it wouldn't offer enough contrast, but since quite a few people seem to want it, I threw this together: PNG, JPG. To offset the lack of contrast I had to go back to the bigger picture of Midgar (sorry Pixel).

I know I said I should stop making these but after reading all the feedback, I felt the need to do one more. And you know what? I think it looks pretty damn good. We can't please all of the people all of the time, but this version addresses most of the specific points that have been raised:

- The logo is at the top (Obs)
- The menu is teal again (Channy, Flare) and doesn't grab too much attention (Ghost)
- The headline is in the right place and isn't competing so much with the banner (Obs)
- It's not too dissimilar to the default Fraction layout (Fangu)
- It's balanced (Ghost, Obs) - though I'd like to see what it would look like with Cloud and Sephy on the sides as well
- No white space (Channy), easy on the eyes (Flare)
- Aeris returns (Channy, Vader)

We can call this one Flint11, I guess. I'm going to go ahead and remove Flint4, Flint5, Flint8 and Flint10 since nobody seems to support them and I don't much like them either.

Ultimately I think we should narrow it down to one dark and one light theme, and then maybe have a vote or something?

 

[Pixel]

I'll be working on ballancing out the design today.

I was a bit reluctant about having the body of the site white, because I see those shitty clickbate wordpess sites that idiots link to on facebook, reporting old FF7 news like its new. Those sites always have the same look. As long as we design things nicely, we can make the white work.

I don't think black would work this time around. When we designed this place originally, it was designed to have this light box feel to it, with light lifestreamy graphics shining through the darkness. This time, I think something a bit more contemporary and slick is the way to go. I guess we'll see how things look once everythig starts coming together.

 

[Carlie]

I'm gonna go with Flint7 with the Midgar background of Pixel1. Would be interesting to see that one with the black fading.

I must admit I'm not a fan of the white ones, it feels like the color is competing with the Midgar background.

 

[Flintlock]

One thing about the dark designs (Flint7, Flint9, Flint11, Flare) is that they'd integrate better with our forum, which Lex has said we won't be re-colouring. Probably for the best; I'm guessing there'd be a riot if we switched to a light default theme.

 

[Pixel]

Another mockup
https://drive.google.com/file/d/0Bw4Tk7aQlnO5amJHbENpYTZwNnM/view?usp=sharing

Is anyone able to grab a screencap direct from the ACC blueray of sephiroth in the flames? I took this from a rip, and its a bit fuzzy.

 

[Flintlock]

Hmm. While I think having Cloud/Sephiroth looks good with a white theme (e.g. Pixel2), with the dark theme they seem to compete for attention too much. Thanks for putting it together though, I wanted to see it. And I'll add it to the list in case others feel differently about it.

 

[Dawnbreaker]

I rather like Pixel3 the best. I find the white against green in the"panels" too distracting in a lot of the other images. And the "competing" part you mention, Flint, between two the characters seems rather thematic. That said, I see your point, that it also runs the risk of being too competitive and distracting, so, hmmm.

Lot of good stuff here!

 

[Lex]

I like various things about all of them, but I don't like all of the things in any one of them, if that makes sense.

Please note: I'm completely disregarding background image when talking here. I think all of the backgrounds look good and my concern is more on the overall design/ layout re: accessibility and function as well as aesthetic of the main body. One thing I'll say about the background is that I'd want it to remain completely static, with only the body of the page moving as you scroll. The "fade-down" backgrounds work well for this re: readability.

In this one, I like the number of menu options we have, but I'm not sure I like where the menu is. I also dislike how large/ bold our site name is, I'd like it to look a bit more "sleek" in terms of font and image size.

In terms of layout, this is probably my favourite. It suffers from the same problem re: the site name being too large/ uncouth, but I love the way the menu is integrated and complements the main body rather than being a floating block on its own. I'd leave blank space at the end just for Aerith though, either by removing "search" or reworking the menu completely (which is needing done anyway).

This is also great for the same reasons (and critiques), but Sephiroth ruins it a bit.

I'm afraid I don't know who did what one, I just clicked all of them open and chose the ones I liked to comment on XD.