Suggestions regarding new website

[krainert]

Hey thar,

http://www.ovrkll.com/ is getting old so I'm knitting up a new website. Unfortunately, I'm not exactly exceptionally spectacularly skilled in front-end web design so I may need some help.
My current concept is http://www.ovrkll.com/private/v3//http://www.ovrkll.com/private/v3/map.html, but that has two major disadvantages: The image/text ratio on the front page isn't nearly high enough, and the user has to click his way to more details for each map.
So, this is the current layout (simplified for your convenience): http://www.ovrkll.com/private/concept1.jpg.
This is what I'm considering replacing it with: http://www.ovrkll.com/private/concept2.jpg.
What do you think?

EDIT:
Notice how text is completely eliminated on the second layout. In case I need a summary I'm thinking of using dynamic effect - letting a text box appear over either the smaller screenshots or the bottom part of the larger one. Opinions?

[city14]

I would say, use the second concept, and move the game title to the middle, and place an info button for your dynamics on the right side! Are you using a database, or just html and java? Flash as well, or not?

[krainert]

Thanks for the reply.
First of all, I'm using PHP with MySQL, and the front-end is based on pure HTML, CSS and JS - no Flash, Silverlight or likewise browserapps.
Second, yes, I've decided to go with something like my second suggestion (as you suggested). About placing the title in the middle, I've thought about it, but the length of the text for the game for which the map is made will most likely be rather long... Here's an illustration of the problem (http://www.ovrkll.com/private/title.jpg):

I figure placing an info or download link next to the title would result in a problematic lack of balance - if there's even enough room for everything. Thus, I'm afraid placing the link topmost is not an option... Unless, of course, somebody comes up with a solution to the spacing problem.

[city14]

I was thinking that it could be un-balanced... But, I was unsure as to how you could put the info in without it being along the top, as the rest of the layout looks full...

[krainert]

Yes, it's quite a puzzle. However, I do have an idea for to possible solutions. Either info could pop up once the user holds the cursor above a Download button bottom-most (which may seem confusing) - or I could place an info button next to the download one... One moment!

*EDIT*
Here (http://www.ovrkll.com/private/concept2.1.jpg):

How does that look?

[city14]

Great! I like that one, you got the info as like a tiny image, not the whole text, and it still makes sense for the layout! Good! Go with that!

[krainert]

Here's what I've got so far:
http://www.ovrkll.com/private/v3/

What do you think?

[city14]

Nice! I like it, but, it lack some color variance. The buttons for downloading are just, bland. Maybe try bolding some text, so that it stands out. And try to create the shadow effect to the sides of the main table that holds the body?

Other than some color choices and small aesthetics, the layout looks awesome! Good job!

[krainert]

Great, thanks for the reply. The current material is all about the basic layout, and colors and such will be applied properly later.
Personally I'm not sure if I like all of the empty space between elements of the same map. It seems a bit distracting... Any opinions?

[zombie@computer]

Personally i think the layout is waay to square / uniform, compared to eg. your logo

not completely sure if the layout i see is correct, the site shows up invalid in both firefox 3.0 and IE 6.0 (im at work, they dont have any other IE ;p )

[Blink]

On the code side it's a serious case of divitis, you've got them absolutely everywhere! Also your JS should be abstracted from the HTML into an external file.

http://www.smashingmagazine.com/2009/04 ... -div-hell/

[vcool]

To be perfectly honest, I like the old layout. So that's the one you have now. I don't like the colours much, but I like the fading menus, placing of the menu. Looks very clean and professional.

just my 2c.

If you really want criticism though, I say V3 looks fine but in Firefox the Contact Me is displayed in the top right corner of my screen, not where it is supposed to be at. The menu bar could perhaps be more flat and sleek, rather than the fake 3D cylinder extrusion thing.

[krainert]

There, people questioning my work - finally!

zombie@computer
Actually the block concept (blocking all elements concerning each map together) is meant to simplify the layout and make it easy for the user to figure out what belongs where... But I'm not exactly a pro web designer, and frankly I can't really imagine how you could make it less blocky? Using round buttons, perhaps?

Blink
I don't think you're looking at the right site All JS is located in global.js. Oh, and the correct link is http://www.ovrkll.com/private/v3/.

vcool
I like many things about my current website as well, but the problem is that content is very hard to find - navigation is too complicated. Thus, I'm making a much more simplistic site with visual images from the very first page.
"in Firefox the Contact Me is displayed in the top right corner of my screen, not where it is supposed to be at"
That's exactly where it's supposed to be You don't like it / why?
"The menu bar could perhaps be more flat and sleek, rather than the fake 3D cylinder extrusion thing."
Hm, I rather like it, but I may consider changing it at a later point.

Thanks for the replies.

[Blink]

I am looking at the right site.

Code: Select all

<body onload="Initialize()";>
      <div id="contact" onmouseover="Contact_Show()" onmouseout="Contact_Hide()">

You've got your functions mized in with the HTML, which is a very old fashioned way to do things nowadays but it still works I guess

And there are 21 <div> elements on the page, which seems wildy excessive. You've even got a few empty ones. Personally I would find more semantic HTML to use but not everyone is as obsessive as me.

[zombie@computer]

I am looking at the right site.

Code: Select all

<body onload="Initialize()";>
      <div id="contact" onmouseover="Contact_Show()" onmouseout="Contact_Hide()">

You've got your functions mized in with the HTML, which is a very old fashioned way to do things nowadays but it still works I guess

And there are 21 <div> elements on the page, which seems wildy excessive. You've even got a few empty ones. Personally I would find more semantic HTML to use but not everyone is as obsessive as me.

well, if the definition of 'new fashion' is to put everything in jquery, id prefer the old fashion