I need some opinions here: http://afar.ws/v/homepage.php

This is my website, and it's not doing a very good job of getting people to click "play" or "register". The homepage sees tons of hits but nobody goes beyond that.

The design of the website is meant to replicate what Adventure Quest used to be, as I liked that design. But I don't think I've quite captured the magic of AQ.

This was AQ when I used to play it back in 2004:

http://web.archive.org/web/200411090133 ... tleon.com/

I know it would be daft to copy it entirely.

Does anyone have any comments, criticisms, rippings apart, of my site, that would improve it?

Edit: am moving this to gaming, because it's branching more into the design of the actual game, than just general web design.

See, I really don't think you should be attempting to copy another design which to be honest, is sort of boring in the first place, you should branch out and do your own thing... at the moment it really does look too similar, even the buttons, I know that's what you were going for, but Afar is nothing to do with Adventure Quest in any way, and people MIGHT think that because of the layout of the site, but you never know I suppose...

Your site at the moment doesn't have enough... zazz, I'm gonna' be honest and say it really does look empty and way too plain as it is, so you DEFINITELY need to add... SOMETHING to it.

Look at the new Adventure Quest site now: http://www.battleon.com/

It's still using the same old layout, but just look how... "professional" it looks simply by adding lots of pictures and art around the site, making it look exciting to play just from looking at the homepage... that's the key to getting people to play, if they see this amazing homepage with lots of shit going on, they'll be like "I want a piece of that!" but if they see something boring with just a plain logo, two buttons which really don't stand out, and a lot of text that seems very basic, they're going to stay clear of it because it doesn't scream "PLAY ME!"

tl;dr I think you need to add more pictures and some art and more colour to the site, make the homepage look... busier.

Thanks... yeah you're right.

For now I have made some pretty simple changes that I think give a much better effect, but there's a long way to go.

Yeah sorry if I was a little harsh or anything but the best constructive criticism usually is, and I really do think you've got a lot of changes to make before it'll be attractive enough to attract new players

Ooh also something else, the actual page with the game screen on is WAY too empty, it's just all black with the game screen at the top in the center... it really looks half arsed and you should do something to fix that up too... I mean, take my game Project GRID for example, the page, even though empty looks more appealing than yours, and I didn't have to add much at all (Well... Tuna didn't, he's the one that did it, but the layout was my idea!), just slapped the logo at the top, added a gradient in there and a box below the game screen with controls. Maybe you could add a window below the game screen with constant links to the world map and inventory and stuff, and maybe even the chatbox, and take them off the main game screen, rearrange things a little, y'know?

If you want help with layout ideas and ways to fill in the blank space and stuff, I'd be happy to help (Although obviously it'd only be in my free time, which is Sunday to Tuesday, lol, and a few hours on Wednesday and Thursday too)

Wyatt, your website looks like shit. Forgive me for being rude.
Seriously, though, it looks like a scam website, as if clicking play will fill my inbox with spam mail or steal my credit card information. You need a graphic designer. It needs to look more legit.

I'm sorry but... what the fuck? I mean, I appreciate the criticism, but I don't understand that at all. Irregardless of the fact I don't even ask for e-mail addresses, what even makes you think that? (I.e. what exactly can I do to fix that?)

I've made a couple of tweaks but I have to work as I'm doing a job for someone so this is just being changed a bit when I have spare time. But anyway;
____________________

Thanks JB - I'll work on some kind of background like that. I get what you mean. Ideally I'd like for the game to be played in it's own window, so wouldn't have a background, and that's what it's really designed for, but that's silly because it's a browser game.. I have a feeling a lot of the problems here are me copying games that I like; the game is essentially an (subconscious or not) amalgamation of Adventure Quest, RuneScape, Guild Wars and VDex. Which is stupid, I know.

I don't mind harsh criticism so long as there's actually something I can work with (which there is) so don't worry. Harsh criticism is best criticism.



Two methods I was going to do but not sure which one:

1. Create little widgets around the game screen creating a HUD, but keeping the game in a fixed screen (i.e. RuneScape-like, sortof, with the inventory on the screen etc)
2. What you said, have these things free floating and make the game dynamic

The second would be confusing and very difficult for me to implement as the whole game would need to be remade... but if it's the best way I'll go down that route. I honestly wouldn't know where to begin though.

polish polish polish

did you know there's a scrollbar in the screen?


also there's this flash of white everytime i do something (ie reload the page)
idk if that's a thing (using chrome, but slow laptop, well not slow but not fast either)

anyway, for sprucing up, i'd indeed suggest to spruce up the homepage, but do it with a bigger idea.
i mean, what are you playing, why are we being drawn in? what the fuck are we doing anyway?
there is nothing of a story to lure me in. I'd put a chunk of story on the main page, and a pretty picture
or even small animation to get started, and then let players choose to follow up to the game.
create a sort of backstory to the game, which you can also incorporate in the design.
(like, this key item (maybe a compass, or a diary), which also doubles as a hud, in which you view the game, in the game window.)
(a diary is actually very cool, you can base the design on random written text touches and characters, and ink splatters)

(also don't use those dark shades of grey)
(and those sprites... you know, it's all about imagination. people imagine being in this world, so the stuff you present them with is what they have to work with.,
if you give them small sprites on the homepage, there's not much luring in happening, which is why battleon has this page full of awesome drawings)
(as long as you don't have awesome drawings, you have to make-do with other creative solutions, like cheap photoshop filters and spruceup)

Also, since this game is pretty text-based, I'd read up on some typography, think of stuff like negative space, and what fonts go with what.
Here's some examples: http://www.typography.com/email/2010_03/index_tw.htm

also check out this: http://littlebigdetails.com/?031ee640 it's a blog about great touches in ui design.

try to get some DESIGN going in there.
i'd do it, but i have some other stuff to finish first. (like Juan's character, for example, and personal stuff, shit is taking wayy to loong)

Those changes you made are really great Tomas, you should definitely do something like that Wyatt

Oh, just checked and you have lol, it looks a lot better just with a background for the text and for the site itself (Although I'd use a different background for the site itself), maybe you could change the font to something... gothic/fantasy or something too?

I have no idea how much experience you have with web, but these comments below are not to insult you just to direct you in your design.

1:



It doesn't seem that your site is on a typical 960 grid, I advise trying to work it in, and fix up with width of the page.

You can find more info here: http://960.gs/

960 Grid is a common layout for the width 960px of a site. I think it would pull out your site and fill in some of the blank areas.

also you can add a shadow using CSS, Photoshop, or Gimp to make the content areas look like they are popping off the page.

2:

The Link bar on your site is lacking in 2 ways.



The first way is the fact that you have the repeating creature that offsets the site by only having 3 visible, I recommend only using one. You can do this using AP divs, I advise using them like this:


The second problem in the Link bar is the lack of realistic lighting: IE the buttons dont look like they are above the bar just on it. So you could add shadow under the buttons. Using CSS or An image editing program like Photoshop or Gimp.

3:



The background lacks in areas IE: it doesnt fit with the rest of the site. Stone wall background, Metal Link bar? Old Paper content fillings, some strange background in the content, and a black footer... as far as matching goes the site doesn't. I suggest trying other backgrounds. You could do a Non-moving vertically repeating background that fades down ... kinda like the mountains parallax in RPG XP, or VX have the background fade into that color, which would even fade into a scenery. Idk but the stone wall either needs to change to match or the rest of the site needs to become stone and old paper.

Here are some examples:
Look at the backgrounds not the content:

http://maplestory.nexon.net/
http://allods.gpotato.com/



And of course as you already know your Content back needs some help.



But this can be fixed 1 of 2 ways, You could get a new background or... Use the existing Content Holder.



Using this same styling technique you could keep the background and fill the content without hurting peoples eyes. Its harder for people esp with bad eye sight like myself to read small white text on a dark background.

In Conclusion:

The site needs work, in the style department, this is keeping in mind the first page only. I think you already know your Play Game Page needs some work, I think you should check out browser based games for ideas on how to display your content, also there is java scripts for getting rid of the scrollbar :).

I hope this helps a little:

PS: Need to work on footer too, black... doesnt match the rest of the site its a solid color... the rest of the site is not. try the metal bar flipped horizontally :)

Also here is a background texture I used for a darker site for a private server company, around 5 years ago, they have gone downhill after they stopped hosting games, and tried to become another Private Server Host Posting Site. Lets just say they dont exist anymore XD site is gone, and I was told I can use my template for whatever. soo here is the background I used:

I feel the hue isn't right. Sorry if I'm not being helpful. I'm not even sure if it's the BG or if it's the color of the web components.

Thanks everyone, this is really useful.

For now the buttons have been tweaked a bit and now have a different image when you hover over them. The intro text has a button beneath it too just to highlight what to do. I have changed the title font on the news posts and changed the spacing. Finally I have changed the font of the #players text and added on the left the number of players, rather than just players online.

So far I've gone from this to this:



Which I think is a vast improvement.

I'll deal with the above later but thanks for the comments.

For now,



On this link bar, I don't understand why it displays like this to you. I get the ^ image in the thumbnail above..

On the game screen itself: I have added a border, I am not sure whether it is cross-browser compatable, I will test it later. This is how it looks to me / should look.



I have also hidden the scrollbar unless it's needed (thanks Tomas).

The white box is a placeholder for a button saying "chat". I was holding out to see if chat was actually used before bothering styling it etc. I'm not entirely sure on it to be honest. I don't know whether to bring chat as a permanent fixture on the screen, sacrificing some screen space.

Edit:

Exampru of fixes!

Ugh browsers :/

Do you use Chrome?

I honestly hate Google for ruining the path towards a universal browser :| I'll try and fix it later, sorry.

Edit: The game's completely gimped in Internet Explorer and has been for some time. I'm going to pretend nobody's tried rather than just not telling me.

This is just something Chrome (and IE) do... and there's unfortunately nothing I can do about it.

For god's sake, why do browsers have to be so complicated?

Actually testing it, I only get the white flashes in Internet Explorer, and not in Chrome. I will look into why, it might be your connection but I don't like that it does that regardless. I can't have a bad game for people on slow connections.

I have made the game Internet Explorer compatible by removing the border when in IE. But as with Chrome, it gets white screens every time the page is changed, rendering the game unplayable really.

I don't know what to say, other than "use Firefox", but that's a shitty thing to say and will put people off my game.

I will embed Webkit in a program and create a client to run the game, for people in awkward browsers.

Hate Google. Hate Microsoft. Jesuchris.

Jason:

What browser are you using? I can't replicate your screen in Internet Explorer, Firefox, or Chrome.

I'd download other browsers and test but that would be futile, since there are so many, I know UWE for example uses Iceweasel.


Homepage

I noticed the homepage is spaced differently in Chrome and Internet Explorer, has borders around images in IE, and is not centred in IE. I will fix this next time I'm editing that file.

Gah.

I get the same screen with both Chrome and Opera (The only ones I use), that picture was taken from Chrome too.

It's a long shot but do you have some kind of plugin to add scrollbars where there are no scrollbars? I'm really at a loss here. The scrollbar is the cause of all the problems but the centering though (that's just my lazy graphicmaking).

The css should be applying

overflow: hidden;

there.

I don't have any plugins on any of my browers, I'm a vanilla chump...

Fixed:

Stone dragon positions, providing background-position is cross browser.

Centering of the homepage and different spacing in Internet Explorer. Removed borders from image links.

Added a new page footer to replace the old black bar.

Removed the pointer-objects from Internet Explorer; this means the border frame is gone but there's nothing I can do about that. Added a disclaimer that I'll fancy up later for Internet Explorer users.



Still to fix:

JBrist. I will fix you good.

White pages between pages for some users/browsers.


Also done

Re-exported several images as 8-bit PNGs instead of their default, which has reduced the file size by 90%.

i like what you did with the footer, not quite high-design but game-esque much, gj

also thought about how you could potentially use html5 for minigames
http://net.tutsplus.com/articles/web-ro ... periments/

I think I might be overdoing the brickwork, I'm not sure; this is a mockup of what I'd like the battle system to look like:



Any immediate thoughts/problems?

That border is way over the top and there's too much of it onscreen there.

Thanks.

Better or worse? (Black space right of items is for a scrollbar)

Better I suppose, but something still looks REALLY off about it... maybe it's just that things aren't aligned properly and such but I'm not really sure.

i'd just do the frame and the horizontal middle line, to define the most important sections
also the top navigation doesn't align properly?

I agree, also that red for the background on the larger screen items is ... painful for my eyes. XDD

The Homepage is lacking a hierarchy of text/information/importance. At a glance, you want to direct the visitors to what is most important. The welcome to Afar statement and New Game buttons should be BIG and the first thing you see. The sidebar links should be a little bigger then the Site updates section for visual balance.

I spent a good hour making a mockup but the program froze before I saved any of it. So I redid it without the graphics in like 5 mins, sorry.


Also, I'm using Google Chrome, and the login screen looked like this.

I should really read posts here before working on the game/site shouldn't I... Will address the above shortly, but for now what I've done is replaced the intro message with a massive button as Coyote suggested, but also made it dynamic:

Registration now happens on the same page. You click "play" and if you're not logged in, it prompts you to enter a username and password to create a new account.

This has been tested in IE, Firefox, and Chrome, and works for me the same in all three. Had a bit of a caffuffle with input type="image" not working outside of Chrome, but have replaced that with a styled "submit" so that's fine.

This is animated with jquery.

I think it looks much nicer, anyway.