TLS GFX

Pixel said:

But is something like that possible from a banner?

Click to expand...

Yeah sure - either you layer the HTML elements for it on top of the image, or you divide the image up into a seamless grid of clickable elements of sorts.

Heres a mockup of the buttons with a different font, Trojan Pro




Im not sure about the dropdown. We could make much better use of it. Stuff like contact info etc should go under the About header.

Also, the right frame should be ulilised a bit more

Pixel said:

Heres a mockup of the buttons with a different font, Trojan Pro

Click to expand...

Those look much better. *thumbs up*

Pixel said:

Im not sure about the dropdown. We could make much better use of it.

Click to expand...

You've spoke for some time about the fact that you want to utilize dropdown menus, but could you please create a draft to show in detail what you actually have in mind? If you don't present your ideas then I will for sure keep on coming up with suggestions that you don't like.

Pixel said:

Stuff like contact info etc should go under the About header.

Click to expand...

I'm thinking of possibly merging Contact with Staff List.

Pixel said:

Also, the right frame should be ulilised a bit more

Click to expand...

I can think of an "FFVII Remake" section header, plus possibly dividing the Tribute header into more headers instead. We'll find a way to utilize it.

I just mean maybe move some of the headings over to the right to balance it out. And use the dropdown to highlight some popular articles or stuff we'd like people to pay attention to.

Ill try to do some sort of mockup the next couple of days. Just been trying to get some other stuff done

This is more just design ideas rather than layout. The gradient from the banner continues down the left frame

You guys aren't actually going to make me redesign the site right?

Yup, in flash

What would be really cool, and maybe you're already planning on doing this, is to have each of the individual "Content - About - Community - Contact Us" links highlight when you mouseover them. Assuming you still have the .psds that should be easy to implement.

Anyway, looks great, good work

What would you need to be able to do that? Would the headings need to be separate elements?

I think you have to save each link as two separate images, one for the highlighted version and one not. It's possible that you might also be able just to save two images of the whole thing, one with everything highlighted and one with nothing highlighted, but I can't remember how to do this; nevertheless, my recollection tells me that this should be possible somehow. I'd recommend asking Yop. He probably knows.

Roger Sterling said:

What would be really cool, and maybe you're already planning on doing this, is to have each of the individual "Content - About - Community - Contact Us" links highlight when you mouseover them. Assuming you still have the .psds that should be easy to implement.

Click to expand...

It was my vision to have it that way, actually. Hopefully Yop can get it done.

Pixel said:

Spoiler: Images

Click to expand...

The second image looks great, but I think the text on the first one doesn't stand out enough from the background. "Content" and "About" suffer in particular from being white text on a bright part of the image.

As for the highlight-on-mouseover thing, it's pretty simple to do with Javascript. To save on filesize, it'd be worthwhile to make the menu bar separate from the rest of the image above it, and then make different versions for each item being highlighted. There are flashier ways to do it with slow fade-in and fade-out, for example, but I don't know anything about those.

Flintlock said:

The second image looks great, but I think the text on the first one doesn't stand out enough from the background. "Content" and "About" suffer in particular from being white text on a bright part of the image.

Click to expand...

The problem is because of the gradiant. When Shademp used darker color on the letters, you couldn't see the one on the right. Just have to find a good middle ground.

The simplest is to just make them all separate images (highlighted, non-highlighted, etc), but for better speed and such, you could put all of those images into a single image and only show part of it. Sprites, basically, which should be doable with either just CSS or a combo of CSS + JS. See also the prime source, a 2004 article about the subject. Probably should base it on something newer though.

Ok so Yop and I agreed that I'll be doing some stuff on the front page. He just needs to set up a test page and grant me some accesses and stuff. I'm super busy at school this week so I can't do anything until the weekend/ the week after, but once I have the time I'll have a look at how the newest version of the default theme is structured and stuff. I could go ahead and set up a dummy version on my own web space, but might as well just do it on the TLS domain since that's where it'll all run in the end.

Credits: I've had a WP blog since 2006 and I've been into HTML and CSS since 1997. I know Java and a bit of JavaScript, I've also dabbled in Perl which means PHP isn't too hard to pick up on, IMO. Also since I have a WP blog I know the file system, the way the PHP of Wordpress is structured and how the themes are set up fairly well.

Anyway I think I know enough to have a go at it and to hopefully live up to Yop's standards, which are quite high. I'm surprised he's even letting me do this

So heres a version of unhightighted and highlighted when you rollover

Unhighlighted, imho.

Well, when you mouseover the headings, it highlights. I was thinking of having a glow animation

How were you thinking of doing the animation? Like, a one- time gif? Flash?

I was wondering about that too. If its to be split into separate gifs for the menus to highlight, then i'll try

I haven't worked with GIFs for ages. I think you can pre-load them, which IMO is critical to give the menu the fluency you would want from an animated menu. Anyway I'm ranting without having googling it first, so this is just my 2 cents.

I should also read this entire thread, lol

Edit: Ok, only the last 3 pages is related. I've read it. Doesn't seem like you guys have a set plan on how to do things yet - or maybe you have a thread in a subforum I can't see.

Is there a wish that the front page still have that blog look with the articles in the middle? With maybe article teasers in the left and right columns as teasers? Or is there a wish for a more newspaper style theme? Both are perfectly possible. I've done a newspaper theme on a blog, and the possibilities are endless.

Without sounding judgmental or naggy or disrespectful to whoever set up the front page, the front page is a bit uninteresting IMO. There are too many links and too many menus, just too much text in general. There is written a bunch of theory on this stuff, [U]http://www.useit.com/papers/webwriting/[/U] is a good example. Check out "F shaped pattern for reading", it's a good indicator for how the mind works when browsing web pages. You have very little time to capture the readers interest.

Sorry if I come across as a know-it-all. But I do know some of this stuff. I can be utilized.

Fangu said:

Edit: Ok, only the last 3 pages is related. I've read it. Doesn't seem like you guys have a set plan on how to do things yet - or maybe you have a thread in a subforum I can't see.

Click to expand...

Actually I've kept more in-detail stuff to private messages. No more of that.

Fangu said:

Is there a wish that the front page still have that blog look with the articles in the middle? With maybe article teasers in the left and right columns as teasers? Or is there a wish for a more newspaper style theme? Both are perfectly possible. I've done a newspaper theme on a blog, and the possibilities are endless.

Click to expand...

I have assumed that the look with articles in the middle is the default and obligatory layout of a WordPress site. Not that I can think of any other system I prefer.

Fangu said:

There is written a bunch of theory on this stuff, [U]http://www.useit.com/papers/webwriting/[/U] is a good example. Check out "F shaped pattern for reading", it's a good indicator for how the mind works when browsing web pages. You have very little time to capture the readers interest.

Click to expand...

This is indeed important information. I can't tell in what way, yet, this might change our vision, so I'll just try to present the planned look of the front page then you can suggest how we might improve, whether it be by adjusting a few things or completely scrapping my ideas.

With the new section headers and the planned dropdown links, here is what it will look like.

Naturally the section headers will be more properly placed, keep in mind I've used Paint here.
More sections for the right sidebar are planned, but this reflects the features that may be up when the redesign happens (except for the "FFVII Remake" section).

I haven't created the "Main Page" yet, but the plan was for it to be a page that welcomes the visitor to the site and provides quick info on what is found in both the left & right sidebar as well as the dropdown menu links. Pretty much a "Navigation" page.

The reason for completely avoiding links under each sidebar was because no matter what system we chose, there would end up being a metric ton of links there. So instead, the plan is for the visitor to click a section header which then leads to a multi-index page in the middle.
Examples:


A wiki-style "content quick-link" may be added at the beginning of each section. I've already made some for the title-specific sections at least.
Not sure why this one gets fuzzy =/


So that should demonstrate why the multitude of links are moved to the middle instead of being in the sidebars.

What do you think? Do you still think there are too many links and if so how can we redeem it?

Fangu said:

Sorry if I come across as a know-it-all. But I do know some of this stuff. I can be utilized.

Click to expand...

How dare you try to be helpful and provide constructive criticism? You sicken me.

I can think of a few exercises for you I think could be useful:

• If you take a pen and paper and can structure the front page in any way you'd like - I mean really using your crayons within the space of the content box - how would you structure it? Try to really think outside the box, and not let what is already there color your thoughts. (This is hard!) Try to keep in mind that "less is more" when doing it. Can you get away with, say, a 5 word menu and only 5 other links other than said menu? 5 + 5 means you're already presenting the reader with 10 different options. Can you narrow those options for them? How can you categorize the content to achieve this?
• Do all of the topics you've put in those prototypes draw the same amount of interest from the public? Like say, the Audiobooks probably gets way more hits than info on Dirge of Cerebus. And they are now linked in a similar way. Maybe the content should be linked according to the interest they gather? I know Yop can find out what search words gets people into TLS - also specifically what lets them find the articles. Maybe that is a hint of what the site should focus on to get more publicity?
• Tags -- is it more interesting to use Tags instead of waterfall-lined structure of the content? Tags are very much integrated in Wordpress now.
• Ever thought of letting a Search bar be a bigger part of the layout? There is a general theory saying the content a person want should never be more than 2 clicks away. If a person are having problems finding what they're looking for (because there isn't a search bar, tags, or the content tree is confusing) they're more likely to get frustrated, give up and then leave. A lot of times the reader has a different view on which categories a subject belongs in. Instead of trying to point the reader down a road - why not let him/ her decide themselves which road they want to take? This is also re: tags. (I know there has been issues with searches making the server CPU hit the roof, so there could be challenges. This might be prevented with some tweaking though.)

These are only my 2 cents. You might have been over this before and decided to drop it, so.

It might be possible to do a (subtle) glow effect with a Javascript animation library. How would you do it with images normally? like, add an alpha layer and screw around with that? Alternatively, perhaps it could be done in a Canvas, HTML5 ftw. Off course, that'd be quite a detour, .