DeadWater Productions

[LumberWarrior]

Hello everyone! I am The LumberWarrior and I was hoping I could get some feedback on a site I made.

http://www.deadwaterproductions.com/

How can I improve the look without messing up how it is laid out? Tell me anything that might make it look better!

Thank you!

 

[High Hopes]

I'd recommend darkening the background image a bit so it blends with the background color. Also, the text boxes seem a little small.

 

[mawk]

the white text is practically invisible against the waves and sea.

 

[LumberWarrior]

I'd recommend darkening the background image a bit so it blends with the background color. Also, the text boxes seem a little small.

Do you mean the background for the text? If so could you give me an example of what it should be.

 

[dadevvtsvre]

The site's logo isn't very prominent. Try making it stand out a little more.

 

[Ellie]

I'm really sorry but I can't read "DeadWater Productions" without immediately thinking of BackWater Productions and Onidius Mad Hatter :x

Anyway yeah the logo at the top is absolutely IMPOSSIBLE to see. I can make out the letters ADW and that's it. I know that's probs the effect you're going for but it's not a good one.

Other than that I'd say change the settings for your scrollbars to "auto" (I think that's what I mean), so that they only show up when they need to rather than always being there. At the moment it looks odd to have a horizontal scrollbar when none of the pages require one. I haven't used iFrames in a while but used to all the time, there is deffo a way of removing the scrollbar until it's needed, just can't remember it at the moment.


Finally, a tad of a moot point but the size of your site makes it seem aimed at a x768 resolution - since that's a common resolution. However, it's slightly too large so scrolls vertically by about 20px; this strikes me as odd as anyone with a smaller/larger resolution won't notice it but anyone with a x768 resolution will. Personally, perhaps out of OCD, I'd make it fit one resolution perfectly if you're going to have a set size, that way it will appear reasonably normal to anyone.

 

[megatronx]

I'll be honest : your site not only looks terrible, but its code is terribly written too.

 

[LumberWarrior]

I'll be honest : your site not only looks terrible, but its code is terribly written too.

Thank you for the constitutive criticism :thumb:

 

[Alexander Morou]

I'll be honest, I don't like it.

First, your website is called Dead Water Productions. Your 'logo' is semi-still waters, but the background is a huge wave, the two together are counter-intuitive. The forums header has the same combination, but the background image of the header has a horrible filter applied to it, making a bad combo, worse.

You could have easily cropped your background, were you to keep using it, in smaller dimensions, the fade you use could easily align itself better with the buttons/links. The border of the background image could be aligned with the content area, as to bring the copyright information up higher and support below 1200x1024 resolutions.

Try to be a bit more imaginative with your logo, while I realize the best logos are very simple, to the point where their silhouette is recognizable, if you're going to have such low contrast between your logo and background, you'll need to add some sort of outline on the characters to make them legible.

If your links/buttons are going to be simple links, why have them consume so much design space? That space would be much more suited to content; given the few number of options you could easily have them juxtaposed side by side, with space in-between them, at the top; perhaps at the bottom as well.

 

[Drago del Fato]

Well Alex, you obviously don't know much about free artistic design? Truth to be told - his site is OK. And that counter-intuitive stuff about a website ? :blank:
There is something called free artistic design and it DOES NOT have to suit the NAME. Yes. His site needs to have at least something to do with water in the design - but it does not need to be strict. ^^

Ok my advice now:

You know this part?

<div style="overflow: scroll; height: 315px; width: 450px;">

Change it to:

<div style="overflow: auto; height: 315px; width: 450px;">

Change it from scroll to auto like whynot said. You will lose the scrollbar below and make site look much more appealing, also try thinking about making on Hover CSS for the links, they will look much better that way. And for the name - try putting a blue glow around it - since only black - BIIIG NO.

People who come to your site not only need to like your design but to read it as well. I'm not saying it's not readable, I'm saying you need make it a tad bit brighter.

 

[LumberWarrior]

@Alexander Morou: Thank you for your criticism. That is the kind I need, because you explain what you dislike.

"Try to be a bit more imaginative with your logo" It isn't my logo, I made the site for Fox5 and that is the logo he made.

"If your links/buttons are going to be simple links, why have them consume so much design space?" It is suppose to go along with the wave, but I might make them smaller so I can make the text area bigger.

@Drago del Fato: "Change it from scroll to auto like whynot said." Done.

"try thinking about making on Hover CSS for the links" Will do.

"try putting a blue glow around it" I tried that, but being that the site is blue it didn't help all that much so instead I put a while glow on it.

"People who come to your site not only need to like your design but to read it as well." I made the content box darker, and less opacity. Any better?

Thank you for the suggestions!

*Update*
I added a Hover for the links, and I cleaned the code up! What else should I do for the site?

 

[Glitchfinder]

What else should I do for the site?

First off, make sure the links open in the same page. In most cases, that's what websites do, so that's what people expect. If they want to open the link in a new page, they will usually right click it and choose "open in new page" or "open in new tab".

Next, I really do advise killing the wave effect for those buttons. Just design a simple horizontal or vertical cms, and give more space to the writing itself. In fact, with buttons like that, I advise turning the buttons themselves into links, and giving them hover effects, instead of just doing that to the text.

Actually, I'll do that for you:

<div class="css" id="{CB}" style="font-family: monospace;"><ol>html,body,ul,li,h1,h2,h3,h4 {

list-style<span style="color: #3333ff;">:none;

margin<span style="color: #3333ff;">:<span style="color: #933;">0;

padding<span style="color: #3333ff;">:<span style="color: #933;">0

}

 

a {

color:<span style="color: #cc00cc;">#fff

}

 

<span style="color: #6666ff;">.clear {

clear<span style="color: #3333ff;">:both

}

 

<span style="color: #cc00cc;">#wrapper {

text-align<span style="color: #3333ff;">:left;

width<span style="color: #3333ff;">:<span style="color: #933;">800px

}

 

body {

background:<span style="color: #cc00cc;">#<span style="color: #933;">000922 <span style="color: #993333;">url(<span style="color: #933;">[url=http://www]http://www[/url]<span style="color: #6666ff;">.deadwaterproductions<span style="color: #6666ff;">.com/images/background<span style="color: #6666ff;">.png) <span style="color: #993333;">no-repeat;

background-position<span style="color: #3333ff;">:top <span style="color: #993333;">center;

color:<span style="color: #cc00cc;">#fff;

font-family<span style="color: #3333ff;">:Arial, Helvetica, <span style="color: #993333;">sans-serif;

font-size<span style="color: #3333ff;">:<span style="color: #933;">12px;

margin<span style="color: #3333ff;">:<span style="color: #933;">0;

padding<span style="color: #3333ff;">:<span style="color: #933;">0

}

 

<span style="color: #cc00cc;">#body-right {

background<span style="color: #3333ff;">:url([url=http://www]http://www[/url]<span style="color: #6666ff;">.deadwaterproductions<span style="color: #6666ff;">.com/images/body<span style="color: #6666ff;">.png)<span style="color: #993333;">no-repeat;

float<span style="color: #3333ff;">:right;

margin-right<span style="color: #3333ff;">:<span style="color: #933;">15px;

padding<span style="color: #3333ff;">:<span style="color: #933;">10px <span style="color: #933;">15px <span style="color: #933;">0 <span style="color: #933;">15px;

height<span style="color: #3333ff;">:<span style="color: #933;">370px;

width<span style="color: #3333ff;">:<span style="color: #933;">480px

}

 

h1 {

font-weight<span style="color: #3333ff;">:<span style="color: #933;">400;

height<span style="color: #3333ff;">:<span style="color: #933;">274px;

margin-top<span style="color: #3333ff;">:<span style="color: #933;">50px

}

 

h2 {

color:<span style="color: #cc00cc;">#FFF;

font<span style="color: #3333ff;">:<span style="color: #933;">24px verdana, <span style="color: #993333;">sans-serif;

}

 

<span style="color: #cc00cc;">#nav {

margin<span style="color: #3333ff;">:-<span style="color: #933;">155px <span style="color: #933;">0px -<span style="color: #933;">300px

}

 

<span style="color: #cc00cc;">#nav li<span style="color: #cc00cc;">#m3 {

margin-left<span style="color: #3333ff;">:<span style="color: #933;">30px

}

 

<span style="color: #cc00cc;">#nav li<span style="color: #cc00cc;">#m2,<span style="color: #cc00cc;">#nav li<span style="color: #cc00cc;">#m4 {

margin-left<span style="color: #3333ff;">:<span style="color: #933;">60px

}

 

<span style="color: #cc00cc;">#nav li<span style="color: #cc00cc;">#m1,<span style="color: #cc00cc;">#nav li<span style="color: #cc00cc;">#m5 {

margin-left<span style="color: #3333ff;">:<span style="color: #933;">90px

}

 

<span style="color: #cc00cc;">#nav li a {

padding<span style="color: #3333ff;">:<span style="color: #933;">7px <span style="color: #933;">0px <span style="color: #933;">0px <span style="color: #933;">15px;

background<span style="color: #3333ff;">:url([url=http://www]http://www[/url]<span style="color: #6666ff;">.deadwaterproductions<span style="color: #6666ff;">.com/images/nav<span style="color: #6666ff;">.png) <span style="color: #993333;">no-repeat;

 

color:<span style="color: #cc00cc;">#fff;

display: <span style="color: #993333;">block;

text-decoration<span style="color: #3333ff;">:none;

width<span style="color: #3333ff;">:<span style="color: #933;">100%;

height<span style="color: #3333ff;">:<span style="color: #933;">100%;

margin-bottom<span style="color: #3333ff;">:<span style="color: #933;">15px;

}

 

html>body <span style="color: #cc00cc;">#nav li a {

width<span style="color: #3333ff;">:<span style="color: #933;">150px;height<span style="color: #3333ff;">:<span style="color: #933;">30px;

}

<span style="color: #cc00cc;">#nav li a<span style="color: #3333ff;">:hover{

background<span style="color: #3333ff;">:url([url=http://img]http://img[/url]<span style="color: #6666ff;">.photobucket<span style="color: #6666ff;">.com/albums/v652/glitchfinder/nav2<span style="color: #6666ff;">.png) <span style="color: #993333;">no-repeat;}

 

<span style="color: #cc00cc;">#footer {

color:<span style="color: #cc00cc;">#fff;

font-size<span style="color: #3333ff;">:<span style="color: #933;">11px;

padding<span style="color: #3333ff;">:<span style="color: #933;">10px;

text-align<span style="color: #3333ff;">:center

}

 

<span style="color: #6666ff;">.spacer {

height<span style="color: #3333ff;">:<span style="color: #933;">18px

}

I advise using a lighter copy of the same button image for the highlight, as the current URL is to a test image I have already deleted from my Photobucket account. I would also advise pre-loading the hover image, so that the viewer doesn't experience a short lag time while waiting for the image to load the first time they hover over the link.

I still didn't reorganize the links, as I feel you should be the one to do that.

 

[Xaixis]

I honestly dont think its that bad. I would advise making the NAV in a straight linear fashion so the context box can be wider (maybe make it taller too).

But other then that I think it looks pretty decent. I really like how it feels low-profileish.