SC2Carrier Website Design
whywaitwebs (104 points) | Sat, 2010-07-03 14:45Hey guys, been a while since I posted here. I'm looking for some critique on my new project's design.
I have already coded out the layout but there's still plenty of time before it has to go live, so I'm hoping to get some last minute design advice. Not really looking for "it's fundamentally flawed, you have to start over" :) but any tweaks and changes you think I can do to make it better would be very much appreciated.
And, for the longer term, if you care to critique any deep underlying bad habits or tendencies you can see, feel free, though I'm not sure I'll be able to address them with this project.
This is a StarCraft 2 fan site, I wanted it to be simple but functional, and still have some level of "coolness" factor. I coded it in HTML5 because I wanted to learn it, and because why not! HTML5 is so sexy!
The navigation is a "lavalamp" -- that is, when you mouse over different parts the highlight that is currently on home animates to the mouse position, and then bounces back when your mouse leaves the area.
The carousel with the 3 images automatically moves to the left revealing a new image on the right every 3 seconds. If you mouse over any image, it animates a 30% opacity white square over it, and as long as your mouse is over it the auto-slide process is paused. When you click an arrow it obviously advances one slide to the left or right.
The background stars are a regular background, but the planet and nebula are absolutely positioned so they will always be there no matter where you scroll (and the stars will scroll behind them, which creates a sort of cool effect).
Hope this isn't too much info about how the site actually works, beyond what you can just see. Let me know any improvements you think I can make, and big thanks in advance!
Edit: Forgot to include a link to the live version. http://www.sc2carrier.com/template.html
Also, the black text on the sidebar is just placeholder, I know that's a major contrast issue.
Commenting on this Image is closed.
Hey man, welcome back. that's looking pretty sweet you've gotten a lot better since you were last here.
Did you try the links in the tabs up to top in white? And the links to the right? It's a matter of readability. Still, looking good man.
Leaky Penny
Check out what I've been up to lately!
http://petersonjoseph.com
I'm going to print it out and eat it.
-Unknown Artist
Thanks for the comments!
I forgot to link the live site: http://www.sc2carrier.com/template.html
I tried white on the links actually, but I didn't really think it fit the design. Maybe orange.. but it's kind of obnoxious. What do you think?
White: http://www.sc2carrier.com/links_w.png
Orange: http://www.sc2carrier.com/links_o.png
I love it, partly because I also play SC2 (beta) some times.
You got your logo in some font, I wouldn't use the same font again for navigation (such as JOIN NOW and MORE INFO)
Love the stars that scroll with the site.
Page header (example text), is positioned poorly though, to close to edge.
I would use a bit more colour or contrast. As Leaky said, maybe add white. It's a great layout that's without any faulthy errors in design but a tad boring.
http://jackmancer.com/
http://twitter.com/jackmancer
Good start point.
Don't like the black type on mouse over.
I prefer logo's type on menu and a little bit bigger illustration and .com
a smaller Search and space to place an animated gif to announce the game/buy/tournment.
yes I'm brazilian xD
Thanks for the feedback guys!
Yeah, I was a little iffy on the black roll-over. Still trying to figure out what colors work best there. I adjusted the links to a new light green color, what do you think about that? Now it goes to the orange color when you roll over.
I adjusted the page header a bit as well, positioning should be better I think.
Jack, wouldn't it be weird to have only one instance of the font anywhere on the site? That's the main reason I used that font for those buttons. Then again not every page will have those buttons, so I guess it will be that way anyway.
I'm also curious what you mean by "a tad boring". It's already pretty media-rich, I can't really add any images or the load time will get even worse. Perhaps I'm misunderstanding you?
White really doesn't work on this site in my opinion...I mean, I have it as a background in the main content area, but as a foreground element it doesn't look good anywhere I plug it in.
Qwerty, hmm, if I understand you what you're saying is kind of the opposite of Jack? That I need to use the logo font in more places? I can't really put it on the menu, as that is text-based content and it's a nonstandard font.
Regarding the search box, I am rather fond of the size. Making it smaller violates the margin increments I've been using throughout the site, also I feel like it's one of the most important parts of the page. With the dark green color, it doesn't really overpower anything, but it's there when you need it. What do you think?
Thanks again for all the feedback guys :)
I think menu is so huge than spaceship or page title... I use 1920x1200 resolution and think it's big... I think Join Now button is the only button that could be bigger as actual ones.
If you want to maintain them, put more elements on header, like a static promotional or annoucement gif.
About the menu font, if you don't want to change it you could try a really subtle shadow to make some link with the concept.
yes I'm brazilian xD
I made the logo larger, made the slogan more visible and moved it to the right. What do you think of this revision?
I forgot to move the page header, but you get the idea
well I still think it's unbalanced... the elements inside header are competing themselves for space.
yes I'm brazilian xD