So, I threw this page together based on the StarCraft 2 web-developer kit that was recently released. I'm no web-designer, but I like to work on pages every now and then. This is what came up with, how about some quick break-downs - how did you like the visual-appearance and would you agree that this very simple navigation-layout works the best in order to not complicate matters or confuse the user?
I did it with Dreamweaver using HTML, CSS and JavaScript.
Final note and a question: don't try it on Internet Explorer, it might not only block the JavaScript, but it will not display the images with alpha-channel correctly. I know this is a flaw, but I *need* the alpha-channel. Can somebody help here? I used .png for those images since I know of no other extension with alpha-channel that is usual on the net (.tif wouldn't work, I guess), Firefox displays it all correctly though.
http://www.freewebs.com/test-my-site (http://www.freewebs.com/test-my-site)
I know it's not much, but what the heck. Try to reload/refrest the page, too, the little unit-image will change randomly - just a little doodah. :)
Also, ignore the Features- and Links-boxes, different content will be put in there later.
Oh, and, no, I don't want to start a StarCraft 2 site, it's just a mock-up.
EDIT: Keep in mind, the graphics are mostly taken from the kit, just photoshopped/arranged into the page, I don't want to be looked upon as a ripper or whatever. :)
Looks pretty cool. The only thing I see wrong with it is that everything is just placed on the back drop. It would look better if everthing has a fram around it. :)
You mean a 1px-border around the news items? I had that and didn't like the look at all, then I tried to separate the individual items with the images as it is now. Could you elaborate? Thanks for the feedback though. :)
EDIT: Oh, read your post again, you meant a second background for the whole middle-part? That could work, but on the other hand, I don't want to use too many big images and I don't think it's that necessary. Or does anybody else feel the same? Oh, and a second question (first one in original post is still open, too): is it okay nowadays to not use these awful, annoying framesets and just have each page done individually like it is now? Like, when I click on the Overview button, it loads the changing middle, but also the navigation and header again? This way seems the easiest and I really, really hate frames, but is that common or frowned upon?
The main title banner looks weird sitting on top of the background with fading to black edges. Maybe add borders to it or something?
Otherwise looks pretty good and accecible to me.
Quote from: dkh on Fri 19/10/2007 15:48:18
is it okay nowadays to not use these awful, annoying framesets and just have each page done individually like it is now?
Absolutely, framesets are so nineties
btw. where did you use javascript, I didn't see any thing on the site that require it.
If you reload the page or try to navigate around, the unit above the navigation will change randomly from 10 images. That's only a smallish doodah I've seen on a Splinter Cell fansite back in the day. Apart from that, there's no script, browsers that don't accept JavaScript, will simply not show the whole unit-graphic and display the navigation a little higher instead.
About the banner: the image I use was in the kit without transparency. On my screen, the bgd-image is so dark, that it seems to fade fine, but my screen is a little dark, so do you actually see that it fades to black and not to the bgd? In that case, I will either include a logo by myself photoshopped from screenshots etc. or I'll try to kill the black parts of the logo now in Photoshop and make it fade out properly.
Thanks for your time.
* decrease contrast on background and darken it a bit. It's difficult to describe, but right now, reading text gives a headache. Is it the background or these irritatingly sharp metallic thingies around the text, I'm not sure. Still, I'd say it's the background. Also, the background shows shitty JPG compression clearly, especially on edge areas.
* high contrast is eye-tiresome in other places too, such as bright white on bright blue on the main menu buttons. But since it's part of starcraft style, I doubt you'd change them.
* areas where text is on the gray box, look much more readable and friendlier. I like this.
Wow, that just shows how much my screen sucks. In the middle-part (where the text is), the background is black, really, almost complete black (so it's white text on black, which I personally like reading). I probably won't be able to fix it well without a new screen. Thanks for your comment though, InCreator.
Have you considered calibrating your monitor?
I can't, I already run it with maxed out brightness/gamma. This screen is damaged, since a few years it's been getting louder and louder as well.
Quote from: dkh on Tue 23/10/2007 20:09:34
I probably won't be able to fix it well without a new screen. Thanks for your comment though, InCreator.
I think you actually can. Simply turn the brightness of the image up a bit for edit. There's quite dark metallic plates at the center, but their edges look almost white on my screen and that's what's screwing up the text. Simply make everything brighter and decrease contrast until white pieces won't stand out so much, then turn all back to dark again. But still, the JPG compression looks too so blurry in places that editing feels pointless so I'd consider making a new background or use cleaner version, saved as PNG if you have it.
EDIT: Tried to reduce contrast, lowered saturation and added some noise to hide JPG blur... Not sure how it would work though. Size became 10 times larger... :( Not that it matters much at the age of fiberoptics.
http://www.increator.pri.ee/i/critshelp/bg2inc.gif
I also tried to get rid of the bright lines in the middle:
See it here! (http://www.longwayhome.de/zeug/bg2.png)
Thanks a lot for your effort. Ironically, I could barely make out a difference between both your versions, in the end I chose InC's for the moment. The page (http://www.freewebs.com/test-my-site) should be updated. Is that better? I'm just guessing here.
Nice.
The white title ("starcraft 2 fansite") looks out of place.
The menu bar on the left is too tall - specifically, the "help" and "links" sections at the bottom fall off the screen. They don't appear to be necessary, either; the blue menu already has a links button.
I'd suggest putting slightly more of a border around the posts, considering the post background is as black as the page background.
Could you elaborate what exactly looks out of place with the title (the wording "StarCraft 2 Fansite" would later be replaced by the name of the page, obviously, like "The Nexus" or whatever). Is it because it's just simple white font? I'd like to stick to using text (instead of a logo-image with stylized letters) though - so what would improve the "out-of-placeness"? A different font or color? Different size or position?
About the "help"- and "links"-boxes, read the original post - they are to be ignored, they were in the initial design from the starcraft2-kit, I can't think of anything to put in the last two boxes though, so they shouldn't be there. Although I'm not sure what you mean with "too tall" and "falling off the screen"? What resolution do you run? Even at only 1024x768, they are still visible all the way. Is that even what you mean?
About the border: I agree, I wanted to add a complete border in the style of the border-pieces I have in there right now. The graphics aren't the problem, I can take and modify enough artwork to fit that, but I'm not sure how to implement this with html/css in a way that it surrounds the whole post (with varying size respectively) dynamically - similar to AGS Textbox GUI's, I'd need 9 pieces - all corners and the middle-parts. Including that system into the news-page seemed very hard, so I stuck to the parts of borders. I'd be all for complete borders, though, if I could find a reasonable way to do this.
Thanks for your feedback, Radiant, and sorry for the returned questions with issue #1 and #2.
A few quick thoughts:
*I roll pretty wide with my monitor (MacBook) and when maximized the black borders show, since the background doesn't repeat at all. Not sure if that's a real issue or not but thought you'd like to know.
*Verdana for your site name is gonna look ugly no matter what you do. Verdana is one ugly font when it is made big. It works well for small text, but not big text. I recommend choosing something else. I'd probably do the site title in Photoshop so I had more options.
*You should make the top image blend into the overall background better so it doesn't look like it's just plopped on top of it. Or add a more defined and purposeful border to it.
*You can get around the no-javascript bit by having a default image which an onload() function changes to a random one. Better than having it not work with IE (which is 90% of the browser market).
*The little arrows you use for bullet points are odd with their little square backgrounds. I'd work on those a little.
Otherwise things look pretty good to me!