My Website Design - Any Good? [UPDATED DESIGN]

[Calum Veteran]

24/12/08 - I have updated the design yet again (still may not be good) after all of your helpful comments, but thought it would be best not to start a new thread. Please see this post further in the thread: Information on my updated design.

Original post (22/11/08):

I've only recently started learning the web design languages in my second year of university and have created a small website (as we have to create a whole forum from scratch by February :| lol).

Please let me know what you think of my whole design :) The colours, images, navigation, layout of content div, etc. Eventually I am thinking I would like to somehow add images to the border to make that a bit better, but other than that, I would really appreciate anybody's comments. Negative or positive... be as harsh as you like ;)

Link: http://homepages.shu.ac.uk/~cjricha2/contact.php

Edited December 24, 2008 by cJr.

[Kudos Veteran]

Too many effects and where they are used, you have overused them completely. Red and blue in a gradient like that is pretty ugly. Overall too red.

[Andrew Lyle Global Moderator]

wow, the loading was bad for me.. too many high quality images, and I got to agree with Kudos, the overall look of the site just looks... :x

[sundayx Veteran]

All of the above.

[Argote]

I'm sorry man but I have to agree with both of them. The slow loading is due to the webserver i think.

[endtype]

the middle box needs to be filled up and the outside needs to be a solid color and separate from the inner box

[sundayx Veteran]

I'm sorry man but I have to agree with both of them. The slow loading is due to the webserver i think.

Not really, his images are no way optimized.

[Stetson]

I would say this: subtlety is a good thing. I would try fewer gradients with colors that weren't so clashing. Maybe start out with just solid colors and then add slight gradients to them, but not "look at me!" or "I'm 3D!" gradients, if that makes any sense.

[joker999]

All of the above.

+1

edit: you should go http://www.designmeltdown.com/ and have a look and learn these site style.

[sweetsam]

That color combo hurts my eyes.

[Antraxek]

I like the design :) But you must code it better, site isn't that great in opera.

[Axel]

The layout's okay, but the colour scheme violates my vision just a tad!

[deactivated01032015]

Do a complete redesign. Layout is good, although you could do better with coding. Also validate your code using HTML and CSS validators

[Calum Veteran]

Thank you very much, all of you, for your honest opinions :) I completely forgot to validate it all before showing it to you, but that will be easy for me to do.

I will take all of your suggestions into account and will definitely improve upon it before I hand the forum in next year. Obviously the red is a bad idea :p so I will get rid of that completely. How many of you reckon I should keep the dark blue colour? Maybe add a slightly lighter blue in place of where all the red is? Or even add some white into the website and make the current blue much lighter?

I will definitely consider a whole new layout as well, although most people don't seem to mind that, it just seems to be the amount of effects on images and the over-use of red. Am I right?

Finally, I will need to code it so it works perfectly in all browsers. Currently I have only tested it in Firefox - bad idea :D

Thank you once again for all your opinions :) Keep them coming please in reply to this post. It's best to get all your opinions as you have more experience. I am just a beginner :)

P.S.

Not really, his images are no way optimized.

Thanks for letting me know. How do I optimise them? I'm very new to using Photoshop (you can probably tell :/ lol) and have not looked at any tutorials - just messed around myself. Is there a certain way I can optimise them? I've saved them all as .PNGs.

Thanks again :)

[XerXis]

no, don't like it, sorry. The colors are way out of my taste and your site shows up funky on a wide range of browsers

[sundayx Veteran]

Thanks for letting me know. How do I optimise them? I'm very new to using Photoshop (you can probably tell :/ lol) and have not looked at any tutorials - just messed around myself. Is there a certain way I can optimise them? I've saved them all as .PNGs.

Use JPG and compress them, find a balance between image quality and rate of compression. Use "Save as web", select image type to be JPG and just slide the compression to find the best image quality for smaller the size.

[Calum Veteran]

no, don't like it, sorry. The colors are way out of my taste and your site shows up funky on a wide range of browsers

I agree now, the red is a mistake lol and maybe even the darkness of the blue. I may try some lighter colours? I've just checked it in Firefox, Opera, Safari and Internet Explorer. It works perfectly in Safari and Firefox and the only thing wrong with it in Opera and Internet Explorer is the "Back to Top" link at the bottom which I'm pretty sure I can sort out after looking at the W3C Markup Validation Service :) How else does it look funcky in a range of browsers?

Use JPG and compress them, find a balance between image quality and rate of compression. Use "Save as web", select image type to be JPG and just slide the compression to find the best image quality for smaller the size.

Thank you. I will do that when I edit all the images :) I was under the impression PNG was the most efficient format, but obviously not.

[deactivated01032015]

Use kuler or similar sites to determine a good color scheme for your site with matching colors.

[XerXis]

I agree now, the red is a mistake lol and maybe even the darkness of the blue. I may try some lighter colours? I've just checked it in Firefox, Opera, Safari and Internet Explorer. It works perfectly in Safari and Firefox and the only thing wrong with it in Opera and Internet Explorer is the "Back to Top" link at the bottom which I'm pretty sure I can sort out after looking at the W3C Markup Validation Service :) How else does it look funcky in a range of browsers?

Thank you. I will do that when I edit all the images :) I was under the impression PNG was the most efficient format, but obviously not.

depends: if you want to save photos defenitely use jpeg. For all the rest, use PNG. Photoshop saves png relatively well, but to be sure you can use pngcrush or optipng to make them smaller

edit: just looked at your site in firefox, i thought it wasn't meant to be entirely red with some blue rectangles, that's why I said it looked funky.

[Calum Veteran]

+1

edit: you should go http://www.designmeltdown.com/ and have a look and learn these site style.

Use kuler or similar sites to determine a good color scheme for your site with matching colors.

Thank you very much for both of those sites. They look very helpful so I will use them both to help decide my new colour scheme :)

[Calum Veteran]

depends: if you want to save photos defenitely use jpeg. For all the rest, use PNG. Photoshop saves png relatively well, but to be sure you can use pngcrush or optipng to make them smaller

edit: just looked at your site in firefox, i thought it wasn't meant to be entirely red with some blue rectangles, that's why I said it looked funky.

Thank you for the tip, I will remember that.

And yeah, it's pretty bad that you thought my site looked 'funky' when it was working how it was supposed to, so maybe I do need to sort out the layout :D

[primexx]

Thank you. I will do that when I edit all the images :) I was under the impression PNG was the most efficient format, but obviously not.

nobody uses JPG anymore (except for real pictures). Use PNG and optimize the images.

I got these tools from some other forum a long time ago, recently revised it with information from yet another forum:

It was originally just the contents of Command.txt in a forum post, I copied that (NOT my work), downloaded all the exes into a folder, and wrote the bat script.

Read Commands.txt to get a brief explanation of it. There's a lot more details on the website of each tool.

The first half of the text file I put into the bat verbatim. The second half with pngout you only really need to run /f0 or /f5 depending on the image, but in the bat I just made it run all five filters, modify it to your need or run the commands manually.

Don't run pngout if it's a large image, it'll take forever. If you're running the bat you'll be able to terminate it after running the first half (close it when it pauses).

If you're obsessive with updates you might want to download the latest versions of all the exes, they probably haven't been updated since the package I attached though.

[Calum Veteran]

Thank you Primexx :) When I finally come to finish my forum and website design, I will optimise all my images properly.

However, firstly, I have updated my website design again today :) (the reason I am developing this very slowly is because I have a lot of assignments to do for university which are currently more important).

I have taken everybody's opinions into account and you all made me realise I'd gone overboard with effects on the images and with the colours I used :D so I thank you greatly for that.

With this new design, I made all the effects on every image much more subtle, edited the border so it fits and looks better and also changed the whole colour scheme. I wanted a light skin and opted for more neutral colours (originally, the brown was orange, but it ended up looking too orange lol).

Please let me know what you think, your opinions were valued a lot last time and it definitely made me learn. I liked how honest everybody was. I imagine there are things I may still have to tweak on it (I just hope the brown isn't too 'disgusting' :p), but I think we can all agree that compared to the old design, it is improving :D

I decided to just put the new design on the one page for the time being as I reckon there may still need to be tweaks (maybe even a new colour scheme/layout? If this one still doesn't look good) :)

Here is the page with the new design: http://homepages.shu.ac.uk/~cjricha2/index.php

Here is the old design to compare it to (the old design is also on any other link you click): http://homepages.shu.ac.uk/~cjricha2/contact.php

[tuckerm]

I really think you should go for some grays or whites...i'm not liking the tan either, also, the footer links are messed up in Opera.

[Calum Veteran]

I really think you should go for some grays or whites...i'm not liking the tan either, also, the footer links are messed up in Opera.

Thanks :) I know Opera is the one browser I need to get it working properly in and it's just those footer links :/ lol. I'm sure I will figure it out when it comes to me doing my final design though :)

I was originally going to go for a white and light blue design but for some reason I got carried away and blasted out this :p There's a lot I like about this tan/peach/brown/whatever the hell colour it is lol, so I thought I'd see what everyone thinks.

If everyone else finds it disgusting, I may go for the white and light blue design I was thinking of. It's just I'm bored of blue now... so many websites utilise it, it seems to be the most popular colour...

[Kudos Veteran]

You need to use much more subtle gradients, pick one colour and pick a slightly different hue of it. Red and blue was too harsh, so is caramel and white. Oddly, even with the harsh gradient, everything seems to blend together into a fairly bland look.