The Energon Pub

Attached to this post is a screenshot of the revamp of the current site design. Something is missing from it. Maybe some appropriate shades of color. Maybe some design elements. Maybe a few background images. Something clever? Not sure what's missing so I'm coming to you guys. Hopefully some of you can help steer this ship in the right direction.

If you're familiar with Photoshop, I'd love to see you take a crack at this revamp to see what you could do to spice it up a little bit. If you're not familiar with Photoshop, I do really well if you can show me examples of ideas that you have that other websites have implemented. The more ideas, the better.

Would like to launch this revamped version of the current site's design early next week.

Looking for constructive criticism and/or helping hands. If you don't like it, explain why. If you think there could be some improvements to something, explain why. Thanks in advance.

It's too grey and white in the main part of the site. I feel that there should be some color there that matches the purple gridlines without making it too hard to read. Also you might want to think about making more than one skin, like say if someone likes the current one or wants red gridlines because they like Autobots.

Loki God Of Mischief wrote:It's too grey and white in the main part of the site. I feel that there should be some color there that matches the purple gridlines without making it too hard to read. Also you might want to think about making more than one skin, like say if someone likes the current one or wants red gridlines because they like Autobots.

I agree that it's missing some color. I'm out of ideas though ... hoping that someone can do a quick mock up with the image I provided with some suggestions.

I liked it when we could change our background and site to a specific character and that had a lot of characters and little things, but I don't want to mess up the coding/server like before.

hum, maybe go for a bronze ,gold look instead of a silver ,platinum one, or at least try it out and see how it goes, but sometimes little changes become a major headache when you are dealing with so many new ideas.
, but if you want to mess around try the bronze/gold background and see how it looks, then you could call it the golden age of sibertron as a bonus.

It needs a little bit more browser cross checking. I'm done for the night though. Exhausted. I'll take a shot at cleaning up some more of the style sheet tomorrow. Have a good night everyone.

I wish I could offer more help, but all I can say is I'm liking it so far, I guess it was time for a change after the Movie hype has died down for a while.

Hmm, well one suggestion, I'm noticing the main background has a grey to white gradient, perhaps make the grey a little darker so it's more noticable? But that may make text harder to read, so I'm not sure if that's a good idea.

I have no real expertise when it comes to photo manipulation, or Photoshop.

That being said, I'd still like to weigh in on the current design...

I like the header (somewhat), but I find the overall presentation...bland.

There's no pizazz, snap, crackle, pop, whatever you want to call it.

I realize it's still a work in progress, and so far it looks nice, but it just doesn't wow. To be honest, I thought the previous redesign was rather nice. Took some getting used to at first, but it won me over.

This is primaily one to three colors, and that can get old, quick.

This site has proven that you can grab people's attention, without being gaudy or cumbersome. I hope we can return to that.

Autobot032 wrote:I have no real expertise when it comes to photo manipulation, or Photoshop.

That being said, I'd still like to weigh in on the current design...

I like the header (somewhat), but I find the overall presentation...bland.

There's no pizazz, snap, crackle, pop, whatever you want to call it.

I realize it's still a work in progress, and so far it looks nice, but it just doesn't wow. To be honest, I thought the previous redesign was rather nice. Took some getting used to at first, but it won me over.

This is primaily one to three colors, and that can get old, quick.

This site has proven that you can grab people's attention, without being gaudy or cumbersome. I hope we can return to that.

Color schemes are not my forte. I'm a programmer, not a designer. I'd love someone to take the current layout and give it some "pizazz, snap, crackle, pop" in a professional looking manner.

Doing some research this afternoon about colors.

Do you guys see any color patterns/groups on this site that says the planet "Cybertron"?

http://www.colorschemer.com/schemes/

its nice and techno-like. But the only thing i dont like, if it hasnt been said, the "news, forum, sightings..." and such are in the middle of the page in white. But looks great so far.

Ungie wrote:its nice and techno-like. But the only thing i dont like, if it hasnt been said, the "news, forum, sightings..." and such are in the middle of the page in white. But looks great so far.

You're not using one of the more modern browsers then. What browser and which version are you using? You should upgrade your browser or use a different browser if you can't upgrade. Links to the most recent popular browsers are located in the footer of this site.

Oddly, when I'm at home using the latest verson of Firefox, all I get is the previously mentioned grey to white gradient for the background. However, at work, on an extremely outdated version of Internet Explorer, all I get is the side and top menus, front page features and a blue/purple tf box-style grid, and the rest of the page refuses to load.

The weird part is that the grid isn't showing up on Firefox.

kirbenvost wrote:Oddly, when I'm at home using the latest verson of Firefox, all I get is the previously mentioned grey to white gradient for the background. However, at work, on an extremely outdated version of Internet Explorer, all I get is the side and top menus, front page features and a blue/purple tf box-style grid, and the rest of the page refuses to load.

The weird part is that the grid isn't showing up on Firefox.

You might need to do a CTRL + F5 in order to get the latest style sheet or something. Everything is displaying fine in Firefox 3.5.7 on my end ... it's what I developed the new revamp in.

Which version of Firefox are you using?

found this really awesome online color tool. Any of you want to play with it to see if you can come up with a good "Cybertron" color theme with blues and greys?

http://colorschemedesigner.com/

Seibertron wrote:

kirbenvost wrote:Oddly, when I'm at home using the latest verson of Firefox, all I get is the previously mentioned grey to white gradient for the background. However, at work, on an extremely outdated version of Internet Explorer, all I get is the side and top menus, front page features and a blue/purple tf box-style grid, and the rest of the page refuses to load.

The weird part is that the grid isn't showing up on Firefox.

You might need to do a CTRL + F5 in order to get the latest style sheet or something. Everything is displaying fine in Firefox 3.5.7 on my end ... it's what I developed the new revamp in.

Which version of Firefox are you using?

Weird, also 3.5.7. Also tried CTRL + F5 and it refreshed, but no grid.

kirbenvost wrote:

Seibertron wrote:

kirbenvost wrote:Oddly, when I'm at home using the latest verson of Firefox, all I get is the previously mentioned grey to white gradient for the background. However, at work, on an extremely outdated version of Internet Explorer, all I get is the side and top menus, front page features and a blue/purple tf box-style grid, and the rest of the page refuses to load.

The weird part is that the grid isn't showing up on Firefox.

You might need to do a CTRL + F5 in order to get the latest style sheet or something. Everything is displaying fine in Firefox 3.5.7 on my end ... it's what I developed the new revamp in.

Which version of Firefox are you using?

Weird, also 3.5.7. Also tried CTRL + F5 and it refreshed, but no grid.

When you say "no grid", do you mean the black/blue grid that appears in the background to the left or right of the primary website layout?

Hi Ryan, I'm a communication designer and if I may add a little bit to the mix. Your colour scheme is fine, it compliments itself really well, but where the problem is (in my opinion) is that if I was new to Seibertron.com I would be put off with how cluttered the front page is. This colour scheme screams minimalist (or at least tidy).

The biggest problem is the banner advert at the top above the sites name. It's bigger than the sites name which is a no-no. After all I'm visiting Seibertron (the best TF website btw!) not SolarEnergyCharity.com. I know you need to keep that banner, maybe think about putting it under a bigger seibertron.

Next is the home | about | contact us etc These could be moved inline with the other buttons lower? There seems to plenty of space there still?

Third, Bludgeon. He's a great figure but how about something that compliments the sites colours? Bludgeon sticks out like a sore thumb and really clashes.

The search bar could a drop down button too?

Twitter, Facebook and feed logos. Currently they are misplaced and look as if they belong to the ad. I know rthe majority of people wont actually think that but I'm just going on a aesthetic point of view here. Keep them in the vertical layout and throw them to the left of the Sibertron logo.

Finally the TFsource ad. I honestly have no suggestion on where to put it as every inch of your screen is already taken up by something. All I could recommend is dropping it, which I know is probably not an option.

I hoped this helps in some way and if I get time at work today I'll see if I can whip up a draft image.

Chris.

Yeti wrote:I hoped this helps in some way and if I get time at work today I'll see if I can whip up a draft image.

Chris.

Thanks for the professional opinion (and compliments). I really appreciate it. I'll do my best to respond more thoroughly later today. There is a rhyme and reason for everything. Perhaps if I explain my thought process later on why some things are the way they are, we can come up with a better solution.

I'm not a fan of the current color scheme. I need an actual color scheme with a palette of about 6 or 8 main colors from which I can use. The "blues" are 100% blue but they've definitely got a bit of a purple look to them, especially on other monitors that aren't calibrated correctly.

As for the tfsource ad, it definitely has to stay. All of the ads are here to stay. They're a necessity to support Seibertron.com.

Seibertron wrote:When you say "no grid", do you mean the black/blue grid that appears in the background to the left or right of the primary website layout?

I believe so, yes, but I can't see any grid right now. It must be something wrong with my own settings if it works for others on the same version of Firefox.

On my work PC, the grid loads and obscures the entire site so I can't see any of the content. I guess that's a result of using an outdated browser?

http://i42.photobucket.com/albums/e322/VenomousPrime/Untitled-2copy-1.png- the forums
http://i42.photobucket.com/albums/e322/VenomousPrime/Untitled-1copy-4.png- HMW Registry

The registry looks odd now. The "life bars" are gigantic.

The grid pattern isn't showing up on the sides of the forum for me. I have ctrl+F5'd a few times and it hasn't changed anything.

The revamp looks great, Ryan!

Yeti wrote:Hi Ryan, I'm a communication designer and if I may add a little bit to the mix. Your colour scheme is fine, it compliments itself really well, but where the problem is (in my opinion) is that if I was new to Seibertron.com I would be put off with how cluttered the front page is. This colour scheme screams minimalist (or at least tidy).

What size is your monitor's resolution? If you're getting the "cluttered" feeling ... it seems like you must be on a small monitor resolution (1024?). The homepage of Seibertron.com has always had a lot going on. The current design intentionally has less than previous designs from the past 10 years. What is your impression of the homepages of major news sites such as foxnews.com, cnn.com or msnbc.com, space.com? Do they seem cluttered to you as well?

Yeti wrote:The biggest problem is the banner advert at the top above the sites name. It's bigger than the sites name which is a no-no. After all I'm visiting Seibertron (the best TF website btw!) not SolarEnergyCharity.com. I know you need to keep that banner, maybe think about putting it under a bigger seibertron.

I'm not sure that I agree with this. I don't think it has to do with the size of the ad. If anything, the background color of the header and the colors of the logo should be contrasted properly so that the logo pops (such as orange text on a blue background). Colors can and should be used to make the logo stand out more. I'm just not much of a color guy. I didn't like other color concepts that I came up with for the header so this is what we've got for the meantime until I see or hear a suggestion that looks right to me.

Yeti wrote:Next is the home | about | contact us etc These could be moved inline with the other buttons lower? There seems to plenty of space there still?

I've been wanting to remove the "secondary" nav options for a very long time. Most major sites have a primary and secondary navigation (i.e. Facebook, Gmail, Yahoo, etc). "About" shouldn't have as much weight as the "Toys" section. Again, there might be a better way to present those links, but I definitely don't want them as part of the primary navigation bar.

Yeti wrote:Third, Bludgeon. He's a great figure but how about something that compliments the sites colours? Bludgeon sticks out like a sore thumb and really clashes.

The character will rotate out depending on which figure is a hot figure that I've recently completed a gallery for. I just want to be able to showcase some popular Transformers toys in that part of the header.

Yeti wrote:The search bar could a drop down button too?

Not sure what sites have a search bar in a dropdown. I wanted it to be prominent in the header or perhaps the left sidebar. Plus I wanted to get Google's logo in there as well to add a little professionalism to it.

Yeti wrote:Twitter, Facebook and feed logos. Currently they are misplaced and look as if they belong to the ad. I know rthe majority of people wont actually think that but I'm just going on a aesthetic point of view here. Keep them in the vertical layout and throw them to the left of the Sibertron logo.

I don't like them being to the left of the logo. To be honest, they're filling up some of that space that can overlap the background character image. I originally wanted to put them in the navigation bar, floated to the right, but they didn't look right at all. So I added them to the right of the ad.

One solution I had that would resolve some of your concerns would be to move the banner ad above the top of the site (so above the "the ultimate tf fansite" promo, have the "home, about, translate" secondary navigation aligned to the right above "10 years of seibertron" and have the social network buttons floated to the right of the secondary navigation. Only problem with that is that the header would be too small to feature a Transformers toy photo which was the primary point of inspiration for this header design.

Yeti wrote:Finally the TFsource ad. I honestly have no suggestion on where to put it as every inch of your screen is already taken up by something. All I could recommend is dropping it, which I know is probably not an option.

Can't drop the TFsource ad. They're here to stay and that spot is reserved specifically for them.

Yeti wrote:I hoped this helps in some way and if I get time at work today I'll see if I can whip up a draft image.

I appreciate the feedback. I hope to have further discussions with you and other members about ideas that you guys have for how to improve the layout and/or colors of the site. Continued discussion will bring about a better product in the end.

Hi again Ryan. I understand your reasonings about your website. It's always hard trying to do a redesign that is very functional in its content but look good too. It's good you know what you want from your site (which I've always felt anyway), even if it's not quite coming together at the moment, although I'm sure it will. Pretty much all your previous designs have been well implemented and I'm sure this new one will too.

The resolution I'm running in is, on my Macbook 1200x800 and on my Windows7 machine 1680x1050. Obviously between the two there is quite a difference but my critique above was based upon you screen capture. I agree with you on the "popping" of the logo. I just think it really needs to be bigger, The banner ad only looks so big because the logo is so small. Of course the downside of making the logo larger would be an even more cramped top of the screen.

The secondary nav options, what about using icons for them? This could be a really cool opportunity to do some transformers style insignias but for the icons. The downside would be that they would not be instantly recognisable as to what they were unless the user hovered over them which isn't ideal. edit: have you thought about custom facebook/twtter/feed icons similar to insignias? Basically the same, just with a slight Seibertronian bent to them? Could be fun!

It's really late here in NZ and I'm bushed after a long day at work so I hope what I've said is clear.

I just want to say that I love this site and have visited it almost every day for...well I don't know how long now, at least seven years (though I'm mostly a lurker these days) and know the effort you put into it will shine through. Yeah, I'm starting to gush. I'll check in over the weekend (it's saturday early AM here now) and will try and find some time to run a few colour mock-ups and tests.

Chris.

I suggest doing a G1 toy package-looking grid as the background image.