Topic: Rough Design

[Canuck]

Hi,

I started working on a personal site, so I can upload some of my school projects, and put the website on my resume.

I worked on it a bit yesterday and today and came up with this.

http://www.freewebs.com/jkranjce/web.html

I have quite a few images my brother took during our summer vacation, so I wanted to use a different image for every page. (I could keep one image for every page, but I thought it would be nice to use a few images) The hover colour (navigation) on every page would be different depending on the predominant colours of the image.  I tried many variations for the hovering including an opaque image on the nav bar (currently it is at 50% opacity), filling the lines below and above the dotted lines with different colours, just couldnt get anything to look good.

I didnt want to change the colour of the background on every page, so I want to find something neutral, maybe a beige?  I currently have a green pastel colour.

Im not too concerned about the content right now, still have to adjust the padding, font etc.

For the footer, I wanted to make it similar to the nav bar, maybe round the corners on it?  I dont want to keep it white, (remove the borders on the side/bottom and have it the same colour as the background?)

Just wanted to get some opinions/suggestions on it before I spent more time on the design.

Thanks

[hans]

I like it overall. My only gripe is the negative menu. The background is distracting to me, makes the text a little harder to read. Perhaps just make it look like negatives (just solid color).

[Jake]

I like it as well right now - altough it is hard to really judge based on only one page.

hover colour (navigation) on every page would be different depending on the predominant colours of the image. and othe color related questions...

The main rule of good design is consistency - but you already know that. As for colors, I try to keep to the rule of having three colors only. Primary, secondary, and highlight.

The secondary color should be used to reinforce the primary color and should be tonally close to it. The highlight color should be contrasting the primary and secondary colors.

Its always a good idea to look at a color wheel - its amazing how much it helps. This is a pretty cool color scheme generator.

edit:: woops, just noticed there is a link to that generator in the resource page

[ober]

Looks pretty good, but I'm not crazy about the image under the footer.  You need something sharper or different.  Right now it looks like a really crappy photo.  I'd also consider finding a different background color... something that contrasts better with the header image.

Short of those few things, I think it looks really good!

[Canuck]

Thanks for the comments, Ill continue to work on it, and keep you updated!

[Hillbillie]

I really like it, Canuck. Maybe make the stylesheet a reference instead of embedded into the markup, but otherwise the look, layout, everything... I like it.

Oh, regarding the validation links at the bottom... there are a few widely-used firewalls and proxies out there that silence the referrer header, effectively breaking your validation links for some users. If you'll be using some sort of CGI language with your site, I'd recommend specifically putting the current page in as the URI argument for the validator, i.e. "http://validator.w3.org/check?uri=[use CGI language to put current page URI here]". Just a thought.

[ober]

It wouldn't have to be done with CGI either... you could do it with PHP or something as well (just wanted to clarify since PHP isn't CGI, although Perl probably would be in most cases).

[Hillbillie]

Yeah, that's what I meant. I often (incorrectly) use CGI to mean any sort of server-side scripting.

[Canuck]

Update

I made quite a few changes.  I decided to go with one image on the top of the site for every page.  I also decided to go with another image, and pulled out a shade of red, green and yellow as the main colours for my site.

The navigation and footer are now a solid colour.  I tired a shaded background from red to yellow and red to white, but it seemed too boring, so I made one which is just horizontal stripes of red and yellow.

I didnt upload all of the content, but the links and web development links are completed.

Comments?

http://www.freewebs.com/jkranjce/version2/web.html

Thanks

[groovitude]

I really like this; the picture on top is fantastic, for the record.

My only suggestion is to make the background a little less distracting.  Either take down the brightness or take out the stripes, I think -- it looks great, but it's distracting when you're trying to read.

Other than that, it looks wonderful!  Keep up the great work, sire.

[Jake]

I personally liked the old pic better. Maybe you can have an option of choosing the way the page looks? basically just by changing the main picture and the color of the background.

I agree with groovy, the side background is way to bright and distracting. Also, as I scroll on the page the colors on it flicker to a red.

[ober]

I like the new pic, but I'm really not crazy about the menu/background color.  And the lines are very distracting.  Remember, your background should not be a focal point... it should blend into the design.

[Canuck]

Thanks again for the comments, I changed the background to a light green, which I think goes okay with the rest of the page, and made the navigation bar and the footer a brighter yellow, makes it stand out more.

How does it look now?

[Perspective]

The green is a lot nicer.

[ober]

I like the green better, but it might look better as a gradient or something more splashy than a simple color.  (dark green to light green vertically for the gradient or vice versa)