Web Design Forums

ZackB · 14-02-2007, 04:01

Hey i am new to the css design and photoshop. I'm starting a site to play music for my friends, nothing major yet, but i am working on it. =]

Basically Wimpy player with mysql/php here and there.

Please give some feedback, keep in mind I am new to css.

Mr Fred · 14-02-2007, 04:29

like the background.

djeglin · 14-02-2007, 04:39

Personally I think you need a little bit more consistency in your design. You've gone for that shiny "web 2.0" thing that everyone seems to love (or hate) at the moment with your logo, but you're using a serif font as your main typeface. This is a little bit weird to me... But if you like it, then cool.

For me, I would drop the "beta" thing... Its become too fashionable to use this moniker now for the web application thing, and its getting a bit old.

Now on to some important stuff... Keep it simple. On the whole, if you want to use a texture or pattern, keep it to one. Don't plaster every area you can with different patterns... It looks better if you maybe have one and keep everything else a little more plain and simple.

Keep your colours tight - At the moment you have the blacks and greys, as well as blue and the orangy/yellow colour. I tend to limit my colour pallette as much as possible. One highlight colour and different shades thereof, rather than using more colours, really makes a site look professional.

The grey areas for your content look a little out of place to me... I dont know why... Maybe they are too light? I would have a play around with them and find something more visually pleasing.

You're using a lot of nested divs in places... You shouldn't really have to do this so much if you play around with css. Bare in mind that divs aren't the only elements you can apply classes to, and that you can style elements by their hierarchy, too (ie you can say: #header #navigation li to target the list items in an unordered list which is id'd "navigation", which is contained in the header section.)

In your CSS you have this entry:

Code:

div.sidebar ul li a,visited

the comma should be a colon (

Inheritance is your friend. It seems that you are defining everything for you page elements... The text styles are specifying the font when you dont need to. Just set the style of the body tag to have the font set to whatever you want your default to be, and only have to change it where necessary.

The "!Important" tag is not a good practise to get into using if you can avoid it (which I think you can). IE6 ignores these tags, and there are still a large number of users. There's usually another way.

I think thats about it. Now, please dont take this the wrong way... I'm not slating your creation - Its really not that bad, and a lot of people come out with much worse! This post is an effort to help you as much as I can. I hope it helps you in some way.

Cheers,

David

BenSky · 14-02-2007, 05:32

I aggree mostly what David has said, especially about the pattern, you are mixing styles aswell; the title bar which is very much web2.0 and then you have the background which is going down a more retro route.
My main suggestion to you would be to bring that pattern and enlarge it for the top bar, brighten the colour up to a lighter grey even maybe a pale green/grey. Then loose the web2.0 style logo and just put a simple close drop shadow on it and that would look really neat.

Its nice to see someone getting stuck into CSS when learning the web as opposed to the often easier tables.

ZackB · 14-02-2007, 07:58

Quote:

like the background.

Simple design. =]

Quote:

For me, I would drop the "beta" thing... Its become too fashionable to use this moniker now for the web application thing, and its getting a bit old.

I would agree, i was going for web 2.0 but i think I want a more sleek simple/subtle web design.

Quote:

I think thats about it. Now, please dont take this the wrong way... I'm not slating your creation - Its really not that bad, and a lot of people come out with much worse! This post is an effort to help you as much as I can. I hope it helps you in some way.

I took basic css in school, i was the best designer in there

. It's all good mate, I wanted an honest opinion.

Quote:

Its nice to see someone getting stuck into CSS when learning the web as opposed to the often easier tables.

Yea, tables suck

I did get sidetracked and started making a new site. here is what i have....

http://www.zackb.com/music/test

Take a look

Paul · 14-02-2007, 08:19

change you background images to gif or use the .png hack for IE cause it don't look right in IE6

BenSky · 14-02-2007, 10:04

Quote:

Originally Posted by ZackB

I did get sidetracked and started making a new site. here is what i have....

http://www.zackb.com/music/test

Take a look

Those illustrations on top and bottom are gorgeous.

14-02-2007, 04:01	#1 (permalink)
ZackB Registered User Join Date: Feb 2007 Posts: 19	Hey Hey i am new to the css design and photoshop. I'm starting a site to play music for my friends, nothing major yet, but i am working on it. =] Basically Wimpy player with mysql/php here and there. Please give some feedback, keep in mind I am new to css.

14-02-2007, 04:39	#3 (permalink)
djeglin goober :-) Join Date: Dec 2006 Location: Birmingham, UK Posts: 521	Personally I think you need a little bit more consistency in your design. You've gone for that shiny "web 2.0" thing that everyone seems to love (or hate) at the moment with your logo, but you're using a serif font as your main typeface. This is a little bit weird to me... But if you like it, then cool. For me, I would drop the "beta" thing... Its become too fashionable to use this moniker now for the web application thing, and its getting a bit old. Now on to some important stuff... Keep it simple. On the whole, if you want to use a texture or pattern, keep it to one. Don't plaster every area you can with different patterns... It looks better if you maybe have one and keep everything else a little more plain and simple. Keep your colours tight - At the moment you have the blacks and greys, as well as blue and the orangy/yellow colour. I tend to limit my colour pallette as much as possible. One highlight colour and different shades thereof, rather than using more colours, really makes a site look professional. The grey areas for your content look a little out of place to me... I dont know why... Maybe they are too light? I would have a play around with them and find something more visually pleasing. You're using a lot of nested divs in places... You shouldn't really have to do this so much if you play around with css. Bare in mind that divs aren't the only elements you can apply classes to, and that you can style elements by their hierarchy, too (ie you can say: #header #navigation li to target the list items in an unordered list which is id'd "navigation", which is contained in the header section.) In your CSS you have this entry: Code: div.sidebar ul li a,visited the comma should be a colon ( Inheritance is your friend. It seems that you are defining everything for you page elements... The text styles are specifying the font when you dont need to. Just set the style of the body tag to have the font set to whatever you want your default to be, and only have to change it where necessary. The "!Important" tag is not a good practise to get into using if you can avoid it (which I think you can). IE6 ignores these tags, and there are still a large number of users. There's usually another way. I think thats about it. Now, please dont take this the wrong way... I'm not slating your creation - Its really not that bad, and a lot of people come out with much worse! This post is an effort to help you as much as I can. I hope it helps you in some way. Cheers, David

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

14-02-2007, 04:29	#2 (permalink)
Mr Fred Magazines™ Join Date: Mar 2003 Location: Glasgow.. Posts: 11,327	like the background.

14-02-2007, 05:32	#4 (permalink)
BenSky Registered User Join Date: Sep 2006 Location: Leeds Posts: 97	I aggree mostly what David has said, especially about the pattern, you are mixing styles aswell; the title bar which is very much web2.0 and then you have the background which is going down a more retro route. My main suggestion to you would be to bring that pattern and enlarge it for the top bar, brighten the colour up to a lighter grey even maybe a pale green/grey. Then loose the web2.0 style logo and just put a simple close drop shadow on it and that would look really neat. Its nice to see someone getting stuck into CSS when learning the web as opposed to the often easier tables.

14-02-2007, 08:19	#6 (permalink)
Paul Junkie[scum] Join Date: Oct 2006 Location: location, location Posts: 1,691	change you background images to gif or use the .png hack for IE cause it don't look right in IE6

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)