Sijun Forums :: View topic - Site Design

Doc · Posted: Fri Feb 21, 2003 9:32 am

Hey guys. This is a layout/design I'm making for a site called "Game Drone". I think it looks okay right now, but I'm not sure what's wrong with it. It's simple and sleek, perhaps there's too much gray? The buttons don't fascinate me too much either - is it the color? What should I do with the buttons... make them blue/make them just a flat solid color with no 3D looks?

Gort · Posted: Fri Feb 21, 2003 9:58 am

Just my two cents...

Hmmm...my first thought about the buttons is that they don't stand out enough; the bevel is a good direction, but the fact that they're the same color as the content area background lends itself to them being overlooked during "eye scanning"; they were actually the last thing I saw when I scanned the pageview - not good. Consider a value that stands out; remember that your navset is the most important catalyst for content delivery.

Also consider making your indentity stand out a bit; that swoosh back there seems distracting.

The overall layout looks good, but I would consider a more even spaced set of margins in the overall columnation of the view. That's minor, though, as some designers take liberties with rules. I am just personally a strict "grid systems" junkie.

Overall I like what you're doing and definetly want to see the finished site - great work so far!
_________________
- Tom Carter

"You can't stop the waves but you can learn to surf" - Jack Kornfield

Doc · Posted: Fri Feb 21, 2003 11:22 am

Wow thanks for the great comments! Very Happy

Okay... I made the buttons blue, made the button text black, put a light outer stroke on teh buttons, and made the button drop shadow bigger. Maybe this will make them stand out a little bit more.

I added another "swoosh" shape to the header and both swooshes have less opacity now so they don't divert too much of the "identity" or logo.

What do you mean by a "more even spaced set of margins"? I'm using guidelines...

Do you have any other suggestions on stuff to add? Because it doesn't feel complete to me yet.

Edit: Whoops, forgot to attach the image.

Ctrl+Z · Posted: Fri Feb 21, 2003 11:51 am

i like it but the thing i kep running into is that my eyes are pulled up to the header. no matter where i look they look back up there. i think the buttons and other parts need to stamd out just a bit more. do you have to keep the site a mono tone style.
_________________
Ctrl+Z production peace, love, happiness and freedom

Doc · Posted: Fri Feb 21, 2003 12:29 pm

Nope, I don't have to keep it monochrome... but I don't know a third color that goes with navy blue and the various shades of gray I've used. If you do, then please tell me - I'm horrible with the colorwheel.

Gort · Posted: Fri Feb 21, 2003 1:14 pm

Alright Doc - I hope you don't mind me wranglin' with your work:

What I meant by margins was an even spaced set of margins between your columns; you have three columnated panel sets, with the outer two having a greater margin than the inner areas (you actually have four columns - the far righthand should technically be taken into consideration, but I'll pass on it).

What I did was just revise it to better illustrate my point of even margins between the columns. I've also emailed you a copy of the jgp with the guides set.

For a more concise understanding of what I mean by all this, look into
Josef Mueller Brockman's Grid Systems for Design

Smile

_________________
- Tom Carter

"You can't stop the waves but you can learn to surf" - Jack Kornfield

Capt. Fred · Posted: Fri Feb 21, 2003 1:24 pm

Simple way to 'draw the eye' is to boost the contrast. Make the buttons darker make the text lighter or vice versa - brighter buttons, darker text.

At the moment, the largest contrast is with the overall page and then a dark blue grey side-bar area nad line along the bottom. Try changing that to reduce contrast on a presumably less significant part of th site layout in terms of content. Some of the effects you've put on the buttons to kame them stnad out I would remove. Keep them cleaner. Boost them out by making them brighter and darker/ playing with contrast.

i think I'ts looking cool but you need to change the sort of visual priority to match the content that's going in...

[shrug] That's just what I reckon...

Doc · Posted: Fri Feb 21, 2003 5:36 pm

Gort - thanks for the help! I didn't get the email though, [email protected] is my old and invalid email - new one is [email protected].

Capt. Fred - Nice analysis of the design. Seems somewhat challenging to achieve a good contrast balance... but I guess I could try working on it tomorrow or later tonight and I'll post another image for you guys when I do.

My latest opinion - the header is too bright... it hurts my eyes. But then again, I try to darken it and the whole design seems to look worse.

Doc · Posted: Sat Feb 22, 2003 7:22 am

Update

1. Made the stars on the content tables smaller (thanks Gort).
2. Spaced out the buttons so the navigation span is the entire horiztontal navigation bar.
3. Added a robot.
4. Moved the header text to the right a little bit.
5. Added content to the content tables to get a better feel.
6. Removed the drop shadow on the content tables (thanks Gort).
7. Made the copyright text in the bottom left larger.

Doc · Posted: Sat Feb 22, 2003 7:30 am

I just realized that Gort used white for the content and I think that looks a little better. I don't know what the difference is - you can tell that the content I put on is done it photoshop but Gort's looks like it's real HTML... oh well, maybe you can tell me how you made it look like it's real HTML content and not part of the image. Here is my latest version but with white content text:

Doc · Posted: Sun Feb 23, 2003 11:52 am

Thee Phunk of Kale · junior member Member # Joined: 07 Jan 2002 Posts: 21

What's going to go in the right-most column? With all the content in the other columns, it seems so empty and bare, and sorta makes your UI heavy on the left. Also, looks as though something should go up above the right-most column... perhaps a faint echo of one of the "swooshes"?

Personally, I feel that if you have one part of the UI in 3d, it's all gotta be 3d, else you confuse the eyes... with the buttons and the logo in 3d, but not the columns, I tend to view the columns as less important, even though they contain all of the content. I think you should either re-add the drop shadows to the colums or remove all the 3d (at least from the buttons). Speaking of the buttons, I think the margin between the buttons and the edge of the table should be the same as the margin between the buttons. Just to help it feel a little less cramped.

I like the robot... very nice.

As for the colors, I like them... but only if this is a serious site. The robot kinda suggests otherwise; if it's going to be humour-based or somewhat whimsical, I feel there should be a bit more color, a little splash of brightness here and there. It's drab right now, which looks fine for a somber, serious, news-oriented site. If you're going to add color, do it to the stars... play around with your palette for a good tone.

That's my two cents... take it all with a grain of salt ;) I like this UI, though. Very clean, very nice.

Doc · Posted: Fri Feb 28, 2003 2:40 pm

Ok Phunk, thanks - excellent advice. I've taken your ideas as well as some of my friends' ideas and here's what I've come up with:

Giant Hamster · member Member # Joined: 22 Oct 1999 Posts: 1782

Doc: Looking from the top one, scrolling down, and seeing the last one - You've taken Leaps and bounds, my friend. =)

It's turning out to look very good!

Doc · Posted: Fri Feb 28, 2003 10:55 pm

Thanks! Yeah, I noticed that too... you guys here are great at critiquing, thanks everyone!

Do you guys think I should keep the buttons 2D (like the in the most recent image I posted) or make them 3D like they were in every other image?

tmapm · junior member Member # Joined: 01 Mar 2003 Posts: 9

Well, if you wanted to make them 3D you should do so and the use the current buttons as mouseovers. Personally, I would stick with the 2D buttons and it looks better and reverse the text color and background color (text becomes blue, background becomes black) for a mouseover if any. Looks good, you have really improved since you initially started. The only thing I would like to point out is that your content text doesn't look all that nice. It is too round and bunched up. I like to use Verdana at size 7.5 - 8pt.

Doc · Posted: Sat Mar 15, 2003 7:06 am

Bump.

william · junior member Member # Joined: 21 Jan 2003 Posts: 26

maybe it's just me...but i notice the top banner and right side is kinda 'techy' and stuff...but when i move my eyes into the grey content area, it seems to be incomplete. It might be the grey background...maybe you can add a very light abstract shape in the back or something to even out the site...dunno haha

B0b · Posted: Mon Mar 17, 2003 4:52 am

looks kewl, i think the text could do with moving away from the borders slightly - try putting some extra cell padding on..

acidcrys · member Member # Joined: 01 Feb 2003 Posts: 53 Location: Fl

i would suggest relocating the buttons - ::points to left side of the layout::
_________________
Help me grow.