Pixel
The Pixie King
Yeah, I think it would work better with something like flint3
https://drive.google.com/file/d/0Bw4Tk7aQlnO5cFZsYWhURHlrR0k/view?usp=sharing
Site Design
- Thread starter Pixel
- Start date
Yeah, I think it would work better with something like flint3
https://drive.google.com/file/d/0Bw4Tk7aQlnO5cFZsYWhURHlrR0k/view?usp=sharing
Octo
KULT OF KERMITU
- AKA
- Octo, Octorawk, Clarky Cat, Kissmammal2000
I say we break with convention. Start in the bottom right corner and work backwards. Why do the same as every other website?
Flintlock
Pro Adventurer
That's good.
I actually agree with you - way back in one of my earliest mockup posts, I said Pixel could do a better job with it than I could. The main reason is that I only have this Final Fantasy font installed, which isn't a good one at all. Look at how the middle of the "M" only extends half-way down the letter, for example; on our current banner and Pixel's mockups, it reaches all the way down, which is the correct behaviour. If someone could point me in the direction of a better font, it would be appreciated. I know Runic MT is close, but it's not free.
(One day I'd like to move away from using the Final Fantasy font for our logo like every other Final Fantasy website ever made, but this might not be the time.)
I actually feel it's the top part that needs to be bright to compensate. With black at the top, the "column" is, in parts, indistinguishable from the background. This picture highlights the biggest example.
Last edited:
Pixel
The Pixie King
I hate all of the fan made FF fonts out there. I ended up having to make my own using the Advent Children logo and choping up letters to make the letters I needed.
We could just have a quote on the right, like "The reunion at hand may bring joy, it may bring fear, but let us embrace whatever it brings."
And when we get a release date, we could replace it wih that.
We could just have a quote on the right, like "The reunion at hand may bring joy, it may bring fear, but let us embrace whatever it brings."
And when we get a release date, we could replace it wih that.
Pixel
The Pixie King
Ignore the choice of layout/colour scheme, thats just what I had in the psd
https://drive.google.com/file/d/0Bw4Tk7aQlnO5OElLQ1VBUkdTcVU/view?usp=sharing
https://drive.google.com/file/d/0Bw4Tk7aQlnO5OElLQ1VBUkdTcVU/view?usp=sharing
Pixel
The Pixie King
You can say that about anything that's at the sides. Not everybody, myself included, views at fullscreen, so don't see what's at the sides of most sites. Like I said before, the most important thing is the main body. Sides are just a bonus, or reserved for advertising on sites like IGN or nerdist.
Flintlock
Pro Adventurer
Yes, you can say that about anything, but if you have, say, the picture of Midgar extending down the sides, it won't look bad if you can only see half of it, whereas if the text gets cropped, you'll see something like
THE RE
MAY BR
BRING
EMBR
Which I don't think will look good.
THE RE
MAY BR
BRING
EMBR
Which I don't think will look good.
Channy
Bad Habit
- AKA
- Ruby Rose, Lucy
I quite like this, but I kinda miss the transparency of the teal background like in flint2
But both are good.
I disagree, I like how the logo pops. D:
I like Pixel's mock up/different use of Midgar - there's more definition of the buildings and structures and more contrast.
I like the overlay texture in his logo and how it's space out a bit more.
However, I prefer the toned down logo of Flint's - you can see the logo behind the text more clearly and it's a little less washed out because the glare behind it isn't as big.
Also, little Aerith is stuck behind text and she kinda gets lost.
I think the idea of Cloud/Sephiroth on the sides are nice but there would need to be some serious tweaking to Cloud's contrast because his hair is just clashing with the buildings behind him. Also I dunno, it seems a bit... too busy?
The text though on one side, that quote especially, I love it. <3
Now if someone can combine all those simple demands into one...
Last edited:
Pixel
The Pixie King
K, so bar any tweeks, this is my final proposal for banner/bg (not main layout/colour scheme)
https://drive.google.com/file/d/0Bw4Tk7aQlnO5ZmEwRi1wZ0lrMlU/view?usp=sharing
https://drive.google.com/file/d/0Bw4Tk7aQlnO5ZmEwRi1wZ0lrMlU/view?usp=sharing
Flintlock
Pro Adventurer
Thanks for sending the PSD over.
I hate to start on a negative note, but I have to explain my motivations behind the images I've made for this post: I'm still not a fan of the sides of your suggested background. I already expressed my concerns about the text being cut off, but more importantly, I feel like it's imbalanced with a character on one side and text on the other. I wouldn't rule out adding graphics there forever, but I think we should wait until we have better source material to work with. Closer to the remake's release date we'll get a lot of screenshots and stuff. I'm sure we'll be able to tease a good picture of Sephiroth out from one of them. For now, however, I think we should go without.
I do like the compositing you've done on Midgar, and as we've discussed, the font you're using is better than the one I have available, so I wanted to try them out with a couple of different layouts.
Side note 1: I made your text a little bigger and reduced the letter spacing.
This is a combination of the Pixel1 background with the Flint11 layout. As I feared, there isn't a lot of contrast between the black background and the dark green of the central column. It looks OK on my computer but I have a monitor (well, a TV) with good colour reproduction - on other displays the two colours would appear to be virtually identical. I tried tweaking the column a little but I couldn't find a colour I liked. Too bright and it started to clash with the menu, too saturated and it felt gawky.
If we want a dark theme, I think the background needs to be a lighter colour, which means sticking with the "big" Midgar image I've been using. In fact, I made it even bigger for this mockup, which allowed me to keep the fade to black rather than to a light green. As the background would stay in place (per Lex's request), most people wouldn't see much of the gradient at the bottom anyway.
Side note 2: these files are all ~2 MB PNGs, but we'd obviously save the background as a JPG to minimise the file size for the actual site.
If we want a light theme, however, I think your (Pixel's) background is the way to go. Here's a mockup. It's basically the Flint11 layout with the Pixel1 background. I think it looks pretty snazzy. For comparison, this has the light theme with the bigger Midgar background, but I don't think it looks as good.
I think we can probably agree that this is the layout we're going to use. Placing the menu at the top of the content area saves space, allowing more stories (or more text, in the case of articles, etc.) to appear on the screen when the page first loads, while still being both easy to access and relatively unobtrusive. So we just need to decide on the background and colour scheme, and as I've tried to explain, one sort of dictates the other. Therefore, my two candidates for a vote would be this and this. I'd probably vote for the former but I'd be happy with either.
I hate to start on a negative note, but I have to explain my motivations behind the images I've made for this post: I'm still not a fan of the sides of your suggested background. I already expressed my concerns about the text being cut off, but more importantly, I feel like it's imbalanced with a character on one side and text on the other. I wouldn't rule out adding graphics there forever, but I think we should wait until we have better source material to work with. Closer to the remake's release date we'll get a lot of screenshots and stuff. I'm sure we'll be able to tease a good picture of Sephiroth out from one of them. For now, however, I think we should go without.
I do like the compositing you've done on Midgar, and as we've discussed, the font you're using is better than the one I have available, so I wanted to try them out with a couple of different layouts.
Side note 1: I made your text a little bigger and reduced the letter spacing.
This is a combination of the Pixel1 background with the Flint11 layout. As I feared, there isn't a lot of contrast between the black background and the dark green of the central column. It looks OK on my computer but I have a monitor (well, a TV) with good colour reproduction - on other displays the two colours would appear to be virtually identical. I tried tweaking the column a little but I couldn't find a colour I liked. Too bright and it started to clash with the menu, too saturated and it felt gawky.
If we want a dark theme, I think the background needs to be a lighter colour, which means sticking with the "big" Midgar image I've been using. In fact, I made it even bigger for this mockup, which allowed me to keep the fade to black rather than to a light green. As the background would stay in place (per Lex's request), most people wouldn't see much of the gradient at the bottom anyway.
Side note 2: these files are all ~2 MB PNGs, but we'd obviously save the background as a JPG to minimise the file size for the actual site.
If we want a light theme, however, I think your (Pixel's) background is the way to go. Here's a mockup. It's basically the Flint11 layout with the Pixel1 background. I think it looks pretty snazzy. For comparison, this has the light theme with the bigger Midgar background, but I don't think it looks as good.
I think we can probably agree that this is the layout we're going to use. Placing the menu at the top of the content area saves space, allowing more stories (or more text, in the case of articles, etc.) to appear on the screen when the page first loads, while still being both easy to access and relatively unobtrusive. So we just need to decide on the background and colour scheme, and as I've tried to explain, one sort of dictates the other. Therefore, my two candidates for a vote would be this and this. I'd probably vote for the former but I'd be happy with either.
Flintlock
Pro Adventurer
Alright, but don't get hung up on the small details. The point is mainly to show the background/layout combination.
Thanks.No, not the white border it looks horrible
Flintlock
Pro Adventurer
Comparison shot (500 KB JPG)
Left: dark theme
Right: light theme
Top two: bigger Midgar background, bigger font
Middle two: smaller Midgar background, no Cloud or quote, bigger font
Bottom two: smaller Midgar background, Cloud and quote, smaller font
Left: dark theme
Right: light theme
Top two: bigger Midgar background, bigger font
Middle two: smaller Midgar background, no Cloud or quote, bigger font
Bottom two: smaller Midgar background, Cloud and quote, smaller font
Pixel
The Pixie King
Sorry, I havent had much time to look through everything or work on anything.
The logo looks kind of flat without the caustic texture overlay. Its kinda hard to get the right balancel I turned it down to 50%. Hopefully its a bit clearer. It just needs something to make it pop.
Im going to try to composite more buildings in to extend the sides down, maybe with perspective blur so it looks 3dish or something.
https://drive.google.com/file/d/0Bw4Tk7aQlnO5SDVjLTdKQW9qTk0/view?usp=sharing
I've been trying to find a way to distinguish the black bg from the body of the site. Im not sure if this is possible in CSS or html (noob), but can you have a repeating pattern as BG, then overlay the image, then the body, if that makes sense. If so, we could have a very slight backlit effect. A lot simpler and cleaner than having Cloud there with unphotoshoppable hair.
The logo looks kind of flat without the caustic texture overlay. Its kinda hard to get the right balancel I turned it down to 50%. Hopefully its a bit clearer. It just needs something to make it pop.
Im going to try to composite more buildings in to extend the sides down, maybe with perspective blur so it looks 3dish or something.
https://drive.google.com/file/d/0Bw4Tk7aQlnO5SDVjLTdKQW9qTk0/view?usp=sharing
I've been trying to find a way to distinguish the black bg from the body of the site. Im not sure if this is possible in CSS or html (noob), but can you have a repeating pattern as BG, then overlay the image, then the body, if that makes sense. If so, we could have a very slight backlit effect. A lot simpler and cleaner than having Cloud there with unphotoshoppable hair.