TLS GFX

Cthulhu

Administrator
AKA
Yop
But is something like that possible from a banner?

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.
 

Pixel

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

buttons.gif



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
 
Heres a mockup of the buttons with a different font, Trojan Pro

buttons.gif
Those look much better. *thumbs up*

Im not sure about the dropdown. We could make much better use of it.
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.

Stuff like contact info etc should go under the About header.
I'm thinking of possibly merging Contact with Staff List.

Also, the right frame should be ulilised a bit more
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.
 

Pixel

The Pixie King
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
 

Pixel

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

Ⓐaron

Factiō Rēpūblicāna dēlenda est.
AKA
The Man, V
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 :monster:
 

Pixel

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

Ⓐaron

Factiō Rēpūblicāna dēlenda est.
AKA
The Man, V
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.
 
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.

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

Flintlock

Pro Adventurer
lifestreambanner6.gif


left_frame.gif

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.
 

Tifabelle

Pro Adventurer
AKA
Tifabelle, Nathan Drake, Locke Cole, Kain Highwind, Yamcha, Arya Stark
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.

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.
 

Cthulhu

Administrator
AKA
Yop
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.
 

Fangu

Great Old One
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 :monster:
 

Pixel

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

Pixel

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

Fangu

Great Old One
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.
 
Last edited:
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.
Actually I've kept more in-detail stuff to private messages. No more of that. :P

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.
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.

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.
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.
A1sj7.png

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:

jgDKN.png

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.
qqcZQ.jpg
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?


Sorry if I come across as a know-it-all. But I do know some of this stuff. I can be utilized.
How dare you try to be helpful and provide constructive criticism? You sicken me. :awesome:
 

Fangu

Great Old One
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.
 

Cthulhu

Administrator
AKA
Yop
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, :monster:.
 
Top Bottom